/* ─────────────────────────────────────────
   FAQ Accordion (page-faq.php)
   Mirrors the .faq-item pattern on the About page (about.css) — grid-rows
   collapse trick, single item open at a time, first item open by default.
   ───────────────────────────────────────── */

.faq-items {
	padding: var(--space-16) 0;
	background: var(--color-surface);
}

.faq-accordion {
	max-width: 900px;
	margin: 0 auto;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-white);
}

.faq-accordion-item {
	border-bottom: 1px solid var(--color-border-light);
	padding-inline: var(--space-6);
}
.faq-accordion-item:last-child { border-bottom: none; }

.faq-accordion-item__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-5);
	font-size: var(--text-md);
	font-weight: 600;
	color: var(--color-text);
	text-align: left;
}

.faq-accordion-item__icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: var(--radius-full);
	border: 1.5px solid var(--color-primary-light);
	position: relative;
}
.faq-accordion-item__icon::before,
.faq-accordion-item__icon::after {
	content: '';
	position: absolute;
	background: var(--color-primary-light);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.faq-accordion-item__icon::before { width: 10px; height: 1.5px; }
.faq-accordion-item__icon::after { width: 1.5px; height: 10px; transition: opacity var(--transition); }
.faq-accordion-item.is-open .faq-accordion-item__icon::after { opacity: 0; }

/* Collapsed by default. max-height:0 + overflow:hidden guarantees the
   answer is fully clipped (zero visible height, no leftover sliver of
   text) when closed — faq.js sets an explicit pixel max-height (from
   scrollHeight) to open, and 0 to close, rather than relying on a
   grid-template-rows fr-unit transition, which doesn't reliably collapse
   all the way in every browser. */
.faq-accordion-item__answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--transition);
}
.faq-accordion-item__answer > div {
	font-size: var(--text-sm);
	line-height: 1.6;
	color: var(--color-text-secondary);
	padding-bottom: var(--space-5);
}

@media (max-width: 768px) {
	.faq-items { padding: var(--space-12) 0; }
	.faq-accordion-item { padding-inline: var(--space-4); }
	.faq-accordion-item__question { padding-block: var(--space-4); font-size: var(--text-sm); }
}