/**
 * upcomer/faq-accordion
 *
 * Native <details>/<summary> accordion. Zero JS in the default (multi-open)
 * mode; ~15 lines of JS conditionally enqueued in single-open mode.
 *
 * Animation strategy:
 *  - Modern browsers (Chrome 131+ / Safari 18.2+ with `interpolate-size`):
 *    the ::details-content pseudo-element is animated via `block-size` and
 *    transition-behavior: allow-discrete, giving a smooth height interpolation
 *    between 0 and `auto`.
 *  - Older browsers: <details> falls back to native instant open/close. The
 *    block remains fully functional — only the easing is missing. We
 *    deliberately don't use the max-height transition trick here because it
 *    requires guessing a max value and either clips long answers or leaves
 *    dead air on short ones.
 *
 * No-new-colors compliance (CLAUDE.md → Design conventions):
 *  - Borders, dividers, and muted answer text all derive from `currentColor`
 *    via `color-mix`. The chevron uses `currentColor` directly.
 *
 * Outer vertical rhythm comes from --upcomer-block-rhythm in
 * assets/css/blocks-canvas.css.
 */

.upcomer-block--faq-accordion {
	/* Surfaces */
	--faq-rule: color-mix(in srgb, currentColor 14%, transparent);
	--faq-rule-hover: color-mix(in srgb, currentColor 28%, transparent);
	--faq-bg-hover: color-mix(in srgb, currentColor 3%, transparent);

	/* Foreground */
	--faq-fg: inherit;
	--faq-fg-muted: color-mix(in srgb, currentColor 78%, transparent);

	/* Geometry */
	--faq-row-padding-y: clamp(0.875rem, 1.75vw, 1.125rem);
	--faq-row-padding-x: 0;
	--faq-chevron-size: 1rem;
	--faq-panel-padding-bottom: clamp(0.875rem, 1.75vw, 1.125rem);

	/* Shared content column with the rest of the site (matches gamurs footer). */
	--page-hero-content-max: calc(1px * var(--wp--custom--bottom-nav--container--desktop--max-width, 1200));

	color: var(--faq-fg);
	box-sizing: border-box;
}

.upcomer-block--faq-accordion *,
.upcomer-block--faq-accordion *::before,
.upcomer-block--faq-accordion *::after {
	box-sizing: border-box;
}

/* ---- Content column --------------------------------------------------- */

.upcomer-block--faq-accordion .upcomer-block__inner {
	max-width: var(--page-hero-content-max);
	margin-inline: auto;
}

@media (min-width: 992px) and (max-width: 1248px) {
	.upcomer-block--faq-accordion .upcomer-block__inner {
		max-width: calc(1px * var(--wp--custom--bottom-nav--container--latpop--max-width, 1200));
	}
}

@media (max-width: 991px) {
	.upcomer-block--faq-accordion .upcomer-block__inner {
		max-width: calc(1px * var(--wp--custom--bottom-nav--container--mobile--max-width, 720));
		/* Match the gamurs site-wide mobile gutter (theme.css uses 15px). */
		padding-inline: 15px;
	}
}

/* Narrow the reading column on wide viewports for legibility. Uses the
   shared --upcomer-reading-max token from assets/css/blocks-canvas.css. */
.upcomer-block--faq-accordion .faq {
	max-width: var(--upcomer-reading-max);
}

/* ---- Eyebrow ---------------------------------------------------------- */

.upcomer-block--faq-accordion .upcomer-block__eyebrow {
	max-width: 36rem;
	margin: 0 0 clamp(1.5rem, 3.5vw, 2.5rem);
}

.upcomer-block--faq-accordion .upcomer-block__kicker {
	margin: 0 0 0.5rem;
	font-family: "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--faq-fg-muted);
}

