/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

:root {
	--ds-red: #D0021B;
	--ds-red-dark: #A80016;
	--ds-black: #111111;
	--ds-white: #FFFFFF;
	--ds-grey-light: #F5F5F5;
	--ds-grey-mid: #888888;
	--ds-premium-gold: #C9A84C;
	--ds-font-size-base: 16px;
	--ds-font-size-sm: 14px;
	--ds-font-size-xs: 12px;
	--ds-line-height: 1.6;
	--ds-card-radius: 4px;
	--ds-max-width: 1280px;
	--ds-gap: 24px;
	--ds-font-body: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
	--ds-font-headings: 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--ds-font-editor: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
	color: var(--ds-black);
	font-size: var(--ds-font-size-base);
	line-height: var(--ds-line-height);
}

a {
	color: var(--ds-red);
}

img {
	height: auto;
	max-width: 100%;
}

.ds-forum-privacy { margin: 24px 0; padding: 28px; border: 1px solid var(--ds-grey-mid); border-left: 4px solid var(--ds-red); background: var(--ds-grey-light); }
.ds-forum-privacy__form { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 20px; }
.ds-forum-privacy__form label { flex: 1 1 360px; font-weight: 700; }
.ds-forum-privacy__form .button { background: var(--ds-red); border-color: var(--ds-red); color: var(--ds-white); }
.ds-forum-privacy__notice, .ds-forum-privacy-status { padding: 12px 16px; border-left: 3px solid var(--ds-premium-gold); background: var(--ds-white); }
.ds-forum-privacy__notice--error { border-left-color: var(--ds-red); }

.mepr-guest-layout .mepr-checkout-container .form-wrapper input[type="submit"],
.mepr-guest-layout .mepr-checkout-container .invoice-wrapper.thankyou .mepr-button,
.mepr-guest-layout .mepr-checkout-container .mepr-form .mepr-submit,
.mepr-guest-layout .mepr_rl-form-wrapper .mepr-submit,
.mepr-pro-template .mepr-checkout-container .form-wrapper input[type="submit"],
.mepr-pro-template .mepr-checkout-container .invoice-wrapper.thankyou .mepr-button {
	background: #D0021B;
	border: 1px solid #D0021B;
	color: #FFFFFF;
}

.mepr-guest-layout .mepr-checkout-container .form-wrapper input[type="submit"]:hover,
.mepr-guest-layout .mepr-checkout-container .form-wrapper input[type="submit"]:focus,
.mepr-guest-layout .mepr-checkout-container .invoice-wrapper.thankyou .mepr-button:hover,
.mepr-guest-layout .mepr-checkout-container .invoice-wrapper.thankyou .mepr-button:focus,
.mepr-pro-template .mepr-checkout-container .form-wrapper input[type="submit"]:hover,
.mepr-pro-template .mepr-checkout-container .form-wrapper input[type="submit"]:focus,
.mepr-pro-template .mepr-checkout-container .invoice-wrapper.thankyou .mepr-button:hover,
.mepr-pro-template .mepr-checkout-container .invoice-wrapper.thankyou .mepr-button:focus {
	background: #A80016;
	border-color: #A80016;
}

.mepr-guest-layout .mepr-checkout-container .invoice-wrapper svg,
.mepr-pro-template .mepr-checkout-container .invoice-wrapper svg,
.mepr-guest-layout .mepr-checkout-container .mepr-coupon-code,
.mepr-pro-template .mepr-checkout-container .mepr-coupon-code {
	color: #D0021B;
	border-color: #D0021B;
}

/* ==========================================================================
   Forum Circle — design system, mobile-first. Scoped presentation layer over
   native MemberPress Circles markup (posting, reactions, comments, sorting,
   search, access control all untouched). `.ds-forum-page` is a real wrapper
   class placed around the_content() in page-forum.php so these selectors
   actually reach the plugin's own rendered elements.
   ========================================================================== */

.ds-forum-template {
	--ds-forum-page-bg: var(--ds-grey-light);
	--ds-forum-surface: var(--ds-white);
	--ds-forum-text: var(--ds-black);
	--ds-forum-muted: #626262;
	--ds-forum-border: color-mix(in srgb, var(--ds-forum-text) 16%, transparent);
	--ds-forum-soft: color-mix(in srgb, var(--ds-red) 9%, var(--ds-forum-surface));
	--ds-forum-accent-text: var(--ds-red);
	--ds-forum-accent-fill: var(--ds-red);
	--ds-forum-focus: var(--ds-red);
	--ds-forum-card-border: color-mix(in srgb, var(--ds-forum-text) 50%, var(--ds-forum-surface));
	--ds-forum-radius-sm: 4px;
	--ds-forum-radius-pill: 999px;
	--ds-forum-radius-card: 8px;
	background: #f8f9fa;
	padding: clamp(20px, 3vw, 40px) 0 clamp(40px, 6vw, 72px);
}

html[data-ds-theme-mode="runtime"][data-theme="dark"] .ds-forum-template {
	--ds-forum-page-bg: #111111;
	--ds-forum-surface: #1d1d1d;
	--ds-forum-text: #f5f5f5;
	--ds-forum-muted: color-mix(in srgb, var(--ds-forum-text) 68%, transparent);
	--ds-forum-border: color-mix(in srgb, var(--ds-forum-text) 22%, transparent);
	--ds-forum-soft: color-mix(in srgb, var(--ds-red) 22%, var(--ds-forum-surface));
	--ds-forum-card-border: color-mix(in srgb, var(--ds-forum-text) 40%, var(--ds-forum-surface));
	--ds-red: #d40822;
	--ds-forum-accent-fill: #d40822;
	--ds-forum-focus: #ff6b7a;
	/* #D0021B on #1d1d1d is 2.98:1 — fails AA for text this size; this tint holds 6.13:1 */
	--ds-forum-accent-text: #ff6b7a;
	background: #111111;
}

/* The plugin's native Feed/Members/Moderation nav icons are plain SVG
   files, and on hover/active it swaps to a *second*, hardcoded-white SVG
   file (front.css) — neither is theme- or state-aware, so a plain dark-
   mode invert() breaks the moment you hover (inverts the already-white
   hover icon back to black). Converting them to the same currentColor
   mask technique as the bell/Connections icons instead makes color
   follow the link's own `color` automatically — dark text by default,
   red on hover (existing hover rule), white when active (existing
   .active rule) — correctly in both light and dark mode, no separate
   dark-mode rule needed at all. */
