/* =========================================================
   SECTION: HOME FAQ
   Premium FAQ accordion — Apple / Tesla inspired. Reuses the
   eyebrow/card language already established elsewhere on the
   homepage. Styled entirely via native details[open] — no
   custom accordion JavaScript. Uses CSS variables from
   style.css only — no variables redefined. Transitions only
   — no keyframes.
========================================================= */


/* ---------------------------------------------------------
   1. Section Container
--------------------------------------------------------- */
.home-faq {
	width: 100%;
	background-color: var(--color-background);
	padding-block: var(--space-3xl);
}


/* ---------------------------------------------------------
   2. Large Centered Intro
--------------------------------------------------------- */
.home-faq__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	max-width: var(--container-md);
	margin-inline: auto;
	margin-bottom: var(--space-2xl);
	padding-inline: var(--container-padding-inline);
	text-align: center;
}

.home-faq__eyebrow {
	display: inline-flex;
	align-items: center;
	padding: var(--space-xxs) var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.home-faq__heading {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.home-faq__description {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-secondary);
	max-width: var(--container-sm);
}


/* ---------------------------------------------------------
   3. FAQ List Container
--------------------------------------------------------- */
.home-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	max-width: var(--container-md);
	margin-inline: auto;
	padding-inline: var(--container-padding-inline);
}


/* ---------------------------------------------------------
   4. FAQ Item Card
--------------------------------------------------------- */
.home-faq__item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background-color: var(--color-background);
	overflow: hidden;
	transition: border-color var(--transition-slow), box-shadow var(--transition-slow), opacity var(--transition-slow);
}


/* ---------------------------------------------------------
   5. Question Row (summary)
--------------------------------------------------------- */
.home-faq__question {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-lg) var(--space-xl);
	list-style: none;
	cursor: pointer;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-normal);
	color: var(--color-text-primary);
	transition: color var(--transition-base);
}

.home-faq__question::-webkit-details-marker {
	display: none;
}

.home-faq__question::marker {
	content: '';
}

/* Custom disclosure indicator, drawn with borders only — no icon font, no image. */
.home-faq__question::after {
	content: '';
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--color-text-primary);
	border-bottom: 2px solid var(--color-text-primary);
	transform: rotate(45deg);
	transition: transform var(--transition-base), border-color var(--transition-base);
}


/* ---------------------------------------------------------
   6. Answer Area
--------------------------------------------------------- */
.home-faq__answer {
	padding: 0 var(--space-xl) var(--space-lg);
}

.home-faq__answer-text {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-secondary);
}


/* ---------------------------------------------------------
   7. Open State Styling (native details[open] only)
--------------------------------------------------------- */
.home-faq__item[open] {
	border-color: transparent;
	box-shadow: var(--shadow-lg);
}

.home-faq__item[open] .home-faq__question {
	border-bottom: 1px solid var(--color-border);
}

.home-faq__item[open] .home-faq__question::after {
	transform: rotate(225deg);
}


/* ---------------------------------------------------------
   8. Premium Hover Interaction
--------------------------------------------------------- */
.home-faq__item:hover,
.home-faq__item.is-active,
.home-faq__item.is-touched {
	border-color: var(--color-accent);
}

.home-faq__item:hover .home-faq__question,
.home-faq__item.is-active .home-faq__question,
.home-faq__item.is-touched .home-faq__question {
	color: var(--color-accent-dark);
}

.home-faq__item:hover .home-faq__question::after,
.home-faq__item.is-active .home-faq__question::after,
.home-faq__item.is-touched .home-faq__question::after {
	border-color: var(--color-accent-dark);
}


/* ---------------------------------------------------------
   9. Focus-Visible Styling
--------------------------------------------------------- */
.home-faq__question:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
	border-radius: var(--radius-sm);
}


/* ---------------------------------------------------------
   10. Desktop Refinement (≥1280px)
--------------------------------------------------------- */
@media (min-width: 1280px) {

	.home-faq {
		padding-block: var(--space-4xl);
	}

	.home-faq__question {
		padding: var(--space-xl) var(--space-2xl);
	}

	.home-faq__answer {
		padding: 0 var(--space-2xl) var(--space-xl);
	}
}


/* ---------------------------------------------------------
   11. Responsive — Tablet (≤1024px)
--------------------------------------------------------- */
@media (max-width: 1024px) {

	.home-faq__heading {
		font-size: var(--font-size-3xl);
	}

	.home-faq__list {
		max-width: var(--container-sm);
	}
}


/* ---------------------------------------------------------
   12. Responsive — Mobile (≤576px)
--------------------------------------------------------- */
@media (max-width: 576px) {

	.home-faq {
		padding-block: var(--space-2xl);
	}

	.home-faq__intro {
		margin-bottom: var(--space-xl);
	}

	.home-faq__heading {
		font-size: var(--font-size-2xl);
	}

	.home-faq__description {
		font-size: var(--font-size-sm);
	}

	.home-faq__list {
		gap: var(--space-sm);
	}

	.home-faq__question {
		padding: var(--space-md) var(--space-lg);
		font-size: var(--font-size-sm);
		gap: var(--space-sm);
	}

	.home-faq__answer {
		padding: 0 var(--space-lg) var(--space-md);
	}

	.home-faq__answer-text {
		font-size: var(--font-size-xs);
	}
}


/* ---------------------------------------------------------
   JS State Class Support
   Added for assets/js/home-faq.js. Opacity and transform
   only — no layout-affecting properties, no keyframe
   animations, transitions only.
--------------------------------------------------------- */

/* .is-revealed — progressive enhancement via the CSS `scripting`
   media feature, matching the strategy established for Featured
   Models, Feature Pillars, Comparison Teaser, Dual CTA and
   Testimonials: the pre-reveal hidden state only ever applies in
   browsers that report scripting as enabled. If JavaScript is
   disabled (or the browser doesn't support this media feature), this
   block is skipped entirely and FAQ items stay in their normal,
   fully-visible state — content is never blocked on scroll.

   No separate ".is-revealed" override rule is defined: once the
   class is added, the ":not(.is-revealed)" selector below simply
   stops matching, and the item falls back to its normal (visible,
   no transform) state — which also means this can never conflict
   with the existing hover-lift/open-state styling on
   .home-faq__item above. */
@media (scripting: enabled) {

	.home-faq__item:not(.is-revealed) {
		opacity: 0;
		transform: translateY(24px);
	}
}

/* .is-active / .is-touched — desktop hover-parity (keyboard focus,
   via focusin/focusout) and mobile tap feedback are defined above,
   appended to each existing hover rule so all states always stay
   visually identical. */