/* ============================================================================
   Changer Block — front-end styles  (blocks/q-changer-block/style.css)

   Source of truth: Figma "Q-Web-Full-Redesign-2025-Building-Blocks"
     - Default (green) scheme : node 2251-16639 (variants desktop/tablet/mobile)
     - Alternate scheme       : node 2251-16837 (see FOLLOW-UP below)

   RULE: consume tokens only — never hard-code hex/px in component rules.

   Responsive model (Figma variants of node 2251-16639):
     - desktop-green (1440 / 1280 content)  -> split-view (nav 300 + gap 120 + 860)
     - tablet-green  (800  / 720  content)  -> split-view (narrower)
     - mobile-green  (375)                  -> accordion
   => Split-view persists to the 800px tablet frame; accordion is the MOBILE
      state. Breakpoint: 768px (accordion below, split at/above). This differs
      from the SA's 1024px assumption — see design handoff §2 / §12 OQ-1;
      --changer-bp (below) is the single source of truth (mirrored in view.js).

   FOLLOW-UP (design OQ-6): the alternate-scheme hex values could NOT be read
   from Figma node 2251-16837 (the design MCP was rate-limited; only node
   2251-16639 shipped). Alternate uses transparent background (no black fill)
   with light text tokens for use on dark page/section backgrounds.
   ========================================================================== */

/* ============================================================================
   Design tokens (adapted from design/generated/tokens.css)
   ========================================================================== */
:root {
	/* ---- Typography ---------------------------------------------------- */
	--changer-font-family: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
	--changer-font-weight-medium: 500; /* Rubik Medium — nav labels & numbers */
	--changer-font-weight-bold: 700;   /* Rubik Bold   — block title & content */
	--changer-tracking: -0.4px;        /* all text: letter-spacing */

	/* Mobile-base sizes (overridden per breakpoint below) */
	--changer-title-size: 20px;   --changer-title-line: 23px;   /* paragraph-large-strong */
	/* Label = theme paragraph large; content = theme H4 (tokens scale at 768 / 1024 / 1220) */
	--changer-label-size: var(--types-paragraph-large-font-size);
	--changer-label-line: var(--types-paragraph-large-line-height);
	--changer-content-size: var(--types-h4-font-size);
	--changer-content-line: var(--types-h4-line-height);

	/* ---- Spacing / layout (Figma auto-layout, confirmed from geometry) - */
	--changer-nav-width: 300px;        /* left nav column fixed width */
	--changer-col-gap: 120px;          /* nav->content gap: 3079 - 2959 = 120px */
	--changer-content-width: 860px;    /* desktop content column (informational) */
	--changer-block-pad-block: 33px;   /* block internal top padding */
	--changer-title-gap: 24px;         /* title -> list gap (mobile; 40px desktop) */
	--changer-row-min-height: 36px;    /* nav label row height */
	--changer-row-gap: 16px;           /* padding above/below the divider line */
	--changer-icon-size: 36px;         /* green circular arrow button diameter */
	--changer-icon-glyph: 24px;        /* arrow glyph box inside the circle */
	--changer-panel-pad-block: 16px;   /* accordion panel vertical padding (mobile) */

	/* ---- Motion (standard transitions only — SPEC §6) ----------------- */
	--changer-transition: 200ms ease;
	--changer-accordion-transition: max-height 250ms ease, opacity 200ms ease;

	/* ---- Focus indicator (WCAG 2.1 AA — non-negotiable) --------------- */
	--changer-focus-width: 2px;
	--changer-focus-offset: 2px;
}

