/*
 * Design language — IDS↔theme bridge + foundation.
 *
 * Phase 1a (tracker GBP17): category-accent aliases — each Member Hub category
 * maps to an IDS design-system token, making IDS the single source of truth for
 * the hub's brand colors. Referencing tokens (never hardcoding color values)
 * IS the bridge — change an IDS token and the hub follows.
 *
 * GBP18 Step 1: the full component foundation ported from the approved mockup
 * docs/proposals/2026-07-01-members-hub-redesign/members-hub-final.html (the
 * mockup's CSS is the design spec). Adaptations from the mockup, by design:
 *   - the preview-only IDS token mirror is NOT ported (IDS supplies --ids-*
 *     site-wide via the indivisible-shared mu-plugin);
 *   - category tokens live here on :root under the tested --indiv-accent-* names
 *     (the mockup's .indiv-wrap-local shorthand names were preview-only; section
 *     markup selects an accent via style="--sec:var(--indiv-accent-*)");
 *   - .indiv-btn/.indiv-btn-primary/.indiv-btn-ghost are NOT ported — WP buttons use
 *     IDS ids-btn dual-class instead.
 *
 * Isolated + additive: enqueued separately (see functions.php); touches nothing
 * in the parent theme's palette or style variations. Revert by deleting this
 * file and its enqueue line.
 *
 * `connect` and `muted` alias genuine semantic IDS tokens; the three category
 * hues alias raw brand tokens because IDS has no category-accent semantic layer
 * (danger/warning/success would misencode "take action"/"assembly"/"membership").
 * `tools` and `admin` (the role-gated sections) are OKLCH derivations of brand
 * tokens — quieter cousins of light-blue and red, per the mockup.
 */
:root {
	--indiv-accent-take-action: var(--ids-color-red);
	--indiv-accent-connect: var(--ids-accent-primary);
	--indiv-accent-assembly: var(--ids-color-gold);
	--indiv-accent-membership: var(--ids-color-green);
	--indiv-accent-muted: var(--ids-text-muted);
	--indiv-accent-tools: oklch(from var(--ids-color-light-blue) 0.66 0.03 h);
	--indiv-accent-admin: oklch(from var(--ids-color-red) 0.66 0.1 h);
	--indiv-elevated: oklch(from var(--ids-surface-page) calc(l + 0.055) c h);
	--indiv-hatch: repeating-linear-gradient(
		135deg,
		oklch(from var(--ids-color-white) l c h / 0.028) 0 1px,
		transparent 1px 8px
	);
}

/* =========================================================================
   Members Hub foundation — ALL rules scoped under .indiv-* classes so nothing
   leaks into the theme. Category color is stated ONCE per section (rule +
   dot) on the dark PAGE background, where brand hues are contrast-safe.
   Cards stay calm (near-white text) so no accent text ever sits on the
   mid-tone card and fails contrast.
   ========================================================================= */
.indiv-wrap {
	max-width: 1120px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 4.5rem;
	box-sizing: border-box;
	background: var(--ids-surface-page);
	font-family: "Domine", Georgia, serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ids-color-white);
	-webkit-font-smoothing: antialiased;
}
.indiv-wrap * {
	box-sizing: border-box;
}
.indiv-wrap :focus-visible {
	outline: 2px solid var(--ids-accent-primary);
	outline-offset: 3px;
	border-radius: 3px;
}

/* ---- HERO / masthead ---------------------------------------------------- */
.indiv-hero {
	position: relative;
	overflow: hidden;
	background: var(--indiv-hatch), var(--indiv-elevated);
	border: 1px solid var(--ids-border-section);
	border-radius: 12px;
	border-top: 4px solid var(--ids-color-red);
	padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 2.6rem);
}
.indiv-eyebrow {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: oklch(from var(--ids-color-white) l c h / 0.7);
	margin: 0 0 0.7rem;
}
.indiv-display {
	font-family: "Domine", Georgia, serif;
	font-weight: 700;
	line-height: 1.1;
	font-size: clamp(2rem, 4.6vw, 3.15rem);
	margin: 0 0 0.6rem;
	letter-spacing: -0.005em;
	color: var(--ids-color-white);
	max-width: 20ch;
}
.indiv-display .indiv-accent {
	color: var(--ids-color-red);
}
.indiv-lede {
	margin: 0;
	max-width: 56ch;
	font-size: 1.08rem;
	color: oklch(from var(--ids-color-white) l c h / 0.84);
}
/* hero CTA row (logged-out hero) — the mockup inlines these styles */
.indiv-hero .indiv-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.4rem;
}

