/*
 * FAQ screen.
 *
 * The accordion is native <details>/<summary>, so there is no state class to
 * style against: [open] is the browser's own, and the global :focus-visible ring
 * already reaches the summary because it is focusable by default.
 */

/*
 * Search on the left, topic chips on the right — the same two-column bar the
 * Blog uses, stacked on a phone. Declared here instead of reusing
 * .blog-toolbar: a class named after one screen should not be load-bearing on
 * another, and these four declarations are cheaper than that coupling.
 *
 * The heading that used to sit above this is gone: the hero already says
 * Frequently Asked Questions, and repeating it pushed the questions down a
 * screen on a phone.
 */
.faq-toolbar {
	display: grid;
	gap: var(--space-5);
	align-items: center;
	margin-bottom: var(--space-6);
}

.faq-toolbar .pill-form__button {
	min-width: 120px;
}

@media (min-width: 992px) {
	.faq-toolbar {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: var(--space-8);
	}
}

.faq__search {
	max-width: none;
}

/*
 * The badge numbers are a CSS counter, not markup. A counter skips what is
 * hidden, so filtering by topic renumbers the visible questions 1, 2, 3 —
 * where printing the index from PHP left the numbers of the full list and a
 * filtered pair read "10" and "15", which looks like a fault. It also works
 * with JavaScript off, where the filtering happens server-side.
 */
.faq-grid {
	counter-reset: faq-item;
	display: grid;
	gap: var(--space-4);
	/*
	 * align-items: start is what keeps an opened question from stretching the
	 * one beside it: each cell keeps its own height, so only the answer that was
	 * asked for grows.
	 */
	align-items: start;
	margin-top: var(--space-5);
}

/*
 * ...but while everything is closed, two cards side by side have to look like
 * one row. A question that wraps to two lines was leaving its neighbour
 * visibly shorter, which reads as a mistake rather than as a difference in
 * length. So the row stretches until something is open, and the moment a
 * question opens the rule stops matching and each cell goes back to its own
 * height — otherwise the card beside an answer would grow into an empty box as
 * tall as the text next to it.
 *
 * Written as :not(:has(…)) on purpose: a browser that does not understand
 * :has() drops the whole rule and keeps the old behaviour, which is the safe
 * one. The centring below is what makes a stretched card look deliberate
 * instead of top-heavy, and only applies while the card is closed, where the
 * summary is the only thing in it.
 */
.faq-grid:not(:has(.faq-item[open])) {
	align-items: stretch;
}

/*
 * Nothing matched: the grid stays in the flow, empty, still carrying its own
 * 20px top margin, so the notice below it landed 56px under the toolbar where
 * the Blog and Locations put theirs at 32. A grid container does not
 * self-collapse, so the toolbar's bottom margin and the notice's top margin
 * cannot merge through it — taking it out of the flow is what lets them, and
 * they then collapse to the larger of the two, which is the notice's own 32.
 *
 * Written against the items rather than against filterable.js's data-matches,
 * because the server marks non-matching questions hidden too (see the template)
 * and the screen has to behave the same with JavaScript off. :has() is already
 * how this file asks the same kind of question, three rules up.
 */
.faq-grid:not(:has(.faq-item:not([hidden]))) {
	display: none;
}

.faq-item:not([open]) {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (min-width: 992px) {
	.faq-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.faq-item {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.faq-item:hover {
	border-color: var(--color-link-border);
}

.faq-item[open] {
	border-color: var(--color-link-border);
	box-shadow: 0 2px 10px rgb(12 43 111 / 7%);
}

.faq-item__summary {
	display: flex;
	gap: var(--space-4);
	align-items: center;
	padding: var(--space-4) var(--space-5);
	cursor: pointer;
	border-radius: inherit;

	/*
	 * A summary is a control, not prose. Left selectable, a tap on a phone
	 * highlights the number and the question in the browser's grey selection
	 * block, which also flattens the navy to near black — it reads as though
	 * something went wrong rather than as a question being opened.
	 *
	 * The answer below stays selectable: that is the part worth copying.
	 */
	user-select: none;

	/* Both are needed: the standard property and Safari's own marker. */
	list-style: none;
}

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

.faq-item:not([hidden]) {
	counter-increment: faq-item;
}

.faq-item__number::before {
	content: counter(faq-item);
}

.faq-item__number {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 2rem;
	height: 2rem;
	font-family: var(--font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-navy);
	background: var(--color-icon-bg);
	border-radius: 50%;
	transition: color var(--transition), background-color var(--transition);
}

/*
 * The open question owns the badge: it is the one place on the card with enough
 * weight to mark which answer is showing without adding a second signal. White
 * on --color-primary is the same pairing the primary buttons use.
 */
.faq-item[open] .faq-item__number {
	color: var(--color-white);
	background: var(--color-primary);
}

.faq-item__question {
	flex: 1;
	font-family: var(--font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-navy);
}

.faq-item__toggle {
	flex-shrink: 0;
	color: var(--color-link);
	transition: transform var(--transition), color var(--transition);
}

/*
 * A plus turned 45 degrees reads as a close control without a second icon in the
 * markup to keep in step with the state. Frozen by the global reduced-motion
 * block, where the shape still differs between the two states.
 */
.faq-item[open] .faq-item__toggle {
	color: var(--color-primary);
	transform: rotate(45deg);
}

.faq-item__answer {
	/*
	 * Indented past the badge so the answer lines up with its question rather
	 * than with the number, which is what the eye follows back up.
	 */
	padding: 0 var(--space-5) var(--space-5) calc(var(--space-5) + 2rem + var(--space-4));
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--color-text);
}

/*
 * The answer is block content now, so it arrives as one or more paragraphs and
 * sometimes a list. The outer box keeps the indent; these take care of the
 * spacing between pieces, and of not leaving a gap under the last one.
 */
.faq-item__answer > :first-child {
	margin-top: 0;
}

.faq-item__answer > :last-child {
	margin-bottom: 0;
}

.faq-item__answer ul,
.faq-item__answer ol {
	margin: var(--space-3) 0;
	padding-left: 1.25rem;
}

.faq-item__answer li + li {
	margin-top: var(--space-2);
}

@media (max-width: 575.98px) {
	.faq-item__summary {
		gap: var(--space-3);
		padding: var(--space-4);
	}

	.faq-item__answer {
		padding: 0 var(--space-4) var(--space-4);
	}
}

.faq .info-banner {
	margin-top: var(--space-8);
}

/*
 * The emphasis the source document carries. 600 rather than the browser's 700:
 * it is the weight the rest of the theme uses for semibold, and Inter at 700
 * inside running text reads heavier than the document intends.
 */
.faq-item__answer strong {
	font-weight: 600;
	color: var(--color-navy-soft);
}