/*
 * FAQ Page — Category tabs + borderless accordion + contact CTA.
 *
 * Accordion items reuse is-style-wpdl-faq from faq.css (always loaded).
 * Category tabs follow the same horizontal-scroll chip mechanic as My Account
 * nav on tablet/mobile, but active underline is terracotta (not primary/black).
 *
 * Tokens read:
 *   color.terracotta.500           — kicker, active tab underline
 *   semantic.color.text.primary    — heading, active tab, accordion questions,
 *                                    CTA heading, CTA link
 *   semantic.color.text.muted      — inactive tabs
 *   semantic.color.border.base     — tab bar borders, CTA divider
 *   semantic.typography.display    — heading, CTA heading (Cormorant)
 *   semantic.typography.body       — kicker, tabs, CTA link (Jost)
 *   space.2 – 10
 *   duration.base / easing.default
 */

/* ── Page wrapper ─────────────────────────────────────────────────────── */

.wpdl-faq-page.wp-block-group {
	padding-block: var(--wp--custom--space--9) var(--wp--custom--space--10);
	margin-block: 0;
}

/* ── Page header ──────────────────────────────────────────────────────── */

.wpdl-faq-page__kicker {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--accent--primary);
	margin-block: 0 var(--wp--custom--space--4);
}

.wpdl-faq-page__heading.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.3125rem, 0.7rem + 2.68vw, 2.375rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--8);
}

/* ── Category tabs ────────────────────────────────────────────────────── */

.wpdl-faq-page__tabs.wp-block-group {
	gap: var(--wp--custom--space--8);
	padding-block: var(--wp--custom--space--6);
	border-block-start: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
	border-block-end: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
	margin-block: 0 var(--wp--custom--space--8);
}

.wpdl-faq-page__tab {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0;
	cursor: pointer;
	padding-block-end: var(--wp--custom--space--2);
	border-block-end: 0.0938rem solid transparent;
	white-space: nowrap;
	transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-faq-page__tab:hover {
	color: var(--wp--custom--semantic--color--text--primary);
}

.wpdl-faq-page__tab.is-active {
	color: var(--wp--custom--semantic--color--text--primary);
	border-block-end-color: var(--wp--custom--semantic--color--accent--primary);
}

/* ── Accordion wrapper ────────────────────────────────────────────────── */

.wpdl-faq-page__accordion.wp-block-group {
	max-inline-size: 45rem;
	margin-inline: auto;
	margin-block: 0 var(--wp--custom--space--9);
}

/* ── "Still have a question?" CTA ────────────────────────────────────── */

.wpdl-faq-page__cta-divider.wp-block-separator {
	border: none;
	border-block-end: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
	opacity: 1;
	margin-block: 0;
}

.wpdl-faq-page__cta.wp-block-group {
	padding-block: var(--wp--custom--space--8);
	gap: var(--wp--custom--space--4);
	margin-block: 0;
}

.wpdl-faq-page__cta-heading.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.0625rem, 0.85rem + 0.89vw, 1.375rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
}

.wpdl-faq-page__cta-link-wrap {
	margin-block: 0;
}

.wpdl-faq-page__cta-link {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--primary);
	text-decoration: underline;
	text-underline-offset: var(--wp--custom--space--1);
}

/* ── Tablet (< 64em / 1024px) ────────────────────────────────────────── */

@media (width < 64em) {
	.wpdl-faq-page__tabs.wp-block-group {
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
		gap: var(--wp--custom--space--6);
	}

	.wpdl-faq-page__tabs.wp-block-group::-webkit-scrollbar {
		display: none;
	}
}

/* ── Mobile (< 40em / 640px) ─────────────────────────────────────────── */

@media (width < 40em) {
	.wpdl-faq-page.wp-block-group {
		padding-block: var(--wp--custom--space--7) var(--wp--custom--space--8);
	}

	.wpdl-faq-page__tabs.wp-block-group {
		gap: var(--wp--custom--space--5);
	}
}

/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.wpdl-faq-page__tab {
		transition: none;
	}
}