/*
 * FAQ. Figma 352:575 (FAQ): sections 140px apart, 140px after the hero and
 * before the footer; the heading (ExtraLight 100) in a 705px column, the
 * questions in the 1135px column from x 745. A closed question is Stone, 20px
 * from its line to the cap and 20px above the next line. An open one is Deep
 * Forest A behind the accent bar (the text 40px further in), 40px from its
 * line (none when it opens the list); its answer (Brando Sans 20, 860px wide)
 * sits 40px under the question and 40px above the next line. A 1px Stone line
 * runs under every question, and above the first one while it is closed.
 * The text variant (legal pages) shows every item as an open answer: the
 * title behind the accent bar, its text under it, 80px between items, no lines.
 */

.faq {
	padding-block: var(--space-140);
	color: var(--color-forest-a);
}

.faq__section {
	display: grid;
	grid-template-columns: minmax(0, 705fr) minmax(0, 1135fr);
	align-items: start;
}

.faq__section + .faq__section {
	margin-top: var(--space-140);
}

.faq__heading {
	font-size: var(--fs-100);
	font-weight: var(--fw-extralight);
	line-height: var(--lh-subheadline);
	letter-spacing: var(--ls-subheadline);
	text-box: trim-both cap alphabetic;
}

.faq__heading-line {
	display: block;
}

.faq__item {
	padding: calc(var(--space-20) - var(--stroke-hairline)) 0 var(--space-20);
	border-bottom: var(--stroke-hairline) solid var(--color-stone);
}

.faq__item:first-child:not([open]) {
	border-top: var(--stroke-hairline) solid var(--color-stone);
}

.faq__item[open] {
	padding: calc(var(--space-40) - var(--stroke-hairline)) 0 var(--space-40);
}

.faq__item[open]:first-child {
	padding-top: 0;
}

.faq__question {
	display: block;
	margin: 0;
	color: var(--color-stone);
	font-size: var(--fs-35);
	font-weight: var(--fw-text);
	line-height: var(--lh-body);
	text-box: trim-both cap alphabetic;
}

summary.faq__question {
	list-style: none;
	cursor: pointer;
}

summary.faq__question::-webkit-details-marker {
	display: none;
}

/* Open, and every title of the text variant: the accent bar (as .accent-bar) and the dark colour. */
.faq__item[open] > .faq__question,
.faq__entry > .faq__question {
	margin-left: calc(var(--stroke-accent) / -2);
	padding-left: calc(var(--space-40) - var(--stroke-accent) / 2);
	border-left: var(--stroke-accent) solid currentColor;
	color: var(--color-forest-a);
}

.faq__answer {
	max-width: 79.3%; /* 40 + 860 of the 1135px column */
	margin-top: var(--space-40);
	padding-left: var(--space-40);
	font-family: var(--font-sans);
	font-size: var(--fs-20);
	line-height: var(--lh-sans);
	letter-spacing: 0.01em;
	text-box: trim-both cap alphabetic;
}

.faq__answer > * + * {
	margin-top: 1lh;
}

.faq__answer :is(ul, ol) {
	padding-left: 1.25em;
}

/* Text variant: nothing collapses, 80px between the items. */
.faq__entry + .faq__entry {
	margin-top: var(--space-80);
}

/* Provisional until the mobile design: the heading above its questions. */
@media (max-width: 767px) {
	.faq__section {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-40);
	}

	.faq__answer {
		max-width: none;
	}
}