/*
 * FAQ accordion — handler-page styles.
 * Intentionally minimal: the page uses the core design system (foundation tokens + the .card,
 * .section, .btn, .input components — same as the homepage) for everything. This file only adds
 * the accordion mechanics, so the FAQ matches the main site UI and respects the light/dark theme.
 *
 * NOTE: no CSS transition on .faq-answer — a max-height transition was getting "stuck" on this
 * page (the in-flight transition value outranks even inline styles), which kept answers collapsed.
 * Open/close is therefore instant via the .active class (set by toggleFaq()).
 */

/* Each FAQ row is a core .card; neutralize its padding so the trigger spans the full width. */
.faq-item {
	padding: 0;
	overflow: hidden;
}

.faq-question {
	width: 100%;
	padding: 1.1rem 1.4rem;
	background: transparent;
	border: 0;
	color: inherit;
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.faq-question:hover {
	background: var(--surface-hover, rgba(127, 127, 127, 0.06));
}

/* +/- indicator via a pseudo-element (no duplicate markup). */
.faq-question::after {
	content: '+';
	font-size: 1.4rem;
	line-height: 1;
	font-weight: 400;
	color: var(--accent, #d4a843);
	flex-shrink: 0;
}

.faq-item.active .faq-question::after {
	content: '−';
}

/* Collapsible body — toggled open by the .active class on the row. */
.faq-answer {
	max-height: 0;
	overflow: hidden;
}

.faq-item.active .faq-answer {
	max-height: none;
}

.faq-answer p {
	margin: 0;
	padding: 0 1.4rem 1.2rem;
	color: var(--fg-muted, #9aa0aa);
	line-height: 1.7;
}