/*
 * Patient FAQ page. Loaded after components.css and patient-shell.css.
 *
 * THE ACCORDION IS RESTATED HERE, NOT SHARED WITH assets/css/faq.css.
 * The MECHANISM is shared and unchanged: assets/js/faq.js keys off [data-faq]
 * and details.faq-item, and this page uses both. The CSS is not, for the same
 * reason the savings band stays per-page: faq.css is loaded only by the HCP
 * page, and its geometry happens to match while its ink does not — the patient
 * number is body grey where HCP's is navy. A THIRD consumer is the point at
 * which promoting the component to components.css pays for itself.
 */

.page {
  /* Patient CTAs are navy — same page-scoped repoint as the sibling pages. */
  --color-cta: var(--color-isi-title-bar);

  /* Same pale blue wash the home teasers and savings band use. */
  --patient-wash: #bbd3eb;

  /*
   * The card surface. One unit off --color-isi-surface (#f6f7f8), which is
   * close enough to look like a mistake and far enough to be one if it were
   * "corrected" — so it is stated as its own literal, exactly as the step
   * cards on How to Use are.
   */
  --faq-card-surface: #f7f8f9;

  /*
   * The wash must carry PAST `</main>` — the ISI card sits on blue, with blue
   * to either side and below it. The gradient lives on `.savings-band`, the
   * last section in `<main>`, while `.isi` is a sibling of the whole
   * `.isi-peek-region`, so painting it there leaves the ISI on `body`'s white.
   * The ground belongs to `.page`, the one box enclosing the region, the ISI
   * and the footer; `main` takes the white back so everything above the band is
   * unchanged. Full reasoning, including why `.isi-peek-region` is the WRONG
   * box to paint, is in patient-home.css.
   */
  background-color: var(--patient-wash);
}

/* White ground above the savings band; `.page` carries the wash below it.
   See patient-home.css. */
main {
  background-color: var(--color-white);
}

/*
 * Mobile gutter, 32px, matching every sibling patient page. The header is NOT
 * overridden: this page draws the shared partial's 159px 24/24/24.
 */
@media (width < 48rem) {
  main {
    --container-margin: var(--space-xl); /* 32px */
  }
}

/* ===============================================================
 * Page hero — a single centred column on WHITE
 *
 * `--plain` is correct here and is NOT the modifier How to Use had to drop:
 * every corner of both FAQ boards samples #ffffff, and the cards below are the
 * only tint on the page.
 * ============================================================= */

.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 */
  text-align: center;
}

/* ONE lede, unlike the HCP page's media-swapped pair: the patient design
   carries the same sentence at both widths. */
.page-hero__lede {
  margin: 0;
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-body); /* 16px mobile */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--tracking-isi-text);
}

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

.faq {
  padding-block: 0;
}

/*
 * 16px, which is what both collapsed states draw and what the expanded mobile
 * one draws too. The expanded desktop state steps 10px instead — one state out
 * of four, and the only one that disagrees, so it reads as drafting rather than
 * intent. Built at 16.
 */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-inline-size: 50rem; /* 800px */
  margin-inline: auto;
}

.faq-item {
  border-radius: var(--radius-sm);
  background-color: var(--faq-card-surface);
}

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

  /* 8 from the number to the question, so the question's edge lands on its
     ANSWER's (48 mobile, 64 desktop: padding + number column + 8). The design's
     own gutter hugs each numeral instead, which puts item 1 on the answer's
     edge and items 10-14 up to 15px past it; the HCP page resolves it the same
     way. The 24 between the question and the icon is the icon's margin. */
  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;
}

/*
 * BODY GREY, not the HCP page's navy. This is the one ink divergence between
 * the two accordions.
 *
 * 20px Bold at both breakpoints while the question drops to 16px on mobile, so
 * the number outweighs its own question there. As drawn.
 */
