/* Just Mercy · at a glance + FAQ row
   Split out of the single components.css so concurrent work on different
   areas cannot collide in one file, and so a page can eventually load only
   the CSS its elements need. Tokens come from tokens.css; no literal brand
   hex belongs in here (the page-quality gate's D2 criterion enforces it).

   NOT ENQUEUED YET. `jm_component_styles()` in inc/elements.php lists the areas
   that get loaded, and that file is shared, so 'glance' has to be appended to
   that array centrally before any of this reaches a page. */

/* =========================================================================
   JM At a glance — Figma "Molecules / At a glance" (489:1096):
   State=Expanded (440:614), State=Collapsed (489:1093).

   Behaviour is dictated by the Figma panel "Spec — At a Glance behaviour"
   (489:1097), reproduced verbatim in the header of class-jm-at-a-glance.php.
   Read that before changing anything below the breakpoint.

     Expanded   Stone/500 surface, 1px Purple/100 border, padding 32/40, gap 16
     kicker     Caption/M — 15 Medium Purple/500, tracking 0.375px at 15px
     row        gap 4 · label 16 SemiBold Purple/500 · body 16/1.4 Purple/400
     Collapsed  same surface and border, row, space-between, padding 18/24,
                and the 12x6 caret — which is exactly the path our 16x16
                Atoms/Caret draws, so the shared atom is used unchanged

   Figma keeps the 32/40 padding on the expanded panel at 390 as well as 1440
   (instance 635:4063), so the padding is NOT reduced at mobile — with one
   exception noted at the breakpoint.
   ========================================================================= */

.jm-glance {
  /* The Spec panel's sticky offset, named so a change to the header height is a
     one-line edit rather than a hunt through the rules. */
  --jm-glance-sticky-top: 6rem;        /* 96 */

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;                           /* 16 */
  padding: 2rem 2.5rem;                /* 32 / 40 */
  background-color: var(--stone-500);
  border: 1px solid var(--purple-100);
}

/* Sticky is opt-out rather than opt-in because the Spec panel makes it the
   desktop default. It only travels if an ancestor does not clip overflow and the
   panel has a taller sibling column to travel against; `align-self: start` stops
   a flex or grid parent stretching it to the row height, which would leave it
   nothing to travel through. */
.jm-glance--sticky {
  position: sticky;
  top: var(--jm-glance-sticky-top);
  align-self: start;
}

/* The kicker, in both its copies. Caps come from CSS, not from the stored string,
   so the accessible name stays "At a glance" instead of being spelled out letter
   by letter. Tracking is Figma's 0.375px at 15px = 0.025em, the same conversion
   the callout kicker uses in content.css. */
.jm-glance__heading,
.jm-glance__label {
  margin: 0;
  font: 500 var(--text-caption-m)/1.2 var(--font-sans);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--purple-500);
}

/* Desktop has no control: the panel never collapses, so a button here would
   announce itself to a screen reader and then do nothing. */
.jm-glance__toggle { display: none; }

.jm-glance__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;                           /* 16 */
  width: 100%;
}

.jm-glance__row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;                        /* 4 */
  width: 100%;
  /* Figma's row frames carry overflow-clip. That is an auto-layout artefact of
     the fixed-height mobile instance; clipping a sentence is never right on the
     web, so it is deliberately not reproduced. */
}

.jm-glance__row-label {
  margin: 0;
  font: 600 var(--text-body)/1.2 var(--font-sans);    /* Body/S SemiBold 16 */
  color: var(--purple-500);
}

.jm-glance__row-body {
  font: 400 var(--text-body)/1.4 var(--font-sans);    /* Body/S 16 */
  color: var(--purple-400);
  text-wrap: pretty;
}
.jm-glance__row-body p { margin: 0 0 0.5em; }
.jm-glance__row-body p:last-child { margin-bottom: 0; }

.jm-glance__caret {
  flex: 0 0 auto;
  display: block;
  color: var(--purple-500);
}

/* ---- Mobile (<768px) — the Collapsed variant ----
   47.99rem is 767.84px: media queries resolve rem against the initial 16px, not
   the fluid root, so this is a dependable "below 768" exactly as the Spec panel
   words it. The behaviour script matches on the same string; the two have to
   stay in step. */