body.mpcirc-circle-page .ds-forum-page .mpcirc-page-navigation-icon-feed,
body.mpcirc-circle-page .ds-forum-page .mpcirc-page-navigation-icon-members,
body.mpcirc-circle-page .ds-forum-page .mpcirc-page-navigation-icon-moderation {
	background-image: none !important;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-page-navigation-icon-feed {
	-webkit-mask-image: url('/wp-content/plugins/memberpress-circles/public/images/feed-icon.svg');
	mask-image: url('/wp-content/plugins/memberpress-circles/public/images/feed-icon.svg');
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-page-navigation-icon-members {
	-webkit-mask-image: url('/wp-content/plugins/memberpress-circles/public/images/members-icon.svg');
	mask-image: url('/wp-content/plugins/memberpress-circles/public/images/members-icon.svg');
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-page-navigation-icon-moderation {
	-webkit-mask-image: url('/wp-content/plugins/memberpress-circles/public/images/moderation-icon.svg');
	mask-image: url('/wp-content/plugins/memberpress-circles/public/images/moderation-icon.svg');
}

.ds-forum-template__container {
	margin: 0 auto;
	max-width: var(--ds-max-width);
	padding: 0 var(--ds-gap);
}

.ds-forum-page {
	background: var(--ds-forum-page-bg);
	color: var(--ds-forum-text);
}

/* Main circle title. This is real, hand-authored content already baked
   into each topic Page's own post_content (`<header class="ds-forum-masthead">`,
   found by reading the actual page content directly) — NOT the plugin's
   own .mpcirc-main-hero, which is explicitly disabled on every topic page
   via the embedded shortcode's `show_hero="no"` attribute and therefore
   never renders. A previous round mistakenly targeted .mpcirc-main-hero,
   which doesn't exist in the DOM here, hence no visible change. */
.ds-forum-masthead {
	border-left: 4px solid var(--ds-red);
	margin: 0 0 20px;
	padding: 2px 0 2px 20px;
}
.ds-forum-masthead__eyebrow {
	color: var(--ds-red);
	font: 700 12px/1.2 var(--ds-font-headings);
	letter-spacing: .12em;
	margin: 0 0 6px;
	text-transform: uppercase;
}
.ds-forum-masthead h1 {
	color: var(--ds-forum-text);
	font-family: var(--ds-font-headings);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 10px;
}
.ds-forum-masthead__intro {
	color: var(--ds-forum-muted);
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
	max-width: 640px;
}

.ds-forum-template :is(button, input, a):focus-visible {
	outline: 3px solid var(--ds-forum-focus);
	outline-offset: 2px;
}

/* ---- Always-visible topic icon grid (mobile) -------------------------------
   Below 768px the sitewide Blocksy header renders normally, same as any
   other page — the earlier custom mobile TopAppBar
   (template-parts/forum-mobile-topbar.php) was removed per explicit
   request. The topic grid below is unrelated to that and stays. */

.ds-forum-topic-grid { display: none; }

/* Cog settings menu is mobile-only; hidden by default here (this rule
   MUST stay before the max-width:767px override below — CSS cascade
   ties resolve by source order, and the override needs to win at
   mobile widths, not this default). Desktop keeps the native
   Feed/Members/Moderation/Connections/bell nav row untouched. */
.ds-forum-profile-card__settings-toggle,
.ds-forum-settings-menu__panel {
	display: none;
}

@media (max-width: 767px) {
	.ds-forum-topic-grid {
		display: grid;
		gap: 8px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin: 16px 0;
	}
	.ds-forum-topic-grid__item {
		align-items: center;
		background: var(--ds-forum-surface);
		border: 1px solid var(--ds-forum-border);
		border-radius: var(--ds-forum-radius-sm);
		color: var(--ds-forum-text);
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: 10px 4px;
		text-decoration: none;
	}
	.ds-forum-topic-grid__item.is-active {
		background: var(--ds-red);
		border-color: var(--ds-red);
		color: var(--ds-white);
	}
	.ds-forum-topic-grid__icon {
		background-color: currentColor;
		display: block;
		height: 22px;
		width: 22px;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
	}
	.ds-forum-topic-grid__label {
		font: 700 13px/1.25 var(--ds-font-headings);
		letter-spacing: .01em;
		text-align: center;
	}

	/* The desktop vertical topic list (template-parts/forum-topic-nav.php)
	   duplicates the icon grid above on mobile — the grid replaces it here,
	   the list stays for >=768px. */
	.ds-forum-layout-grid__topics .ds-forum-topic-nav { display: none; }

	/* Cog settings menu (profile card) — Members/Moderation/Connections/
	   Notification-preferences flyout, replacing the native nav row
	   hidden further down (final reorder block). Brand-new classes, so
	   no cascade-order risk placing them here. */
	.ds-forum-profile-card__settings-toggle {
		align-items: center;
		background: var(--ds-forum-surface);
		border: 1px solid var(--ds-forum-border);
		border-radius: 50%;
		display: flex;
		height: 34px;
		justify-content: center;
		padding: 0;
		position: absolute;
		right: 12px;
		top: 12px;
		width: 34px;
	}
	.ds-forum-profile-card__settings-toggle[aria-expanded="true"] {
		background: var(--ds-red);
		border-color: var(--ds-red);
	}
	.ds-forum-profile-card__settings-icon {
		background-color: var(--ds-forum-text);
		display: block;
		height: 18px;
		width: 18px;
		/* Reuses MemberPress Circles' own settings/cog icon
		   (public/images/settings-icon.svg) — the plugin's real icon for
		   the native Settings tab we relabeled "Notification preferences"
		   and reskinned as a bell elsewhere on this page — instead of a
		   hand-drawn shape, kept on the mask technique (not
		   background-image) so it still turns white via currentColor when
		   this button is active (aria-expanded="true"). */
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M19.9446 7.33454C20.0772 7.69144 19.9653 8.08937 19.6793 8.34372L17.8848 9.96005C17.9304 10.3005 17.9552 10.6492 17.9552 11.0021C17.9552 11.3549 17.9304 11.7036 17.8848 12.0441L19.6793 13.6604C19.9653 13.9147 20.0772 14.3127 19.9446 14.6696C19.7622 15.1577 19.5425 15.6254 19.2897 16.0767L19.0949 16.409C18.8214 16.8602 18.5147 17.2869 18.179 17.6889C17.9345 17.9843 17.5284 18.0827 17.1636 17.9679L14.8552 17.2417C14.2998 17.6643 13.6865 18.0171 13.0317 18.2837L12.5136 20.6262C12.4307 20.9995 12.1406 21.2949 11.7593 21.3564C11.1874 21.4508 10.5989 21.5 9.99793 21.5C9.39699 21.5 8.80848 21.4508 8.23654 21.3564C7.85526 21.2949 7.56515 20.9995 7.48226 20.6262L6.96421 18.2837C6.30939 18.0171 5.69601 17.6643 5.14066 17.2417L2.83635 17.972C2.47164 18.0868 2.06549 17.9843 1.82097 17.693C1.48527 17.291 1.17858 16.8643 0.90505 16.4131L0.710262 16.0808C0.457452 15.6295 0.237797 15.1618 0.0554424 14.6737C-0.0771793 14.3168 0.0347202 13.9188 0.320686 13.6645L2.11522 12.0482C2.06963 11.7036 2.04477 11.3549 2.04477 11.0021C2.04477 10.6492 2.06963 10.3005 2.11522 9.96005L0.320686 8.34372C0.0347202 8.08937 -0.0771793 7.69144 0.0554424 7.33454C0.237797 6.84636 0.457452 6.37869 0.710262 5.92743L0.90505 5.59514C1.17858 5.14388 1.48527 4.71723 1.82097 4.3152C2.06549 4.01983 2.47164 3.92137 2.83635 4.03624L5.1448 4.76236C5.70015 4.33981 6.31353 3.98701 6.96835 3.72036L7.4864 1.37791C7.56929 1.00459 7.8594 0.709221 8.24069 0.647685C8.81262 0.549228 9.40113 0.5 10.0021 0.5C10.603 0.5 11.1915 0.549228 11.7635 0.643583C12.1447 0.705118 12.4349 1.00049 12.5177 1.3738L13.0358 3.71625C13.6906 3.98291 14.304 4.33571 14.8593 4.75825L17.1678 4.03214C17.5325 3.91727 17.9387 4.01983 18.1832 4.3111C18.5189 4.71313 18.8256 5.13977 19.0991 5.59103L19.2939 5.92333C19.5467 6.37458 19.7663 6.84225 19.9487 7.33044L19.9446 7.33454ZM10.0021 14.2839C10.8814 14.2839 11.7247 13.9382 12.3465 13.3227C12.9683 12.7072 13.3176 11.8725 13.3176 11.0021C13.3176 10.1316 12.9683 9.29688 12.3465 8.6814C11.7247 8.06593 10.8814 7.72016 10.0021 7.72016C9.12274 7.72016 8.27941 8.06593 7.65763 8.6814C7.03584 9.29688 6.68653 10.1316 6.68653 11.0021C6.68653 11.8725 7.03584 12.7072 7.65763 13.3227C8.27941 13.9382 9.12274 14.2839 10.0021 14.2839Z' fill='black'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M19.9446 7.33454C20.0772 7.69144 19.9653 8.08937 19.6793 8.34372L17.8848 9.96005C17.9304 10.3005 17.9552 10.6492 17.9552 11.0021C17.9552 11.3549 17.9304 11.7036 17.8848 12.0441L19.6793 13.6604C19.9653 13.9147 20.0772 14.3127 19.9446 14.6696C19.7622 15.1577 19.5425 15.6254 19.2897 16.0767L19.0949 16.409C18.8214 16.8602 18.5147 17.2869 18.179 17.6889C17.9345 17.9843 17.5284 18.0827 17.1636 17.9679L14.8552 17.2417C14.2998 17.6643 13.6865 18.0171 13.0317 18.2837L12.5136 20.6262C12.4307 20.9995 12.1406 21.2949 11.7593 21.3564C11.1874 21.4508 10.5989 21.5 9.99793 21.5C9.39699 21.5 8.80848 21.4508 8.23654 21.3564C7.85526 21.2949 7.56515 20.9995 7.48226 20.6262L6.96421 18.2837C6.30939 18.0171 5.69601 17.6643 5.14066 17.2417L2.83635 17.972C2.47164 18.0868 2.06549 17.9843 1.82097 17.693C1.48527 17.291 1.17858 16.8643 0.90505 16.4131L0.710262 16.0808C0.457452 15.6295 0.237797 15.1618 0.0554424 14.6737C-0.0771793 14.3168 0.0347202 13.9188 0.320686 13.6645L2.11522 12.0482C2.06963 11.7036 2.04477 11.3549 2.04477 11.0021C2.04477 10.6492 2.06963 10.3005 2.11522 9.96005L0.320686 8.34372C0.0347202 8.08937 -0.0771793 7.69144 0.0554424 7.33454C0.237797 6.84636 0.457452 6.37869 0.710262 5.92743L0.90505 5.59514C1.17858 5.14388 1.48527 4.71723 1.82097 4.3152C2.06549 4.01983 2.47164 3.92137 2.83635 4.03624L5.1448 4.76236C5.70015 4.33981 6.31353 3.98701 6.96835 3.72036L7.4864 1.37791C7.56929 1.00459 7.8594 0.709221 8.24069 0.647685C8.81262 0.549228 9.40113 0.5 10.0021 0.5C10.603 0.5 11.1915 0.549228 11.7635 0.643583C12.1447 0.705118 12.4349 1.00049 12.5177 1.3738L13.0358 3.71625C13.6906 3.98291 14.304 4.33571 14.8593 4.75825L17.1678 4.03214C17.5325 3.91727 17.9387 4.01983 18.1832 4.3111C18.5189 4.71313 18.8256 5.13977 19.0991 5.59103L19.2939 5.92333C19.5467 6.37458 19.7663 6.84225 19.9487 7.33044L19.9446 7.33454ZM10.0021 14.2839C10.8814 14.2839 11.7247 13.9382 12.3465 13.3227C12.9683 12.7072 13.3176 11.8725 13.3176 11.0021C13.3176 10.1316 12.9683 9.29688 12.3465 8.6814C11.7247 8.06593 10.8814 7.72016 10.0021 7.72016C9.12274 7.72016 8.27941 8.06593 7.65763 8.6814C7.03584 9.29688 6.68653 10.1316 6.68653 11.0021C6.68653 11.8725 7.03584 12.7072 7.65763 13.3227C8.27941 13.9382 9.12274 14.2839 10.0021 14.2839Z' fill='black'/%3E%3C/svg%3E");
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
	}
	.ds-forum-profile-card__settings-toggle[aria-expanded="true"] .ds-forum-profile-card__settings-icon {
		background-color: var(--ds-white);
	}

	.ds-forum-settings-menu__panel {
		background: var(--ds-forum-surface);
		border: 1px solid var(--ds-forum-border);
		border-radius: var(--ds-forum-radius-card);
		box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
		display: none;
		position: absolute;
		right: 12px;
		top: 52px;
		width: 220px;
		z-index: 20;
	}
	.ds-forum-settings-menu__panel.is-open { display: block; }
	.ds-forum-settings-menu__list { list-style: none; margin: 0; padding: 6px; }
	.ds-forum-settings-menu__link {
		align-items: center;
		border-radius: var(--ds-forum-radius-sm);
		color: var(--ds-forum-text);
		display: flex;
		font: 700 13px/1.2 var(--ds-font-headings);
		gap: 10px;
		min-height: 40px;
		padding: 0 10px;
		text-decoration: none;
	}
	.ds-forum-settings-menu__link:hover,
	.ds-forum-settings-menu__link:focus-visible {
		background: var(--ds-forum-soft);
		color: var(--ds-forum-accent-text);
	}
	.ds-forum-settings-menu__link.is-active {
		background: var(--ds-red);
		color: var(--ds-white);
	}
	.ds-forum-settings-menu__icon {
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		display: block;
		flex: 0 0 auto;
		height: 18px;
		width: 18px;
	}
	/* Members/Moderation/Connections reuse the plugin's own shipped SVGs
	   (same files the native nav row already used) via background-image,
	   the same technique the plugin itself uses for them — preserves
	   their native styling rather than flattening it through a mask. */
	.ds-forum-settings-menu__icon[data-settings-icon="feed"] {
		background-image: url("/wp-content/plugins/memberpress-circles/public/images/feed-icon.svg");
	}
	.ds-forum-settings-menu__icon[data-settings-icon="members"] {
		background-image: url("/wp-content/plugins/memberpress-circles/public/images/members-icon.svg");
	}
	.ds-forum-settings-menu__icon[data-settings-icon="moderation"] {
		background-image: url("/wp-content/plugins/memberpress-circles/public/images/moderation-icon.svg");
	}
	.ds-forum-settings-menu__icon[data-settings-icon="connections"] {
		background-image: url("/wp-content/plugins/memberpress-circles/public/images/link-icon.svg");
	}
	/* On the active (red) pill, switch feed/members/moderation/connections
	   from their native background-image to a currentColor mask of the
	   same file, so the icon turns white with the text instead of staying
	   its native dark fill against the red background. */
	.ds-forum-settings-menu__link.is-active .ds-forum-settings-menu__icon[data-settings-icon="feed"],
	.ds-forum-settings-menu__link.is-active .ds-forum-settings-menu__icon[data-settings-icon="members"],
	.ds-forum-settings-menu__link.is-active .ds-forum-settings-menu__icon[data-settings-icon="moderation"],
	.ds-forum-settings-menu__link.is-active .ds-forum-settings-menu__icon[data-settings-icon="connections"] {
		background-color: currentColor;
		background-image: none;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
	}
	.ds-forum-settings-menu__link.is-active .ds-forum-settings-menu__icon[data-settings-icon="feed"] {
		-webkit-mask-image: url("/wp-content/plugins/memberpress-circles/public/images/feed-icon.svg");
		mask-image: url("/wp-content/plugins/memberpress-circles/public/images/feed-icon.svg");
	}
	.ds-forum-settings-menu__link.is-active .ds-forum-settings-menu__icon[data-settings-icon="members"] {
		-webkit-mask-image: url("/wp-content/plugins/memberpress-circles/public/images/members-icon.svg");
		mask-image: url("/wp-content/plugins/memberpress-circles/public/images/members-icon.svg");
	}
	.ds-forum-settings-menu__link.is-active .ds-forum-settings-menu__icon[data-settings-icon="moderation"] {
		-webkit-mask-image: url("/wp-content/plugins/memberpress-circles/public/images/moderation-icon.svg");
		mask-image: url("/wp-content/plugins/memberpress-circles/public/images/moderation-icon.svg");
	}
	.ds-forum-settings-menu__link.is-active .ds-forum-settings-menu__icon[data-settings-icon="connections"] {
		-webkit-mask-image: url("/wp-content/plugins/memberpress-circles/public/images/link-icon.svg");
		mask-image: url("/wp-content/plugins/memberpress-circles/public/images/link-icon.svg");
	}
	/* Bell is the theme's own authored mask asset (same data URI used for
	   the site header bell and the Notification-preferences tab reskin),
	   so it stays on the mask technique to pick up currentColor. */
	.ds-forum-settings-menu__icon[data-settings-icon="bell"] {
		background-color: currentColor;
		background-image: none;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 22h4' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 22h4' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'/%3E%3C/svg%3E");
	}
	.ds-forum-topic-grid__icon[data-topic-icon="chat"] {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h11a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9l-4 3v-3H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h11a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9l-4 3v-3H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
	}
	.ds-forum-topic-grid__icon[data-topic-icon="megaphone"] {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10v4a1 1 0 0 0 1 1h2l1 4h2l-1-4h1l9 4V6l-9 4H4a1 1 0 0 0-1 1Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M19 9a4 4 0 0 1 0 6' fill='none' stroke='black' stroke-linecap='round' stroke-width='1.6'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10v4a1 1 0 0 0 1 1h2l1 4h2l-1-4h1l9 4V6l-9 4H4a1 1 0 0 0-1 1Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M19 9a4 4 0 0 1 0 6' fill='none' stroke='black' stroke-linecap='round' stroke-width='1.6'/%3E%3C/svg%3E");
	}
	.ds-forum-topic-grid__icon[data-topic-icon="thermostat"] {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a2 2 0 0 0-2 2v9.17a4 4 0 1 0 4 0V5a2 2 0 0 0-2-2Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='18' r='2' fill='black'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a2 2 0 0 0-2 2v9.17a4 4 0 1 0 4 0V5a2 2 0 0 0-2-2Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='18' r='2' fill='black'/%3E%3C/svg%3E");
	}
	.ds-forum-topic-grid__icon[data-topic-icon="medical"] {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a6 6 0 0 0-6 6v2H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-1v-2a6 6 0 0 0-6-6Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M12 12v4M10 14h4' fill='none' stroke='black' stroke-linecap='round' stroke-width='1.6'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a6 6 0 0 0-6 6v2H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-1v-2a6 6 0 0 0-6-6Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M12 12v4M10 14h4' fill='none' stroke='black' stroke-linecap='round' stroke-width='1.6'/%3E%3C/svg%3E");
	}
	.ds-forum-topic-grid__icon[data-topic-icon="gavel"] {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5l5 5M9 10l-6 6M9 10l5 5M13 6l5 5' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7'/%3E%3Cpath d='M4 20h7' fill='none' stroke='black' stroke-linecap='round' stroke-width='1.7'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5l5 5M9 10l-6 6M9 10l5 5M13 6l5 5' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7'/%3E%3Cpath d='M4 20h7' fill='none' stroke='black' stroke-linecap='round' stroke-width='1.7'/%3E%3C/svg%3E");
	}
	.ds-forum-topic-grid__icon[data-topic-icon="shield"] {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l7 3v5c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6l7-3Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 12l2 2 4-4' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l7 3v5c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6l7-3Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 12l2 2 4-4' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3E%3C/svg%3E");
	}
}

/* ---- Three-column shell (mobile-first: 1 col → 2 col → 3 col) ------------- */

.ds-forum-layout-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: minmax(0, 1fr);
}
.ds-forum-layout-grid__topics,
.ds-forum-layout-grid__widgets,
.ds-forum-layout-grid__feed,
.ds-forum-layout-grid__topics-sticky,
.ds-forum-layout-grid__widgets-sticky { min-width: 0; }
.ds-forum-layout-grid__topics-sticky,
.ds-forum-layout-grid__widgets-sticky { display: grid; gap: 16px; }

@media (min-width: 768px) {
	.ds-forum-layout-grid { align-items: start; gap: 24px; grid-template-columns: minmax(204px, 224px) minmax(0, 1fr); }
	.ds-forum-layout-grid__topics-sticky { position: sticky; top: 100px; }
	.ds-forum-layout-grid__widgets { display: none; }
	/* Desktop-only: hide the Connections card per explicit request. Mobile
	   is untouched — this rule only exists inside min-width:768px. */
	.ds-forum-widget--connections { display: none; }
}

@media (min-width: 1024px) {
	.ds-forum-layout-grid { grid-template-columns: 260px minmax(0, 1fr) 300px; }
	.ds-forum-layout-grid__widgets { display: block; }
	.ds-forum-layout-grid__widgets-sticky {
		max-height: calc(100dvh - 124px);
		overflow-y: auto;
		position: sticky;
		scrollbar-gutter: stable;
		top: 100px;
	}
}

/* ---- Topic switcher (real per-Circle page links, styled as a tab list) ---- */

.ds-forum-layout-grid__topics .ds-forum-topic-nav { margin: 0; max-width: none; }
.ds-forum-layout-grid__topics .ds-forum-topic-nav__list { display: flex; flex-direction: column; gap: 7px; list-style: none; margin: 0; padding: 0; }
.ds-forum-layout-grid__topics .ds-forum-topic-nav__link {
	/* align-items was missing — with no cross-axis alignment set, a single
	   18px text line inside a 46px-tall flex box defaults to sitting near
	   the top rather than centered, which is what actually read as the
	   accent bar "floating above" the content: the bar/background box
	   itself was always correctly full-height (confirmed via computed
	   styles), it was the text sitting high inside it that created the
	   mismatch. */
	align-items: center;
	background: transparent;
	border: 0;
	/* Radius only on the right corners: a rounded corner on the same edge as
	   the accent bar produces a 1-2px seam where a square edge peeks past
	   the curve. */
	border-radius: 0 var(--ds-forum-radius-sm) var(--ds-forum-radius-sm) 0;
	color: var(--ds-forum-text);
	display: flex;
	font: 700 15px/1.2 var(--ds-font-headings);
	justify-content: flex-start;
	margin: 0;
	min-height: 46px;
	padding-inline: 18px;
	text-decoration: none;
}
/* The accent bar and the pink fill are one single background-image
   (a hard-stopped linear-gradient), not two separate layers/boxes —
   there is no longer a second paintable thing that could visually
   separate from the fill, because there's only one paint operation.
   Three earlier attempts (recolored border-left, an absolutely-
   positioned ::before, then an inset box-shadow) all still used two
   distinct paints that could end up misaligned. */
.ds-forum-layout-grid__topics .ds-forum-topic-nav__link.is-active {
	background-image: linear-gradient(to right, var(--ds-forum-accent-fill) 0 4px, var(--ds-forum-soft) 4px 100%);
	color: var(--ds-forum-accent-text);
}

/* ---- Profile card ----------------------------------------------------------- */

.ds-forum-profile-card {
	align-items: center;
	background: var(--ds-forum-surface);
	border: 1px solid var(--ds-forum-card-border);
	border-radius: var(--ds-forum-radius-card);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 16px;
	position: relative;
}
.ds-forum-profile-card__row { align-items: center; display: flex; gap: 12px; }
.ds-forum-profile-card__avatar { border: 2px solid var(--ds-forum-accent-fill); border-radius: 50%; flex: 0 0 56px; height: 56px; object-fit: cover; width: 56px; }
.ds-forum-profile-card__details { min-width: 0; }
.ds-forum-profile-card__name { color: var(--ds-forum-text); display: block; font: 700 15px/1.25 var(--ds-font-headings); overflow-wrap: anywhere; }
.ds-forum-profile-card__membership { color: var(--ds-forum-muted); display: block; font-size: 13px; margin-top: 3px; }
.ds-forum-profile-card__links { display: flex; gap: 14px; font-size: 13px; font-weight: 700; margin-top: 4px; }

/* Connections card — moved from a small accordion inside the profile card
   to its own dedicated, clearly-titled widget card, same treatment as
   Community Rules, so clicking the "Connections" nav tab lands somewhere
   that unmistakably reads as a list, not just a scroll target. */
.ds-forum-widget--connections { padding: 0; }
.ds-forum-widget__connections-summary {
	align-items: center;
	color: var(--ds-forum-text);
	cursor: pointer;
	display: flex;
	font: 700 13px/1.2 var(--ds-font-headings);
	justify-content: space-between;
	letter-spacing: .08em;
	list-style: none;
	padding: 18px 22px;
	text-transform: uppercase;
}
.ds-forum-widget__connections-summary::-webkit-details-marker { display: none; }
.ds-forum-widget__connections-summary::after { content: '+'; font-size: 20px; font-weight: 400; }
.ds-forum-widget--connections[open] .ds-forum-widget__connections-summary { border-bottom: 1px solid var(--ds-forum-border); }
.ds-forum-widget--connections[open] .ds-forum-widget__connections-summary::after { content: '\2212'; }
.ds-forum-widget__connections-content { padding: 16px 22px 22px; }

.ds-forum-connections-list { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ds-forum-profile-card__connections-empty { color: var(--ds-forum-muted); font-size: 13px; margin: 0; }
.ds-forum-connections-list__item { align-items: center; display: flex; gap: 10px; }
.ds-forum-connections-list__details { flex: 1 1 auto; min-width: 0; }
.ds-forum-connections-list__email-toggle { color: var(--ds-forum-muted); display: block; font-size: 12px; margin-top: 2px; }
.ds-forum-connections-list__actions { align-items: center; display: flex; gap: 8px; }
.ds-forum-connections-list__remove { background: transparent; border: 0; color: var(--ds-forum-muted); font-size: 18px; line-height: 1; }
.ds-forum-connections-list__remove:hover { color: var(--ds-red); }
.ds-forum-connections-list__block {
	background: transparent;
	border: 1px solid var(--ds-forum-border);
	border-radius: var(--ds-forum-radius-sm);
	color: var(--ds-forum-muted);
	font: 700 11px/1.2 var(--ds-font-headings);
	padding: 4px 8px;
	text-transform: uppercase;
	white-space: nowrap;
}
.ds-forum-connections-list__block:hover { border-color: var(--ds-red); color: var(--ds-red); }

.ds-forum-blocked-list { border-top: 1px solid var(--ds-forum-border); margin-top: 16px; padding-top: 12px; }
.ds-forum-blocked-list__summary { color: var(--ds-forum-muted); cursor: pointer; font: 700 12px/1.2 var(--ds-font-headings); letter-spacing: .06em; list-style: none; text-transform: uppercase; }
.ds-forum-blocked-list__summary::-webkit-details-marker { display: none; }
.ds-forum-blocked-list .ds-forum-connections-list { margin-top: 12px; }

/* Reusable Connect/Accept/Decline/Block/Unblock button row — appears next
   to post and comment author names in the feed. Was previously entirely
   unstyled. */
.ds-forum-connect { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 10px; }
.ds-forum-connect-btn,
.ds-forum-connect-decline,
.ds-forum-connect-block,
.ds-forum-connect-unblock {
	background: var(--ds-forum-surface);
	border: 1px solid var(--ds-forum-border);
	border-radius: var(--ds-forum-radius-pill);
	color: var(--ds-forum-text);
	cursor: pointer;
	font: 700 12px/1.2 var(--ds-font-headings);
	min-height: 30px;
	padding: 0 12px;
}
.ds-forum-connect-btn:hover:not(:disabled) {
	background: var(--ds-forum-soft);
	border-color: color-mix(in srgb, var(--ds-red) 30%, transparent);
	color: var(--ds-forum-accent-text);
}
.ds-forum-connect-btn[data-state="connected"] { background: var(--ds-forum-soft); border-color: var(--ds-forum-accent-fill); color: var(--ds-forum-accent-text); }
.ds-forum-connect-btn[data-state="blocked"] { background: transparent; color: var(--ds-forum-muted); cursor: default; }
.ds-forum-connect-decline,
.ds-forum-connect-block { color: var(--ds-forum-muted); }
.ds-forum-connect-decline:hover,
.ds-forum-connect-block:hover { border-color: var(--ds-red); color: var(--ds-red); }
.ds-forum-connect-unblock:hover { border-color: var(--ds-forum-accent-fill); color: var(--ds-forum-accent-text); }

/* ---- Sidebar widgets, incl. collapsible Community Rules -------------------- */

.ds-forum-widgets { display: grid; gap: 16px; }
.ds-forum-widget {
	background: var(--ds-forum-surface);
	border: 1px solid var(--ds-forum-card-border);
	border-radius: var(--ds-forum-radius-card);
	padding: 22px;
}
.ds-forum-widget__title { border-bottom: 1px solid var(--ds-forum-border); color: var(--ds-forum-text); font: 700 13px/1.2 var(--ds-font-headings); letter-spacing: .08em; margin: 0; padding-bottom: 10px; text-transform: uppercase; }
.ds-forum-widget__desc { color: var(--ds-forum-muted); font-size: 15px; line-height: 1.5; margin: 10px 0 0; }

.ds-forum-widget--rules { padding: 0; }
.ds-forum-widget__rules-summary {
	align-items: center;
	color: var(--ds-forum-text);
	cursor: pointer;
	display: flex;
	font: 700 13px/1.2 var(--ds-font-headings);
	justify-content: space-between;
	letter-spacing: .08em;
	list-style: none;
	padding: 18px 22px;
	text-transform: uppercase;
}
.ds-forum-widget__rules-summary::-webkit-details-marker { display: none; }
.ds-forum-widget__rules-summary::after { content: '+'; font-size: 20px; font-weight: 400; }
.ds-forum-widget--rules[open] .ds-forum-widget__rules-summary { border-bottom: 1px solid var(--ds-forum-border); }
.ds-forum-widget--rules[open] .ds-forum-widget__rules-summary::after { content: '\2212'; }
.ds-forum-widget--rules .ds-forum-widget__rules-content { margin: 16px 22px 0; }
.ds-forum-widget__rules-content { color: var(--ds-forum-text); font-size: 14px; line-height: 1.5; }
.ds-forum-widget__rules-content > :first-child { margin-top: 0; }
.ds-forum-widget__rules-content > :last-child { margin-bottom: 0; }
.ds-forum-widget__rules-content ul { margin: 12px 0; padding-left: 20px; }
.ds-forum-widget__rules-content li + li { margin-top: 10px; }
.ds-forum-widget__rules-content strong { color: var(--ds-forum-text); }

.ds-forum-widget__guidelines-link {
	align-items: center;
	border: 1px solid var(--ds-forum-border);
	border-radius: var(--ds-forum-radius-sm);
	color: var(--ds-forum-accent-text);
	display: flex;
	font: 700 12px/1.2 var(--ds-font-headings);
	justify-content: center;
	margin-top: 18px;
	min-height: 38px;
	padding: 0 14px;
	text-decoration: none;
}
.ds-forum-widget--rules .ds-forum-widget__guidelines-link { margin: 18px 22px 22px; }

.ds-forum-widget__actions { display: grid; gap: 8px; margin-top: 16px; }
.ds-forum-widget__link { align-items: center; color: var(--ds-forum-accent-text); display: flex; font: 700 14px/1.25 var(--ds-font-headings); gap: 8px; justify-content: space-between; text-decoration: none; }
/* Underline the text run only — the arrow sits in its own flex item with a
   gap, so an underline inherited by the whole <a> renders as two
   disconnected segments instead of one continuous line. */
.ds-forum-widget__link:hover .ds-forum-widget__link-text { text-decoration: underline; }
.ds-forum-widget__arrow { font-size: 18px; line-height: 1; }

/* ---- Native Circle sub-nav + theme-owned search/sort row ------------------- */

body.mpcirc-circle-page .ds-forum-page .mpcirc-page-navigation {
	background: var(--ds-forum-surface);
	border: 1px solid var(--ds-forum-border);
	border-radius: var(--ds-forum-radius-card);
	margin: 0 0 16px;
}
/* The plugin's own front.css forces every <li> to an equal-width flex
   slot (`.mpcirc-page-navigation ul li { flex: 1; }`), which doesn't fit
   longer labels like "Moderation"/"Connections" — that's what was
   spilling past the card edge. Let each tab size to its own content
   instead, and wrap onto a second line rather than overflow if it still
   doesn't fit. */
body.mpcirc-circle-page .ds-forum-page .mpcirc-page-navigation ul {
	flex-wrap: wrap;
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-page-navigation ul li {
	flex: 0 1 auto;
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-page-navigation ul li a,
.ds-forum-page .ds-forum-search-submit,
.ds-forum-page .ds-forum-sort-tab {
	align-items: center;
	background: var(--ds-forum-surface);
	border: 1px solid var(--ds-forum-border);
	border-radius: var(--ds-forum-radius-sm);
	color: var(--ds-forum-text);
	cursor: pointer;
	display: inline-flex;
	font: 700 13px/1.2 var(--ds-font-headings);
	gap: 6px;
	justify-content: center;
	min-height: 42px;
	padding: 0 14px;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-page-navigation ul li a:hover,
body.mpcirc-circle-page .ds-forum-page .mpcirc-page-navigation ul li a:focus-visible,
.ds-forum-page .ds-forum-search-submit:hover,
.ds-forum-page .ds-forum-search-submit:focus-visible,
.ds-forum-page .ds-forum-sort-tab:hover,
.ds-forum-page .ds-forum-sort-tab:focus-visible {
	background: var(--ds-forum-soft);
	border-color: color-mix(in srgb, var(--ds-red) 30%, transparent);
	color: var(--ds-forum-accent-text);
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-page-navigation ul li a.active,
.ds-forum-page .ds-forum-sort-tab.is-active {
	background: var(--ds-red);
	border-color: var(--ds-red);
	color: var(--ds-white);
}

/* "Settings" tab re-skinned as a bell (it's the real notification-
   preferences page already — see forum-privacy.php). Same bell glyph as
   the site's global header (inc/site-header.php `$bell_icon`), applied as
   a mask so it inherits this tab's normal/hover/active text color instead
   of a fixed fill. The label text stays in the DOM (relabelled to
   "Notification preferences" in PHP) for screen readers, just visually
   hidden rather than removed. */
body.mpcirc-circle-page .ds-forum-page .mpcirc-page-navigation ul li a:has(.mpcirc-page-navigation-icon-settings) {
	gap: 0;
	padding-inline: 12px;
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-page-navigation-icon-settings {
	background-image: none !important;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 22h4' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 22h4' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	height: 18px !important;
	width: 18px !important;
	max-height: 18px;
	max-width: 18px;
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-page-navigation ul li a:has(.mpcirc-page-navigation-icon-settings) span:not(.mpcirc-page-navigation-icon):not(.mpcirc-page-navigation-icon-settings) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* "Connections" nav tab (injected via forum-privacy.php's
   mpcirc_navigation_menu_items filter). Reuses the plugin's own shipped
   link-icon.svg (a real icon asset from public/images/, not a hand-drawn
   one) — same url()-override convention the plugin itself uses for its
   other nav icons. NOTE: the icon class here (ds-forum-nav-icon-
   connections) must exactly match the 'icon' value set in
   ds_forum_add_connections_tab() — a previous mismatch between the two
   is why no icon ever appeared. */
body.mpcirc-circle-page .ds-forum-page .mpcirc-page-navigation-icon.ds-forum-nav-icon-connections {
	background-image: url('/wp-content/plugins/memberpress-circles/public/images/link-icon.svg') !important;
}

/* Notification Preferences view (was "Settings" — see forum-privacy.php
   for the title/relabel filters). Scoped to the settings form's own
   unique wrapper class so it can't affect .mpcirc-form-section/
   .mpcirc-form-checkbox used elsewhere (post composer, Add Members, etc). */
#notifications-heading { display: none; }
.ds-forum-page .mpcirc-settings-form .mpcirc-form-section {
	background: transparent !important;
}
.ds-forum-page .mpcirc-settings-form .mpcirc-form-checkbox {
	accent-color: var(--ds-red);
}

.ds-forum-page .ds-forum-feed-controls { align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--ds-forum-border); display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; padding: 0 0 16px; }
.ds-forum-page .ds-forum-search-wrap { display: flex; flex: 0 1 280px; gap: 8px; position: relative; }
.ds-forum-page .ds-forum-search-wrap input { background: var(--ds-forum-surface); border: 1px solid var(--ds-forum-border); border-radius: var(--ds-forum-radius-pill); color: var(--ds-forum-text); min-height: 42px; min-width: 0; padding-inline: 16px; width: 100%; }
.ds-forum-page .ds-forum-sort-tabs { background: color-mix(in srgb, var(--ds-forum-text) 6%, transparent); border-radius: var(--ds-forum-radius-pill); display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; }
.ds-forum-page .ds-forum-sort-tab { min-height: 36px; padding: 0 14px; }
.ds-forum-page .ds-forum-search-submit { border-color: var(--ds-red); color: var(--ds-forum-accent-text); }
.ds-forum-page .ds-forum-search-submit:hover,
.ds-forum-page .ds-forum-search-submit:focus-visible { background: var(--ds-red); border-color: var(--ds-red); color: var(--ds-white); }

@media (max-width: 680px) {
	.ds-forum-feed-controls { align-items: stretch; }
	.ds-forum-search-wrap { flex-basis: 100%; }
	.ds-forum-sort-tabs { flex-wrap: nowrap; margin: 0 -14px; overflow-x: auto; padding: 3px 14px; }
	.ds-forum-sort-tab { flex: 0 0 auto; }
}

/* ---- Post creation form ----------------------------------------------------- */

.ds-forum-page .mpcirc-post-creation-form {
	background: var(--ds-forum-surface);
	border: 1px solid color-mix(in srgb, var(--ds-red) 12%, var(--ds-forum-border));
	border-radius: var(--ds-forum-radius-card);
	box-shadow: none;
	margin: 0 0 20px;
	padding: 22px;
}
.ds-forum-page .mpcirc-post-form { margin: 0; }
.ds-forum-page .mpcirc-post-form-row { align-items: flex-start; gap: 14px; }
.ds-forum-page .mpcirc-post-form-avatar,
body.mpcirc-circle-page .ds-forum-page #mpcirc-main-content img.mpcirc-post-form-avatar,
/* Matches (and beats, via the extra .ds-forum-page ancestor class) the
   plugin's own higher-specificity front.css rule for the same element,
   which forces height:40px but never sets flex-basis — leaving the
   theme's 48px flex-basis to disagree with its 40px height and squash the
   circular avatar into an oval. Repeating the plugin's exact selector
   chain here and setting width/height/flex-basis to the same value
   (with matching !important) keeps all three permanently in sync. */
body.mpcirc-circle-page .ds-forum-page #mpcirc-main-content .mpcirc-post-creation-form:not(.mpcirc-post-form-expanded) .mpcirc-post-form-row img.mpcirc-post-form-avatar {
	border: 2px solid var(--ds-red);
	border-radius: 50%;
	flex: 0 0 48px;
	flex-shrink: 0 !important;
	flex-basis: 48px !important;
	height: 48px !important;
	object-fit: cover;
	width: 48px !important;
}
.ds-forum-page .mpcirc-post-form-input {
	background: var(--ds-forum-surface);
	border: 0;
	border-radius: var(--ds-forum-radius-sm);
	box-shadow: inset 0 0 0 1px var(--ds-forum-border);
	color: var(--ds-forum-text);
	font: 400 17px/1.55 var(--ds-font-body);
	min-height: 108px;
	padding: 16px 18px;
	resize: vertical;
}
.ds-forum-page .mpcirc-post-form-input::placeholder { color: var(--ds-forum-muted); opacity: 1; }
.ds-forum-page .mpcirc-post-form-actions { border-top: 1px solid var(--ds-forum-border); margin: 16px 0 0 62px; padding-top: 12px; }
.ds-forum-page .mpcirc-post-form-icon-btn { border-radius: 50%; height: 40px; transition: background-color .16s ease, transform .16s ease; width: 40px; }
.ds-forum-page .mpcirc-post-form-icon-btn:hover { background: var(--ds-forum-soft); transform: translateY(-1px); }

@media (max-width: 680px) {
	.ds-forum-page .mpcirc-post-creation-form { padding: 16px; }
	.ds-forum-page .mpcirc-post-form-row { gap: 10px; }
	.ds-forum-page .mpcirc-post-form-avatar,
	body.mpcirc-circle-page .ds-forum-page #mpcirc-main-content img.mpcirc-post-form-avatar,
	body.mpcirc-circle-page .ds-forum-page #mpcirc-main-content .mpcirc-post-creation-form:not(.mpcirc-post-form-expanded) .mpcirc-post-form-row img.mpcirc-post-form-avatar {
		flex-basis: 42px !important;
		flex-shrink: 0 !important;
		height: 42px !important;
		width: 42px !important;
	}
	.ds-forum-page .mpcirc-post-form-actions { margin-left: 52px; }
}

/* ---- Post cards, comments, empty state -------------------------------------- */

.ds-forum-page .mpcirc-latest-post {
	background: var(--ds-forum-surface);
	border: 1px solid var(--ds-forum-border);
	border-radius: var(--ds-forum-radius-card);
	box-shadow: none;
	color: var(--ds-forum-text);
	margin: 0 0 22px;
	overflow: hidden;
	padding: 30px;
	transition: box-shadow .15s ease, transform .15s ease;
}
.ds-forum-page .mpcirc-latest-post:hover { border-color: color-mix(in srgb, var(--ds-red) 35%, var(--ds-forum-border)); }
.ds-forum-page .mpcirc-latest-post-header { align-items: flex-start; border-bottom: 0; gap: 18px; }
.ds-forum-page .mpcirc-latest-post-author { align-items: center; gap: 13px; }
.ds-forum-page .mpcirc-latest-post-author img,
.ds-forum-page .mpcirc-comment-avatar { border: 2px solid var(--ds-red); border-radius: 50%; object-fit: cover; }
.ds-forum-page .mpcirc-latest-post-author img { height: 52px; width: 52px; }
.ds-forum-page .mpcirc-comment-avatar { height: 40px; width: 40px; }
.ds-forum-page .mpcirc-latest-post-author-name,
.ds-forum-page .mpcirc-comment-author-name-btn { color: var(--ds-forum-text); font-family: var(--ds-font-headings); font-weight: 700; }
.ds-forum-page .mpcirc-latest-post-author-name { font-size: 17px; line-height: 1.2; }
.ds-forum-page .mpcirc-comment-author-name-btn { font-size: 15px; }
.ds-forum-page .mpcirc-latest-post-author-role { color: var(--ds-forum-muted); display: block; font-size: 13px; line-height: 1.35; margin-top: 3px; }
.ds-forum-page .mpcirc-latest-post-date,
.ds-forum-page .mpcirc-comment-date { color: var(--ds-forum-muted); }
.ds-forum-page .mpcirc-latest-post-date { font-size: 13px; white-space: nowrap; }
.ds-forum-page .mpcirc-comment-date { font-size: 12px; }
.ds-forum-page .mpcirc-latest-post-meta { align-items: center; display: flex; gap: 10px; }
.ds-forum-page .mpcirc-latest-post-content { margin: 22px 0 0; max-width: 66ch; }
.ds-forum-page .mpcirc-post-content-text,
.ds-forum-page .mpcirc-latest-post-content p,
.ds-forum-page .mpcirc-comment-text {
	color: var(--ds-forum-text);
	font: 400 17px/1.62 var(--ds-font-body);
	letter-spacing: .002em;
	margin: 0;
}
.ds-forum-page .mpcirc-comment-text { font-size: 15px; line-height: 1.55; margin-top: 8px; }
.ds-forum-page .mpcirc-read-more-toggle { color: var(--ds-forum-accent-text); font-weight: 700; margin-top: 10px; }
.ds-forum-page .mpcirc-latest-post-image { border: 0; border-radius: 12px; margin-top: 22px; overflow: hidden; }
.ds-forum-page .mpcirc-pinned-label, .ds-forum-page .mpcirc-post-labels { background: var(--ds-red); color: var(--ds-white); }

.ds-forum-page .mpcirc-latest-post-footer { border-top: 1px solid var(--ds-forum-border); display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; padding-top: 18px; }
.ds-forum-page .mpcirc-latest-post-footer-likes,
.ds-forum-page .mpcirc-latest-post-footer-comments {
	align-items: center;
	background: var(--ds-forum-soft);
	border: 1px solid transparent;
	border-radius: var(--ds-forum-radius-pill);
	display: inline-flex;
	gap: 7px;
	min-height: 42px;
	padding: 0 14px;
	transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.ds-forum-page .mpcirc-latest-post-footer-likes:hover,
.ds-forum-page .mpcirc-latest-post-footer-comments:hover {
	background: color-mix(in srgb, var(--ds-red) 16%, var(--ds-forum-surface));
	border-color: color-mix(in srgb, var(--ds-red) 22%, transparent);
	color: var(--ds-forum-text);
	transform: translateY(-1px);
}
.ds-forum-page .mpcirc-latest-post-footer-icon { height: 22px; width: 22px; }
.ds-forum-page .mpcirc-latest-post-footer-likes-count,
.ds-forum-page .mpcirc-latest-post-footer-comments-count,
.ds-forum-page .mpcirc-comment-like-count { color: var(--ds-forum-text); font-family: var(--ds-font-headings); font-size: 14px; font-weight: 700; line-height: 1; }
.ds-forum-page .mpcirc-reaction-active { color: var(--ds-forum-accent-text); }

.ds-forum-page .mpcirc-latest-post-comments,
.ds-forum-page .mpcirc-comment-reply-form-container {
	background: color-mix(in srgb, var(--ds-red) 4%, var(--ds-forum-surface));
	border: 0;
	border-left: 3px solid var(--ds-red);
	border-radius: 12px;
	margin: 22px 0 0;
	padding: 8px 18px;
}
.ds-forum-page .mpcirc-comment-reply-form-container { margin: 14px 0 0 8px; padding: 14px; }
.ds-forum-page .mpcirc-comment { border-color: var(--ds-forum-border); padding: 16px 0; }
.ds-forum-page .mpcirc-comment-author-wrapper { margin-right: 11px; }
.ds-forum-page .mpcirc-comment-header { gap: 8px; }
.ds-forum-page .mpcirc-comment-footer { align-items: center; display: flex; gap: 7px; margin-top: 12px; }
.ds-forum-page .mpcirc-comment-footer :is(.mpcirc-reaction-trigger, .mpcirc-comment-reply-btn) {
	background: var(--ds-forum-surface);
	border: 1px solid var(--ds-forum-border);
	border-radius: var(--ds-forum-radius-pill);
	min-height: 34px;
	padding: 0 11px;
}
.ds-forum-page .mpcirc-comment-footer .mpcirc-comment-reply-btn,
.ds-forum-page .mpcirc-comment-reply-btn { color: var(--ds-forum-accent-text); font-family: var(--ds-font-headings); font-size: 13px; font-weight: 700; }
.ds-forum-page .mpcirc-comment-footer .mpcirc-reaction-active { border-color: color-mix(in srgb, var(--ds-red) 45%, transparent); }

.ds-forum-page .ds-forum-empty-state {
	align-items: center;
	background: var(--ds-forum-surface);
	border: 0;
	border-radius: var(--ds-forum-radius-card);
	box-shadow: 0 8px 24px rgba(17, 17, 17, .07);
	color: var(--ds-forum-text);
	display: grid;
	gap: 8px;
	justify-items: center;
	margin: 24px 0 0;
	padding: 56px 28px;
	text-align: center;
}
.ds-forum-page .ds-forum-empty-state__mark { display: none; }
.ds-forum-page .ds-forum-empty-state h2 { color: var(--ds-forum-text); font: 700 clamp(22px, 3vw, 28px)/1.15 var(--ds-font-headings); margin: 0; }
.ds-forum-page .ds-forum-empty-state p { color: var(--ds-forum-muted); margin: 10px auto 0; max-width: 34ch; }
.ds-forum-page .ds-forum-empty-state--search { padding: 30px; }

@media (max-width: 680px) {
	.ds-forum-page .mpcirc-latest-post { padding: 21px 18px; }
	.ds-forum-page .mpcirc-latest-post-header { gap: 10px; }
	.ds-forum-page .mpcirc-latest-post-author { gap: 10px; }
	.ds-forum-page .mpcirc-latest-post-author img { height: 46px; width: 46px; }
	.ds-forum-page .mpcirc-latest-post-content { margin-top: 18px; }
	.ds-forum-page .mpcirc-post-content-text,
	.ds-forum-page .mpcirc-latest-post-content p { font-size: 16px; }
	.ds-forum-page .mpcirc-latest-post-footer { gap: 8px; margin-top: 20px; padding-top: 15px; }
	.ds-forum-page .mpcirc-latest-post-footer-likes,
	.ds-forum-page .mpcirc-latest-post-footer-comments { min-height: 40px; padding: 0 12px; }
	.ds-forum-page .mpcirc-latest-post-comments { margin-top: 18px; padding: 6px 13px; }
	.ds-forum-page .ds-forum-empty-state { padding: 42px 20px; }
	.ds-forum-page .mpcirc-latest-post-comments,
	.ds-forum-page .mpcirc-comment-reply-form-container { margin-left: 4px; padding-left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.ds-forum-page .mpcirc-latest-post,
	.ds-forum-page .mpcirc-latest-post-footer-likes,
	.ds-forum-page .mpcirc-latest-post-footer-comments,
	.ds-forum-page .mpcirc-post-form-icon-btn { transition: none; }
}

/* ==========================================================================
   Eliminate every green (#1da69a family) button/control MemberPress Circles
   ships in public/css/front.css. That stylesheet hardcodes hex values (no
   custom properties to hook) and is enqueued at priority 9999 specifically
   to load after theme styles, so cascade order alone won't win — every
   selector below repeats the plugin's own selector chain with one extra
   ancestor class (`.ds-forum-page`) to win on specificity instead, matching
   `!important` only where the plugin itself uses it.
   ========================================================================== */

/* Native Feed/Members/Rules/Notifications sub-nav active tab */
body.mpcirc-circle-page .ds-forum-page .mpcirc-page-navigation ul li a.active {
	background: var(--ds-red);
}

/* Dropdown option focus/selected state */
body.mpcirc-circle-page .ds-forum-page #mpcirc-main-content button.mpcirc-dropdown-option:focus,
body.mpcirc-circle-page .ds-forum-page #mpcirc-main-content button.mpcirc-dropdown-option[aria-selected="true"] {
	background-color: var(--ds-red);
}

/* User menu dropdown toggle open state */
body.mpcirc-circle-page .ds-forum-page .mpcirc-user-dropdown-toggle[aria-expanded="true"] {
	border-color: var(--ds-red);
}

/* "Explore all circles" button */
body.mpcirc-circle-page .ds-forum-page .mpcirc-explore-all-button {
	background-color: var(--ds-red);
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-explore-all-button:focus-visible {
	outline: 2px solid var(--ds-red);
}

/* Modal close + generic modal buttons */
body.mpcirc-circle-page .ds-forum-page .mpcirc-modal-close-x:hover::after {
	background: var(--ds-red);
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-modal-btn:hover {
	background: var(--ds-red);
	border-color: var(--ds-red);
}

/* Edit post/comment cancel + submit buttons */
body.mpcirc-circle-page .ds-forum-page .mpcirc-edit-cancel-btn:hover {
	background: var(--ds-red);
	border-color: var(--ds-red);
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-edit-submit-btn {
	background: var(--ds-red);
	border: 1px solid var(--ds-red);
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-edit-submit-btn:hover {
	background: var(--ds-red-dark);
	border-color: var(--ds-red-dark);
}

/* Comment author "view posts" / "view profile" buttons */
body.mpcirc-circle-page .ds-forum-page a.mpcirc-comment-author-profile-btn-posts:hover {
	border-color: var(--ds-red);
	color: var(--ds-forum-accent-text);
}
body.mpcirc-circle-page .ds-forum-page a.mpcirc-comment-author-profile-btn-profile {
	background: var(--ds-red);
	border-color: var(--ds-red);
}
body.mpcirc-circle-page .ds-forum-page a.mpcirc-comment-author-profile-btn-profile:hover {
	background: var(--ds-red-dark);
	border-color: var(--ds-red-dark);
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-comment-author-clickable:hover,
body.mpcirc-circle-page .ds-forum-page .mpcirc-comment-author-name-btn:hover {
	color: var(--ds-forum-accent-text);
}

/* Post / comment / reply submit buttons */
body.mpcirc-circle-page .ds-forum-page #mpcirc-main-content .mpcirc-post-form-submit-btn,
body.mpcirc-circle-page .ds-forum-page #mpcirc-main-content .mpcirc-form-comment-submit-btn,
body.mpcirc-circle-page .ds-forum-page .mpcirc-form-reply-submit-btn {
	background: var(--ds-red);
	border: 1px solid var(--ds-red);
}
body.mpcirc-circle-page .ds-forum-page #mpcirc-main-content .mpcirc-post-form-submit-btn:hover,
body.mpcirc-circle-page .ds-forum-page #mpcirc-main-content .mpcirc-form-comment-submit-btn:hover,
body.mpcirc-circle-page .ds-forum-page .mpcirc-form-reply-submit-btn:hover {
	background: var(--ds-red-dark);
	border-color: var(--ds-red-dark);
}
body.mpcirc-circle-page .ds-forum-page #mpcirc-main-content .mpcirc-post-form-submit-btn:active,
body.mpcirc-circle-page .ds-forum-page #mpcirc-main-content .mpcirc-form-comment-submit-btn:active,
body.mpcirc-circle-page .ds-forum-page .mpcirc-form-reply-submit-btn:active {
	background: color-mix(in srgb, var(--ds-red-dark) 85%, black);
	border-color: color-mix(in srgb, var(--ds-red-dark) 85%, black);
}
body.mpcirc-circle-page .ds-forum-page #mpcirc-main-content .mpcirc-post-form-submit-btn:focus-visible,
body.mpcirc-circle-page .ds-forum-page #mpcirc-main-content .mpcirc-form-comment-submit-btn:focus-visible,
body.mpcirc-circle-page .ds-forum-page .mpcirc-form-reply-submit-btn:focus-visible,
body.mpcirc-circle-page .ds-forum-page #mpcirc-main-content .mpcirc-comment-reply-btn:hover {
	outline-color: var(--ds-red);
	color: var(--ds-forum-accent-text);
}

/* Pagination */
body.mpcirc-circle-page .ds-forum-page .mpcirc-pagination-btn:hover {
	border-color: var(--ds-red);
	color: var(--ds-forum-accent-text);
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-pagination-btn:active {
	background: var(--ds-red);
	border-color: var(--ds-red);
}

/* Generic plugin form submit (Notifications/Settings forms) — plugin uses
   !important here, so the override must too. */
body.mpcirc-circle-page .ds-forum-page button.mpcirc-form-submit,
body.mpcirc-circle-page .ds-forum-page input[type="submit"].mpcirc-form-submit {
	background: var(--ds-red) !important;
}
body.mpcirc-circle-page .ds-forum-page button.mpcirc-form-submit:hover,
body.mpcirc-circle-page .ds-forum-page button.mpcirc-form-submit:active {
	background: var(--ds-red-dark) !important;
}
body.mpcirc-circle-page .ds-forum-page button.mpcirc-form-submit:focus,
body.mpcirc-circle-page .ds-forum-page button.mpcirc-form-submit:focus-visible {
	background: var(--ds-red) !important;
	outline: 2px solid var(--ds-red) !important;
}

/* Add-members modal: trigger, checkboxes, confirm/retry, counters */
body.mpcirc-circle-page .ds-forum-page button.mpcirc-add-members-btn {
	background-color: var(--ds-red);
}
body.mpcirc-circle-page .ds-forum-page button.mpcirc-add-members-btn:hover {
	background-color: var(--ds-red-dark);
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-add-members-checkbox {
	border: 1px solid var(--ds-red);
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-add-members-checkbox:checked {
	background: var(--ds-red);
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-add-members-checkbox:checked::after {
	border: 1.6666px solid var(--ds-red);
}
body.mpcirc-circle-page .ds-forum-page #mpcirc-main-content button.mpcirc-add-members-confirm-btn,
body.mpcirc-circle-page .ds-forum-page .mpcirc-add-members-retry-btn,
body.mpcirc-circle-page .ds-forum-page #mpcirc-main-content button.mpcirc-trigger-add-members.direct-submission,
body.mpcirc-circle-page .ds-forum-page .mpcirc-trigger-add-members.review-mode {
	background: var(--ds-red);
	border: 1px solid var(--ds-red);
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-add-members-selected-number,
body.mpcirc-circle-page .ds-forum-page .mpcirc-add-members-clear-all {
	color: var(--ds-forum-accent-text);
}

/* Member action buttons (mute/remove/ignore-report) + selected mute duration */
body.mpcirc-circle-page .ds-forum-page #mpcirc-main-content button.mpcirc-mute-duration-btn.selected {
	background: var(--ds-red);
	border-color: var(--ds-red);
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-member-action-remove:hover {
	background: var(--ds-red);
	border-color: var(--ds-red);
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-member-action-btn.ignore_report:hover {
	background-color: var(--ds-red) !important;
	border-color: var(--ds-red) !important;
}

/* Join Circle button */
body.mpcirc-circle-page .ds-forum-page .mpcirc-join-circle-btn {
	background-color: var(--ds-red);
	border: 1px solid var(--ds-red);
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-join-circle-btn:hover {
	background-color: var(--ds-red-dark);
	border-color: var(--ds-red-dark);
}
body.mpcirc-circle-page .ds-forum-page .mpcirc-join-circle-btn:focus,
body.mpcirc-circle-page .ds-forum-page .mpcirc-join-circle-btn:focus-visible {
	outline: 2px solid var(--ds-red);
}

/* "Active" status pill — not a button, but still shouldn't render green;
   neutral dark treatment rather than alarm-red avoids implying an error. */
body.mpcirc-circle-page .ds-forum-page .mpcirc-status-active {
	background-color: var(--ds-black);
	color: var(--ds-white);
}
.ds-forum-connection-reveal { align-items: center; background: rgba(17,17,17,.62); display: flex; inset: 0; justify-content: center; padding: 24px; position: fixed; z-index: 100000; }
.ds-forum-connection-reveal__card { animation: ds-forum-business-card-reveal 560ms ease-out both; background: var(--ds-white); border: 3px solid var(--ds-red); border-radius: var(--ds-forum-radius-card); box-shadow: 0 18px 60px rgba(0,0,0,.28); color: var(--ds-black); max-width: 420px; padding: 28px; text-align: center; transform-origin: center; width: 100%; }
.ds-forum-connection-reveal__card p { white-space: pre-line; }
.ds-forum-connection-reveal__card button { background: var(--ds-red); border-color: var(--ds-red); color: var(--ds-white); }
@keyframes ds-forum-business-card-reveal { from { opacity: 0; transform: perspective(800px) rotateY(82deg) scale(.88); } to { opacity: 1; transform: perspective(800px) rotateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .ds-forum-connection-reveal__card { animation: none; } }
.ds-forum-page .ds-forum-connections-page { min-height: 480px; padding: 36px 0; }
.ds-forum-page .ds-forum-connections-page__header { border-bottom: 1px solid var(--ds-forum-border); margin: 0 0 24px; padding: 0 0 20px; }
.ds-forum-page .ds-forum-connections-page__header h1 { font-size: clamp(32px, 4vw, 46px); margin: 0 0 8px; }
.ds-forum-page .ds-forum-connections-page__header p { color: var(--ds-forum-muted); margin: 0; }
.ds-forum-page .ds-forum-connections-page .ds-forum-widget { max-width: none; }
body.mpcirc-circle-page .ds-forum-page .mpcirc-page-navigation a.active .ds-forum-nav-icon-connections { filter: brightness(0) invert(1); }
.ds-forum-connections-list--placeholder { opacity: .42; pointer-events: none; }
.ds-forum-connections-placeholder__avatar { background: var(--ds-forum-muted); border-radius: 50%; display: block; flex: 0 0 40px; height: 40px; width: 40px; }
.ds-forum-connections-list--placeholder .ds-forum-connections-list__remove { font-size: 12px; padding: 7px 10px; }
.ds-forum-profile-card { align-items: stretch; display: flex; flex-wrap: nowrap; gap: 22px; padding: 22px; }
.ds-forum-profile-card__row { align-items: flex-start; flex: 1; }
.ds-forum-profile-card__avatar { background: #e6e7ec; border: 0; border-radius: 10px; flex-basis: 110px; height: 110px; padding: 18px; width: 110px; }
.ds-forum-profile-card__name { font-size: 28px; line-height: 1.1; }
.ds-forum-profile-card__membership, .ds-forum-profile-card__connection-count { color: var(--ds-red); font: 700 16px/1.35 var(--ds-font-headings); letter-spacing: .13em; margin-top: 8px; text-transform: uppercase; }
.ds-forum-profile-card__connection-count { display: block; }
.ds-forum-profile-card__links { font-size: 18px; gap: 38px; margin-top: 24px; }
.ds-forum-connections-list__name { background: transparent; border: 0; color: var(--ds-forum-text); font: 700 16px/1.25 var(--ds-font-headings); padding: 0; text-align: left; }
.ds-forum-connections-list__name:hover, .ds-forum-connections-list__name:focus-visible { color: var(--ds-red); text-decoration: underline; }
@media (max-width: 767px) { .ds-forum-profile-card { gap: 14px; padding: 18px; } .ds-forum-profile-card__avatar { flex-basis: 72px; height: 72px; padding: 10px; width: 72px; } .ds-forum-profile-card__name { font-size: 21px; } .ds-forum-profile-card__membership, .ds-forum-profile-card__connection-count { font-size: 13px; } .ds-forum-profile-card__links { font-size: 16px; gap: 24px; margin-top: 16px; } }
/* Keep the merged profile summary compact in the topic rail. */
.ds-forum-profile-card { align-items: initial; display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; }
.ds-forum-profile-card__row { align-items: center; flex: 0 0 100%; gap: 12px; }
.ds-forum-profile-card__avatar { border: 2px solid var(--ds-forum-accent-fill); border-radius: 50%; flex-basis: 56px; height: 56px; padding: 0; width: 56px; }
.ds-forum-profile-card__name { font-size: 15px; line-height: 1.25; }
.ds-forum-profile-card__membership, .ds-forum-profile-card__connection-count { color: var(--ds-forum-muted); font: inherit; font-size: 13px; letter-spacing: 0; margin-top: 3px; text-transform: none; }
.ds-forum-profile-card__links { font-size: 13px; gap: 14px; margin-top: 8px; }
.ds-forum-connections-page .ds-forum-profile-card__connections-empty { margin-top: 20px; }
@media (max-width: 767px) { .ds-forum-profile-card { gap: 12px; padding: 16px; } .ds-forum-profile-card__avatar { flex-basis: 56px; height: 56px; padding: 0; width: 56px; } .ds-forum-profile-card__name { font-size: 15px; } .ds-forum-profile-card__membership, .ds-forum-profile-card__connection-count { font-size: 13px; } .ds-forum-profile-card__links { font-size: 13px; gap: 14px; margin-top: 8px; } }

/* ---- Mobile-only full-page reorder (kept at end of file on purpose) -------
   This MUST stay the last block in the file: several earlier,
   unconditional rules above (e.g. `.ds-forum-layout-grid__topics-sticky,
   .ds-forum-layout-grid__widgets-sticky { display: grid; ... }` and
   `.ds-forum-widgets { display: grid; ... }`) set `display` on the same
   elements this block needs to flatten. Since both sets of rules have
   equal specificity and both match at mobile widths, CSS gives the win to
   whichever rule appears LAST in the file — an earlier version of this
   block placed right after the icon-grid CSS lost to those later rules
   and silently did nothing. Do not move this above the "Three-column
   shell" section (or any other unconditional .ds-forum-layout-grid__*
   rule) again.

   Approach: flatten every wrapping box between the desired items and
   the shared grid (.ds-forum-layout-grid, already display:grid) using
   display:contents, so profile card, topic grid, the native Circle nav
   pills, the masthead, search/sort/composer/posts, and the Connections/
   About/Rules cards all become direct, independently-orderable children
   of one grid — without moving any PHP/DOM and without touching
   desktop/tablet (this whole block is scoped to max-width:767px; every
   breakpoint rule above it is untouched).

   Trade-off: display:contents drops the flattened wrapper's own box,
   which also removes its aria-label landmark on mobile (e.g. the
   "Forum topics and member profile" aside label) — accepted since each
   individual piece inside keeps its own labelling. */
@media (max-width: 767px) {
	.ds-forum-layout-grid__topics,
	.ds-forum-layout-grid__topics-sticky,
	.ds-forum-layout-grid__widgets,
	.ds-forum-layout-grid__widgets-sticky,
	.ds-forum-widgets,
	.ds-forum-layout-grid__feed,
	.ds-forum-page,
	#mpcirc-main-content {
		display: contents;
	}

	.ds-forum-profile-card { order: 1; }
	/* Feed/Members/Moderation/Connections/bell row: hidden outright on
	   mobile — those four (Feed excluded) now live in the profile card's
	   cog flyout instead (.ds-forum-settings-menu__panel below). Desktop
	   is untouched: this whole block only matches max-width:767px, and
	   the plugin's own front.css / any earlier theme rule for this
	   selector loses to this one because it's the literal last rule in
	   the file for this selector — see the block comment above. */
	.mpcirc-page-navigation { display: none; }
	.ds-forum-masthead { order: 2; }
	.ds-forum-topic-grid { order: 3; }
	/* Catch-all for whatever #mpcirc-main-content actually contains on
	   any sub-page other than Feed (Moderation's queue, Members' table,
	   Settings' form — none of them share Feed's class names, e.g.
	   Moderation uses .mpcirc-page-header/.mpcirc-moderation-filter/
	   .mpcirc-moderation-queue-section instead of
	   .ds-forum-feed-controls/.mpcirc-post-creation-form/
	   .mpcirc-latest-posts). Without this, anything unlisted got the CSS
	   default order:0 — lower than .ds-forum-masthead's order:3 above —
	   and jumped above the masthead/topic-grid/profile-card instead of
	   rendering below them (this is what made Moderation look "blank":
	   the real content was there, just floated above everything else).
	   Uses an attribute selector rather than #mpcirc-main-content — an ID
	   selector would have HIGHER specificity than the class selectors
	   below and would incorrectly win over them regardless of file order,
	   breaking Feed's own 5/6/7 ordering. [id="mpcirc-main-content"] has
	   the same specificity tier as a single class, so this only wins
	   where nothing more specific already claimed an order, and still
	   loses cleanly to .ds-forum-feed-controls/etc. below either way
	   (equal specificity, later rule wins). */
	[id="mpcirc-main-content"] > * { order: 4; }
	.ds-forum-feed-controls { order: 5; }
	.mpcirc-post-creation-form { order: 6; }
	.mpcirc-latest-posts { order: 7; }
	.ds-forum-widget--connections { order: 8; }
	.ds-forum-widget--about { order: 9; }
	.ds-forum-widget--rules { order: 10; }
}

/* ---- Mobile: cog-menu panel views (Members/Moderation/Connections/
   Notification preferences) hide everything except the profile card and
   the active panel's own content. Body class set server-side in
   ds_filter_body_classes() (inc/blocksy-hooks.php) from
   $_GET['mpcirc_circle_page']. Must stay after the reorder block above
   for the same file-order/specificity-tie reason documented there —
   `body.` prefix already outranks the plain-class rules above regardless,
   this ordering is just for consistency. Scoped to max-width:767px only;
   desktop is untouched. */
@media (max-width: 767px) {
	body.ds-forum-mobile-panel-active .ds-forum-topic-grid,
	body.ds-forum-mobile-panel-active .ds-forum-masthead,
	body.ds-forum-mobile-panel-active .ds-forum-widget--connections,
	body.ds-forum-mobile-panel-active .ds-forum-widget--about,
	body.ds-forum-mobile-panel-active .ds-forum-widget--rules {
		display: none;
	}
}