/* DEFAULT scheme — light green (theme btn-color-primary-hover) */
.qfse-changer.is-scheme-default {
	--changer-bg: var(--wp--preset--color--btn-color-primary-hover, #e5ffec);
	--changer-text: var(--wp--preset--color--mono-100, #0a0a0a);
	--changer-text-muted: #999999;
	--changer-divider: #E5E5E5;
	--changer-accent: var(--wp--preset--color--btn-color-primary, #01ff40);
	--changer-icon-color: var(--wp--preset--color--mono-100, #0a0a0a);
	--changer-link: var(--wp--preset--color--mono-100, #0a0a0a);
	--changer-focus-ring: var(--wp--preset--color--mono-100, #0a0a0a);
}

/* ALTERNATE scheme — light text on transparent (no black fill; inherits page/section bg) */
.qfse-changer.is-scheme-alternate {
	--changer-bg: transparent;
	--changer-text: var(--wp--preset--color--base, #ffffff);
	--changer-text-muted: #8A8A8A;
	--changer-divider: #333333;
	--changer-accent: var(--wp--preset--color--btn-color-primary, #01ff40);
	--changer-icon-color: var(--wp--preset--color--mono-100, #0a0a0a);
	--changer-link: var(--wp--preset--color--btn-color-primary, #01ff40);
	--changer-focus-ring: var(--wp--preset--color--base, #ffffff);
}

/*
 * Legacy alternate markup still ships `has-mono-100-background-color`, and WP
 * global styles set that with !important — beat it so existing posts lose the
 * black fill without requiring a block re-save.
 */
.qfse-changer.is-scheme-alternate,
.qfse-changer.is-scheme-alternate.has-mono-100-background-color {
	background: transparent !important;
	background-color: transparent !important;
}

/* ============================================================================
   Layout (adapted from design/generated/changer-block.css)
   ========================================================================== */
.qfse-changer {
	--changer-bp: 768px; /* single source of truth; mirrored in view.js */
	box-sizing: border-box;
	background: var(--changer-bg);
	color: var(--changer-text);
	font-family: var(--changer-font-family);
	letter-spacing: var(--changer-tracking);
	/* Follow the theme's own gutter so the block stays in line with every other
	   section. Hard-coding it from the 1440px design broke alignment between
	   1024px and 1439px, where the page is already at 80px and this was at 40px. */
	padding: var(--changer-block-pad-block) var(--main-content-padding-x, 20px);
}
.qfse-changer *,
.qfse-changer *::before,
.qfse-changer *::after {
	box-sizing: border-box;
}

/* Title: core/paragraph (types-paragraph-large + bold) — theme typography, local gap */
.qfse-changer > .wp-block-paragraph,
.qfse-changer > p {
	margin-block-start: 0;
	margin-block-end: var(--changer-title-gap);
	color: var(--changer-text);
}

/* Item = header (nav label) + separator + panel */
.qfse-changer__item {
	display: block;
}

/* --- Nav label / accordion header (native <button>, always focusable) ----- */
.qfse-changer__label {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: var(--changer-row-min-height);
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	font-weight: var(--changer-font-weight-medium);
	font-size: var(--changer-label-size);
	line-height: var(--changer-label-line);
	letter-spacing: var(--changer-tracking);
	color: var(--changer-text-muted); /* inactive by default */
	transition: color var(--changer-transition);
}
.qfse-changer__num {
	flex: 0 0 auto;
}
.qfse-changer__text {
	flex: 1 1 auto;
	white-space: normal; /* labels WRAP to a 2nd line — no truncation (A-2) */
	overflow-wrap: anywhere;
}

/* Non-colour active indicator: the green circular arrow, only on the active row */
.qfse-changer__icon {
	flex: 0 0 auto;
	display: none; /* hidden on inactive rows */
	align-items: center;
	justify-content: center;
	width: var(--changer-icon-size);
	height: var(--changer-icon-size);
	border-radius: 50%;
	background: var(--changer-accent);
	color: var(--changer-icon-color);
	transition: transform var(--changer-transition);
}
.qfse-changer__icon svg {
	width: var(--changer-icon-glyph);
	height: var(--changer-icon-glyph);
	display: block;
}

/* Active / expanded row */
.qfse-changer__label[aria-selected="true"],
.qfse-changer__label[aria-expanded="true"] {
	color: var(--changer-text); /* colour cue */
}
/* Alternate: active label matches arrow accent (btn-color-primary) */
.qfse-changer.is-scheme-alternate .qfse-changer__label[aria-selected="true"],
.qfse-changer.is-scheme-alternate .qfse-changer__label[aria-expanded="true"] {
	color: var(--wp--preset--color--btn-color-primary, var(--changer-accent));
}
.qfse-changer__label[aria-selected="true"] .qfse-changer__icon,
.qfse-changer__label[aria-expanded="true"] .qfse-changer__icon {
	display: inline-flex; /* non-colour cue */
}
/* Mobile expanded state points the arrow down (Figma mobile-green ↓) */
.qfse-changer__label[aria-expanded="true"] .qfse-changer__icon {
	transform: rotate(90deg);
}

/* Divider line under each row (#E5E5E5, 16px above/below) */
.qfse-changer__nav-sep {
	height: 1px;
	margin: var(--changer-row-gap) 0;
	background: var(--changer-divider);
	border: 0;
}
.qfse-changer__item:last-child .qfse-changer__nav-sep {
	display: none; /* no rule after the last label */
}

/* --- Panel (content) ------------------------------------------------------ */
.qfse-changer__panel {
	font-weight: var(--changer-font-weight-bold);
	font-size: var(--changer-content-size);
	line-height: var(--changer-content-line);
	letter-spacing: var(--changer-tracking);
	color: var(--changer-text);
	padding-block: var(--changer-panel-pad-block); /* accordion panel spacing (mobile) */
}
.qfse-changer__panel > :first-child {
	margin-top: 0;
}
.qfse-changer__panel > :last-child {
	margin-bottom: 0;
}
.qfse-changer__panel a {
	color: var(--changer-link);
	text-underline-offset: 2px;
}
.qfse-changer__panel[hidden] {
	display: none;
}

/* ============================================================================
   TABLET + DESKTOP (>= 768px) — split view (tabs).
   `display:contents` promotes each item's header+separator+panel to grid
   children of `.qfse-changer__inner`. Labels/separators -> column 1; panels ->
   column 2, spanning all rows so only the active panel shows at the top.
   ========================================================================== */
@media (min-width: 768px) {
	.qfse-changer {
		/* tablet type scale (title only — label/content follow theme paragraph-large / H4) */
		--changer-title-size: 25px;   --changer-title-line: 29px;
		--changer-title-gap: 40px;
	}
	.qfse-changer__inner {
		display: grid;
		grid-template-columns: var(--changer-nav-width) minmax(0, 1fr);
		column-gap: var(--changer-col-gap);
		align-items: start;
	}
	.qfse-changer__item {
		display: contents;
	}

	.qfse-changer__label,
	.qfse-changer__nav-sep {
		grid-column: 1;
	}

	/* all panels share column 2, span every row; only the active is visible */
	.qfse-changer__panel {
		grid-column: 2;
		grid-row: 1 / span 41; /* max 20 items * 2 rows -> <= 40; 41 is safe */
		align-self: start;
		padding-block: 0;
	}

	/* Desktop shows a tab (not an accordion): arrow points right, not down. */
	.qfse-changer__label[aria-selected="true"] .qfse-changer__icon {
		transform: none;
	}
}

/* ============================================================================
   DESKTOP (>= 1440px) — full desktop type scale + wider side padding.
   nav 300 + gap 120 + content 860 = 1280 content width.
   ========================================================================== */
@media (min-width: 1440px) {
	.qfse-changer {
		--changer-title-size: 32px;   --changer-title-line: 37px;
	}
}

/* ============================================================================
   Focus indicator — visible at all times during keyboard nav (AC-014, §15).
   ========================================================================== */
.qfse-changer__label:focus-visible {
	outline: var(--changer-focus-width) solid var(--changer-focus-ring);
	outline-offset: var(--changer-focus-offset);
	border-radius: 2px;
}

/* Respect users who prefer reduced motion (§8) */
@media (prefers-reduced-motion: reduce) {
	.qfse-changer *,
	.qfse-changer *::before,
	.qfse-changer *::after {
		transition: none !important;
	}
}