/* ==========================================================================
   The questions page.

   An accordion of plain white cards on the page's own pale ground - the same
   pairing the region lobby uses, so the two read as one site. Answers are
   collapsed by default: the value of this page is scanning the questions, and
   forty open answers is a wall to scroll past before finding the one that
   matters.
   ========================================================================== */

.faq {
	padding-block: clamp(var(--sp-12), 6vw, 5rem) clamp(var(--sp-16), 8vw, 6rem);
}

/* --- Head ----------------------------------------------------------------- */

.faq__head {
	max-width: 60ch;
	margin-block-end: clamp(var(--sp-8), 4vw, 3.5rem);
}

.faq__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	line-height: 1.1;
	color: var(--c-brand);
}

.faq__lead {
	margin-block-start: var(--sp-5);
	color: var(--c-ink-soft);
	font-size: var(--fs-lg);
	line-height: 1.7;
}

.faq__lead p { margin: 0 0 var(--sp-4); }
.faq__lead p:last-child { margin-block-end: 0; }

.faq__none {
	color: var(--c-ink-soft);
	font-size: var(--fs-lg);
}

/* --- Filter ---------------------------------------------------------------
   A search that narrows what is already on the page, not one that goes to the
   server: there is nothing here it could not find in the markup it is
   standing on.
   ------------------------------------------------------------------------- */

.faq__search {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-block-start: var(--sp-8);
	padding: var(--sp-3) var(--sp-5);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	background: var(--c-bg);
	box-shadow: 0 2px 10px rgb(8 50 88 / 6%);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.faq__search:focus-within {
	border-color: var(--c-logo-teal);
	box-shadow: 0 0 0 3px rgb(0 170 203 / 22%);
}

.faq__search-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 19px;
	height: 19px;
	color: var(--c-logo-teal);
}

.faq__search-icon svg { width: 100%; height: 100%; }

.faq__search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	padding: 0;
	background: none;
	color: var(--c-brand);
	font: inherit;
	font-size: var(--fs-base);
}

.faq__search-input:focus { outline: none; }

/* Safari draws its own clear button inside a search field, at a size and
   colour that belong to the browser and not to this. */
.faq__search-input::-webkit-search-decoration,
.faq__search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* --- Layout ---------------------------------------------------------------
   The contents list sticks under the header, so the sections stay reachable
   from anywhere down the page. `align-items: start` and not `stretch`, or the
   column stretches to the height of the questions and there is nothing left
   for `position: sticky` to move within.
   ------------------------------------------------------------------------- */

.faq__grid { display: block; }

.faq--columns .faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
	align-items: start;
	gap: clamp(var(--sp-8), 4vw, 4rem);
}

.faq__nav {
	position: sticky;
	/* Under the bar, which is sticky itself and would otherwise cover the
	   first entry. */
	top: calc(var(--header-h, 76px) + var(--sp-6));
}

.faq__nav-title {
	margin: 0 0 var(--sp-4);
	color: var(--c-ink-soft);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: 0.1em;
}

.faq__nav-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-inline-start: 2px solid var(--c-line);
}

.faq__nav-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	/* Sits on the rail the list draws, so the active one can paint over it. */
	margin-inline-start: -2px;
	border-inline-start: 2px solid transparent;
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-decoration: none;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.faq__nav-list a:hover,
.faq__nav-list a.is-current {
	border-inline-start-color: var(--c-logo-teal);
	color: var(--c-brand);
}

.faq__nav-count {
	flex: 0 0 auto;
	min-width: 22px;
	padding: 1px 7px;
	border-radius: var(--radius-pill);
	background: var(--c-panel);
	color: var(--c-brand);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-align: center;
}

/* Without the contents list the answers keep a reading measure of their own
   rather than running the full 1680px rail. */
.faq:not(.faq--columns) .faq__body { max-width: var(--wrap-narrow); }

/* --- Sections -------------------------------------------------------------- */

.faq__group + .faq__group { margin-block-start: clamp(var(--sp-12), 5vw, 4rem); }

/* Scrolling to a section puts its heading under the sticky bar unless the
   anchor is given the bar's height to land against. */
.faq__group[id] { scroll-margin-top: calc(var(--header-h, 76px) + var(--sp-6)); }

.faq__group-title {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-xl);
	font-weight: 800;
	color: var(--c-brand);
}

/* The dotted rule the rest of the site uses to finish a heading. */
.faq__group-title::after {
	content: "";
	flex: 1 1 auto;
	height: 2px;
	background-image: radial-gradient(var(--c-line) 1px, transparent 1.2px);
	background-size: 7px 2px;
}

