/* ============================================================
   FAQ tabs and accordion (template-parts/components/faq-tabs.php;
   tabs: assets/js/tabs.js): pill tabs over one group of questions at
   a time, each group an accordion of <details> (first one open).
   Shared by the course page's FAQs (on Primary Navy, offering-faqs.css)
   and the FAQ page (on White, .faq-tabs--light; faqs-page.css). Loaded
   on those pages only (inc/enqueue.php). Colours are the variables at
   the top: navy by default, the light variant sets its own.

   Measured on the course page files (1440 / 402) and matched in
   Chrome to within a pixel, glyph to glyph; the FAQ page file draws
   the same block on White (docs/notes/nav-and-pages.md 7.3):
   - Tabs: 42px pills, 16px in from the edge, labels Poppins SemiBold
     at the body size, 16px (drawn 20, which Miles found too big,
     2026-10-11; the drawn widths, 251 and 327px, are SemiBold's at
     20). On navy:
     Secondary Navy fill, the selected one with a 1px Cream outline.
     On White: White with a 1px Secondary Navy outline, the selected
     one Secondary Navy with a 1px Primary Navy outline and a Cream
     label. Built as one wrapping row, 30 x 18 apart, which stacks by
     itself on phones and packs on tablets and desktops (the FAQ page
     file's 31-42 / 20-26px gaps are normalised). A long label wraps:
     radius 30 (the brand's button radius) is a full pill on one line,
     a rounded box on two.
   - The tab row to the first question's caps 52 / 65px.
   - Questions: SemiBold 16/24 from 768px, Medium 18/27 on phones.
     A 1px Grey Light divider under every item, none above the first.
     Rows built at 109 on desktop (divider to caps 50, caps to divider
     59) and 74 on phones (30 / 44), interpolated between. Desktop
     insets the text 27px from the divider's start and the chevron's
     ink (11 x 6) 32px from its end; phones run both to the edges. The
     chevron points down, up when open, centred on the question.
   - Answers: Regular, 16/24 from 768px (at most 1065px wide), 14/21
     on phones; caps 46 / 37px under the question's (its last line's),
     the last line's caps 49 / 32px over the divider.

   States not designed (proposals): a tab's hover tints its fill
   (--faqs-tab-bg-hover); a question's hover turns it and its chevron
   Light Orange on navy, deep orange on White (--faqs-question-hover);
   focus rings as everywhere. Hover cues only where the pointer can
   hover, so a tap leaves nothing tinted. The chevron turns in 0.25s,
   at once under reduced motion; answers open at once (native
   <details>).

   Without JS every group shows, one after another, under its own H3
   (Koulen 24). With JS the H3s and the other groups hide (tabs.js);
   until the script has run, html.has-js.is-preload (header.php)
   draws the first group selected so nothing jumps, and if it never
   runs (.is-ready never set) the groups return to the no-JS layout
   once the page has loaded. Hidden groups use hidden="until-found":
   they take no space as long as panels keep no margin, padding or
   border of their own (spacing sits on the tab row and the H3s).
   ============================================================ */

/* A link to a question or a group (#faqs-booking-bc-05) lands below the
   floating header: a link from further down brings the header back as
   the page scrolls up (navigation.js 3), so the room is needed only
   while it floats - scrolling down to a question, it goes away. tabs.js
   scrolls again once the header has reacted. */
html:has(.site-header.is-floating) :is(.faq-item, .faq-tabs__panel) {
	scroll-margin-top: calc(var(--header-bar-h) + var(--header-focus-clearance));
}

/* Sizes, phones to desktops (Chrome's glyph positions measured against
   the files at 402 and 1440), and the colours on navy. */
