/* =========================================================================
   FAQs page — page-faqs.php (/billi-faqs/).
   Scoped to .fq — mobile-first, min-width media queries only.
   Tokens mirror sector-page.css / sectors.css (Billi Brand Book 2026).
   ========================================================================= */

.fq {
	/* Billi Brand Book 2026 palette */
	--fq-navy: #181d46;      /* Billi Blue — signature colour */
	--fq-lightblue: #90cdeb; /* button hover state */
	--fq-grey: #eaeaea;      /* primary grey — borders, rules */
	--fq-band-grey: #f5f5f5;
	--fq-band-blue: #f1f5f5; /* Green Grey */
	--fq-text: #000;
	--fq-muted: #75757b;
	--fq-gutter: 20px;

	font-family: 'FFDINStd', sans-serif;
	color: var(--fq-text);
	line-height: 1.5;
}

@media (min-width: 900px) {
	.fq { --fq-gutter: 40px; }
}

.fq *,
.fq *::before,
.fq *::after { box-sizing: border-box; }

.fq img { max-width: 100%; height: auto; display: block; }

.fq-container {
	width: 100%;
	max-width: 1436px; /* 1356px content + 2 × 40px */
	margin: 0 auto;
	padding-left: var(--fq-gutter);
	padding-right: var(--fq-gutter);
}

/* WYSIWYG output: neutralise whatever tags the admin used so headings /
   paragraphs inherit the wrapper's type styles. */