/* Hero action buttons: core/button inside the hero, styled to the IDS button
   language (derived from IDS tokens — the ids-btn classes can't reach the
   anchor: WP puts a button block's className on the wrapper div). Default =
   primary; the "Indivisible Ghost" block style = the outline variant. */
.indiv-hero .wp-block-button__link {
	cursor: pointer;
	padding: 10px 20px;
	border: 1px solid var(--ids-accent-primary);
	background: var(--ids-accent-primary);
	color: var(--ids-text-on-accent);
	border-radius: var(--ids-radius-sm);
	font-size: var(--ids-font-size-base);
	font-weight: 400;
	line-height: var(--ids-line-height);
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.indiv-hero .wp-block-button__link:hover {
	background: var(--ids-accent-primary-hover);
	border-color: var(--ids-accent-primary-hover);
	color: var(--ids-text-on-accent);
}
.indiv-hero .is-style-indiv-ghost .wp-block-button__link {
	background: transparent;
	color: var(--ids-text-on-dark);
	border-color: oklch(from var(--ids-color-white) l c h / 0.35);
}
.indiv-hero .is-style-indiv-ghost .wp-block-button__link:hover {
	background: oklch(from var(--ids-color-white) l c h / 0.1);
	border-color: oklch(from var(--ids-color-white) l c h / 0.6);
}

/* ---- MOMENTUM BAND (signature): asymmetric next-moment + quick links ---- */
.indiv-momentum {
	margin-top: 1.25rem;
	display: grid;
	gap: 1rem;
	grid-template-columns: 1.9fr 1fr;
}
.indiv-next {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--indiv-hatch), var(--indiv-elevated);
	border: 1px solid var(--ids-border-section);
	border-left: 4px solid var(--ids-color-red);
	border-radius: var(--ids-radius-lg);
	padding: 1.35rem 1.4rem;
}
.indiv-next .indiv-kicker {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: oklch(from var(--ids-color-white) l c h / 0.72);
	margin: 0 0 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.indiv-next .indiv-kicker .indiv-dot {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--ids-color-red);
}
.indiv-next .indiv-when {
	font-family: "Domine", Georgia, serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.15;
	margin: 0 0 0.25rem;
	color: var(--ids-color-white);
}
.indiv-next .indiv-where {
	margin: 0 0 1.1rem;
	font-size: 0.98rem;
	color: oklch(from var(--ids-color-white) l c h / 0.78);
}
.indiv-next .indiv-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: auto;
}

.indiv-quick {
	display: grid;
	gap: 0.6rem;
	align-content: start;
}
.indiv-qlink {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 44px;
	padding: 0.6rem 0.9rem;
	border-radius: var(--ids-radius-md);
	text-decoration: none;
	background: oklch(from var(--ids-color-white) l c h / 0.05);
	border: 1px solid oklch(from var(--ids-color-white) l c h / 0.2);
	color: var(--ids-color-white);
	transition:
		background 0.18s ease,
		border-color 0.18s ease,
		transform 0.18s ease;
}
.indiv-qlink:hover {
	background: oklch(from var(--ids-color-white) l c h / 0.1);
	border-color: oklch(from var(--ids-color-white) l c h / 0.3);
	transform: translateX(2px);
}
.indiv-qlink .indiv-qico {
	flex: none;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: oklch(from var(--ids-color-white) l c h / 0.08);
}
.indiv-qlink .indiv-qico svg {
	width: 19px;
	height: 19px;
	color: oklch(from var(--ids-color-white) l c h / 0.92);
}
.indiv-qlink b {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 0.96rem;
}
.indiv-qlink .indiv-qsub {
	display: block;
	font-size: 0.8rem;
	font-family: "Domine", serif;
	color: oklch(from var(--ids-color-white) l c h / 0.68);
	line-height: 1.25;
}

