/* Section: FAQ (native details/summary). */

.section-faq__heading {
	margin-top: 0;
}

.section-faq__list,
.section-faq__column {
	display: grid;
	gap: var(--space-3);
	align-items: start;
}

/* Two columns, each its own stack: an answer opening on the left leaves the
   right column as it is. */
@media (min-width: 56rem) {

	.section-faq__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-3) var(--space-5);
	}
}

.section-faq__item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-surface);
}

.section-faq__question {
	display: flex;
	gap: var(--space-4);
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	padding: var(--space-4) var(--space-5);
	color: var(--color-navy);
	font-family: var(--font-heading);
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

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

/* A small decorative icon before the question, in a soft circle. */
.section-faq__icon {
	display: inline-grid;
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-pill);
	background: var(--color-surface-accent);
	color: var(--color-accent);
	place-items: center;
}

.section-faq__icon .icon {
	width: 1.25rem;
	height: 1.25rem;
}

.section-faq__text {
	flex: 1;
}

.section-faq__chevron {
	flex-shrink: 0;
	transition: transform var(--duration-fast) var(--ease);
}

.section-faq__item[open] .section-faq__chevron {
	transform: rotate(180deg);
}

.section-faq__answer {
	padding: 0 var(--space-5) var(--space-5);
}

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

/*
 * Answers expand and collapse (browsers with ::details-content: Chrome,
 * Edge; elsewhere they open at once). Opening 250ms, closing 150ms.
 */
@media (prefers-reduced-motion: no-preference) {

	.section-faq__list {
		interpolate-size: allow-keywords;
	}

	.section-faq__item::details-content {
		block-size: 0;
		overflow: clip;
		transition:
			block-size var(--duration-fast) var(--ease),
			content-visibility var(--duration-fast) allow-discrete;
	}

	.section-faq__item[open]::details-content {
		block-size: auto;
		transition-duration: var(--duration-base);
	}
}