/* ==========================================================================
   FAQ
   Markup lives in: page-templates/home.php (section "9. FAQ"),
   and also reused as-is on single-service.php and single-location.php.
   Accordion open/close is driven by .is-open (set in assets/js/main.js) so the
   height can animate; the <details> element stays for no-JS accessibility.
   ========================================================================== */

.faq-section__grid {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	align-items: start;
	gap: 48px;
	position: relative;
}

/* Intro stays in view while the longer answer column scrolls past it. */
.faq-section__intro,
.faq-section__left {
	position: sticky;
	top: 120px;
	align-self: start;
}

.faq-accordion {
	border-top: 1px solid #e5e7eb;
	counter-reset: faq-counter;
}

.faq-item {
	border-bottom: 1px solid #e5e7eb;
	padding: var(--space-md) 0;
	counter-increment: faq-counter;
}

.faq-item__summary-preview {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	margin-bottom: var(--space-sm);
}

.faq-item summary {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	color: var(--color-text-dark);
}

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

.faq-item__number {
	color: var(--color-accent, #FE5C08);
	font-weight: var(--fw-semibold);
	min-width: 24px;
}

/* Templates print the number themselves (sprintf '%02d'). The counter only
   fills in for the Gutenberg FAQ block, which renders an empty span —
   :empty is what stops the two sources from printing "0101". */
.faq-item__number:empty::before {
	content: counter(faq-counter, decimal-leading-zero);
}

.faq-item__question {
	flex: 1;
}

.faq-item__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: var(--color-primary, #03193C);
	transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.faq-item.is-open .faq-item__toggle,
.faq-item.is-open .faq-item__icon,
.faq-item.is-open .faq-icon {
	transform: rotate(180deg);
}

/* Without JS there is no .is-open class, so follow the native open state.
   Kept off enhanced accordions so the chevron unwinds in step with the panel
   rather than waiting for `open` to be removed at the end of the animation. */
.faq-accordion:not(.is-enhanced) .faq-item[open] .faq-item__toggle {
	transform: rotate(180deg);
}

/* ---------------- Animated answer ----------------
   0fr -> 1fr animates to the content's natural height without a magic
   max-height. The inner wrapper must own the overflow for it to clip.
   Scoped to .is-enhanced (added by main.js) so that with JS disabled the
   native <details> still reveals its answer instead of a collapsed box. */
.faq-accordion.is-enhanced .faq-item__answer {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	opacity: 0;
	transition: grid-template-rows 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}

.faq-accordion.is-enhanced .faq-item.is-open .faq-item__answer {
	grid-template-rows: 1fr;
	opacity: 1;
}

/* Inset lines the answer up with the question text, clearing the 01/02 number.
   Service/location pages have no number column, so their inset stays 0. */
.faq-accordion { --faq-answer-inset: 0px; }
.faq-section .faq-accordion { --faq-answer-inset: 40px; }

.faq-item__answer-inner {
	min-height: 0;
	overflow: hidden;
	padding: 0 0 0 var(--faq-answer-inset);
	transition: padding 0.35s ease;
}

.faq-item.is-open .faq-item__answer-inner {
	padding: 14px 0 8px var(--faq-answer-inset);
}

.faq-item p {
	margin: 0;
	color: var(--color-text-muted);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 991px) {
	.faq-section__grid {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.faq-section__intro,
	.faq-section__left {
		position: static;
		top: auto;
	}

	.faq-section .faq-accordion { --faq-answer-inset: 0px; }
}