/*
 * FAQ Page — page-specific styles (Phase 13 · FAQ)
 * "Dark Forest / Imperial Gold / Cream"
 * Loaded on the `faq` page on top of css/policy-pages.css (.eh-policy shell).
 * Scoped under .eh-faq. Shell provides: container, eyebrow, gold, page-head,
 * stats, section, closing band, btn/btn-gold/arrow, breadcrumbs.
 * Ported from design bundle FAQ.html (raw classes → eh- prefix; tokens → --eh-*).
 * Accordion is native <details>/<summary> + ::details-content — no JS.
 */

/* === Hero lede === */
.eh-faq .eh-faq-lede {
	font-size: 18px;
	line-height: 1.75;
	color: rgba(248, 245, 240, 0.82);
	max-width: 640px;
	margin: 30px 0 0;
}

/* === Body layout === */
.eh-faq .eh-faq-body { padding: 80px 0 100px; }
.eh-faq .eh-faq-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 72px;
	align-items: start;
}
@media (max-width: 960px) {
	.eh-faq .eh-faq-layout { grid-template-columns: 1fr; gap: 48px; }
}

/* === Category group === */
.eh-faq .eh-faq-group { margin-bottom: 64px; }
.eh-faq .eh-faq-group:last-child { margin-bottom: 0; }
.eh-faq .eh-faq-group-head {
	display: flex;
	align-items: baseline;
	gap: 18px;
	margin-bottom: 8px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--eh-line);
}
.eh-faq .eh-faq-group-head .eh-gnum {
	font-family: var(--eh-font-display);
	font-style: italic;
	font-size: 16px;
	color: var(--eh-gold-600);
	flex-shrink: 0;
}
.eh-faq .eh-faq-group-head h2 {
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 500;
}
.eh-faq .eh-faq-group-head h2 .eh-gold { color: var(--eh-gold-500); font-style: italic; font-weight: 400; }

/* === Accordion === */
.eh-faq .eh-faq-q { border-bottom: 1px solid var(--eh-line); }
.eh-faq .eh-faq-q-head {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 28px 4px;
}
.eh-faq .eh-faq-q-head::-webkit-details-marker { display: none; }
.eh-faq .eh-faq-q-num {
	font-family: var(--eh-font-display);
	font-style: italic;
	font-size: 18px;
	color: var(--eh-gold-600);
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}
.eh-faq .eh-faq-q-head h3 {
	font-family: var(--eh-font-display);
	font-size: clamp(19px, 2vw, 25px);
	font-weight: 500;
	color: var(--eh-forest-900);
	line-height: 1.3;
	margin: 0;
	flex: 1;
}
.eh-faq .eh-faq-q[open] .eh-faq-q-head h3 { color: var(--eh-gold-600); }
.eh-faq .eh-faq-q-toggle {
	width: 38px; height: 38px;
	flex-shrink: 0;
	border: 1px solid var(--eh-line);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	color: var(--eh-forest-700);
	transition: all .3s;
}
.eh-faq .eh-faq-q-toggle::before,
.eh-faq .eh-faq-q-toggle::after {
	content: ""; position: absolute; background: currentColor;
	transition: transform .3s, opacity .3s;
}
.eh-faq .eh-faq-q-toggle::before { width: 12px; height: 1.5px; }
.eh-faq .eh-faq-q-toggle::after { width: 1.5px; height: 12px; }
.eh-faq .eh-faq-q-head:hover .eh-faq-q-toggle { border-color: var(--eh-gold-500); color: var(--eh-gold-600); }
.eh-faq .eh-faq-q[open] .eh-faq-q-toggle { background: var(--eh-gold-500); border-color: var(--eh-gold-500); color: var(--eh-forest-900); }
.eh-faq .eh-faq-q[open] .eh-faq-q-toggle::after { transform: scaleY(0); opacity: 0; }

.eh-faq .eh-faq-q::details-content {
	block-size: 0; overflow: clip; opacity: 0;
	transition: block-size .4s ease, opacity .4s ease, content-visibility .4s allow-discrete;
}
.eh-faq .eh-faq-q[open]::details-content { block-size: auto; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.eh-faq .eh-faq-q::details-content { transition: none; }
}

.eh-faq .eh-faq-q-body { padding: 0 4px 32px 66px; }
@media (max-width: 600px) {
	.eh-faq .eh-faq-q-body { padding-left: 4px; }
}
.eh-faq .eh-faq-q-body p {
	margin: 0;
	font-size: 16px;
	line-height: 1.85;
	color: var(--eh-ink-700);
	max-width: 620px;
}
.eh-faq .eh-faq-q-body p + p { margin-top: 1em; }
.eh-faq .eh-faq-q-body strong { color: var(--eh-forest-900); font-weight: 700; }
.eh-faq .eh-faq-q-body em { font-family: var(--eh-font-display); font-style: italic; color: var(--eh-herb-600); }
.eh-faq .eh-faq-q-body a { color: var(--eh-forest-900); border-bottom: 1px solid var(--eh-gold-500); transition: color .2s; }
.eh-faq .eh-faq-q-body a:hover { color: var(--eh-gold-600); }