@media (max-width: 47.99rem) {
  .jm-glance {
    /* The bar and the body own their own insets down here, because the collapsed
       bar is drawn at 24 inline and the expanded panel at 40 — and a bar and a
       body on two different left edges reads as a mistake. The bar's 24 wins for
       both, since it is the edge a reader sees first. */
    position: static;
    padding: 0;
    gap: 0;
    align-items: stretch;
  }

  .jm-glance__heading { display: none; }

  .jm-glance__toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;                         /* 16 — Figma justifies the bar apart, so this
                                          is only the floor before the caret is crowded */
    width: 100%;
    /* 18 + 18 + an 18px line box is the 54 Figma draws at the 1440 root, and
       51.5 at the 390 board once the fluid root shrinks it — still clear of the
       WCAG 2.5.8 floor. The floor itself is in px on purpose: 2.75rem would ride
       that same root down to 42px and stop being a floor. */
    min-height: 44px;
    padding: 1.125rem 1.5rem;          /* 18 / 24 */
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
  }

  .jm-glance__toggle:focus-visible {
    outline: 3px solid var(--purple-500);
    outline-offset: 2px;
  }

  .jm-glance__body { padding: 0 1.5rem 1.5rem; }   /* 24 sides, 24 bottom */

  /* Clearing the panel label removes the bar, and with it the top inset the bar
     was providing. `:first-child` is structural, so it still sees the heading
     that CSS has hidden — it only matches when there really is no label. */
  .jm-glance__body:first-child { padding-top: 1.5rem; }   /* 24 */

  /* `is-collapsible` is added by the behaviour script, so every rule that depends
     on JavaScript hangs off it. Without the script the panel stays open at every
     width — the summary is readable and the caret never lies about a state
     nothing can change. */
  .jm-glance.is-collapsed .jm-glance__body { display: none; }

  .jm-glance.is-collapsible .jm-glance__caret { transition: transform var(--motion-base) var(--motion-ease); }
  .jm-glance.is-collapsible:not(.is-collapsed) .jm-glance__caret { transform: rotate(180deg); }

  /* "Expanded panel opens with height auto + 8px fade-in" — height auto means no
     height animation at all, so display carries the height and only the rise and
     the fade are animated. Figma gives a duration for the caret alone; the panel
     reuses it so the two land together.
     Gated on `is-collapsible` so it cannot fire on first paint: the script adds
     `is-collapsible` and `is-collapsed` in the same task, so the first computed
     style already has the panel closed and there is nothing to animate from. */
  .jm-glance.is-collapsible:not(.is-collapsed) .jm-glance__body {
    animation: jm-glance-open var(--motion-base) var(--motion-ease) both;
  }
}

@keyframes jm-glance-open {
  from { opacity: 0; transform: translateY(0.5rem); }   /* 8 */
  to   { opacity: 1; transform: translateY(0); }
}

/* "prefers-reduced-motion: instant", in the Spec panel's own words. tokens.css
   already carries a blanket guard; this is stated locally too so the rule is
   visible next to the motion it governs. */
@media (prefers-reduced-motion: reduce) {
  .jm-glance.is-collapsible .jm-glance__caret { transition: none; }
  .jm-glance.is-collapsible:not(.is-collapsed) .jm-glance__body { animation: none; }
}


/* =========================================================================
   JM FAQ row — Figma "Molecules / FAQ row" (437:646)

   ALWAYS OPEN, not a disclosure. The component has no caret and no closed state,
   and the pages that use it (Facts / FAQ 430:577, Donate / FAQ 120:172) draw
   every answer visible. Figma's own mobile audit note says the FAQ row is
   superseded on mobile by Accordion row · Mobile — so this is a desktop-first
   component that never needs to collapse, and the question never has to wrap far.

     column, gap 10, padding-bottom 24
     question  Body/M SemiBold — 18 SemiBold at line-height 1, Purple/500
     answer    Body/S — 16 Regular at 1.4, Purple/400
     rule      1px Purple/100, full width

   MEASURE: on the pages the text is held to 980 while the rule runs the full
   1280 of the container (430:581 and its siblings). That 980 is the readable
   measure, so it is a max-width here rather than a fixed width, and the rule
   stays full-bleed underneath it.
   ========================================================================= */

