/**
 * FAQ page (Phase 18). Registered by public/class-faq-page.php, enqueued
 * only on `/faq/`.
 *
 * Breakpoints match public.css: sm: 576px  md: 768px  lg: 992px  xl: 1200px
 */

.emobility-faq__header {
	max-width: 42rem;
	margin-inline: auto;
	margin-bottom: var(--emobility-space-8);
	text-align: center;
}

@media (min-width: 992px) {
	.emobility-faq__header {
		max-width: 46rem;
	}
}

.emobility-faq__lede {
	margin-top: var(--emobility-space-3);
}

.emobility-faq__lede a {
	font-weight: var(--emobility-font-weight-semibold);
}

/* --- Search ------------------------------------------------------------ */

.emobility-faq__search {
	max-width: 30rem;
	margin-inline: auto;
	margin-bottom: var(--emobility-space-10);
	text-align: center;
}

@media (min-width: 992px) {
	.emobility-faq__search {
		max-width: 34rem;
	}
}

.emobility-faq__search .emobility-label {
	text-align: left;
}

.emobility-faq__search-field {
	position: relative;
}

.emobility-faq__search-icon {
	position: absolute;
	top: 50%;
	left: var(--emobility-space-4);
	transform: translateY(-50%);
	width: 1.1rem;
	height: 1.1rem;
	color: var(--emobility-color-text-muted);
	pointer-events: none;
}

.emobility-faq__search-field .emobility-input {
	padding-left: var(--emobility-space-10);
	border-radius: var(--emobility-radius-full);
	box-shadow: var(--emobility-shadow-sm);
}

.emobility-faq__search-status {
	text-align: center;
}

/* --- List ---------------------------------------------------------------- */

.emobility-faq__list {
	max-width: 40rem;
	margin-inline: auto;
	background: var(--emobility-color-surface);
	border: var(--emobility-border-width) solid var(--emobility-color-border);
	border-radius: var(--emobility-radius-lg);
	box-shadow: var(--emobility-shadow-sm);
	overflow: hidden;
}

@media (min-width: 992px) {
	.emobility-faq__list {
		max-width: 52rem;
	}
}

@media (min-width: 1200px) {
	.emobility-faq__list {
		max-width: 58rem;
	}
}

.emobility-faq__item + .emobility-faq__item {
	border-top: var(--emobility-border-width) solid var(--emobility-color-border);
}

.emobility-faq__item:hover {
	background: var(--emobility-color-surface-muted);
}

.emobility-faq__question {
	margin: 0;
	font-size: var(--emobility-text-sm);
}

.emobility-faq__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--emobility-space-4);
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	font: inherit;
	font-weight: var(--emobility-font-weight-semibold);
	color: var(--emobility-color-heading);
	padding: var(--emobility-space-4) var(--emobility-space-5);
	cursor: pointer;
	transition: color var(--emobility-transition-fast);
}

.emobility-faq__trigger:hover,
.emobility-faq__trigger[aria-expanded="true"] {
	color: var(--emobility-primary-700);
}

.emobility-faq__icon {
	position: relative;
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--emobility-radius-full);
	background: var(--emobility-color-surface-muted);
	color: var(--emobility-color-text-muted);
	transition: background var(--emobility-transition-fast), color var(--emobility-transition-fast);
}

.emobility-faq__icon::before {
	content: "";
	position: absolute;
	top: 45%;
	left: 50%;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
	transition: transform var(--emobility-transition-fast);
}

.emobility-faq__trigger[aria-expanded="true"] .emobility-faq__icon {
	background: var(--emobility-primary-50);
	color: var(--emobility-primary-600);
}

.emobility-faq__trigger[aria-expanded="true"] .emobility-faq__icon::before {
	transform: translate(-50%, -60%) rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
	.emobility-faq__icon::before {
		transition: none;
	}
}

.emobility-faq__answer {
	padding: 0 var(--emobility-space-5) var(--emobility-space-5);
	color: var(--emobility-color-text);
	font-size: var(--emobility-text-sm);
	max-width: 60ch;
}

.emobility-faq__answer > *:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.emobility-faq__answer:not([hidden]) {
		animation: emobility-faq-reveal 0.18s ease;
	}
}

@keyframes emobility-faq-reveal {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.emobility-faq__no-results {
	margin-top: var(--emobility-space-8);
}

/* --- Bottom CTA ----------------------------------------------------- */

.emobility-faq__cta {
	margin-top: var(--emobility-space-12);
	padding: var(--emobility-space-8);
	text-align: center;
	background: var(--emobility-color-surface-muted);
	border-radius: var(--emobility-radius-lg);
}

@media (min-width: 992px) {
	.emobility-faq__cta {
		max-width: 52rem;
		margin-inline: auto;
	}
}

@media (min-width: 1200px) {
	.emobility-faq__cta {
		max-width: 58rem;
	}
}

.emobility-faq__cta h2 {
	margin-top: 0;
	margin-bottom: var(--emobility-space-2);
}

.emobility-faq__cta p {
	margin-inline: auto;
	margin-bottom: var(--emobility-space-5);
	max-width: 32rem;
}