/**
 * FAQ page — focused Q&A accordion.
 * Enqueued only on the FAQ page.
 */

.site-main--faq {
	padding-block: clamp(var(--space-6), 5vw, var(--space-8)) clamp(var(--space-7), 6vw, var(--space-8));
	background:
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)) 0%,
			var(--color-surface) 18rem
		);
}

.faq-page {
	width: min(100% - (2 * var(--layout-inline-space)), 44rem);
	margin-inline: auto;
	display: grid;
	gap: clamp(var(--space-6), 4vw, var(--space-7));
}

.faq-page__intro {
	display: grid;
	gap: var(--space-3);
	justify-items: start;
	text-align: start;
	animation: faq-rise 700ms var(--motion-icon-ease-out, ease-out) both;
}

.faq-page__eyebrow {
	margin: 0;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.faq-page__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--color-ink);
}

.faq-page__lede {
	margin: 0;
	max-width: 34rem;
	font-size: var(--text-md);
	line-height: 1.6;
	color: var(--color-text-muted);
}

.faq-page__list {
	display: grid;
	gap: 0;
	border-block: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
}

.faq-page__item {
	margin: 0;
	border-block-end: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
	animation: faq-rise 680ms var(--motion-icon-ease-out, ease-out) both;
	animation-delay: var(--faq-delay, 0ms);
}

.faq-page__item:last-child {
	border-block-end: 0;
}

.faq-page__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: 2.75rem;
	padding-block: var(--space-4);
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-size: clamp(1rem, 1.6vw, 1.125rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--color-ink);
	transition: color var(--motion-icon-duration) var(--motion-icon-ease);
}

.faq-page__question::-webkit-details-marker {
	display: none;
}

.faq-page__question-text {
	flex: 1 1 auto;
	min-width: 0;
}

.faq-page__toggle {
	flex: 0 0 auto;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
	border-radius: 999px;
	background: var(--color-surface-elevated);
	color: var(--color-ink);
	transition:
		background-color var(--motion-icon-duration) var(--motion-icon-ease),
		border-color var(--motion-icon-duration) var(--motion-icon-ease),
		transform var(--motion-icon-duration) var(--motion-icon-ease),
		color var(--motion-icon-duration) var(--motion-icon-ease);
}

.faq-page__toggle::before {
	content: "+";
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1;
}

.faq-page__question:hover,
.faq-page__question:focus-visible {
	color: var(--color-text);
}

.faq-page__question:hover .faq-page__toggle,
.faq-page__question:focus-visible .faq-page__toggle {
	border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
	background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-elevated));
	color: var(--color-primary);
}

.faq-page__item[open] .faq-page__toggle {
	background: var(--color-ink);
	border-color: var(--color-ink);
	color: var(--color-surface-elevated);
	transform: rotate(0deg);
}

.faq-page__item[open] .faq-page__toggle::before {
	content: "−";
}

.faq-page__answer {
	padding-block: 0 var(--space-4);
	max-width: 38rem;
	font-size: var(--text-sm);
	line-height: 1.7;
	color: var(--color-text-muted);
	animation: faq-answer-in 220ms var(--motion-icon-ease-out, ease-out) both;
}

.faq-page__answer > *:first-child {
	margin-block-start: 0;
}

.faq-page__answer > *:last-child {
	margin-block-end: 0;
}

.faq-page__empty {
	margin: 0;
	padding: var(--space-5);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-subtle);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.faq-page__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	margin: 0;
	padding-top: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	animation: faq-rise 700ms var(--motion-icon-ease-out, ease-out) 180ms both;
}

.faq-page__contact {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding-inline: var(--space-4);
	border-radius: var(--radius-subtle);
	background: var(--color-cta);
	color: var(--color-surface-elevated);
	font-weight: 600;
	text-decoration: none;
	transition:
		background-color var(--motion-icon-duration) var(--motion-icon-ease),
		transform var(--motion-icon-duration) var(--motion-icon-ease);
}

.faq-page__contact:hover,
.faq-page__contact:focus-visible {
	background: var(--color-cta-hover);
	color: var(--color-surface-elevated);
}

.faq-page__contact:active {
	transform: scale(0.98);
}

@keyframes faq-rise {
	from {
		opacity: 0;
		transform: translateY(0.65rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes faq-answer-in {
	from {
		opacity: 0;
		transform: translateY(-0.25rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 640px) {
	.faq-page__question {
		align-items: flex-start;
		padding-block: var(--space-3);
	}

	.faq-page__toggle {
		margin-block-start: 0.15rem;
	}

	.faq-page__footer {
		flex-direction: column;
		align-items: flex-start;
	}

	.faq-page__contact {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.faq-page__intro,
	.faq-page__item,
	.faq-page__footer,
	.faq-page__answer {
		animation: none;
	}

	.faq-page__question,
	.faq-page__toggle,
	.faq-page__contact {
		transition: none;
	}

	.faq-page__contact:active {
		transform: none;
	}
}