.fq [class*='__heading'] :is(h1, h2, h3, h4, p),
.fq [class*='__title'] :is(h1, h2, h3, h4, p),
.fq .fq-section-heading :is(h1, h2, h3, h4, p),
.fq [class*='__intro'] :is(h1, h2, h3, h4) {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

.fq [class*='__text'] p,
.fq [class*='__intro'] p { margin: 0 0 0.6em; }

.fq [class*='__text'] p:last-child,
.fq [class*='__intro'] p:last-child { margin-bottom: 0; }

/* The theme sets a global `a { font-weight: 600 }` and fades every link to 0.7
   on hover. Card-sized links wrap whole blocks of copy, so both are reset. */
.fq a.fq-route { font-weight: 400; }
.fq a.fq-route:hover,
.fq .fq-chip:hover,
.fq .fq-faq__q:hover { opacity: 1; }

.fq a:focus-visible,
.fq button:focus-visible,
.fq summary:focus-visible,
.fq input:focus-visible {
	outline: 2px solid var(--fq-navy);
	outline-offset: 2px;
}

.fq-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.fq-section-heading {
	margin: 0 0 20px;
	color: var(--fq-navy);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
}

@media (min-width: 900px) {
	.fq-section-heading { font-size: 32px; margin-bottom: 24px; }
}


/* ---- Hero -------------------------------------------------------------------
   Flat Billi Blue band, no photography: the search field is the hero's focus,
   and a photo behind an input only costs contrast. Same treatment as .ct-hero. */

.fq-hero {
	background: var(--fq-navy);
	color: #fff;
}

.fq-hero__inner {
	padding-top: 44px;
	padding-bottom: 44px;
}

.fq-hero__content { max-width: 720px; }

.fq-hero__eyebrow {
	margin: 0 0 12px;
	color: var(--fq-lightblue);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* The title is an h1, so typography.css sets it in DM Serif Display at 400.
   No font-weight here: the serif has no bold cut, and the 700 this rule
   carried from the DIN era made browsers synthesise one. */
.fq-hero__heading {
	margin: 0;
	color: #fff;
	font-size: 34px;
	line-height: 1.12;
}

.fq-hero__intro {
	margin-top: 14px;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
}

.fq-hero__intro a { color: #fff; }

@media (min-width: 900px) {
	.fq-hero__inner { padding-top: 72px; padding-bottom: 72px; }
	.fq-hero__heading { font-size: 48px; }
	.fq-hero__intro { font-size: 17px; margin-top: 16px; }
}


/* ---- Search ---------------------------------------------------------------- */

.fq-search { margin-top: 26px; }

.fq-search__field {
	position: relative;
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.fq-search__icon {
	position: absolute;
	left: 18px;
	width: 20px;
	height: 20px;
	color: var(--fq-muted);
	pointer-events: none;
}

.fq-search__input {
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 48px 12px 48px;
	font-family: inherit;
	font-size: 16px; /* 16px stops iOS zooming the page on focus */
	line-height: 1.4;
	color: var(--fq-text);
	background: transparent;
	border: 0;
	border-radius: 2px;
	appearance: none;
}

.fq-search__input::placeholder { color: var(--fq-muted); }

/* The input sits in a white field on the navy hero. An outset ring would
   half-land on the navy and lose contrast, so this one is drawn inside
   the field: navy on white, visible on every side. */
.fq .fq-search__input:focus-visible {
	outline: 2px solid var(--fq-navy);
	outline-offset: -5px;
}

/* The custom clear button replaces the native one, which is unstyleable and
   absent in Firefox. */
.fq-search__input::-webkit-search-cancel-button { display: none; }

.fq-search__clear {
	position: absolute;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	color: var(--fq-muted);
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.fq-search__clear:hover {
	color: var(--fq-navy);
	background: var(--fq-band-grey);
}

.fq-search__clear svg { width: 16px; height: 16px; }

.fq-search__clear[hidden] { display: none; }

@media (min-width: 900px) {
	.fq-search { margin-top: 30px; max-width: 560px; }
	.fq-search__input { min-height: 58px; }
}


/* ---- Toolbar ----------------------------------------------------------------
   Pinned under the fixed site header once the page scrolls past it.

   position: sticky is NOT usable here. The theme sets overflow-x: hidden on
   both #wrapper and body, which computes overflow-y to auto and makes them
   scroll containers; a sticky element inside one sticks relative to that
   container rather than the viewport, so it just scrolls away. Rather than
   change global overflow rules that every page depends on for horizontal
   scroll, js/faqs-page.js toggles .is-pinned and .fq-toolbar-slot holds the
   height open. Without JavaScript the toolbar simply stays in the flow. */

.fq-sentinel { height: 0; }

.fq-toolbar {
	background: #fff;
	border-bottom: 1px solid var(--fq-grey);
}

.fq-toolbar.is-pinned {
	position: fixed;
	/* `top` is set inline by the script from the header's own custom
	   properties, so the toolbar follows the header when it shrinks at the
	   mobile breakpoint instead of guessing a height. */
	left: 0;
	right: 0;
	z-index: 5;
	box-shadow: 0 6px 18px rgba(24, 29, 70, 0.08);
}

.fq-toolbar__inner {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 14px;
	padding-bottom: 14px;
}

/* The chip row scrolls sideways on narrow screens. The negative margin lets it
   bleed to the screen edge so the last chip does not look clipped. */
.fq-chips {
	display: flex;
	gap: 8px;
	margin-left: calc(var(--fq-gutter) * -1);
	margin-right: calc(var(--fq-gutter) * -1);
	padding: 2px var(--fq-gutter);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.fq-chips::-webkit-scrollbar { display: none; }

.fq-chip {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	padding: 8px 16px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--fq-navy);
	white-space: nowrap;
	background: var(--fq-band-grey);
	border: 1px solid transparent;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.fq-chip:hover { border-color: var(--fq-navy); }

.fq-chip.is-active {
	color: #fff;
	background: var(--fq-navy);
	border-color: var(--fq-navy);
}

.fq-chip__n {
	font-size: 13px;
	color: var(--fq-muted);
	transition: color 0.2s ease;
}

.fq-chip.is-active .fq-chip__n { color: var(--fq-lightblue); }

.fq-toolbar__count {
	margin: 0;
	font-size: 14px;
	color: var(--fq-muted);
}

@media (min-width: 900px) {
	.fq-toolbar__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		padding-top: 16px;
		padding-bottom: 16px;
	}
	.fq-chips { margin: 0; padding: 2px; flex-wrap: wrap; overflow-x: visible; }
	.fq-toolbar__count { flex: 0 0 auto; }
}


/* ---- Question groups --------------------------------------------------------
   The <details> anatomy is the sector pages' .sn-faq, unchanged: plus icon that
   rotates to a cross on open, hairline rules, answer capped for readability. */

.fq-list { padding: 36px 0 56px; }

.fq-group { margin-bottom: 36px; }

.fq-group:last-of-type { margin-bottom: 0; }

.fq-group[hidden] { display: none; }

.fq-group__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 4px;
	color: var(--fq-navy);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.07em;
	line-height: 1.3;
	text-transform: uppercase;
}

.fq-group__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: var(--fq-navy);
	background: var(--fq-band-blue);
	border-radius: 50%;
}

/* Size any nested svg rather than the icon's own class: a slug that falls
   through to billi_sn_the_icon() carries sn-icon, which this sheet never
   ships, and an unsized SVG renders at its 300x150 default. */
.fq-group__icon svg { width: 15px; height: 15px; }

.fq-group__title { flex: 1 1 auto; }

.fq-group__n {
	flex: 0 0 auto;
	color: var(--fq-muted);
	font-weight: 400;
	letter-spacing: 0;
}

.fq-group__list { border-top: 1px solid var(--fq-grey); }

.fq-faq { border-bottom: 1px solid var(--fq-grey); }

.fq-faq[hidden] { display: none; }

.fq-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 2px;
	color: var(--fq-navy);
	cursor: pointer;
	list-style: none;
}

.fq-faq__q::-webkit-details-marker { display: none; }

.fq-faq__title {
	margin: 0;
	color: inherit;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.fq-faq__icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: var(--fq-navy);
	transition: transform 0.2s ease;
}

.fq-faq[open] .fq-faq__icon { transform: rotate(45deg); }

.fq-faq__a {
	padding: 0 2px 20px;
	font-size: 16px;
	line-height: 1.55;
	max-width: 860px;
}

.fq-faq__a p { margin: 0 0 0.7em; }
.fq-faq__a p:last-child { margin-bottom: 0; }
.fq-faq__a ul { margin: 0 0 0.7em; padding-left: 20px; }
.fq-faq__a li { margin-bottom: 0.3em; }
.fq-faq__a a { color: var(--fq-navy); text-decoration: underline; }

/* Deep-linked question: a brief tint so the target is obvious after the jump. */
.fq-faq:target { background: var(--fq-band-blue); }

.fq-empty {
	margin: 0;
	padding: 32px 2px;
	font-size: 16px;
	color: var(--fq-muted);
}

.fq-empty[hidden] { display: none; }

.fq-empty a { color: var(--fq-navy); text-decoration: underline; }

@media (min-width: 900px) {
	.fq-list { padding: 52px 0 80px; }
	.fq-group { margin-bottom: 48px; }
	.fq-group__head { font-size: 14px; gap: 12px; }
	.fq-group__icon { width: 30px; height: 30px; }
	.fq-group__icon svg { width: 17px; height: 17px; }
	.fq-faq__title { font-size: 19px; }
	.fq-faq__q { padding: 22px 2px; }
	.fq-faq__a { padding-bottom: 24px; }
}


/* ---- Still need help --------------------------------------------------------
   Green Grey band, deliberately NOT navy: the site footer is Billi Blue, and a
   navy CTA directly above it reads as one undifferentiated block with only a
   hairline between them. A light band closes the page and lets the footer start
   cleanly. White cards carry the navy type. */

.fq-help {
	padding: 48px 0;
	color: var(--fq-text);
	background: var(--fq-band-blue);
}

.fq-help .fq-section-heading { color: var(--fq-navy); }

.fq-help__intro {
	max-width: 640px;
	margin: -6px 0 26px;
	font-size: 16px;
	color: var(--fq-muted);
}

.fq-help__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.fq-route {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
	color: var(--fq-text);
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--fq-grey);
	border-radius: 4px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.fq-route:hover {
	border-color: var(--fq-navy);
	box-shadow: 0 8px 24px rgba(24, 29, 70, 0.1);
}

.fq-route__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	color: var(--fq-navy);
	background: var(--fq-band-blue);
	border-radius: 50%;
	transition: background-color 0.2s ease;
}

.fq-route:hover .fq-route__icon { background: var(--fq-lightblue); }

.fq-route__icon svg { width: 22px; height: 22px; }

.fq-route__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
}

.fq-route__title {
	color: var(--fq-navy);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
}

.fq-route__text {
	font-size: 15px;
	line-height: 1.5;
	color: var(--fq-muted);
}

.fq-route__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	font-weight: 600;
	color: var(--fq-navy);
}

.fq-route__chevron {
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
}

.fq-route:hover .fq-route__chevron { transform: translateX(3px); }

@media (min-width: 640px) {
	.fq-help__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.fq-help { padding: 72px 0; }
	.fq-help__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
	.fq-route { padding: 26px; }
}


/* ---- Motion ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.fq *,
	.fq *::before,
	.fq *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}