.faq-tabs {
	--faqs-tab-size: var(--fs-body);                        /* tab labels: the body size (Miles 2026-10-11; drawn 20px) */
	--faqs-tab-h: 42px;
	--faqs-tab-gap: 18px 30px;                              /* between tabs: rows / columns */
	--faqs-question-size: var(--fs-ui-lg);                  /* 18px on phones, 16 from 768 */
	--faqs-question-weight: var(--fw-medium);               /* Medium on phones, SemiBold from 768 (the files' ink widths) */
	--faqs-answer-size: var(--fs-small);                    /* 14px on phones, 16 from 768 */
	--faqs-q-pad-top: clamp(24px, 15.87px + 2.0231vw, 45px);    /* a question row above its text: 24 at 402, 45 at 1440 */
	--faqs-q-pad-bottom: clamp(22px, 15.42px + 1.6378vw, 39px); /* and below it: 22 / 39 (the caps sit centred in the row) */
	--faqs-tabs-to-question: clamp(47px, 65.03px - 1.2524vw, 60px); /* the tab row's foot to the first question's line box: 60 / 47 */
	--faqs-inset-start: 0px;                                /* question and answer text from the divider's start */
	--faqs-inset-end: 0px;                                  /* the chevron's ink from the divider's end */
	--faqs-open-gap: 11px;                                  /* an open question's line box to its answer */
	--faqs-answer-end: 15px;                                /* the answer to the divider */
	--faqs-answer-max: 66.5rem;                             /* 1065px at 1440 */
	--faqs-chevron: 17px;                                   /* icon box: its ink is 11 x 6 */

	--faqs-text: var(--color-text-on-dark);                 /* questions and answers */
	--faqs-question-hover: var(--color-link-hover-on-dark);
	--faqs-link: var(--color-link-on-dark);                 /* links in answers */
	--faqs-link-hover: var(--color-link-hover-on-dark);
	--faqs-divider: var(--color-divider);
	--faqs-tab-bg: var(--color-surface-dark-alt);
	--faqs-tab-fg: var(--color-text-on-dark);
	--faqs-tab-border: transparent;
	--faqs-tab-selected-bg: var(--color-surface-dark-alt);
	--faqs-tab-selected-fg: var(--color-text-on-dark);
	--faqs-tab-selected-border: var(--color-text-on-dark);  /* the 1px Cream outline (the label's colour) */
}

/* On White (the FAQ page). */
.faq-tabs--light {
	--faqs-text: var(--color-text);
	--faqs-question-hover: var(--faqs-light-question-hover);
	--faqs-link: var(--color-link);
	--faqs-link-hover: var(--faqs-light-question-hover);
	--faqs-tab-bg: var(--color-surface);
	--faqs-tab-fg: var(--color-text);
	--faqs-tab-border: var(--faqs-light-tab-border);
	--faqs-tab-bg-hover: var(--faqs-light-tab-bg-hover);
	--faqs-tab-selected-bg: var(--color-surface-dark-alt);
	--faqs-tab-selected-fg: var(--color-text-on-dark);
	--faqs-tab-selected-border: var(--faqs-light-tab-selected-border);
}

/* ---------- Tabs ---------- */

/* The row: shown once tabs.js has wired it (it removes `hidden`), and
   while the page loads (below); never without JS. */
.faq-tabs__list:not([hidden]) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--faqs-tab-gap);
	margin-bottom: max(0px, var(--faqs-tabs-to-question) - var(--faqs-q-pad-top));
}

.faq-tabs__tab {
	max-width: 100%;
	min-height: var(--faqs-tab-h);
	margin: 0;
	padding: 5px 15px; /* 16px from the edge with the 1px border */
	border: var(--border-hairline) solid var(--faqs-tab-border);
	border-radius: var(--radius-button);
	background-color: var(--faqs-tab-bg);
	color: var(--faqs-tab-fg);
	font-size: var(--faqs-tab-size);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-body);
	text-align: left;
	overflow-wrap: break-word;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.faq-tabs__tab[aria-selected="true"] {
	border-color: var(--faqs-tab-selected-border);
	background-color: var(--faqs-tab-selected-bg);
	color: var(--faqs-tab-selected-fg);
}

@media (hover: hover) {
	.faq-tabs__tab:hover {
		background-color: var(--faqs-tab-bg-hover);
	}

	/* On White the selected tab keeps its navy fill. */
	.faq-tabs--light .faq-tabs__tab[aria-selected="true"]:hover {
		background-color: var(--faqs-tab-selected-bg);
	}
}

/* ---------- Groups ---------- */

/* The group heading: shown without JS (and when there is one group);
   tabs.js hides it, the tab names the group. */
.faq-tabs__heading {
	font-family: var(--font-display);
	font-size: var(--fs-card-title-lg);
	font-weight: var(--fw-display);
	font-synthesis: none;
	line-height: var(--lh-card-title);
	text-transform: uppercase;
}

/* Without tabs the groups follow one another. */
.faq-tabs:not(.is-ready) > .faq-tabs__panel + .faq-tabs__panel {
	margin-top: 56px;
}

/* While the page loads, before tabs.js has run: the tab row with the
   first tab selected and only the first group, without its heading -
   what the script then sets up, so nothing moves. If the script never
   runs, these stop applying once the page has loaded (header.php
   removes .is-preload) and every group shows again. */
