/*
 * Section: FAQ.
 *
 * Loaded only on pages carrying the `faq` layout.
 *
 * Design: _design/SharpQuery FAQ.dc.html. Concrete band; a stack of white rows
 * fenced by a 3px rule top and bottom, hairlines between. On mobile the rows
 * run edge to edge while the heading keeps its gutter.
 *
 * Overrides the generic <summary> chevron from base.css with the comp's
 * bordered +/- box.
 */


.faq__inner {
	display: flex;
	flex-direction: column;
	gap: 1.375rem; /* 22 */
}

.faq__header {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-3);
}

.faq__header > * {
	margin: 0;
}

.faq__heading {
	font-size: var(--sq-text-h2);
	line-height: 0.96;
}

.faq__intro {
	max-width: var(--sq-measure);
}


/* ========================================================== ACCORDION == */

/* Full bleed on mobile: the rows break the gutter, the heading does not. */
.faq__list {
	margin-inline: calc(var(--sq-gutter) * -1);
	border-top: 3px solid var(--sq-color-ink);
}

.faq-item {
	border-bottom: var(--sq-border-width-hair) solid var(--sq-color-hairline);
	background-color: var(--sq-color-paper);
	color: var(--sq-color-ink);
}

/* The stack closes with the same heavy rule it opens with. */
.faq-item:last-child {
	border-bottom: 3px solid var(--sq-color-ink);
}

.faq-item__summary {
	gap: 0.875rem; /* 14 */
	align-items: center;
	min-height: 4.25rem; /* 68 */
	padding: 1.125rem var(--sq-space-4); /* 18 16 */
	/* The h3 inside carries the type; summary must not double it. */
	font-size: inherit;
	font-weight: inherit;
}

.faq-item__summary:hover {
	background-color: var(--sq-color-surface-raised);
}

.faq-item__question {
	margin: 0;
	font-size: 1.1875rem; /* 19 */
	font-weight: var(--sq-weight-semibold);
	line-height: 1.3;
	text-wrap: pretty;
}

/* Replaces the chevron from base.css with the comp's bordered box. The glyph
 * is decoration — <details> already exposes its state to assistive tech.
 *
 * The three flex properties are load-bearing, not tidiness. base.css draws its
 * marker with borders and no content, so it never declares `display`; as a
 * flex item of the summary that pseudo-element blockifies, and a glyph in a
 * block box sits on its own line box at the top-left of the square rather than
 * in the middle of it. Centring has to be declared here, where the marker
 * first has a glyph in it.
 */
.faq-item__summary::after {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.125rem;  /* 34 */
	height: 2.125rem;
	border: var(--sq-border-width) solid currentColor;
	font-size: 1.4375rem; /* 23 */
	font-weight: var(--sq-weight-bold);
	line-height: 1;
	transform: none;
	transition: none;
	content: '+';
}

.faq-item[open] > .faq-item__summary::after {
	background-color: var(--sq-color-ink);
	color: var(--sq-color-paper);
	transform: none;
	content: '\2212'; /* − */
}

.faq-item__answer {
	padding: 0 var(--sq-space-4) 1.25rem; /* 0 16 20 */
	font-size: var(--sq-text-body);
	line-height: 1.55;
}

.faq-item__answer > * {
	max-width: none;
}

.faq-item__answer > * + * {
	margin-top: var(--sq-space-4);
}


/* ============================================================ DESKTOP == */

@media (min-width: 61.25em) {

	.faq__inner {
		gap: 2.25rem; /* 36 */
	}

	.faq__header {
		gap: 0.875rem; /* 14 */
	}

	.faq__heading {
		line-height: 0.98;
		letter-spacing: var(--sq-tracking-display);
	}

	/* Back inside the gutter, capped short of the container so the questions
	 * keep a readable line length. */
	.faq__list {
		max-width: 62.5rem; /* 1000 */
		margin-inline: 0;
	}

	.faq-item__summary {
		gap: 1.25rem; /* 20 */
		padding: 1.375rem var(--sq-space-5); /* 22 24 */
	}

	.faq-item__question {
		font-size: var(--sq-space-5); /* 24 */
	}

	.faq-item__summary::after {
		width: 2.375rem;  /* 38 */
		height: 2.375rem;
		font-size: 1.625rem; /* 26 */
	}

	/* The long right pad keeps the answer clear of the +/- box above it. */
	.faq-item__answer {
		padding: 0 5.125rem 1.625rem var(--sq-space-5); /* 0 82 26 24 */
		font-size: 1.1875rem; /* 19 */
		line-height: var(--sq-leading-relaxed);
	}

}