/*
 * service-faq.css — the two-column question accordion on the dark band.
 *
 * Figma: node 31:1108. Centred eyebrow and heading over --forest-ink, then
 * 803px question pills two across with a 24px gutter, scaled to this site's
 * 1280px column.
 */

.serviceFaq {
	background: var(--surface-deep);
	color: var(--warm-sand);
}

.serviceFaqInner {
	width: min(100% - (var(--gutter) * 2), var(--container));
	margin-inline: auto;
	padding-block: clamp(56px, 6.2vw, 110px);
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: center;
}

.serviceFaqEyebrow {
	display: flex;
	flex-flow: column;
	align-items: self-start;
	gap: 10px;
	font-size: 12px;
	line-height: 28px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--warm-sand);
}

.serviceFaqEyebrow .eyebrowRule {
	color: var(--accent);
}

.serviceFaqTitle {
	margin-top: 26px;
	max-width: 100%;
	font-size: 44px;
	line-height: 1.364;
	font-weight: 400;
	text-align: left;
	text-transform: capitalize;
	text-wrap: balance;
	color: var(--warm-sand);
}

.serviceFaqTitle span {
	color: inherit;
}

/*
 * A city page's FAQ sits right under its own article, on the same light
 * surface-frame the page opens on (see service-area.css) — the dark band
 * every treatment page uses would read as a hard stop between two pieces of
 * the same page. The pill keeps the same --warm-sand fill the dark band
 * gives it, which is what still reads as a distinct card here now that the
 * section itself sits on --surface-frame rather than --bg.
 */
.serviceFaq.isLight {
	background: var(--surface-frame);
	color: var(--ink);
}

.serviceFaq.isLight .serviceFaqEyebrow,
.serviceFaq.isLight .serviceFaqTitle {
	color: var(--forest-ink);
}

.serviceFaq.isLight .serviceFaqItem {
	background: var(--warm-sand);
}

.serviceFaq.isLight .serviceFaqToggle:focus-visible {
	outline-color: var(--accent-deep);
}

/* One full-width question per row, city pages only — every other template
   keeps the two-column grid below. */
.serviceFaq.isLight .serviceFaqGrid {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * Optional, off by default — every treatment page leaves service_faq_intro
 * empty and never renders this. Sized and coloured like .blogIntro and
 * .galleryIntro: the same "paragraph under a dark-band heading" treatment
 * used everywhere else on the site, not a one-off.
 */
.serviceFaqIntro {
	margin-top: clamp(16px, 1.8vw, 26px);
	max-width: 575px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.625;
	color: var(--warm-sand);
}

.serviceFaq.isNarrow .serviceFaqIntro {
	max-width: 840px;
}

/* ------------------------------------------------------------- Items */

.serviceFaqGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 15px;
	width: 100%;
	margin-top: 30px;
	text-align: left;
	/* Each item is its own row so an open panel grows only its own column
	   rather than stretching its neighbour to match. */
	align-items: start;
}

.serviceFaqItem {
	overflow: hidden;
	border: none;
	border-radius: 32px;
	background: var(--warm-sand);
	color: var(--ink);
}

.serviceFaqQuestion {
	margin: 0;
	font-size: inherit;
	font-weight: 400;
}

.serviceFaqToggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	/* The artboard's 42px left inset and 10px right, on a 63px pill. */
	padding: 18px 24px 18px 42px;
	border: 0;
	background: none;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.444;
	text-align: left;
	color: var(--ink);
	cursor: pointer;
}

/*
 * The hover state moves the pill's fill and the chevron, never the label.
 * Recolouring the label is what forced an underline here before: --accent-deep
 * on --warm-sand measures 4.49:1 and a 22px regular label owes 4.5:1. Both
 * surfaces are existing tokens, the label keeps its 15:1 against either, and
 * the chevron clears the 3:1 a graphic owes — so the affordance survives with
 * no decoration on the text.
 */
.serviceFaqItem:hover {
	background: var(--surface-frame);
}

.serviceFaqToggle:hover .navChevron {
	color: var(--accent-deep);
}

.serviceFaqToggle:focus-visible {
	outline: 2px solid var(--accent-deep);
	outline-offset: -4px;
}

.serviceFaqToggle .navChevron {
	flex: 0 0 auto;
	transition: transform 0.2s var(--ease);
}

.serviceFaqToggle[aria-expanded="true"] .navChevron {
	transform: rotate(180deg);
}

/*
 * No default max-height here — that stays entirely inline, written only by
 * service-faq.js. Without it every panel just renders at its natural height,
 * which is what a no-JS visitor gets: overflow:hidden and the transition are
 * both inert until something actually constrains the height, so neither line
 * below touches the no-JS baseline.
 */
.serviceFaqPanel {
	padding-inline: 42px;
	overflow: hidden;
	transition: max-height 0.35s var(--ease);
}

/*
 * Closed panels are hidden with the attribute, not display:none here — the
 * script sets it, so with no JavaScript every answer stays visible instead of
 * being sealed behind a control that never wired itself up.
 */
.serviceFaqPanel[hidden] {
	display: none;
}

.serviceFaqAnswer {
	padding-bottom: 24px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.625;
	/* 6.7:1 on --warm-sand, measured. */
	color: var(--ink-muted);
}

.serviceFaqAnswer > * + * {
	margin-top: 12px;
}

.serviceFaqAnswer ul,
.serviceFaqAnswer ol {
	margin-left: 22px;
	padding: 0;
	list-style: disc;
}

.serviceFaqAnswer ol {
	list-style: decimal;
}

.serviceFaqAnswer li + li {
	margin-top: 4px;
}

/* ------------------------------------------------- The dedicated FAQ page */

/*
 * template-faq.php renders this accordion as the page's whole body, not as a
 * band between other sections. Two columns read as a grid of options there;
 * one column on a 900px measure reads as a list of questions, which is what
 * the page is. The band itself stays full width.
 */
.serviceFaq.isNarrow .serviceFaqGrid {
	grid-template-columns: minmax(0, 1fr);
	max-width: 900px;
	margin-inline: auto;
}

.serviceFaq.isNarrow .serviceFaqTitle {
	max-width: 20em;
}

/* --------------------------------------------------------------- Small */

@media (max-width: 860px) {
	.serviceFaqGrid {
		grid-template-columns: minmax(0, 1fr);
	}

	.serviceFaqTitle {
		font-size: 32px;
	}

	.serviceFaqToggle {
		padding: 16px 20px 16px 24px;
		line-height: 1.244;
	}

	.serviceFaqPanel {
		padding: 0 24px 20px;
	}
}

@media (max-width: 560px) {
	.serviceFaqTitle {
		font-size: 27px;
	}

	.serviceFaqItem {
		border-radius: 24px;
	}
}