/* === Format mini-table (inside formats Q) === */
.eh-faq .eh-faq-formats {
	display: grid; gap: 0; margin-top: 18px; max-width: 620px;
	border-top: 1px solid var(--eh-line);
}
.eh-faq .eh-faq-format-row {
	display: grid; grid-template-columns: 130px 1fr; gap: 20px;
	padding: 14px 0; border-bottom: 1px solid var(--eh-line); align-items: baseline;
}
.eh-faq .eh-faq-format-row .eh-ff-k {
	font-family: var(--eh-font-display); font-size: 17px; color: var(--eh-forest-900); font-style: italic;
}
.eh-faq .eh-faq-format-row .eh-ff-v { font-size: 14px; color: var(--eh-ink-500); line-height: 1.6; }

/* === Aside contact card === */
.eh-faq .eh-faq-aside {
	position: sticky; top: 100px; align-self: start;
	display: flex; flex-direction: column; gap: 24px;
}
@media (max-width: 960px) {
	.eh-faq .eh-faq-aside { position: static; }
}

.eh-faq .eh-faq-help-card {
	background: var(--eh-forest-900);
	color: var(--eh-cream-100);
	padding: 34px 30px;
	position: relative;
	overflow: hidden;
}
.eh-faq .eh-faq-help-card::before {
	content: ""; position: absolute; right: -40px; bottom: -40px; width: 150px; height: 150px;
	background: radial-gradient(circle, rgba(212, 160, 23, 0.28), transparent 70%);
	pointer-events: none;
}
.eh-faq .eh-faq-help-card .eh-eyebrow { color: var(--eh-gold-400); position: relative; }
.eh-faq .eh-faq-help-card .eh-eyebrow::before { background: var(--eh-gold-400); }
.eh-faq .eh-faq-help-card h3 {
	font-family: var(--eh-font-display); font-size: 26px; color: var(--eh-cream-100);
	font-weight: 500; margin: 16px 0 10px; line-height: 1.2; position: relative;
}
.eh-faq .eh-faq-help-card h3 em { font-style: italic; color: var(--eh-gold-400); }
.eh-faq .eh-faq-help-card p {
	font-size: 14px; line-height: 1.7; color: rgba(243, 228, 182, 0.7); margin: 0 0 24px; position: relative;
}
.eh-faq .eh-faq-contacts { display: flex; flex-direction: column; gap: 14px; position: relative; }
.eh-faq .eh-faq-contact {
	display: flex; align-items: center; gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--eh-line-dark);
	transition: all .2s;
}
.eh-faq .eh-faq-contact:hover { border-color: var(--eh-gold-500); background: rgba(45, 106, 79, 0.2); }
.eh-faq .eh-faq-contact .eh-ci {
	width: 38px; height: 38px; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--eh-gold-400);
}
.eh-faq .eh-faq-contact .eh-ci svg { width: 20px; height: 20px; }
.eh-faq .eh-faq-contact .eh-ck { font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(243, 228, 182, 0.55); font-weight: 700; display: block; }
.eh-faq .eh-faq-contact .eh-cv { font-family: var(--eh-font-display); font-size: 17px; color: var(--eh-cream-100); margin-top: 3px; display: block; }
.eh-faq .eh-faq-contact.eh-wa .eh-ci { color: #25D366; }

.eh-faq .eh-faq-reply-note {
	border: 1px solid var(--eh-line);
	padding: 24px 26px;
	display: flex; flex-direction: column; gap: 6px;
}
.eh-faq .eh-faq-reply-note .eh-rk { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eh-gold-600); font-weight: 700; }
.eh-faq .eh-faq-reply-note .eh-rv { font-family: var(--eh-font-display); font-size: 30px; color: var(--eh-forest-900); line-height: 1; }
.eh-faq .eh-faq-reply-note .eh-rsub { font-size: 13px; color: var(--eh-ink-500); line-height: 1.6; }

/* === Ghost button (not in policy shell) === */
.eh-faq .eh-btn-ghost {
	background: transparent;
	color: var(--eh-cream-100);
	border-color: var(--eh-line-dark);
}
.eh-faq .eh-btn-ghost:hover {
	border-color: var(--eh-gold-500);
	color: var(--eh-gold-400);
	transform: translateY(-1px);
}

/* === Closing band: two-button row variant (override shell column layout) === */
.eh-faq .eh-closing .eh-contact-row {
	margin-top: 44px;
	flex-direction: row;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}