.faq-item__number {
  flex-shrink: 0;
  min-inline-size: 1.5rem; /* 24: the question lands on the answer's 48 */
  color: var(--color-text-body);
  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. `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 24x24 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 = the drawn 24 */
  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); /* 1.6 */
}

/*
 * Both halves are wrapped in `:where()` so they carry the same 0-1-0
 * specificity and resolve by order — `.htu-section__lede`'s identical pair in
 * patient-how-to-use.css is the same idiom. Written plainly, `p + p` outranks
 * `p` and stylelint's `no-descending-specificity` fails the file against
 * `.savings-band__lede p` further down.
 */
.faq-item__answer :where(p) {
  margin: 0;
}

/*
 * 12px — the site's paragraph gap everywhere it appears (`faq.css` on HCP,
 * `.htu-section__lede` and `.savings-band__lede` here). Items 5, 9 and 10 each
 * carry a second paragraph, so that a trailing sentence stands on its own
 * rather than running on.
 */
.faq-item__answer :where(p + p) {
  margin-block-start: 0.75rem;
}

/* Twelve of the fourteen answers close with the citation marker; items 8 and
   13 carry none at either width. `sup`'s size and lift are base.css's own
   0.645 ratio, which is the 10.32px the design carries at 16px. */
.faq-item__ref {
  color: inherit;
  text-decoration: none;
}

.faq-item__ref:hover,
.faq-item__ref:focus-visible {
  text-decoration: underline;
}

/* ---------------------------------------------------------------
 * 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 fourteen 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;
  }
}

/* ===============================================================
 * Divider
 * ============================================================= */

.patient-divider {
  margin-block: 3.5rem; /* 56, full-bleed on mobile */
}

@media (width < 68rem) {
  .patient-divider {
    inline-size: 100%;
    max-inline-size: none;
  }
}

@media (width >= 68rem) {
  .patient-divider {
    margin-block: 1.25rem; /* 20 */
  }
}

/* ===============================================================
 * References
 *
 * A continuation of the ISI panel, not a separate box: `.isi` sets
 * `border-block-end: 0` and rounds only its top corners, so it is an
 * open-bottomed panel by design and this supplies the open-topped half.
 * Restated from patient-learn-about.css for the same reason the savings band
 * is — the two pages are the only consumers and neither loads the other's
 * stylesheet.
 * ============================================================= */

.isi-refs {
  position: relative;

  /* Above the peek, like `.isi` itself — otherwise the sticky tray paints over
     the citation as it slides past. */
  z-index: 21;
  background-color: var(--color-surface);
}

/*
 * `.isi__body` ends with 24px of its own padding and the References heading
 * sits on the ISI's standard 16px section rhythm, so the continuation starts
 * 8px above where it otherwise would.
 */
.isi-refs__inner {
  padding-block: 0 var(--space-l);
  margin-block-start: calc(var(--space-s) * -1); /* -8px */
}

.isi-refs .isi__heading {
  margin-block-end: var(--space-xs);
}

/* ===============================================================
 * Savings card band
 *
 * The same component Home and How to Use carry, deliberately restated per
 * page: it is page rhythm rather than a mechanism, and this page does not load
 * either of their stylesheets.
 * ============================================================= */

.savings-band {
  position: relative;
  overflow: hidden;

  /* TOP ONLY — the mobile design states a top padding and nothing for the
     bottom, and `padding-block` with one value sets both. The extra 48px showed
     as empty wash between the savings card and the ISI. Full measurement in
     patient-home.css. */
  padding-block: var(--space-2xl) 0; /* 48px, top only */
  background-image: linear-gradient(
    to top,
    var(--patient-wash) 0%,
    var(--color-white) 56.601%
  );
}

.savings-band__inner {
  display: grid;
  gap: var(--space-l);
}

.savings-band__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
  text-align: center;
}

.savings-band__body .eyebrow {
  margin-block-end: 0;
}

/* The eyebrow COPY differs by breakpoint. Both halves ship, and `display` is
   what decides which one a reader gets. */
.savings-band__eyebrow--wide {
  display: none;
}

.savings-band__eyebrow--narrow {
  display: inline;
}

.savings-band__title {
  margin: 0;
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-h3); /* 28px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-display);
}

.savings-band__rule {
  inline-size: 5rem;
  margin: 0;
  border: 0;
  border-block-start: var(--border-width) solid var(--color-rule);
}

.savings-band__lede {
  margin: 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);
  letter-spacing: var(--tracking-isi-text);
}

.savings-band__lede p {
  margin: 0;
}

.savings-band__lede p + p {
  margin-block-start: 0.75rem;
}

.savings-band__body .button {
  margin-block: 1.0625rem;
}

.savings-band__footnote {
  margin: 0;
  color: var(--color-text-body);
  font-family: var(--font-support);
  font-size: var(--font-size-legal); /* 10px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-isi-text);
}

.savings-band__media img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

@media (width < 68rem) {
  /* FULL-BLEED clip frame — the drawn frame is 770 wide, running off both
     edges. As the container's content column it clipped the card at the text
     edge instead, leaving a gap of exactly --container-margin at every stacked
     width. Rationale in full in patient-home.css. */
  .savings-band__media {
    position: relative;

    /*
     * 275px, not the drawn frame's 307: the artwork does not fill the frame,
     * and the box's last ~34px were empty wash sitting between the card and the
     * ISI. The 307 belongs to the 770-wide clip, not to the 433-wide image
     * actually rendered inside it.
     */
    block-size: 17.1875rem; /* 275px — ends where the artwork does */
    margin-inline: calc(var(--container-margin) * -1);
    overflow: hidden;
  }

  /* Capped at the drawn 433px and anchored to the trailing edge; both
     percentages are stated against the 430 viewport because the box above is
     now full-bleed. Uncapped these take the raster far past its drawn size
     inside a clip box that has not grown. Rationale in full in
     patient-home.css. */
  .savings-band__media img {
    position: absolute;
    inset-block-start: -4.1688rem;
    inset-inline: auto max(-21.86%, -5.875rem); /* -94 / 430, then -94px */
    inline-size: min(100.698%, 27.0625rem); /* 433 / 430, capped at 433px */
    max-inline-size: none;
  }
}

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

@media (width >= 68rem) {
  /* 906px, which is what forces the drawn two-line break; without it the title
     runs one line across the 1344 column. Centred by the flex column above. */
  .page-hero__title {
    max-inline-size: 56.625rem;
  }

  /* 698px measure — three lines at 20/1.45. */
  .page-hero__lede {
    max-inline-size: 43.625rem;
    font-size: var(--font-size-body-lg); /* 20px */
    letter-spacing: var(--tracking-body-lg);
  }

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

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

  .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 */
  }

  .isi-refs {
    max-inline-size: calc(
      var(--container-max) - var(--isi-container-margin) * 2
    );
    margin-inline: auto;
    border: var(--border-width) solid var(--color-isi-border);
    border-block-start: 0;
    background-color: var(--color-isi-surface);
  }

  /* 72px top, matching the HCP site's own spacing for this band rather than
     the drawn 177.5 — full reasoning in patient-home.css. Bottom keeps the
     drawn 227.5. */
  .savings-band {
    padding-block: 4.5rem 14.2188rem;
  }

  .savings-band__inner {
    grid-template-columns: minmax(0, 40.125rem) minmax(0, 1fr);
    align-items: center;
  }

  .savings-band__body {
    align-items: flex-start;
    text-align: start;
  }

  .savings-band__eyebrow--wide {
    display: inline;
  }

  .savings-band__eyebrow--narrow {
    display: none;
  }

  .savings-band__title {
    font-size: var(--font-size-h1); /* 40px */
    line-height: var(--line-height-tight);
  }

  .savings-band__lede {
    font-size: var(--font-size-body-lg); /* 20px */
    letter-spacing: var(--tracking-body-lg);
  }

  .savings-band__footnote {
    max-inline-size: 33.6875rem;
    font-size: var(--font-size-caption); /* 12px */
  }

  /* The WIDTH carries the relationship to the copy column, holding the drawn
     40px clearance at every width — pinned to the band's trailing edge at a
     fixed 852 the card overlaps the copy as the viewport narrows.
     42.625rem = 642 (body column) + 40 (the gap). Full derivation in
     patient-home.css. */

  /* Lifted by the raster's own blank top margin so the CARD, not the file,
     starts at the band's padding edge — otherwise the band's bottom clips the
     wrist. The right inset must stay 0: this raster's content runs to its own
     right edge, so any bleed cuts hand rather than margin. Full measurement
     and reasoning in patient-home.css. */
  .savings-band__media {
    position: absolute;
    inset-block-start: 4.5rem; /* 72px — the band's own top padding edge */
    inset-inline-end: 0;
    inline-size: min(53.25rem, 100% - 42.625rem - max(0px, (100% - 90rem) / 2));
  }

  .savings-band__media img {
    transform: translateY(-23%);
  }
}