/*
 * hbd-faq — the question accordion.
 *
 * Every number here is a var(--hbd-*) from assets/css/tokens.css, where the measurement it came from is
 * named. Breakpoints are the ones production actually switches at: 768 / 1024 / 1280
 * (docs/audit/widgets/faq.md). Enqueued as `hbd-widget-faq` only on pages that render the widget.
 */

/* ------------------------------------------------------------------ shell */

/* Live's discrete 20 / 60 / 80 section gutter rather than the theme's clamp()ed --hbd-gutter. */
.hbd-w-faq > .hbd-w__inner { max-width: calc(var(--hbd-container) + 2 * var(--hbd-row-gutter)); padding-inline: var(--hbd-row-gutter); }

/* --------------------------------------------------------------- heading */

/* 40px under the heading; the 41px measured between it and the first question is this plus the 1px
   rule the first row draws (docs/audit/widgets/faq.md §2). */
.hbd-w-faq__head { padding-bottom: var(--hbd-faq-head-gap); }
/* A live accordion with no heading keeps that 40px anyway: `/service/membership/` ships an *empty*
   head block where every other page puts its `<span>Frequently asked questions</span>`, and its first
   rule sits exactly 40px below the section's padding edge, same as the others (measured 2026-09-20,
   docs/audit/pages/membership.md §5). The template drops the empty block rather than printing a div
   with nothing in it, so the space is put back here. */
.hbd-w-faq--no-heading .hbd-w-faq__main { padding-top: var(--hbd-faq-head-gap); }
.hbd-w-faq__heading { margin: 0; font-family: var(--hbd-font-display); font-weight: 300; font-size: var(--hbd-faq-heading); line-height: var(--hbd-faq-heading-lh); letter-spacing: normal; color: var(--hbd-text); }

/* ------------------------------------------------------------------ list */

.hbd-w-faq__item { display: flex; flex-direction: column; gap: var(--hbd-faq-row-gap); padding-block: var(--hbd-faq-row-pad); border-top: var(--hbd-faq-rule); }
/* The rule belongs *between* the heading and the first question. With nothing above the list — the
   side-image layout, where the heading is in the panel — live has no rule above the first row. */
.hbd-w-faq__list:first-child .hbd-w-faq__item:first-child { border-top: 0; }

.hbd-w-faq__q { margin: 0; font: inherit; }

/* `box-shadow`/`border`/`background`/`border-radius` are not housekeeping: Astra's global
   `button, .ast-button, …` rule puts `rgba(0,0,0,.05) 0 1px 2px`, a background and a radius on every
   <button>, and live's question row has none of that — in rest or on hover, where it changes nothing
   at all (docs/audit/widgets/faq.md §3). */
/* `font: inherit` is part of that reset: Astra sizes every <button> at 16px/1 weight 500, which live's
   row (16/24, 400, inherited from the body) does not — invisible behind the label's own type until
   something inherits it. */
.hbd-w-faq__toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: var(--hbd-faq-q-min-h); margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; font: inherit; color: var(--hbd-ink); text-align: left; cursor: pointer; }
/* Astra also swings the border *colour* on hover. The border is 0px wide so nothing is drawn either
   way, but live's row changes nothing at all on hover and a style diff should be able to say so. */
.hbd-w-faq__toggle:hover { box-shadow: none; background: none; color: var(--hbd-ink); border-color: var(--hbd-ink); }
/* Astra paints a *focused* button navy with white text — which is what a clicked question looked like
   until this rule: caught by diffing the state after `measure.mjs --click`, not by eye. Focus stays
   visible as an outline instead. */
.hbd-w-faq__toggle:focus { background: none; color: var(--hbd-ink); box-shadow: none; }
.hbd-w-faq__toggle:focus-visible { outline: 2px solid var(--hbd-navy); outline-offset: 4px; background: none; color: var(--hbd-ink); box-shadow: none; }

/* `0 1 auto`, not `1 1 auto`: live's label is a flex item sized to its text (240.33px for "Do you
   accept insurance?") that only fills the row when the question is long enough to need it. */
.hbd-w-faq__label { flex: 0 1 auto; min-width: 0; font-family: var(--hbd-font-body); font-size: var(--hbd-faq-q); line-height: var(--hbd-faq-q-lh); font-weight: 400; }

/* A 38px dashed circle around a 20px glyph: 8px of padding and a 1px border, border-box. */
.hbd-w-faq__icon { flex: 0 0 var(--hbd-faq-icon); box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: var(--hbd-faq-icon); height: var(--hbd-faq-icon); padding: var(--hbd-faq-icon-pad); border: 1px dashed var(--hbd-faq-icon-border); border-radius: var(--hbd-radius-pill); transition: border-color var(--hbd-dur) var(--hbd-ease); }
/* `stroke-linecap: butt` overrides the shared icons' round caps: live draws a *filled* plus and minus
   whose ink is exactly 14 × 14 and 14 × 2 viewBox units (11.67 × 11.67 and 11.67 × 1.67 at 20px), and a
   round cap would add half a stroke at each end. Measured from the rendered pixels on both sides. */