/* ---- SECTION headers: label LARGER than card titles --------------------- */
.indiv-section {
	margin-top: 2.75rem;
	container-type: inline-size;
}
.indiv-shead {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0 0 1.1rem;
}
.indiv-srule {
	width: 2.2rem;
	height: 4px;
	border-radius: 2px;
	flex: none;
	background: var(--sec, var(--ids-accent-primary));
}
.indiv-shead h2 {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: 0.02em;
	margin: 0;
	color: var(--sec, var(--ids-color-white));
}
.indiv-shead .indiv-badge {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 0.64rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.25em 0.75em;
	border-radius: 999px;
	color: var(--ids-color-white);
	background: oklch(from var(--sec, var(--ids-accent-primary)) l c h / 0.22);
	border: 1px solid
		oklch(from var(--sec, var(--ids-accent-primary)) l c h / 0.55);
}
.indiv-shead .indiv-hairline {
	flex: 1;
	height: 1px;
	background: var(--ids-border-section);
}

/* ---- CARD grid (calm cards; accent lives at section level) -------------- */
.indiv-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, 1fr);
}
.indiv-grid.is-pair {
	grid-template-columns: repeat(2, 1fr);
}
.indiv-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.indiv-card {
	display: flex;
	flex-direction: column;
	background: var(--ids-surface-card);
	border: 1px solid var(--ids-border-card);
	border-radius: var(--ids-radius-lg);
	padding: 1.15rem 1.2rem 1.15rem;
}
.indiv-card h3 {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	margin: 0 0 0.4rem;
	color: var(--ids-color-white);
	display: flex;
	align-items: center;
	gap: 0.55rem;
}
.indiv-card h3 svg {
	width: 20px;
	height: 20px;
	flex: none;
	color: oklch(from var(--ids-color-white) l c h / 0.92);
}
.indiv-card .indiv-card-subheading {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 0.64rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
	color: oklch(from var(--ids-text-on-card) l c h / 0.72);
}
.indiv-card p {
	margin: 0 0 0.9rem;
	font-size: 0.95rem;
	flex: 1;
	color: oklch(from var(--ids-text-on-card) l c h / 0.84);
}
.indiv-card .cstatus {
	font-family: "Montserrat", sans-serif;
	font-size: 0.76rem;
	flex: none;
	margin: 0 0 0.6rem;
	color: oklch(from var(--ids-color-gold) 0.85 0.08 h);
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.indiv-card .cstatus::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--ids-color-gold);
}
.indiv-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1.1rem;
	margin-top: auto;
}

