/* =====================================================================
   FAQ page — accordion-style Q&A grouped by topic.

   Consumes the theme design tokens (colors, spacing, radius, shadow,
   motion) defined in style.css so the page inherits the dark navy /
   orange scheme and stays readable in every color mode.

   Progressive enhancement: answers are visible by default so the page
   is fully readable with JavaScript disabled. assets/js/faq.js adds the
   `.faq-page--enhanced` class, which switches the answers to a
   collapsible accordion.
   ===================================================================== */

.faq-list {
	padding: var(--space-section) 0;
	background-color: var(--color-bg);
	color: var(--color-text);
}

.faq-list__inner {
	max-width: 860px;
}

/* --- Topic group --------------------------------------------------- */
.faq-group {
	margin-bottom: var(--space-10);
}

.faq-group:last-child {
	margin-bottom: 0;
}

.faq-group__header {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.faq-group__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-full);
	background-color: rgba(232, 122, 47, 0.14);
	color: var(--color-accent);
}

.faq-group__icon svg {
	width: 1.4rem;
	height: 1.4rem;
}

.faq-group__title {
	margin: 0;
	font-size: var(--text-xl);
	color: var(--color-heading);
	letter-spacing: var(--letter-tight);
}

/* --- Items --------------------------------------------------------- */
.faq-group__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.faq-item {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: border-color var(--duration-normal) var(--ease-default),
		box-shadow var(--duration-normal) var(--ease-default);
}

.faq-item.is-open {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow);
}

.faq-item__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	width: 100%;
	margin: 0;
	padding: var(--space-5) var(--space-5);
	background: transparent;
	border: 0;
	text-align: left;
	cursor: pointer;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
	line-height: 1.35;
	transition: color var(--duration-normal) var(--ease-default),
		background-color var(--duration-normal) var(--ease-default);
}

.faq-item__trigger:hover {
	color: var(--color-accent);
	background-color: var(--color-graphite-light);
}

.faq-item__trigger:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
}

.faq-item__question {
	flex: 1 1 auto;
}

/* Plus / minus indicator built from pseudo-elements (no extra markup). */
.faq-item__indicator {
	position: relative;
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--color-accent);
}

.faq-item__indicator::before,
.faq-item__indicator::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1rem;
	height: 2px;
	background-color: currentColor;
	border-radius: var(--radius-full);
	transform: translate(-50%, -50%);
	transition: transform var(--duration-normal) var(--ease-default),
		opacity var(--duration-normal) var(--ease-default);
}

.faq-item__indicator::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.is-open .faq-item__indicator::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

/* --- Answer -------------------------------------------------------- */
.faq-item__answer {
	color: var(--color-text);
}

.faq-item__answer-inner {
	padding: 0 var(--space-5) var(--space-5);
	font-size: var(--text-base);
	line-height: 1.7;
}

.faq-item__answer-inner p {
	margin: 0 0 var(--space-3);
}

.faq-item__answer-inner p:last-child {
	margin-bottom: 0;
}

.faq-item__answer-inner a {
	color: var(--color-accent);
	text-decoration: underline;
}

/* --- Enhanced (JS on): collapse answers into an accordion ---------- */
.faq-page--enhanced .faq-item__answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--duration-normal) var(--ease-default);
}

/* --- Closing CTA --------------------------------------------------- */
.faq-cta {
	padding: var(--space-section) 0;
	background-color: var(--color-navy-deep);
	color: var(--color-text);
	border-top: 1px solid var(--color-border);
}

.faq-cta__inner {
	max-width: 720px;
	text-align: center;
}

.faq-cta__heading {
	margin: 0 0 var(--space-3);
	font-size: var(--text-3xl);
	color: var(--color-heading);
	letter-spacing: var(--letter-tight);
}

.faq-cta__text {
	margin: 0 auto var(--space-6);
	max-width: 52ch;
	font-size: var(--text-lg);
}

.faq-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}

.faq-cta__btn {
	min-width: 12rem;
}

@media (max-width: 600px) {
	.faq-item__trigger {
		font-size: var(--text-base);
		padding: var(--space-4);
	}

	.faq-item__answer-inner {
		padding: 0 var(--space-4) var(--space-4);
	}

	.faq-cta__btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.faq-page--enhanced .faq-item__answer,
	.faq-item,
	.faq-item__trigger,
	.faq-item__indicator::before,
	.faq-item__indicator::after {
		transition: none;
	}
}