/*
 * pm-faq — the FAQ page (WO-84, frame 374:3450).
 *
 * Source frame: docs/design/frames/84-faq-page.json, node 374:3450 — the
 * dedicated page-faq frame that supersedes the ink two-column block WO-39
 * built from the CGU layout's faq-section instance (39-faq.json). A light
 * page: one bordered head block (eyebrow, H1, search), the topic pills,
 * a single-column accordion of every faq_item, then the CTA band and the
 * footer (the band and footer are other widgets' markup).
 *
 * Compiled to assets/css/components/faq.css by src/build-tokens.mjs, which
 * substitutes the breakpoint markers (a comment holding `@bp <name>`) with
 * the pixel value from tokens/tokens.json. Never type a breakpoint width
 * here.
 *
 * Every colour is a --pm-color-* token; the H1's and question's size,
 * weight, leading and tracking are the WO-27/WO-30 typography tokens. No
 * hex value and no literal breakpoint width may appear in this file. Values
 * the token file does not hold (the 1px hairlines, the 600 × 48 search box,
 * the 15px placeholder, the 240px sides, the pill's 10px block padding) are
 * typed with a comment citing the extract key they come from — the
 * section-header precedent.
 *
 * The accordion's rows are the SHARED writer's markup
 * (Poortman\Core\Widgets\Accordion::render, WO-33); every rule below that
 * touches a .pm-accordion class is a page override scoped to .pm-faq and
 * written at strictly higher specificity than accordion.css's own rule, so
 * no cascade depends on the load order between the two component files
 * (the §C15 lesson — the convention registration guarantees no order).
 * accordion.css and accordion.js are NOT this ticket's files and are
 * unchanged.
 *
 * The eyebrow is NOT styled here: pm-faq renders it through the
 * section-header pattern's own writer (SectionHeader::render_header), so
 * its styles are section-header.css's — one writer, no copy.
 */

/*
 * The page section escapes the scaffold body's centred 72rem column with
 * the same full-bleed technique as pm-legal (legal.css) — the frame's head
 * rule and the band run edge to edge (84-faq-page.json#page).
 */
.pm-faq {
	box-sizing: border-box;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/*
 * 84-faq-page.json#header_section (node 374:3478) — ONE bordered block
 * holding the eyebrow, the H1 and the search: padding 96 top / 48 bottom /
 * 160 sides (--pm-space-24 / --pm-space-12 / --pm-space-40), a centred
 * column, gap 24 (--pm-space-6), 1px Powder Blush (surface-alt) bottom
 * border. The legal title block's geometry, with the frame's own paddings.
 */
.pm-faq__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pm-space-6);
	text-align: center;
	padding: var(--pm-space-24) var(--pm-space-40) var(--pm-space-12);
	border-bottom: 1px solid var(--pm-color-surface-alt);
}

/*
 * 84-faq-page.json#header_section.h1 — the legal title block's H1
 * (legal.css:80–89, 40-legal.json#title_block.h1), written here from the
 * same tokens: the h1 size, ExtraLight 200, tight leading, the h1
 * tracking, uppercase, Volcanic Ink. pm-faq writes the page's one H1
 * (WO-80: no fallback title on Elementor pages).
 */
.pm-faq__title {
	margin: 0;
	font-family: var(--pm-font-family-base);
	font-size: var(--pm-font-size-h1);
	font-weight: var(--pm-font-weight-200);
	line-height: var(--pm-leading-tight);
	letter-spacing: var(--pm-tracking-h1);
	text-transform: uppercase;
	color: var(--pm-color-ink);
	/* A long Dutch heading wraps rather than stretching the block
	   (MISTAKES.md §E4). */
	overflow-wrap: break-word;
}

/*
 * 84-faq-page.json#header_section.search (node 374:3483) — the search
 * field: 600 × 48, centred by the head's align-items; white
 * (input-surface), 1px Powder Blush (surface-alt) — never input-border,
 * which is the contact form's texte/black — radius sm, padding 14 block /
 * 20 sides (--pm-space-3-5 / --pm-space-5), row, gap 12 (--pm-space-3).
 * The 600px width and 48px height are measured values with no tokens, like
 * the legal body's 960px.
 *
 * Borders on this page are surface-alt (Powder Blush — the extract's
 * colour), never input-border (that role is texte/black, the contact
 * form's).
 */
.pm-faq__search {
	display: flex;
	align-items: center;
	gap: var(--pm-space-3);
	box-sizing: border-box;
	width: 100%;
	max-width: 600px; /* 84-faq-page.json#header_section.search.box */
	height: 48px; /* idem — 14 + 14 padding around the icon's 20 × 20 box */
	padding: var(--pm-space-3-5) var(--pm-space-5);
	background-color: var(--pm-color-input-surface);
	border: 1px solid var(--pm-color-surface-alt);
	border-radius: var(--pm-radius-sm);
}