.faq__list {
	display: grid;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- One question ---------------------------------------------------------- */

.faq__item {
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	background: var(--c-bg);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq__item:hover { border-color: rgb(8 50 88 / 22%); }

.faq__item.is-open {
	border-color: transparent;
	box-shadow: 0 10px 34px rgb(8 50 88 / 12%);
}

.faq__q {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.faq__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	width: 100%;
	padding: var(--sp-5) var(--sp-6);
	border: 0;
	background: none;
	color: var(--c-brand);
	font: inherit;
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: 1.45;
	text-align: start;
	cursor: pointer;
}

.faq__toggle:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: -4px;
	border-radius: var(--radius-md);
}

/* A plus that becomes a minus: two bars, and the upright one is thrown away
   on opening. A rotating chevron says "there is more below"; a plus says
   "there is an answer in here", which is what this is. */
.faq__sign {
	position: relative;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--c-panel);
	transition: background 0.22s ease;
}

.faq__sign::before,
.faq__sign::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 2px;
	border-radius: 2px;
	background: var(--c-brand);
	transform: translate(-50%, -50%);
	transition: transform 0.28s cubic-bezier(0.22, 0.7, 0.25, 1), opacity 0.2s ease;
}

.faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq__item.is-open .faq__sign { background: var(--c-logo-teal); }
.faq__item.is-open .faq__sign::before { background: #fff; }

.faq__item.is-open .faq__sign::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(0deg);
}

/* Collapsible without a fixed height, the way the region cards do it: a grid
   row animating from 0fr to 1fr, which `height: auto` cannot be asked to do. */
.faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s cubic-bezier(0.22, 0.7, 0.25, 1);
}

.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.faq__a-inner {
	min-height: 0;
	overflow: hidden;
	color: var(--c-ink-soft);
	line-height: 1.75;
}

.faq__a-inner > * {
	margin: 0;
	padding-inline: var(--sp-6);
}

.faq__a-inner > * + * { padding-block-start: var(--sp-4); }
.faq__a-inner > *:last-child { padding-block-end: var(--sp-6); }

.faq__a-inner a {
	color: var(--c-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.faq__a-inner a:hover { color: var(--c-logo-teal); }

/* --- No match -------------------------------------------------------------- */

.faq__empty {
	margin: 0;
	padding: clamp(var(--sp-8), 4vw, 3rem);
	border: 1px dashed var(--c-line);
	border-radius: var(--radius-md);
	color: var(--c-ink-soft);
	text-align: center;
}

/* --- The way out ----------------------------------------------------------- */

.faq__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-6);
	margin-block-start: clamp(var(--sp-12), 5vw, 4rem);
	padding: clamp(var(--sp-6), 3vw, var(--sp-12));
	border-radius: var(--radius-lg);
	background: var(--c-brand);
	color: #fff;
}

.faq__cta-title {
	margin: 0;
	font-size: var(--fs-xl);
	font-weight: 800;
}

.faq__cta-text {
	margin: var(--sp-2) 0 0;
	color: rgb(255 255 255 / 78%);
	font-size: var(--fs-sm);
	line-height: 1.7;
}

.faq__cta-btn {
	flex: 0 0 auto;
	padding: var(--sp-3) var(--sp-8);
	border-radius: var(--radius-pill);
	background: #fff;
	color: var(--c-brand);
	font-weight: 800;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}

.faq__cta-btn:hover {
	background: var(--c-logo-teal);
	color: #fff;
}

/* --- Narrow ---------------------------------------------------------------- */

@media (max-width: 900px) {
	/* The contents list stops being a column and becomes a row of chips above
	   the questions - sticky at 300px wide is a sidebar that eats the page. */
	.faq--columns .faq__grid { grid-template-columns: minmax(0, 1fr); }

	.faq__nav { position: static; }
	.faq__nav-title { margin-bottom: var(--sp-3); }

	.faq__nav-list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-2);
		border-inline-start: 0;
	}

	.faq__nav-list a {
		margin-inline-start: 0;
		padding: var(--sp-2) var(--sp-4);
		border: 1px solid var(--c-line);
		border-radius: var(--radius-pill);
		background: var(--c-bg);
	}

	.faq__nav-list a:hover,
	.faq__nav-list a.is-current {
		border-color: var(--c-logo-teal);
	}

	.faq__toggle { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-base); }
	.faq__a-inner > * { padding-inline: var(--sp-5); }
	.faq__a-inner > *:last-child { padding-block-end: var(--sp-5); }

	.faq__cta { flex-direction: column; align-items: stretch; text-align: center; }
	.faq__cta-btn { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.faq__a { transition: none; }
	.faq__sign::before,
	.faq__sign::after { transition: none; }
}