.indiv-cta {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--ids-color-white);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
}
.indiv-cta svg {
	width: 16px;
	height: 16px;
	color: var(--sec, var(--ids-accent-primary));
	transition: transform 0.15s ease;
}
.indiv-cta:hover {
	color: var(--ids-color-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.indiv-cta:hover svg {
	transform: translateX(3px);
}

/* social row */
.indiv-social {
	display: flex;
	gap: 0.5rem;
	margin-top: auto;
}
.indiv-social a {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	border: 1px solid oklch(from var(--ids-color-white) l c h / 0.16);
	background: oklch(from var(--ids-color-white) l c h / 0.08);
	color: var(--ids-color-white);
}
.indiv-social a:hover {
	background: oklch(from var(--ids-color-white) l c h / 0.16);
}
.indiv-social svg {
	width: 20px;
	height: 20px;
}

/* ---- gated block: visual seam + subdued enclosure ----------------------- */
.indiv-gated {
	margin-top: 3rem;
	padding: 1.75rem 1.5rem 0.5rem;
	border: 1px solid var(--ids-border-section);
	border-radius: 14px;
	background: oklch(from var(--ids-surface-page) calc(l + 0.02) c h);
}
.indiv-seam {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: 0 0 0.5rem;
}
.indiv-seam span {
	flex: 1;
	height: 1px;
	background: var(--ids-border-section);
}
.indiv-seam b {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: oklch(from var(--ids-color-white) l c h / 0.6);
}
.indiv-gated .indiv-section:first-of-type {
	margin-top: 1rem;
}

/* aside note (replaces dashed filler cards) */
.indiv-aside {
	grid-column: 1/-1;
	margin: 0.25rem 0 0;
	padding: 0.85rem 1rem;
	border-left: 3px solid var(--ids-border-section);
	border-radius: 0 6px 6px 0;
	background: oklch(from var(--ids-color-white) l c h / 0.03);
	font-size: 0.9rem;
	color: oklch(from var(--ids-color-white) l c h / 0.72);
}

/* logged-out preview divider */
.indiv-note {
	margin: 3.5rem 0 0.75rem;
	font-family: "Montserrat", sans-serif;
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: oklch(from var(--ids-color-white) l c h / 0.5);
	border-top: 1px dashed var(--ids-border-section);
	padding-top: 1.2rem;
}

/* ---- WP core-group flow-layout neutralization ---------------------------
   The demo page wraps these components in core group blocks (.indiv-momentum,
   .indiv-quick, .indiv-gated). TWO WordPress sources inject child margins that
   spread the quick-link rows apart and stretch the next-assembly card:
   per-container `* + *` gap rules (zero-specificity :where()) AND global
   styles' `:root :where(.is-layout-flow) > *` at (0,1,0) — which loads AFTER
   this sheet, so a bare single-class selector loses on order. Carry the
   .wp-block-group class (0,2,0) to win on specificity regardless of order,
   and zero ALL children: these containers define their own gaps above. */
.wp-block-group.indiv-momentum > *,
.wp-block-group.indiv-quick > *,
.wp-block-group.indiv-gated > * {
	margin-block-start: 0;
}

/* The blanket zeroing above also outranks .indiv-section's own 2.75rem top
   margin for sections directly inside the gated enclosure — restate it, and
   restate the first-under-the-seam 1rem case too (the restated 2.75rem rule
   ties the foundation's first-of-type rule at (0,3,0) and would win on
   order otherwise). */
.wp-block-group.indiv-gated > .indiv-section {
	margin-top: 2.75rem;
}
.wp-block-group.indiv-gated > .indiv-section:first-of-type {
	margin-top: 1rem;
}

/* The page frame: the demo page wraps everything in a core Group carrying
   .indiv-wrap. As a direct child of the constrained post content, global styles
   caps it at the content size (50rem) via `.is-layout-constrained >
   :where(...)` at (0,1,0) — loading AFTER this sheet, so the foundation's
   plain .indiv-wrap max-width loses on order. Restate the mockup's 1120px frame
   at (0,2,0); WP's own `margin auto !important` centers it. alignfull is NOT
   the answer: `.has-global-padding > .alignfull` forces negative side margins
   at (0,2,0), pinning the frame left. */
.wp-block-group.indiv-wrap {
	max-width: 1120px;
}

/* ---- responsive ----------------------------------------------------------
   Card grids use @container queries (sized by .indiv-section, a size container
   above) instead of viewport @media: the grid's real available width is often
   far narrower than the viewport — nested inside .indiv-gated padding, gating-
   block editor chrome, and the editor's iframed canvas with sidebars open —
   so viewport breakpoints left 2 cramped columns at ~600px of actual space. */
@container (max-width: 860px) {
	.indiv-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@container (max-width: 640px) {
	.indiv-grid,
	.indiv-grid.is-pair {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	.indiv-momentum {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.indiv-display {
		font-size: 1.9rem;
	}
	.indiv-shead h2 {
		font-size: 1.15rem;
	}
}
@media (prefers-reduced-motion: reduce) {
	.indiv-wrap * {
		transition: none !important;
	}
	.indiv-qlink:hover,
	.indiv-cta:hover svg {
		transform: none;
	}
}