/* -----------------------------------------------------------------------------
   mod-faq — native <details> accordion, no JavaScript.

   Layout measured off the reference: the content box splits 525 / 675 of
   1200, which is a clean 7fr / 9fr with no gutter between the columns. The
   left rail runs short of its own column, and that asymmetry is what makes
   the right column read as the content and the left as the frame.

   Items are a 40px-gapped stack with no dividers and no internal padding —
   row-scanning the reference band returns text rows and nothing else. The
   open item is marked by a rule down its left edge, level with its own
   question rather than floating above it.
   -------------------------------------------------------------------------- */

.b-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 9fr);
  align-items: start;
}

/* No column gap, so the 7/9 split stays exactly where it was measured. The
   left rail keeps its distance with padding instead. */
.b-faq__head {
  padding-right: var(--sp-16);
}

.b-faq__heading {
  margin: 0;
}

.b-faq__eyebrow {
  display: block;
  margin-bottom: var(--sp-6);
  color: var(--soft);
}

.b-faq__title {
  display: block;
}

/* --- the stack ------------------------------------------------------------ */

.b-faq__list {
  display: grid;
  gap: var(--sp-10);
}

/* Every item carries the marker border, transparent until it opens, so
   nothing shifts sideways when an item is opened or closed. */
.b-faq__item {
  border-left: 2px solid transparent;
  padding-left: var(--sp-4);
  transition: border-color var(--dur-hover) var(--ease-out);
}

.b-faq__item[open] {
  border-left-color: var(--accent);   /* 5.10:1 on --alt */
}

/* --- the question --------------------------------------------------------- */

.b-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  min-height: var(--tap-min);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--t-body-l);
  font-weight: var(--w-label);
  line-height: var(--lh-title);
  color: var(--ink);
  list-style: none;                   /* drop the default disclosure triangle */
}

.b-faq__q::-webkit-details-marker {
  display: none;
}

/* Focus is the token default — a 2px accent ring. The reference has no focus
   state at all; this is a deliberate addition, not a clone. */

.b-faq__chev {
  flex: none;
  width: 12px;
  height: 8px;
  color: var(--soft);
  transition: transform var(--dur-dropdown) var(--ease-out),
              color var(--dur-hover) var(--ease-out);
}

/* The chevron turning is the module's only animation. It is a state change,
   not a hover effect, and it is the affordance that says the row opens. */
.b-faq__item[open] .b-faq__chev {
  transform: rotate(180deg);
  color: var(--accent);
}

/* Reduced motion: the chevron still points the right way — the rotation is
   state, not decoration — it just snaps there. The colour change stays. */
@media (prefers-reduced-motion: reduce) {
  .b-faq__chev { transition: color var(--dur-hover) var(--ease-out); }
}

/* --- the answer -----------------------------------------------------------
   The panel appears; it does not slide. Animating a <details> panel's height
   requires JavaScript, and the no-JS guarantee is worth more than the slide. */

.b-faq__a {
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-2);
  max-width: var(--measure);
  color: var(--soft);
}

/* --- stacked --------------------------------------------------------------
   One column at every width. */

.b-faq--stacked .b-faq__grid {
  grid-template-columns: minmax(0, 1fr);
}

.b-faq--stacked .b-faq__head {
  padding-right: 0;
  margin-bottom: var(--sp-12);
}

/* --- copy slots ----------------------------------------------------------- */

.b-faq .s-slot {
  color: var(--soft);
  text-decoration: underline dashed var(--line);
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}

.b-faq .s-slot--inline {
  display: inline-block;
}

/* --- narrow ---------------------------------------------------------------
   One column below 1000px, matching the reference's single-track tablet and
   mobile layouts. */

@media (max-width: 1000px) {
  .b-faq__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .b-faq__head {
    padding-right: 0;
    margin-bottom: var(--sp-12);
  }
}

@media (max-width: 560px) {
  /* NOTE: a `gap: var(--sp-8)` used to sit here and had been dead for a while.
     The editorial ledger treatment further down sets `gap: 0` with a rule
     border, at equal specificity and later in the file, so it won already —
     the mobile gap never applied. Removed rather than revived: the ledger is
     the current design and it is the same at every width. */
  .b-faq__q {
    gap: var(--sp-5);
    align-items: flex-start;
  }
  /* Keep the chevron on the question's first line once the text wraps to
     two or three. */
  .b-faq__chev {
    margin-top: 0.55em;
  }
}

/* Editorial ledger treatment shared by every FAQ family. */
.b-faq__list {
  counter-reset: faq-row;
  gap: 0;
  border-block-start: 1px solid var(--home-line);
}

.b-faq__item {
  counter-increment: faq-row;
  padding-inline-start: 0;
  border-inline-start: 0;
  border-block-end: 1px solid var(--home-line);
  transition: background-color var(--dur-hover) var(--ease-out);
}

.b-faq__item[open] {
  border-inline-start: 0;
  background: color-mix(in srgb, var(--sage-light) 34%, transparent);
}

.b-faq__q {
  padding: var(--sp-5) var(--sp-4);
}

.b-faq__q::before {
  content: counter(faq-row, decimal-leading-zero);
  flex: none;
  inline-size: var(--sp-10);
  font-family: var(--font-display);
  font-size: var(--t-display-s);
  font-weight: var(--w-body);
  line-height: 1;
  color: var(--sage);
}

.b-faq__item[open] .b-faq__q::before { color: var(--home-orange-ink); }

.b-faq__a {
  margin-inline-start: calc(var(--sp-10) + var(--sp-4));
  padding: 0 var(--sp-4) var(--sp-6);
}
/* A multi-paragraph answer had no break between paragraphs — same omission as
   the other prose blocks, same gap. Lists too: /detox/foot-detox/ runs a lead
   sentence straight into a bulleted answer with nothing between them. */
.b-faq__a > :is(p, ul, ol) + :is(p, ul, ol) { margin-block-start: var(--sp-6); }