/*
 * Full width.
 *
 * Capping the accordion at a text measure left the rules stopping short of
 * the container while the section rule above ran the full width, which read
 * as broken rather than as a deliberate column. The rows now align with the
 * rest of the page grid; the answer copy keeps its own measure below.
 */
.faq-accordion {
	border-top: 1px solid var(--c-border);
}

.faq-item {
	border-bottom: 1px solid var(--c-border);
}

.faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-lg);
	min-height: 44px;
	padding: var(--sp-md) 0;
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-heading);
	cursor: pointer;
	list-style: none;
	transition: color var(--dur-fast) var(--ease);
}

.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::marker { content: ""; }

.faq-item__question:hover,
.faq-item[open] .faq-item__question {
	color: var(--c-accent-text);
}

/* Plus/minus rather than a chevron: reads as a control, not decoration. */
.faq-item__marker {
	position: relative;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

.faq-item__marker::before,
.faq-item__marker::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: currentColor;
	transform: translate(-50%, -50%);
	transition: opacity var(--dur-base) var(--ease),
	            transform var(--dur-base) var(--ease);
}

.faq-item__marker::before {
	width: 16px;
	height: 2px;
}

.faq-item__marker::after {
	width: 2px;
	height: 16px;
}

.faq-item[open] .faq-item__marker::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item__answer {
	/* The row is full width but prose is not readable at that measure. */
	max-width: 68ch;
	padding-bottom: var(--sp-md);
	color: var(--c-text-muted);
}