html.has-js.is-preload .faq-tabs[data-tabs]:not(.is-ready):not(.is-static) > .faq-tabs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--faqs-tab-gap);
	margin-bottom: max(0px, var(--faqs-tabs-to-question) - var(--faqs-q-pad-top));
}

html.has-js.is-preload .faq-tabs[data-tabs]:not(.is-ready):not(.is-static) .faq-tabs__tab:first-child {
	border-color: var(--faqs-tab-selected-border);
	background-color: var(--faqs-tab-selected-bg);
	color: var(--faqs-tab-selected-fg);
}

html.has-js.is-preload .faq-tabs[data-tabs]:not(.is-ready):not(.is-static) > .faq-tabs__panel ~ .faq-tabs__panel,
html.has-js.is-preload .faq-tabs[data-tabs]:not(.is-ready):not(.is-static) .faq-tabs__heading {
	display: none;
}

/* ---------- Accordion ---------- */

.faq-item {
	border-bottom: var(--border-hairline) solid var(--faqs-divider);
}

/* The question: the whole row toggles. Its text and chevron sit in the
   row's content box, so an open item's shorter bottom padding moves
   neither. */
.faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: var(--faqs-q-pad-top) var(--faqs-inset-end) var(--faqs-q-pad-bottom) var(--faqs-inset-start);
	border-radius: var(--radius-xs); /* rounds the focus ring */
	color: var(--faqs-text);
	font-size: var(--faqs-question-size);
	font-weight: var(--faqs-question-weight);
	line-height: var(--lh-body);
	list-style: none;
	cursor: pointer;
	transition: color var(--transition);
}

.faq-item__question::-webkit-details-marker {
	display: none;
}

.faq-item[open] > .faq-item__question {
	padding-bottom: var(--faqs-open-gap);
}

/* The negative margin puts the ink's right end (not the icon box's) on
   the inset. */
.faq-item__chevron {
	flex: none;
	width: var(--faqs-chevron);
	height: var(--faqs-chevron);
	margin-right: calc(var(--faqs-chevron) * -5 / 24);
	transition: transform var(--transition);
}

.faq-item[open] > .faq-item__question .faq-item__chevron {
	transform: rotate(180deg);
}

@media (hover: hover) {
	.faq-item__question:hover {
		color: var(--faqs-question-hover);
	}
}

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

.faq-item__answer {
	max-width: calc(var(--faqs-answer-max) + var(--faqs-inset-start));
	padding: 0 var(--faqs-inset-end) var(--faqs-answer-end) var(--faqs-inset-start);
	color: var(--faqs-text);
	font-size: var(--faqs-answer-size);
	line-height: var(--lh-body);
}

/* Paragraphs (and any list an editor adds) a line apart. */
.faq-item__answer > * + * {
	margin-top: calc(var(--lh-body) * 1em);
}

.faq-item__answer :is(ul, ol) {
	margin-bottom: 0;
	padding-left: 1.25em;
}

.faq-item__answer a {
	color: var(--faqs-link);
	text-decoration: underline;
	transition: color var(--transition);
}

@media (hover: hover) {
	.faq-item__answer a:hover {
		color: var(--faqs-link-hover);
	}
}

/* ============================================================
   Tablet and desktop: the desktop sizes and insets
   ============================================================ */

@media (min-width: 768px) {
	.faq-tabs {
		--faqs-question-size: var(--fs-body);
		--faqs-question-weight: var(--fw-semibold);
		--faqs-answer-size: var(--fs-body);
		--faqs-inset-start: 27px;
		--faqs-inset-end: 32px;
		--faqs-open-gap: 22px;
		--faqs-answer-end: 29px;
	}
}

/* ============================================================
   Windows High Contrast: every tab is drawn as a bordered button
   there, so the selected one takes the system's selection colours
   (Highlight with HighlightText, as selected items are shown across
   Windows). It opts out of the forced palette - otherwise the text
   backplate the browser draws behind its label hides HighlightText -
   so every colour on it is a system colour, its focus ring too.
   ============================================================ */

@media (forced-colors: active) {
	.faq-tabs__tab[aria-selected="true"],
	html.has-js.is-preload .faq-tabs[data-tabs]:not(.is-ready):not(.is-static) .faq-tabs__tab:first-child {
		forced-color-adjust: none;
		border-color: var(--faqs-forced-selected);
		background-color: var(--faqs-forced-selected);
		color: var(--faqs-forced-selected-text);
		outline-color: var(--faqs-forced-selected);
	}
}