.hbd-w-faq__glyph { display: block; width: var(--hbd-faq-icon-glyph); height: var(--hbd-faq-icon-glyph); stroke-linecap: butt; }
/* Live swaps the drawn path — plus 11.67 × 11.67 of ink, minus 11.67 × 1.67 — and darkens the circle
   from 40% ink to full ink. Both glyphs are in the markup so the script only has to move state. */
.hbd-w-faq__glyph--minus { display: none; }
.hbd-w-faq__item.is-open .hbd-w-faq__glyph--plus { display: none; }
.hbd-w-faq__item.is-open .hbd-w-faq__glyph--minus { display: block; }
.hbd-w-faq__item.is-open .hbd-w-faq__icon { border-color: var(--hbd-faq-icon-border-open); }

/* ----------------------------------------------------------------- panel */

/* Live animates the panel's height and opacity over 0.3s on the shared easing curve. 0fr → 1fr is the
   same motion without a script measuring pixels. `visibility` is ours: live leaves closed answers in
   the accessibility tree, where a screen reader reads six answers that are visually shut. */
.hbd-w-faq__panel { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows var(--hbd-faq-dur) var(--hbd-ease), opacity var(--hbd-faq-dur) var(--hbd-ease), visibility 0s linear var(--hbd-faq-dur); }
.hbd-w-faq__panel-inner { overflow: hidden; }
.hbd-w-faq__item.is-open .hbd-w-faq__panel { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows var(--hbd-faq-dur) var(--hbd-ease), opacity var(--hbd-faq-dur) var(--hbd-ease), visibility 0s; }

.hbd-w-faq__answer { font-size: var(--hbd-faq-answer); line-height: var(--hbd-faq-answer-lh); color: var(--hbd-faq-answer-color); }
.hbd-w-faq__answer p { margin: 0; }
/* Live writes these answers as ONE paragraph with `<br><br>` between the blocks, which paints a blank
   line — one line-height, 22.4px. `wpautop()` turns that pair of breaks into a real paragraph break on
   the way out of the CMS, so the gap has to be the blank line's height rather than a spacing step, or
   every double break comes out 6.4px short (measured on `/service/membership/`'s open first answer:
   two breaks, −12.8px). docs/audit/pages/membership.md §5. */
.hbd-w-faq__answer p + p { margin-top: var(--hbd-faq-answer-gap); }
/* Live's in-answer links are the same black as the copy around them; base.css would make them blue. */
.hbd-w-faq__answer a { color: inherit; text-decoration: underline; }

/* ---------------------------------------------------------------- footer */

/* Column, then a row from 768, then a column again from 1280 — that is what live measures at each
   width on /faq/ (84 / 44 / 44 / 108px tall at 1440 / 1024 / 768 / 390). */
.hbd-w-faq__footer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hbd-faq-footer-gap); }
/* `.hbd-btn` gives every button a 1px transparent border; live's filled pill has none, and that 1px
   would make this button 135.97 × 46 instead of 133.97 × 44 (footer.css zeroes it the same way). */
.hbd-w-faq__footer .hbd-btn { border-width: 0; }
.hbd-w-faq__footer-text { margin: 0; font-size: var(--hbd-faq-footer-text); line-height: var(--hbd-faq-footer-text-lh); color: var(--hbd-text); }

/* ------------------------------------------------------- side-image panel */

/* The /faq/ composition: the heading sits centred on a full-bleed image panel, the list beside it from
   1280 and under it below that. */
.hbd-w-faq--aside > .hbd-w__inner { max-width: none; padding-inline: 0; display: grid; gap: var(--hbd-faq-aside-gap); }
.hbd-w-faq__aside { position: relative; display: flex; align-items: center; justify-content: center; height: var(--hbd-faq-aside-h); padding-inline: var(--hbd-row-gutter); }
.hbd-w-faq__aside-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hbd-w-faq--aside .hbd-w-faq__heading { position: relative; text-align: center; font-size: var(--hbd-faq-aside-heading); line-height: var(--hbd-faq-aside-heading-lh); }
.hbd-w-faq--aside .hbd-w-faq__main { padding-inline: var(--hbd-row-gutter); }

/* ------------------------------------------------------------ breakpoints */

@media (min-width: 768px) {
	.hbd-w-faq__footer { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 1280px) {
	.hbd-w-faq--aside > .hbd-w__inner { grid-template-columns: 1fr 1fr; align-items: stretch; }
	/* Two columns now, so the panel is as tall as the list beside it — with live's 800px floor under
	   it. (Selector specificity matters here: the stacked rule above sets an explicit height, which
	   would otherwise stop the grid from stretching this one.) */
	.hbd-w-faq--aside .hbd-w-faq__aside { height: auto; min-height: var(--hbd-faq-aside-min-h); }
	.hbd-w-faq--aside .hbd-w-faq__main { padding-inline: 0 var(--hbd-row-gutter); }
	.hbd-w-faq__footer { flex-direction: column; align-items: flex-start; }
}

/* JavaScript off: nothing can open a panel, so every panel is open. Live's accordion is inert without
   its bundle; this at least keeps the answers readable. */
@media (scripting: none) {
	.hbd-w-faq__panel { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
	.hbd-w-faq__glyph { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hbd-w-faq__panel, .hbd-w-faq__item.is-open .hbd-w-faq__panel, .hbd-w-faq__icon { transition: none; }
}