/*
 * The field's focus ring. The frame records no focus state (MISTAKES.md
 * §C12 — error and focus states are not designed); the button system's
 * recorded ring (WO-09 AC 4, the accordion toggle's own) is applied to the
 * BOX via :focus-within, so tabbing to the input lights the field the
 * client sees, not a line inside it.
 */
.pm-faq__search:focus-within {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}

/*
 * 84-faq-page.json#header_section.search.icon — the search glyph, 18 × 18
 * inside a 20 × 20 box, accent. The 20 × 20 box and 18 × 18 glyph are
 * measured values with no tokens; the box is typed in rem (the button
 * label's 0.875rem precedent). The SVG draws with currentColor, so the
 * accent is this span's colour property.
 */
.pm-faq__search-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem; /* 20 — 84-faq-page.json#header_section.search.icon; no token holds it */
	height: 1.25rem; /* idem */
	color: var(--pm-color-accent);
}

.pm-faq__search-icon svg {
	display: block;
	width: 18px;
	height: 18px;
}

/*
 * The input itself: borderless and transparent inside the bordered box,
 * Body Light 15. The 15px is typed — no size token holds it and WO-84 says
 * not to add one (84-faq-page.json#header_section.search.placeholder).
 * appearance none strips the native search decoration WebKit and Safari
 * draw otherwise.
 */
.pm-faq__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--pm-font-family-base);
	font-size: 0.9375rem; /* 15 — 84-faq-page.json#header_section.search.placeholder; no 15px size token (WO-84: do not add one) */
	font-weight: var(--pm-font-weight-300);
	line-height: var(--pm-leading-body);
	color: var(--pm-color-ink);
	-webkit-appearance: none;
	appearance: none;
}

/* The ring is the search box's :focus-within, never a line on the input. */
.pm-faq__input:focus {
	outline: none;
}

/*
 * 84-faq-page.json#header_section.search.placeholder — Light 15 in texte
 * (ink @64): the body-text role, the same reading the shared accordion's
 * description carries. opacity 1 because the extract's colour IS the dimmed
 * value — the browser's own dimming would dim it twice.
 */
.pm-faq__input::placeholder {
	color: var(--pm-color-body-text);
	font-weight: var(--pm-font-weight-300);
	opacity: 1;
}

/*
 * 84-faq-page.json#main_content (node 374:3487) — the list container:
 * padding 64 top / 96 bottom (--pm-space-16 / --pm-space-24), gap 48
 * (--pm-space-12) between the pills and the list. The sides step with the
 * viewport: 240px at ≥ laptop (the list is exactly 960 at the frame's
 * 1440), the page gutter's 96 (--pm-space-24) from tablet to laptop, 24
 * (--pm-space-6) below tablet (§C7). The 240px is a measured value with no
 * token, like the legal body's 960px.
 */
.pm-faq__main {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--pm-space-12);
	padding: var(--pm-space-16) var(--pm-space-6) var(--pm-space-24);
}

@media (min-width: 768px) {
	.pm-faq__main {
		padding-inline: var(--pm-space-24);
	}
}

@media (min-width: 1024px) {
	.pm-faq__main {
		padding-inline: 240px; /* 84-faq-page.json#main_content.box — 240px sides at 1440; no token holds it */
	}
}

/*
 * 84-faq-page.json#main_content.tabs (node 374:3488) — the topic pills:
 * a wrapping row, gap 16 (--pm-space-4), centred. No pills render at all
 * when no item carries a category (every row visible, nothing to filter).
 */
.pm-faq__topics {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pm-space-4);
}

/*
 * One pill: padding 10 / 20 (the 10px block is a measured value with no
 * space token — the scale runs 8 → 12; 84-faq-page.json#main_content.tabs),
 * input-surface fill, 1px Powder Blush (surface-alt) border, the pill
 * radius (--pm-radius-pill, resolved by this frame — tokens.json#radius
 * .pill), label Body Light 14 ink. The 14px is typed like the button
 * label's (no size token holds it); line-height 1 gives the measured 36px
 * row: 10 + 10 + 14 + 2 × 1px border.
 */
.pm-faq__topic {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	margin: 0;
	padding: 10px var(--pm-space-5); /* 10 block — 84-faq-page.json#main_content.tabs; no 10px space token */
	background-color: var(--pm-color-input-surface);
	border: 1px solid var(--pm-color-surface-alt);
	border-radius: var(--pm-radius-pill);
	font-family: var(--pm-font-family-base);
	font-size: 0.875rem; /* 14 — the button label's precedent; no size token holds it */
	font-weight: var(--pm-font-weight-300);
	line-height: 1;
	color: var(--pm-color-ink);
	cursor: pointer;
}

