/* =============================================================================
 * single-faq.css — FAQ CPT single-post template styles.
 *
 * Three layouts selected via [data-mvc-faq-layout]:
 *   "classic"    — centered, balanced
 *   "hero-card"  — dark hero, short-answer card overlaps body
 *   "editorial"  — magazine-style asymmetric grid with NAP sidebar
 *
 * Every variant rule MUST carry its [data-mvc-faq-layout="..."] ancestor so
 * the variants do not leak across layouts.
 * ============================================================================= */

/* ── Shared body container ────────────────────────────────────────────────── */
.mvc-main--faq .mvc-faq__body {
	max-width: var(--mvc-measure-wide, 72ch);
	padding-block: var(--space-12) var(--space-20);
	display: grid;
	gap: var(--space-12);
}

/* ── Hero (shared base) ───────────────────────────────────────────────────── */
.mvc-faq-hero {
	padding-block: var(--space-16) var(--space-14);
	position: relative;
}

.mvc-faq-hero__inner,
.mvc-faq-hero__grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.mvc-faq-hero__cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mvc-faq-hero__cats li a {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	border-radius: 999px;
	font-size: var(--font-size-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	background: var(--color-surface-2, rgba(0, 0, 0, 0.06));
	color: var(--color-text-primary);
	transition: background-color 0.15s ease;
}

.mvc-faq-hero__cats li a:hover,
.mvc-faq-hero__cats li a:focus {
	background: var(--color-accent-soft, var(--color-primary-100, rgba(0, 0, 0, 0.12)));
}

.mvc-faq-hero__eyebrow {
	margin: 0;
	font-size: var(--font-size-sm);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.mvc-faq-hero__question {
	margin: 0;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.01em;
	max-width: 32ch;
}

/* ── Layout: classic ──────────────────────────────────────────────────────── */
[data-mvc-faq-layout="classic"] .mvc-faq-hero--classic {
	text-align: center;
	background: var(--color-surface-1, var(--color-bg-alt, #fafafa));
	border-bottom: 1px solid var(--color-border-soft, rgba(0, 0, 0, 0.06));
}

[data-mvc-faq-layout="classic"] .mvc-faq-hero--classic .mvc-faq-hero__inner {
	align-items: center;
	text-align: center;
}

[data-mvc-faq-layout="classic"] .mvc-faq-hero--classic .mvc-faq-hero__question {
	max-width: 28ch;
	margin-inline: auto;
}

/* The classic hero sits on a light --color-surface-1 background. When the site
   body carries a dark data-bg-preset + data-bp-text="light", bg-presets.css
   forces every H1 to #fff !important — which turns this title white-on-light.
   Re-assert the readable heading colour (must be !important to beat that rule). */
[data-mvc-faq-layout="classic"] .mvc-faq-hero--classic .mvc-faq-hero__question {
	color: var(--color-text-primary) !important;
}

[data-mvc-faq-layout="classic"] .mvc-faq-hero--classic .mvc-faq-hero__eyebrow {
	color: var(--color-text-muted) !important;
}

[data-mvc-faq-layout="classic"] .mvc-faq__body {
	margin-inline: auto;
}

/* ── Layout: hero-card ────────────────────────────────────────────────────── */
[data-mvc-faq-layout="hero-card"] .mvc-faq-hero--card {
	padding-block: var(--space-20) var(--space-24);
	color: var(--color-on-dark, #fff);
	margin-bottom: calc(var(--space-16) * -1); /* short-answer card overlaps */
}

[data-mvc-faq-layout="hero-card"] .mvc-faq-hero--card .mvc-faq-hero__eyebrow {
	color: var(--color-on-dark-muted, rgba(255, 255, 255, 0.7));
}

[data-mvc-faq-layout="hero-card"] .mvc-faq-hero--card .mvc-faq-hero__question {
	color: var(--color-on-dark, #fff);
	max-width: 24ch;
}

[data-mvc-faq-layout="hero-card"] .mvc-faq-hero--card .mvc-faq-hero__cats li a {
	background: rgba(255, 255, 255, 0.12);
	color: var(--color-on-dark, #fff);
}

[data-mvc-faq-layout="hero-card"] .mvc-faq-hero--card .mvc-faq-hero__cats li a:hover,
[data-mvc-faq-layout="hero-card"] .mvc-faq-hero--card .mvc-faq-hero__cats li a:focus {
	background: rgba(255, 255, 255, 0.22);
}

[data-mvc-faq-layout="hero-card"] .mvc-faq__body {
	position: relative;
	z-index: 1;
}

[data-mvc-faq-layout="hero-card"] .mvc-faq__short-answer {
	background: var(--color-surface-0, #fff);
	border: 1px solid var(--color-border-soft, rgba(0, 0, 0, 0.08));
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.04),
		0 12px 32px rgba(0, 0, 0, 0.12);
	margin-top: 0;
}

/* ── Layout: editorial ────────────────────────────────────────────────────── */
[data-mvc-faq-layout="editorial"] .mvc-faq-hero--editorial {
	padding-block: var(--space-16) var(--space-14);
	border-bottom: 1px solid var(--color-border-soft, rgba(0, 0, 0, 0.08));
}

[data-mvc-faq-layout="editorial"] .mvc-faq-hero--editorial .mvc-faq-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
	gap: var(--space-12);
	align-items: start;
}

@media (max-width: 860px) {
	[data-mvc-faq-layout="editorial"] .mvc-faq-hero--editorial .mvc-faq-hero__grid {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}

[data-mvc-faq-layout="editorial"] .mvc-faq-hero--editorial .mvc-faq-hero__main {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

[data-mvc-faq-layout="editorial"] .mvc-faq-hero--editorial .mvc-faq-hero__qmark {
	margin: 0;
	font-family: var(--font-display, var(--font-heading, inherit));
	font-size: clamp(3.5rem, 2rem + 4vw, 5.5rem);
	line-height: 0.9;
	font-weight: 800;
	color: var(--color-accent, var(--color-primary, currentColor));
	letter-spacing: -0.02em;
}

[data-mvc-faq-layout="editorial"] .mvc-faq-hero--editorial .mvc-faq-hero__question {
	max-width: 22ch;
	font-size: clamp(2rem, 1.4rem + 2.8vw, 3.5rem);
}

/* Same light-surface hero as classic — re-assert a readable title colour so a
   dark body data-bg-preset can't force this H1 to #fff !important. */
[data-mvc-faq-layout="editorial"] .mvc-faq-hero--editorial .mvc-faq-hero__question {
	color: var(--color-text-primary) !important;
}

/* NAP sidebar */
[data-mvc-faq-layout="editorial"] .mvc-faq-hero__nap {
	padding: var(--space-6);
	background: var(--color-surface-1, var(--color-bg-alt, #fafafa));
	border: 1px solid var(--color-border-soft, rgba(0, 0, 0, 0.08));
	border-radius: var(--radius-lg, 12px);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

[data-mvc-faq-layout="editorial"] .mvc-faq-hero__nap-eyebrow {
	margin: 0;
	font-size: var(--font-size-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

[data-mvc-faq-layout="editorial"] .mvc-faq-hero__nap-name {
	margin: 0;
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--color-text-primary);
}

[data-mvc-faq-layout="editorial"] .mvc-faq-hero__nap-address {
	margin: 0;
	font-style: normal;
	font-size: var(--font-size-sm);
	line-height: 1.5;
	color: var(--color-text-secondary, var(--color-text-muted));
}

[data-mvc-faq-layout="editorial"] .mvc-faq-hero__nap-contacts {
	list-style: none;
	margin: var(--space-2) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	border-top: 1px solid var(--color-border-soft, rgba(0, 0, 0, 0.08));
	padding-top: var(--space-4);
}

[data-mvc-faq-layout="editorial"] .mvc-faq-hero__nap-link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-decoration: none;
	color: var(--color-text-primary);
	font-weight: 600;
}

[data-mvc-faq-layout="editorial"] .mvc-faq-hero__nap-link:hover,
[data-mvc-faq-layout="editorial"] .mvc-faq-hero__nap-link:focus {
	color: var(--color-accent, var(--color-primary));
}

[data-mvc-faq-layout="editorial"] .mvc-faq-hero__nap-label {
	font-size: var(--font-size-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* ── Short answer card (shared, restyled) ─────────────────────────────────── */
.mvc-faq__short-answer {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-5);
	align-items: start;
	padding: var(--space-6) var(--space-7);
	background: var(--color-surface-1, var(--color-bg-alt, #fafafa));
	border-left: 4px solid var(--color-accent, var(--color-primary, currentColor));
	border-radius: var(--radius-md, 8px);
}

.mvc-faq__amark {
	font-family: var(--font-display, var(--font-heading, inherit));
	font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
	line-height: 0.9;
	font-weight: 800;
	color: var(--color-accent, var(--color-primary, currentColor));
	letter-spacing: -0.02em;
}

.mvc-faq__short-answer-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.mvc-faq__short-answer-label {
	margin: 0;
	font-size: var(--font-size-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.mvc-faq__short-answer-text {
	margin: 0;
	font-size: var(--font-size-xl, 1.25rem);
	line-height: 1.5;
	font-weight: 500;
	color: var(--color-text-primary);
}

/* ── Expanded answer ──────────────────────────────────────────────────────── */
.mvc-faq__expanded {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.mvc-faq__expanded-title {
	margin: 0;
	font-size: var(--font-size-2xl, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.005em;
}

.mvc-faq__expanded-body > * + * {
	margin-top: var(--space-4);
}

/* Editorial layout — drop-cap-ish first paragraph */
[data-mvc-faq-layout="editorial"] .mvc-faq__expanded-body > p:first-of-type {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-primary);
}

/* ── Related links ────────────────────────────────────────────────────────── */
.mvc-faq__related-links {
	display: grid;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-6);
	background: var(--color-surface-1, var(--color-bg-alt, #fafafa));
	border-radius: var(--radius-md, 8px);
}

.mvc-faq__related-group {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-3);
}

.mvc-faq__related-label {
	font-size: var(--font-size-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.mvc-faq__related-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
}

.mvc-faq__related-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	text-decoration: none;
	color: var(--color-accent, var(--color-primary));
	font-weight: 600;
}

.mvc-faq__related-link:hover,
.mvc-faq__related-link:focus {
	text-decoration: underline;
}

/* ── More FAQs ────────────────────────────────────────────────────────────── */
.mvc-faq__more {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.mvc-faq__more-title {
	margin: 0;
	font-size: var(--font-size-xl, 1.25rem);
	font-weight: 700;
	letter-spacing: -0.005em;
}

.mvc-faq__more-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-3);
}

.mvc-faq__more-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	background: var(--color-surface-0, #fff);
	border: 1px solid var(--color-border-soft, rgba(0, 0, 0, 0.08));
	border-radius: var(--radius-md, 8px);
	text-decoration: none;
	color: var(--color-text-primary);
	font-weight: 600;
	line-height: 1.4;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.mvc-faq__more-link:hover,
.mvc-faq__more-link:focus {
	border-color: var(--color-accent, var(--color-primary));
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.mvc-faq__more-arrow {
	color: var(--color-accent, var(--color-primary));
	flex-shrink: 0;
}