/**
 * Pattern: FAQ Collapsible  (patterns/faq-collapsible.php)
 *
 * No Figma frame — apply-system fidelity (build-tracker P11). Restyles the
 * shared collapsible utility (assets/js/collapsible.js,
 * assets/css/patterns/collapsible.css — both read, not edited) for the
 * FAQs page: a white (--kd-color-base) rounded trigger row per question,
 * DynaPuff navy text, a chevron, a --kd-color-tint hover, and an 18/26
 * body-ink answer. Every override below is scoped under `.faq-collapsible`
 * so it never leaks onto any other pattern that later opts into the same
 * shared `.kd-collapsible`/`.kd-collapsible-toggle` classes.
 *
 * Trigger font-size is a single flat token (22px, the x-large preset) at
 * every breakpoint — deliberately not re-declared per breakpoint, per the
 * project convention that a type spec is set once and referenced, not
 * redeclared per pattern/breakpoint.
 *
 * Round-1 gate: collapsible.js now nests the trigger button INSIDE the
 * question's `<h3>` (WAI-ARIA APG accordion — the heading is never hidden)
 * instead of hiding the heading and inserting a sibling button. The h3
 * reset below (`.kd-collapsible-heading`) strips its own margin/type so
 * the button alone carries the visible typography — this is the "reset
 * the h3's margin/font" adjustment called for in the gate note, kept in
 * this pattern's own partial; `assets/css/patterns/collapsible.css` is
 * still untouched.
 */

/* padding-block 2-value shorthand: --dfd-section-pad (top, internal
   rhythm) / --kd-section-gap (bottom, PG-POLISH-1 — this is the last
   section on the FAQs page; same trailing-footer-space token as
   gallery-grid.css/sponsor-tiers.css). FAQs-only by construction — a
   page reusing this pattern as a non-final section stacks this on top
   of the owl's own --kd-section-gap margin and must re-check the total.
   Intro alignment on this page was already correct pre-PG-POLISH-1
   (heading.x == logo.x, verified) — no P8-fix needed here. */
.faq-collapsible {
	padding-block: var(--dfd-section-pad) var(--kd-section-gap);
}

.faq-collapsible__heading {
	text-align: left;
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: var(--dfd-size-h2-section);
	letter-spacing: var(--dfd-track-heading);
	color: var(--kd-color-contrast);
	margin-top: 0;
	margin-bottom: var(--kd-gap-section);
}

.faq-collapsible__list {
	max-width: var(--kd-measure-grid);
}

/* 12px gap between rows. */
.faq-collapsible__item + .faq-collapsible__item {
	margin-top: 0.75rem;
}

/* The trigger button now lives inside the question's h3 (see the docblock
   above) — reset the heading itself to zero so only the button's own
   typography/spacing (below) is visible. */
.faq-collapsible .kd-collapsible-heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	font-variation-settings: normal;
	letter-spacing: normal;
	text-shadow: none;
	line-height: 1;
}

/* ── Trigger row — overrides the shared utility's default yellow-pill
   button look (collapsible.css) with a white rounded row + chevron. ──── */
.faq-collapsible .kd-collapsible-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kd-gap-normal);
	width: 100%;
	margin-top: 0;
	padding: 1rem 1.5rem;
	background-color: var(--kd-color-base);
	color: var(--kd-color-contrast);
	border: none;
	border-radius: var(--kd-radius-md); /* 12px */
	font-family: var(--kd-font-heading);
	font-size: var(--wp--preset--font-size--x-large); /* 22px */
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	text-align: left;
	transition: background-color 200ms ease;
}

.faq-collapsible .kd-collapsible-toggle:hover {
	background-color: var(--kd-color-tint);
	color: var(--kd-color-contrast);
	transform: none;
}

.faq-collapsible .kd-collapsible-toggle:focus-visible {
	outline: 3px solid var(--kd-color-contrast);
	outline-offset: 2px;
}

/* Chevron — CSS-only triangle (no raster/SVG asset), tokens via currentColor. */
.faq-collapsible .kd-collapsible-toggle::after {
	content: "";
	flex: 0 0 auto;
	width: 0.6875rem;
	height: 0.6875rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 200ms ease;
}

.faq-collapsible .kd-collapsible-toggle[aria-expanded="true"]::after {
	transform: rotate(-135deg);
}

/* ── Answer ─────────────────────────────────────────────────────────── */
.faq-collapsible .kd-collapsible-content {
	margin-top: 0;
	padding: 0.5rem 1.5rem 1.25rem;
}

.faq-collapsible__answer {
	font-family: var(--kd-font-body);
	font-size: 1.125rem; /* 18px */
	line-height: 1.444; /* 26/18 */
	color: var(--kd-color-body);
	margin: 0;
}

@media (max-width: 767.98px) {
	.faq-collapsible .kd-collapsible-toggle {
		padding: 0.875rem 1.125rem;
	}

	.faq-collapsible .kd-collapsible-content {
		padding: 0.5rem 1.125rem 1rem;
	}
}