/*
 * FAQ page. Loaded after components.css, before print.css.
 *
 * Mobile-first, with the desktop arrangement added at 68rem — the breakpoint
 * the shell already uses.
 *
 * `.page-hero`, `.page-hero__title`, `.page-hero__rule` and `.references__*`
 * are shared and live in components.css. Only this page's own rhythm, the
 * accordion component and the mobile type steps belong here.
 */

/*
 * Mobile gutter. This page's content sits at 32px against the shared 24px
 * token, the same as Efficacy and Affordability. Scoped to <main> so the
 * shared header, ISI and footer keep the shell's own gutter.
 */
@media (width < 48rem) {
  main {
    --container-margin: var(--space-xl); /* 32px */
  }
}

/*
 * `.prose` steps down to 16px on mobile across this whole page, and the lack
 * of a scope is deliberate — BOTH consumers want it: the hero lede, and the
 * affordability band lifted from the home page, whose own lede is 16px on
 * mobile and 20px on desktop. At 20px on mobile all three of the band's
 * paragraphs wrap and the block runs far taller than intended.
 */
@media (width < 68rem) {
  .prose {
    font-size: var(--font-size-body);
  }

  /* The shared Affordability band centers its text column on mobile;
     components.css carries no alignment rule for it. */
  .affordability__body {
    text-align: center;
  }

  /* Same 28px/1.4 mobile step as `.page-hero--plain .page-hero__title` and
     home's instances of this heading — `.section__title` has no general
     mobile rule, so each page opts in. */
  #affordability-title {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-snug);
  }
}

/* ===============================================================
 * Page hero — a single centred column on white
 * ============================================================= */

.page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;

  /* Title, rule and lede are gapped evenly at 16px at both breakpoints. */
  gap: var(--space-m);
  padding-block: 3.5rem; /* 56 / 56 on mobile */
  text-align: center;
}

/*
 * The two ledes are different copy, not a reflow. Exactly one is in flow at
 * any width, so `display: none` rather than visibility — the hidden one must
 * contribute no height to the centred column.
 *
 * Deliberately NOT media-scoped away for print: a page box is 816px, so
 * paper takes the mobile branch and prints the mobile lede, which is the
 * design's own per-breakpoint divergence.
 */
.page-hero__lede--desktop {
  display: none;
}

/* ===============================================================
 * Accordion
 *
 * 800px measure, centred, 16px between items, no dividers and no borders —
 * the surface colour alone separates the rows.
 * ============================================================= */

.faq {
  padding-block: 0;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-inline-size: 50rem; /* 800px */
  margin-inline: auto;
}

/*
 * A literal rather than a token, and lighter than --color-card-surface, so
 * it stays page-scoped until a second page wants it.
 */
.faq-item {
  border-radius: var(--radius-sm);
  background-color: #f7f8f9;
}

.faq-item__summary {
  display: flex;
  align-items: flex-start;

  /* 8 from the number to the question, so the question's edge lands on the
     answer's (48 on mobile, 64 on desktop: padding + number column + 8). A
     fixed number column keeps every question aligned regardless of numeral
     width. The 24 between the question and the icon is the icon's margin
     below. */
  gap: var(--space-s);
  padding: var(--space-m); /* 16 all round on mobile */
  cursor: pointer;

  /* Both are needed to drop the native disclosure triangle: the pseudo-element
     for WebKit, `list-style` for Blink and Gecko. The open/closed state is
     carried by the plus/minus glyph instead. */
  list-style: none;
}

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

.faq-item__summary:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

/*
 * A fixed number column is the only way all eleven questions align with each
 * other, and its width is chosen so they align with the answer indent too:
 * 24 here (16 + 24 + 8 = 48), 26 on desktop (30 + 26 + 8 = 64).
 *
 * 20px Bold at both breakpoints, while the question drops to 16px on mobile.
 */
.faq-item__number {
  flex-shrink: 0;
  min-inline-size: 1.5rem;
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

.faq-item__question {
  flex: 1;
  min-inline-size: 0;
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);

  /* The narrowest supported viewport leaves this column ~128px, and single
     words here run longer than that ("pharmacologically",
     "contraindications"). `anywhere` rather than `break-word` because only
     `anywhere` also reduces the min-content size, which is what lets the
     flex item actually shrink instead of pushing the row wider. */
  overflow-wrap: anywhere;
}

/*
 * A 24x24 slot for both glyphs. They are genuinely different shapes rather
 * than one rotated into the other — a 25x25 two-stroke plus against a
 * 22.29x16 single stroke — so the minus letterboxes to a centred rule inside
 * the slot instead of being stretched to fill it.
 */
.faq-item__icon {
  flex-shrink: 0;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-inline-start: var(--space-m); /* 8 gap + 16 = 24 to the question */
  object-fit: contain;
}

/*
 * Glyph mapping. The base rules key off the REAL [open] state, which is what
 * the no-JS and file:// paths need: those render open, and must therefore show
 * the minus rather than a plus that contradicts the visible answer.
 */
.faq-item__icon--minus {
  display: none;
}

.faq-item[open] .faq-item__icon--plus {
  display: none;
}

.faq-item[open] .faq-item__icon--minus {
  display: block;
}

