/*
 * The two-pane FAQ over core/details: structure shared by the homepage
 * (section 9, VOY-936) and the practice hubs (section 08, VOY-975).
 *
 * Moved here from assets/sections/home-faq.css by VOY-975, unchanged except
 * that the accent is --faq-accent (the homepage sets the site accent, a hub
 * its practice 500) and the panel track divides by --faq-count, which
 * vy-faq.js sets, instead of assuming ten questions.
 *
 * Each surface still owns its section padding and header in its own file.
 * The server HTML is core/details, styled here as a numbered accordion: that
 * is the FAQ without JavaScript and under 1024px. From 1024px up, vy-faq.js
 * adds .is-index and a sticky answer panel, and the rules under "Two-pane
 * index" take over.
 *
 * NUMBERS are a CSS counter, not text in the summary. inc/schema.php reads
 * the summary as the Question name, so a digit there would reach search.
 */

.vy-faq {
	--faq-accent: var(--accent-bright);
	--faq-ease: cubic-bezier(0.2, 0, 0, 1);
	/* Lets the accordion animate to height: auto. Browsers without it snap. */
	interpolate-size: allow-keywords;
}

/* ---- Accordion: no JavaScript, and under 1024px ------------------------------ */

.vy-faq .vy-faq__list {
	counter-reset: faq;
	border-bottom: 1px solid var(--border-hair);
}

/* custom.css paints every .wp-block-details as a bordered card with an 8px gap
   and restyles its summary and body. Three classes here outrank all of it
   whatever the load order; do not shorten these selectors. */
.vy-faq .vy-faq__list > .vy-faq__item,
.vy-faq .vy-faq__list > .vy-faq__item:hover,
.vy-faq .vy-faq__list > .vy-faq__item[open] {
	counter-increment: faq;
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--border-hair);
	border-radius: 0;
	background: transparent;
}

.vy-faq .vy-faq__item > summary {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) 24px;
	gap: 0;
	align-items: baseline;
	min-height: 44px;
	padding: 13px 0;
	box-sizing: border-box;
	list-style: none;
	cursor: pointer;
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--fg-1);
}
.vy-faq .vy-faq__item > summary::-webkit-details-marker { display: none; }

.vy-faq .vy-faq__item > summary::before {
	content: counter(faq, decimal-leading-zero);
	font-family: var(--font-display);
	font-size: 17px;
	color: var(--border-strong);
	transition: color 220ms var(--faq-ease);
}
.vy-faq .vy-faq__item[open] > summary::before { color: var(--faq-accent); }

.vy-faq .vy-faq__item > summary::after {
	content: "+";
	justify-self: end;
	font-family: var(--font-mono);
	font-size: 18px;
	line-height: 1;
	color: var(--fg-4);
}
.vy-faq .vy-faq__item[open] > summary::after { content: "\2212"; color: var(--faq-accent); }

.vy-faq .vy-faq__item > summary:focus-visible {
	outline: 2px solid var(--faq-accent);
	outline-offset: 2px;
}

.vy-faq .vy-faq__item::details-content {
	block-size: 0;
	overflow: clip;
	transition: block-size 320ms var(--faq-ease), content-visibility 320ms allow-discrete;
}
.vy-faq .vy-faq__item[open]::details-content { block-size: auto; }