.jm-faq-row {
  --jm-faq-measure: 61.25rem;          /* 980 — the drawn measure for question and answer */

  display: flex;
  flex-direction: column;
  gap: 0.625rem;                       /* 10 */
  padding-bottom: 1.5rem;              /* 24 */

  /*
   * The measure caps the question and answer, NOT the row. Without this the row
   * is a flex item in a Bricks block (`align-items: flex-start`) and shrinks to
   * its widest child, so the rule below came out 980 wide instead of running the
   * full 1280 the board draws (430:584 and its siblings). Third component to need
   * this — see also .jm-field and .jm-subscribe.
   */
  align-self: stretch;
}

.jm-faq-row__question {
  margin: 0;
  max-width: var(--jm-faq-measure);
  /* Line-height 1 is Figma's, kept because at the widths Figma actually uses this
     at — desktop, where the question fits one line — that is what it draws.
     Checked at 390 anyway: a wrapped question is tight but legible, not broken.
     If the row ends up shipping on mobile instead of the mobile accordion,
     revisit this: 1.2 is the value a two-line question wants. */
  font: 600 var(--text-body-m)/1 var(--font-sans);
  color: var(--purple-500);
  text-wrap: balance;
}

.jm-faq-row__answer {
  max-width: var(--jm-faq-measure);
  font: 400 var(--text-body)/1.4 var(--font-sans);
  color: var(--purple-400);
  text-wrap: pretty;
}
.jm-faq-row__answer p { margin: 0 0 0.75em; }
.jm-faq-row__answer p:last-child { margin-bottom: 0; }

/* A hairline stays a hairline: in rem it would ride the fluid root and land on
   fractional pixels at most widths. */
.jm-faq-row__rule {
  width: 100%;
  height: 1px;
  background-color: var(--purple-100);
}

/* The last row in a list drops its rule (Figma: 430:597 is 96 tall against its
   siblings' 107, the difference being the rule and its gap) while keeping the 24
   below. `display: none` removes it from the flex flow, so the gap goes with it.
   The `--ruled` modifier is the element's "Always" setting opting back in. */
.jm-faq-row:not(.jm-faq-row--ruled):last-child > .jm-faq-row__rule { display: none; }

/* ---- Mobile accordion (618:6562 / drawn 615:5956) ----

   Below 48rem faq.js turns each row into a closed disclosure: the whole row is
   the button, the caret rotates 180 over the motion tokens, rows stay
   independent. The toggle only exists once the script builds it, so none of
   this renders for no-JS visitors — they get the open list. */

.jm-faq-row__toggle { display: none; }

@media (max-width: 47.99rem) {
  .jm-faq-row { gap: 0; padding-bottom: 0; }

  /* The list's own desktop gap collapses too: on mobile the row rhythm belongs
     entirely to the rows (the toggle's 20px padding), or closed items drift
     ~90px apart. :has keeps it generic across every page that lists FAQ rows. */
  #brx-content :has(> .jm-faq-row) { row-gap: 0; }

  .jm-faq-row__toggle:not([hidden]) {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    column-gap: 0.75rem;                 /* 12 — the drawn text-to-caret gap */
    padding: 1.25rem 0;                  /* 20, the spec's row padding */
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }
  .jm-faq-row__toggle:focus-visible {
    outline: 3px solid var(--purple-500); /* the light-ground focus ring */
    outline-offset: 2px;
  }

  .jm-faq-row__caret {
    flex: 0 0 auto;
    width: 1rem;                          /* 16 */
    height: 1rem;
    transition: transform var(--motion-base) var(--motion-ease);
  }
  .jm-faq-row.is-open .jm-faq-row__caret { transform: rotate(180deg); }

  .jm-faq-row.is-open .jm-faq-row__answer { padding-bottom: 1.25rem; }

  /* The spec's mobile divider: 1px Purple 500 at 14 percent. */
  .jm-faq-row__rule { background-color: color-mix(in srgb, var(--purple-500) 14%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .jm-faq-row__caret { transition: none; }  /* opens instantly, per the spec */
}