/* ==========================================================================
   Ovation — FAQ
   Two bands: the help-centre title band with search and topic pills, and the
   list of questions, each a native <details> that opens to its answer.

   The comp is drawn in neutral wireframe colours (grey band, green button). It
   is mapped onto the site's own palette here - the foam band and orange button
   the News & Articles title band already uses - so the two sibling pages match.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Title band
   -------------------------------------------------------------------------- */
.o-faq__band {
	padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem) clamp(3rem, 2rem + 3.5vw, 5rem);
}

.o-faq__band-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.o-faq__title {
	margin: 1rem 0 0;
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-bold);
	font-size: var(--o-fs-h1);
	line-height: 1.08;
	text-transform: uppercase;
}

.o-faq__lede {
	max-width: 40rem;
	margin: 1rem 0 0;
	color: var(--o-ink-mist);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body-lg);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Search
   The field and button share one white bar. The bar, not the input, carries
   the focus ring, so the whole control lights up as one.
   -------------------------------------------------------------------------- */
.o-faq__search {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	max-width: 720px;
	margin-top: var(--o-space-lg);
	padding: 0.5rem 0.5rem 0.5rem 1.25rem;
	border: 1px solid var(--o-rule-cool);
	border-radius: var(--o-radius-md);
	background-color: var(--o-white);
	transition: border-color var(--o-transition), box-shadow var(--o-transition);
}

.o-faq__search:focus-within {
	border-color: var(--o-navy);
	box-shadow: 0 0 0 3px rgba(29, 48, 91, 0.12);
}

.o-faq__search-icon {
	display: inline-flex;
	flex: none;
	color: var(--o-ink-mist);
}

.o-faq__search-icon svg {
	width: 18px;
	height: 18px;
}

.o-faq__search-field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.625rem 0;
	border: 0;
	background: none;
	color: var(--o-ink);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body);
	outline: none;
}

.o-faq__search-field::placeholder {
	color: var(--o-ink-mist);
	opacity: 1;
}

/* The bar has its own clear link in the results line; the browser's "x" is noise. */
.o-faq__search-field::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.o-faq__search-submit {
	flex: none;
	padding: 0.75rem 1.5rem;
}

/* --------------------------------------------------------------------------
   Topic pills
   Smaller than the Events pills: here they are shortcuts under a search bar,
   not the page's primary navigation.
   -------------------------------------------------------------------------- */
.o-faq__topics {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	margin-top: var(--o-space-lg);
}

.o-faq__topics-label {
	margin-inline-end: 0.25rem;
	color: var(--o-ink-mist);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-small);
}

.o-faq__pill {
	display: inline-flex;
	align-items: center;
	padding: 0.4375rem 1rem;
	border: 1px solid var(--o-rule-cool);
	border-radius: var(--o-radius-pill);
	background-color: var(--o-white);
	color: var(--o-navy);
	font-family: var(--o-font-body);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-small);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--o-transition),
		border-color var(--o-transition),
		color var(--o-transition);
}

.o-faq__pill:hover,
.o-faq__pill:focus-visible {
	border-color: var(--o-navy);
	color: var(--o-navy);
}

.o-faq__pill.is-active {
	border-color: var(--o-navy);
	background-color: var(--o-navy);
	color: var(--o-white);
}

/* --------------------------------------------------------------------------
   Questions
   -------------------------------------------------------------------------- */
.o-faq__body {
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) var(--o-section-y);
	background-color: var(--o-white);
}

.o-faq__status {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 1rem;
}

.o-faq__count {
	margin: 0;
	color: var(--o-ink-mist);
	font-family: var(--o-font-body);
	font-weight: var(--o-fw-regular);
	font-size: var(--o-fs-small);
	line-height: 1.4;
}

.o-faq__clear {
	color: var(--o-navy);
	font-family: var(--o-font-body);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-small);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.o-faq__clear:hover,
.o-faq__clear:focus-visible {
	color: var(--o-orange-dark);
}

.o-faq__list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.o-faq__item {
	border: 1px solid var(--o-rule-cool);
	border-radius: var(--o-radius-md);
	background-color: var(--o-white);
	transition: border-color var(--o-transition), box-shadow var(--o-transition);

	/* A deep-linked question scrolls to below the sticky header, not under it. */
	scroll-margin-top: calc(var(--o-header-height) + 1.5rem);
}

.o-faq__item:hover,
.o-faq__item[open] {
	border-color: var(--o-mist);
}

.o-faq__item[open] {
	box-shadow: var(--o-shadow-card);
}

.o-faq__summary {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: 1.5rem 4rem 1.5rem 1.5rem;
	cursor: pointer;
	list-style: none;
}

/* Safari still draws its own marker unless it is removed by name. */
.o-faq__summary::-webkit-details-marker {
	display: none;
}

.o-faq__summary:focus-visible {
	border-radius: var(--o-radius-md);
	outline: 2px solid var(--o-focus);
	outline-offset: 2px;
}

.o-faq__question {
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-semibold);
	font-size: var(--o-fs-body-lg);
	line-height: 1.35;
}

/* A drawn chevron: two borders of a square, turned. Right when closed, down when open. */
.o-faq__chevron {
	position: absolute;
	top: 50%;
	right: 1.75rem;
	width: 0.5rem;
	height: 0.5rem;
	margin-top: -0.25rem;
	border-top: 1.5px solid var(--o-ink-mist);
	border-right: 1.5px solid var(--o-ink-mist);
	transform: rotate(45deg);
	transition: transform var(--o-transition), border-color var(--o-transition);
}

.o-faq__item[open] .o-faq__chevron {
	top: 2.125rem;
	transform: rotate(135deg);
}

.o-faq__summary:hover .o-faq__chevron {
	border-color: var(--o-navy);
}

.o-faq__answer {
	padding: 0 4rem 1.5rem 1.5rem;
	color: var(--o-ink);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body);
	line-height: var(--o-lh-body);
}

.o-faq__answer > :first-child {
	margin-top: 0;
}

.o-faq__answer > :last-child {
	margin-bottom: 0;
}

.o-faq__answer p,
.o-faq__answer ul,
.o-faq__answer ol {
	margin-block: 0 1em;
}

.o-faq__answer ul,
.o-faq__answer ol {
	padding-inline-start: 1.25em;
}

.o-faq__answer a {
	color: var(--o-navy);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.o-faq__answer a:hover,
.o-faq__answer a:focus-visible {
	color: var(--o-orange-dark);
}

.o-faq__empty {
	margin: 0;
	padding: var(--o-space-xl) var(--o-space-md);
	border: 1px dashed var(--o-rule-cool);
	border-radius: var(--o-radius-md);
	color: var(--o-ink-soft);
	font-family: var(--o-font-body);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.o-faq__search {
		padding-left: 1rem;
	}

	.o-faq__search-submit {
		padding-inline: 1rem;
	}

	.o-faq__summary {
		padding: 1.25rem 3rem 1.25rem 1.25rem;
	}

	.o-faq__chevron {
		right: 1.25rem;
	}

	.o-faq__item[open] .o-faq__chevron {
		top: 1.875rem;
	}

	.o-faq__answer {
		padding: 0 1.25rem 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.o-faq__chevron,
	.o-faq__item,
	.o-faq__search {
		transition: none;
	}
}