/**
 * Page FAQ — templates/template-faq.php only.
 *
 * Reused as-is, nothing redefined: color/spacing/type/radius tokens,
 * .container, .breadcrumb / .page-header* (main.css component 12),
 * .accordion (main.css component 10), .card, .btn. Only this page's own
 * new pieces live here: the sticky category nav (+ its .is-active
 * state, toggled by assets/js/faq-page.js), category-section spacing,
 * and the closing "still have questions" block. No new tokens.
 */

/* =========================================================
   Sticky category nav — real <nav><a href="#anchor"> links, NOT ARIA
   tabs (nothing here hides/shows a panel — see the template's docblock).
   Same segmented-control pill visual language as
   templates/template-abonnements.php's account-count tabs, reused for
   visual consistency even though the interaction model is different.
   Sticky at every width (no separate desktop/mobile treatment) — see
   the template's docblock for why a full sidebar layout wasn't used.
   ========================================================= */

.faq-page-nav {
	position: sticky;
	top: var(--header-height);
	z-index: 10;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--space-3);
}

.faq-page-nav__list {
	display: flex;
	justify-content: center;
	overflow-x: auto;
	gap: var(--space-2);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.faq-page-nav__list::-webkit-scrollbar {
	display: none;
}

.faq-page-nav__link {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem; /* 44px touch target — padding+line-height alone falls short */
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--duration-base) var(--ease-standard),
		color var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard);
}

.faq-page-nav__link:hover {
	color: var(--color-text);
	border-color: var(--color-border-strong);
}

.faq-page-nav__link.is-active {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-accent-ink);
}

/* =========================================================
   Category sections — scroll-margin-top keeps a jumped-to (or
   smooth-scrolled-to, via main.css's global `scroll-behavior: smooth`)
   heading from landing behind the fixed site header + this sticky nav.
   ========================================================= */

.faq-category {
	scroll-margin-top: calc(var(--header-height) + 4.5rem);
}

.faq-category + .faq-category {
	margin-top: var(--space-11);
}

.faq-category__title {
	max-width: var(--container-reading);
	margin-inline: auto;
	margin-bottom: var(--space-6);
	text-align: center;
}

.faq-category__accordion {
	max-width: var(--container-reading);
	margin-inline: auto;
}

.faq-category__accordion .accordion__question {
	font-size: var(--fs-base);
}

/* =========================================================
   Closing "still have questions" block.
   ========================================================= */

.faq-page-closing {
	border-top: 1px solid var(--color-border);
}

.faq-page-closing__box {
	max-width: var(--container-reading);
	margin-inline: auto;
	text-align: center;
}

.faq-page-closing__subcopy {
	margin-top: var(--space-3);
}

.faq-page-closing__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
	margin-top: var(--space-6);
}