.vy-faq .vy-faq__a,
.vy-faq .vy-faq__link {
	max-width: calc(var(--wp--style--global--content-size, 760px) + 46px);
	box-sizing: border-box;
	padding: 0 0 0 46px;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--fg-2);
}
.vy-faq .vy-faq__item > :last-child { padding-bottom: 18px; }
.vy-faq .vy-faq__link { margin-top: 10px; }
.vy-faq .vy-faq__link a {
	color: var(--faq-accent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.vy-faq .vy-faq__link a:hover,
.vy-faq .vy-faq__link a:focus-visible { border-bottom-width: 2px; }

/* ---- Two-pane index: 1024px and up, JavaScript on ----------------------------- */

.vy-faq.is-index .vy-faq__body {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 56px;
	align-items: start;
}

/* The answers live in the panel now; the details stay closed. */
.vy-faq.is-index .vy-faq__item::details-content { display: none; }

.vy-faq.is-index .vy-faq__item > summary {
	grid-template-columns: 44px minmax(0, 1fr) 30px;
	align-items: center;
	padding: 15px 16px;
	font-size: 18px;
	color: var(--fg-4);
	transition: color 220ms var(--faq-ease), background-color 220ms var(--faq-ease);
}
.vy-faq.is-index .vy-faq__item > summary::before { font-size: 20px; }
.vy-faq.is-index .vy-faq__item[open] > summary::before { color: var(--border-strong); }

/* The right marker: a 2px line that grows on the active row. */
.vy-faq.is-index .vy-faq__item > summary::after {
	content: "";
	width: 10px;
	height: 2px;
	background: var(--border-1);
	transition: width 250ms var(--faq-ease), background-color 250ms var(--faq-ease);
}

.vy-faq.is-index .vy-faq__item.is-active > summary {
	background: var(--bg-panel);
	color: var(--fg-1);
}
.vy-faq.is-index .vy-faq__item.is-active > summary::before { color: var(--faq-accent); }
.vy-faq.is-index .vy-faq__item.is-active > summary::after {
	width: 28px;
	background: var(--faq-accent);
}
.vy-faq.is-index .vy-faq__item > summary:focus-visible { outline-offset: -2px; }

.vy-faq .vy-faq__panel {
	position: sticky;
	top: 40px;
	display: flex;
	flex-direction: column;
	min-height: 420px;
	max-height: calc(100vh - 80px);
	overflow: auto;
	box-sizing: border-box;
	padding: 36px 40px;
	border: 1px solid var(--border-1);
	border-radius: 16px;
	background:
		radial-gradient(circle at 100% 0, color-mix(in srgb, var(--faq-accent) 14%, transparent), transparent 48%),
		var(--bg-panel);
}

.vy-faq .vy-faq__pmeta {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 22px;
}
.vy-faq .vy-faq__pnum {
	font-family: var(--font-display);
	font-size: 64px;
	font-weight: 500;
	line-height: 0.9;
	color: var(--faq-accent);
}
.vy-faq .vy-faq__pgroup {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-4);
}
.vy-faq .vy-faq__pq {
	margin: 0 0 16px;
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--fg-1);
}
.vy-faq .vy-faq__pa {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--fg-2);
}
.vy-faq .vy-faq__panel .vy-faq__pa { max-width: none; padding: 0; font-size: 17px; line-height: 1.65; }
.vy-faq .vy-faq__panel .vy-faq__link {
	margin-top: 18px;
	padding: 0;
	font-size: 17px;
}

.vy-faq .vy-faq__pbody.is-in { animation: vy-faq-in 420ms var(--faq-ease) both; }
@keyframes vy-faq-in {
	from { opacity: 0; transform: translateY(6px); filter: blur(6px); }
	to { opacity: 1; transform: none; filter: none; }
}

.vy-faq .vy-faq__pfoot {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: auto;
	padding-top: 32px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-4);
}
.vy-faq .vy-faq__ptrack {
	position: relative;
	flex: 1;
	height: 1px;
	background: var(--border-hair);
}
.vy-faq .vy-faq__pfill {
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--faq-pos, 1) / var(--faq-count, 10) * 100%);
	background: var(--faq-accent);
	transition: width 250ms var(--faq-ease);
}

/* ---- Reduced motion: instant swaps, no blur, no height animation ------------------ */

@media (prefers-reduced-motion: reduce) {
	.vy-faq .vy-faq__item::details-content { transition: none; }
	.vy-faq .vy-faq__pbody.is-in { animation: none; }
	.vy-faq .vy-faq__item > summary,
	.vy-faq .vy-faq__item > summary::before,
	.vy-faq .vy-faq__item > summary::after,
	.vy-faq .vy-faq__pfill { transition: none; }
}