/*
 * FAQ accordion — native <details>/<summary>.
 *
 * Reproduces the original .faq-q/.faq-a design, which was driven by a JS "open"
 * class. The native element gives the same visuals with zero JS, correct
 * keyboard/screen-reader semantics, and answers that stay in the DOM for
 * crawlers and FAQ schema even while collapsed.
 */

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

.faq-item > summary {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	text-align: right;
	font-size: 16px;
	font-weight: 700;
	color: var(--text-dark);
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	list-style: none;
}

/* Hide the default disclosure triangle in both engines. */
.faq-item > summary::-webkit-details-marker {
	display: none;
}
.faq-item > summary::marker {
	content: "";
}

/* The chevron the original design used, rebuilt as a pseudo-element. */
.faq-item > summary::after {
	content: "⌄";
	flex: 0 0 auto;
	font-size: 18px;
	line-height: 1;
	color: var(--blue-500);
	transition: transform .25s ease;
}

.faq-item[open] > summary::after {
	transform: rotate(180deg);
}

.faq-item > summary:hover {
	color: var(--blue-700);
}

.faq-item > summary:focus-visible {
	outline: 2px solid var(--blue-600);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Answer body: every direct child of <details> except the <summary>. */
.faq-item > *:not(summary) {
	font-size: 14px;
	color: var(--text-mid);
	line-height: 1.8;
	margin: 0 0 18px;
}

.faq-item > *:not(summary):last-child {
	padding-bottom: 4px;
}

.faq-item ul,
.faq-item ol {
	padding-inline-start: 22px;
}

@media (prefers-reduced-motion: reduce) {
	.faq-item > summary::after {
		transition: none;
	}
}