/*
 * MEPCO theme — FAQ route (page-faq.php). Prototype lines 1202–1229; every value below is copied
 * from that element's inline style. Shared classes (.section, .kicker, .page-title, .lede,
 * .faq-details and the tokens) come from base.css and are only overridden where the FAQ page's
 * inline styles differ from them (the H1 clamp, and the larger <details> of this page: the home
 * teaser uses 14px 18px / 15px, the FAQ page 16px 18px / 16px).
 *
 *   .faq-page__title / __intro / __ask   header block
 *   .faq-page__body                      the wrapping two-column band (flex, no media query)
 *   .faq-jump / .faq-jump__link          sticky jump navigation (top 96px, under the 72px header)
 *   .faq-page__groups / .faq-group       one <section> per faq_group term
 *   .faq-q                               a question: .faq-details + this page's bigger summary
 *   .faq-q__body / __a / __links / __link
 */

/* Header (prototype 1204–1206) */
.faq-page__title {
	margin: 6px 0 10px;
	font-size: clamp(36px, 5.5vw, 60px);
	max-width: 800px;
}
.faq-page__intro {
	margin: 0 0 36px;
	max-width: 640px;
}
.faq-page__ask {
	color: var(--orange-text);
	font-weight: 600;
}
.faq-page__ask:hover {
	color: var(--orange-text);
}
.faq-page__empty {
	margin: 0;
	color: var(--text-2);
}

/* Two-column band (prototype 1207) */
.faq-page__body {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 64px;
	align-items: flex-start;
}

/* Sticky jump navigation (prototype 1208–1210) */
.faq-jump {
	flex: 1 1 200px;
	max-width: 260px;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 96px;
}
.faq-jump__link {
	padding: 8px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	border-bottom: 1px solid var(--line-2);
}
.faq-jump__link:hover {
	color: var(--orange-text);
}

/* Group column (prototype 1211–1213) */
.faq-page__groups {
	flex: 999 1 440px;
	min-width: 0;
	max-width: 760px;
	display: flex;
	flex-direction: column;
	gap: 36px;
}
.faq-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* The jump navigation and assets/js/faq.js scroll to 90px above the section; keep native
	   #hash navigation (and no-JS browsers) at the same place. */
	scroll-margin-top: 90px;
}
.faq-group__title {
	margin: 0 0 6px;
	font: 600 26px var(--font-display);
	text-transform: uppercase;
}

/* A question (prototype 1215–1225) — .faq-details supplies the panel, border and rotating "+" */
.faq-q {
	scroll-margin-top: 90px;
}
.faq-q > summary {
	padding: 16px 18px;
	font-size: 16px;
}
.faq-q__body {
	padding: 0 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.faq-q__a {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--text);
	text-wrap: pretty;
}
.faq-q__links {
	display: flex;
	gap: 8px 18px;
	flex-wrap: wrap;
}
.faq-q__link,
.faq-q__link:hover {
	font-size: 13px;
	font-weight: 600;
	color: var(--orange-text);
	white-space: nowrap;
}

/* The admin bar pushes the sticky header down (inc/setup.php); keep the jump nav clear of it. */
.admin-bar .faq-jump { top: 128px; }
@media screen and (max-width: 782px) {
	.admin-bar .faq-jump { top: 142px; }
}

/* Mobile: below 900px the jump navigation stacks above the groups, so it must not stick (it painted
   over the questions while scrolling); its links and the in-answer links are 44px targets. */
@media (max-width: 899.98px) {
	.faq-jump { position: static; max-width: none; }
	.faq-jump__link { min-height: 44px; display: flex; align-items: center; padding: 0; }
	.faq-q__links { gap: 24px 18px; }
	.faq-q__link { display: inline-block; padding: 13px 0; margin: -13px 0; }
}