.upcomer-block--faq-accordion .upcomer-block__heading {
	margin: 0;
	font-family: "Barlow Condensed", "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-size: clamp(1.75rem, 3.75vw, 2.75rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* ---- Accordion -------------------------------------------------------- */

.upcomer-block--faq-accordion .faq {
	border-top: 1px solid var(--faq-rule);
}

.upcomer-block--faq-accordion .faq__item {
	border-bottom: 1px solid var(--faq-rule);
	transition: border-color 200ms ease;
}

.upcomer-block--faq-accordion .faq__item:hover {
	border-bottom-color: var(--faq-rule-hover);
}

/* ---- Summary (the clickable row) -------------------------------------- */

.upcomer-block--faq-accordion .faq__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: var(--faq-row-padding-y) var(--faq-row-padding-x);
	margin: 0;
	cursor: pointer;
	list-style: none; /* remove default disclosure triangle in Firefox */
	user-select: none;
}

/* Remove default disclosure triangle in Chrome / Safari. */
.upcomer-block--faq-accordion .faq__summary::-webkit-details-marker {
	display: none;
}

.upcomer-block--faq-accordion .faq__summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

.upcomer-block--faq-accordion .faq__summary:hover {
	background: var(--faq-bg-hover);
}

.upcomer-block--faq-accordion .faq__question {
	font-family: "Barlow Condensed", "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.1875rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--faq-fg);
	text-wrap: balance;
}

/* ---- Chevron ---------------------------------------------------------- */

.upcomer-block--faq-accordion .faq__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--faq-chevron-size);
	height: var(--faq-chevron-size);
	flex-shrink: 0;
	color: var(--faq-fg-muted);
	transition: transform 250ms ease, color 200ms ease;
}

.upcomer-block--faq-accordion .faq__chevron svg {
	width: 100%;
	height: 100%;
}

.upcomer-block--faq-accordion .faq__item[open] .faq__chevron {
	transform: rotate(180deg);
	color: var(--faq-fg);
}

/* ---- Panel (answer body) --------------------------------------------- */

.upcomer-block--faq-accordion .faq__panel {
	padding: 0 0 var(--faq-panel-padding-bottom);
}

.upcomer-block--faq-accordion .faq__answer {
	font-family: "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--faq-fg-muted);
	text-wrap: pretty;
	max-width: 64ch;
}

.upcomer-block--faq-accordion .faq__answer > *:first-child { margin-top: 0; }
.upcomer-block--faq-accordion .faq__answer > *:last-child { margin-bottom: 0; }

.upcomer-block--faq-accordion .faq__answer p { margin: 0 0 0.875em; }
.upcomer-block--faq-accordion .faq__answer p:last-child { margin-bottom: 0; }

.upcomer-block--faq-accordion .faq__answer strong { font-weight: 700; color: currentColor; }
.upcomer-block--faq-accordion .faq__answer em { font-style: italic; }
.upcomer-block--faq-accordion .faq__answer a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

.upcomer-block--faq-accordion .faq__answer ul,
.upcomer-block--faq-accordion .faq__answer ol {
	padding-inline-start: 1.25rem;
	margin: 0 0 0.875em;
}

.upcomer-block--faq-accordion .faq__answer li + li {
	margin-block-start: 0.375rem;
}

/* ---- Smooth open/close animation (progressive enhancement) ----------- */

/* Browsers that support `interpolate-size: allow-keywords` (Chrome 129+,
   Safari TP) animate height between 0 and auto. ::details-content (Chrome
   131+) is the pseudo-element wrapping the children of <details> other than
   <summary>. Older browsers ignore both rules and use native instant snap. */
@supports (interpolate-size: allow-keywords) {
	.upcomer-block--faq-accordion .faq__item {
		interpolate-size: allow-keywords;
	}
	.upcomer-block--faq-accordion .faq__item::details-content {
		block-size: 0;
		overflow-y: clip;
		transition: block-size 280ms ease, content-visibility 280ms ease allow-discrete;
	}
	.upcomer-block--faq-accordion .faq__item[open]::details-content {
		block-size: auto;
	}
}

/* ---- Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.upcomer-block--faq-accordion .faq__chevron,
	.upcomer-block--faq-accordion .faq__item {
		transition: none;
	}
	@supports (interpolate-size: allow-keywords) {
		.upcomer-block--faq-accordion .faq__item::details-content {
			transition: none;
		}
	}
}