.faq-item__answer {
  padding-inline: 3rem 1.5rem; /* 48 / 24 */
  padding-block-end: var(--space-m);
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: 0.875rem; /* 14px */

  /* Manrope Light. The shared <head> must keep the 300 axis in its Google
     Fonts request — without it the browser synthesises 300 from 400 and this
     declaration still computes 300, so nothing here reports the loss. */
  font-weight: 300;
  line-height: var(--line-height-loose);
}

/* 12px between paragraphs, uniform across every item. */
.faq-item__answer p + p {
  margin-block-start: 0.75rem;
}

.faq-item__answer strong {
  font-weight: var(--font-weight-semibold);
}

/* ---------------------------------------------------------------
 * The pre-close window
 *
 * From first paint until faq.js runs, the items are `open` in the DOM but
 * must LOOK closed, or a scripted browser flashes eleven expanded answers.
 * faq.js adds `faq-ready` to release this.
 *
 * Wrapped in `@media screen` so paged media NEVER sees it. That is the whole
 * safety property: a print fired before this module runs, or in a browser
 * where it never arrives, still carries every answer.
 * ------------------------------------------------------------- */

@media screen {
  html.js:not(.faq-ready) .faq-item[open] > .faq-item__answer {
    display: none;
  }

  /* ...and the glyph has to agree with what is painted, not with the DOM. */
  html.js:not(.faq-ready) .faq-item[open] .faq-item__icon--plus {
    display: block;
  }

  html.js:not(.faq-ready) .faq-item[open] .faq-item__icon--minus {
    display: none;
  }
}

/* ===============================================================
 * Section rules and References
 * ============================================================= */

/* Full-bleed on mobile, content-column width on desktop. */
.faq__rule {
  inline-size: 100%;
  max-inline-size: none;
  margin-block: 3.5rem; /* 56 above and below on mobile */
}

.faq-references {
  padding-block: 0;
}

/* 24px title and 12px body on mobile, against the shared 28/16. */
.faq-references .references__title {
  margin-block-end: var(--space-m);
  font-size: var(--font-size-h4);
}

.faq-references .references__list {
  font-size: var(--font-size-caption);

  /* References 4 and 5 cite bare URLs — single unbreakable tokens wider than
     the content column on a small phone, and the whole document's source of
     horizontal overflow without this. Scoped to this page rather than added
     to the shared class: Efficacy's reference list has no URLs. */
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------
 * Access & Affordability band — its own breathing room
 *
 * The band is set tighter than the design draws it: on the design nothing
 * follows the band, while on the real page the ISI bar does, immediately, and
 * supplies its own visual weight beneath it.
 *
 * SYMMETRIC, top and bottom — the band stays evenly set rather than trading
 * one uneven gap for another. Mobile's 48px is the shared `.section` default
 * (components.css `--space-2xl`), so this is a page-scoped override rather
 * than a token change.
 * ------------------------------------------------------------- */

.section:has(.affordability) {
  padding-block: var(--space-xl); /* 32px, from the shared 48 */
}

/* ---------------------------------------------------------------
 * Desktop
 * ------------------------------------------------------------- */

@media (width >= 68rem) {
  /* 698px measure, centred — three lines at 20/1.45. Without it the lede
     runs the full 1344 column. */
  .page-hero__lede--desktop {
    display: block;
    max-inline-size: 43.625rem;
  }

  .page-hero__lede--mobile {
    display: none;
  }

  .page-hero__inner {
    padding-block: 6.5rem 0; /* 104 above; the accordion supplies the gap */
  }

  .faq {
    padding-block: 4.5rem 6.5rem; /* 72 below the hero, 104 above the rule */
  }

  .faq-item__summary {
    padding: var(--space-xl) 1.875rem; /* 32 / 30 */
  }

  .faq-item__number {
    min-inline-size: 1.625rem; /* 26: the question lands on the answer's 64 */
  }

  .faq-item__question {
    font-size: var(--font-size-lead); /* 18px */
  }

  .faq-item__answer {
    padding-inline: 4rem 3rem; /* 64 / 48 */
    padding-block-end: var(--space-xl); /* 32 */
    font-size: var(--font-size-body); /* 16px */
  }

  .faq__rule {
    inline-size: calc(100% - var(--container-margin) * 2);
    max-inline-size: calc(var(--container-max) - var(--container-margin) * 2);
    margin-block: 1.25rem; /* 20 / 20 */
  }

  .faq-references {
    padding-block: 3.5rem; /* 56 / 56 */
  }

  .faq-references .references__title {
    margin-block-end: var(--space-s);
    font-size: var(--font-size-h3); /* back to the shared 28px */
  }

  .faq-references .references__list {
    font-size: var(--font-size-body); /* back to the shared 16px */
  }

  /*
   * This page's own instance of the shared Affordability band
   * (components.css `.affordability`) needs padding the shared default does
   * not carry.
   */
  .section:has(.affordability) {
    padding-block: 4.5rem; /* 72px — see above */
  }

  /*
   * On desktop the photo sits on the LEFT, same as home's and Efficacy's.
   * The DOM order stays body-then-media because mobile wants text above
   * image, so `order` re-places media first visually without touching the
   * DOM or mobile's reading order.
   */
  .affordability__media {
    order: -1;
  }
}