/**
 * FAQ page (page-faq.php)
 *
 * Category list left, that category's accordions right. The rows themselves are
 * the shared `.accordion` component, so they match the product page exactly.
 *
 * Two states:
 *   default      every panel stacked and visible — the no-JavaScript reading
 *   .is-tabbed   added by main.js; one panel at a time, sidebar acts as tabs
 */

.faq {
	display: grid;
	grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
	gap: clamp(var(--space-8), 6vw, var(--space-24));
	align-items: start;
}

.faq__intro {
	margin-bottom: clamp(var(--space-8), 5vw, var(--space-16));
}

/* --- Category list --- */

.faq__nav {
	position: sticky;
	top: calc(var(--control-height) + var(--space-8));
	min-width: 0;
}

.faq__nav-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	margin: 0;
}

.faq__nav-link {
	display: block;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	line-height: var(--line-snug);
	color: var(--color-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.faq__nav-link:hover {
	color: var(--color-heading);
}

/* The current category reads as the heading for what is on the right. */
.faq__nav-link.is-active {
	font-weight: var(--weight-semibold);
	color: var(--color-heading);
}

.faq__nav-link:focus-visible {
	outline: var(--border-width-strong) solid var(--color-border-strong);
	outline-offset: 3px;
}

/* --- Panels --- */

.faq__panels {
	min-width: 0;
}

/* Stacked reading order: each panel keeps its own visible heading. */
.faq__panel + .faq__panel {
	margin-top: clamp(var(--space-10), 5vw, var(--space-16));
}

.faq__panel-title {
	font-family: var(--font-heading);
	font-size: 1.125rem; /* 18px — the flat page-title size */
	font-weight: var(--weight-medium);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-heading);
	margin: 0 0 var(--space-6);
}

/* --- Tabbed (JavaScript) --- */

.faq.is-tabbed .faq__panel {
	display: none;
	margin-top: 0;
}

.faq.is-tabbed .faq__panel.is-active {
	display: block;
}

/*
 * The sidebar already names the open category, so the panel heading would be a
 * duplicate on screen — keep it for screen readers, which use it to label the
 * tab panel.
 */
.faq.is-tabbed .faq__panel-title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 60rem) {
	.faq {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	/* Nothing to stay level with once the list sits above the panels. */
	.faq__nav {
		position: static;
	}

	.faq__nav-list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--space-3) var(--space-5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.faq__nav-link {
		transition: none;
	}
}