/*
 * The pressed pill: accent fill, border-colour accent — the SAME box (the
 * 1px border stays, recoloured, so pressing never jumps the layout; the
 * extract's "no border" is read as this same-box recolour, WO-84's
 * decision) — and the label in Medium 500 white (on-accent).
 */
.pm-faq__topic[aria-pressed="true"] {
	background-color: var(--pm-color-accent);
	border-color: var(--pm-color-accent);
	color: var(--pm-color-on-accent);
	font-weight: var(--pm-font-weight-500);
}

/* The button system's recorded focus ring (WO-09 AC 4). */
.pm-faq__topic:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}

/*
 * The page's accordion values (84-faq-page.json#main_content.accordion).
 * The shared writer's row geometry already matches the frame — padding 32
 * block, a 1px bottom rule — restated here with the rule on the extract's
 * surface-alt role, so the page keeps the frame's colour even if the
 * products frame's divider role ever diverges. (0,2,0) above
 * accordion.css's (0,1,0).
 */
.pm-faq .pm-accordion__row {
	padding: var(--pm-space-8) 0;
	border-bottom: 1px solid var(--pm-color-surface-alt);
}

/*
 * The frame draws no top rule — accordion.css's first-row top border is
 * the products frame's closed box. Zeroing it on whatever row is currently
 * first is correct under filtering too: the frame never draws a top rule
 * anywhere, so the rule cannot "come and go" wrongly.
 */
.pm-faq .pm-accordion__row:first-child {
	border-top: 0;
}

/*
 * The filtering contract (WO-84): assets/js/faq.js hides a filtered-out
 * row with the hidden attribute. The shared row carries no display
 * property today, so the UA's [hidden] would work — this rule pins the
 * contract so a future display value on the shared row cannot silently
 * beat the attribute and resurface filtered-out rows.
 */
.pm-faq .pm-accordion__row[hidden] {
	display: none;
}

/*
 * The question: H3 Subtitle Light 24 (the shared __title's size, weight
 * and tracking) in Volcanic Ink, closed AND open — the frame shows every
 * question ink; only the icon carries the accent. (0,2,0)/(0,3,0) above
 * the shared colour rules.
 */
.pm-faq .pm-accordion__toggle,
.pm-faq .pm-accordion__row--open .pm-accordion__toggle {
	color: var(--pm-color-ink);
}

/*
 * 84-faq-page.json#contradictions[4] — the question's style label reads
 * "24 / 1 / -1" but the frame RENDERS the natural line box: the closed row
 * is 92px (32 + ~28 + 32; line-height 1 would give 89). The shared title's
 * line-height 1 is overridden with the leading-normal token, scoped to
 * this page. (0,2,0) above the shared (0,1,0).
 */
.pm-faq .pm-accordion__title {
	line-height: var(--pm-leading-normal);
}

/*
 * The answer is the shared description's own typography — Body Light 16 /
 * 1.6 in texte (body-text) — and the open row's 16px gap is the shared
 * panel-inner's padding-top. The icon stays the shared accent. Neither is
 * restated: accordion.css already carries the frame's values.
 */

/*
 * The no-results line (WO-84 AC 5): role="status", hidden until
 * assets/js/faq.js unhides it when no row is visible. The state is not
 * designed (MISTAKES.md §C12 — error and empty states are not drawn), so
 * the styling is developer judgement: the accordion answer's own type,
 * centred under the list.
 */
.pm-faq__empty {
	margin: 0;
	font-family: var(--pm-font-family-base);
	font-size: 1rem;
	font-weight: var(--pm-font-weight-300);
	line-height: var(--pm-leading-body);
	color: var(--pm-color-body-text);
	text-align: center;
}

/*
 * TODO(open-question): the extract measures one 1440 frame only —
 * MISTAKES.md §C7. Below tablet the step is developer judgement, not
 * design: the head's padding becomes 64 top / 24 sides (the bottom 48
 * kept — the search keeps its air above the rule; the legal head's step,
 * legal.css), the H1 steps to the h2 size (the legal title's own step,
 * legal.css). Owner: the designer, with the missing mobile design.
 */
@media (max-width: 768px) {
	.pm-faq__head {
		padding: var(--pm-space-16) var(--pm-space-6) var(--pm-space-12);
	}

	.pm-faq__title {
		font-size: var(--pm-font-size-h2);
	}
}