/* =========================================================
   H3 TREATMENT  ·  typographic basis + vertical rhythm
   ---------------------------------------------------------
   Loaded LAST in index.php. Each rule below overrides an existing
   one by matching its selector exactly, so the tie is broken by
   source order rather than by escalating specificity.

   COLOUR IS NOT SET HERE. Every heading colour comes from the
   tokens in variables.css (--h3-color, --h4-color, and the
   accordion's own --accordion-header-text-color).

   1 · sub-accordion body intros take the h3 typographic basis
   2 · the gap under an h3/h4 equals the leading of the text below

   To revert: delete this file and its <link> in index.php.
   ========================================================= */

/* =========================================================
   1 · SUB-ACCORDION BODY INTROS  —  h3 typographic basis
   ---------------------------------------------------------
   The intro prose that opens a three-digit sub-accordion carries
   .section-lead. It was running off the paragraph tokens
   (--p-font / --p-fs * 1.125), which put it out of step with the
   sub-accordion header directly above it.

   The gap was worst on phone: --h3-fs drops to 16px there, but
   --h4-fs has no phone override and stays at 1.3rem, so the intro
   rendered about 30% larger than the header it belonged to.

   Family, size and line-height now come from the h3 tokens so the
   two lock together at every breakpoint. Weight deliberately stays
   at 400 — this is prose, and h3's 600 would read as a heading.
   ========================================================= */

.accordion.accordion-secondary > .accordion-item.accordion-secondary-item > .accordion-collapse > .accordion-secondary-body .section-lead,
.section-lead {
  font-family: var(--h3-font, var(--font-base));
  font-size: var(--h3-fs);
  /* --section-intro-lh, not --h3-lh. --h3-lh is 2.6 between 768px and
     1200px and 1.45 below that, because it doubles as the vertical
     padding of a one-line sub-accordion header. Applied to a multi-line
     paragraph that reads as badly over-leaded. The intro's own token is
     a flat 1.5 at every width, which is what this text wants. */
  line-height: var(--section-intro-lh, 1.5);
  font-weight: 400;
}

/* =========================================================
   2 · VERTICAL RHYTHM  —  heading gap == body leading
   ---------------------------------------------------------
   Inside a paragraph the visible gap between two lines is the
   leading:  fs x (lh - 1).

   Between a heading's last line and the block under it, the visible
   gap is three things stacked:
       heading's bottom half-leading
     + heading's margin-bottom
     + body's top half-leading

   Setting the margin to

       (body leading / 2)  -  (heading leading / 2)

   makes those two distances identical. When the heading and the
   body share font-size and line-height the term resolves to 0,
   which is the case for a sub-accordion header and its .section-lead
   now that both run on the h3 tokens.

   --rhythm-next-* describes whatever follows the heading. It
   defaults to the paragraph tokens and is re-pointed at the h3
   tokens inside sub-accordion bodies.
   ========================================================= */

:root {
  --rhythm-next-fs: var(--p-fs);
  --rhythm-next-lh: var(--p-lh);
}

h3 {
  margin-bottom: calc(
      (((var(--rhythm-next-lh) - 1) * var(--rhythm-next-fs)) / 2)
    - (((var(--h3-lh) - 1) * var(--h3-fs)) / 2)
  );
}

h4 {
  margin-bottom: calc(
      (((var(--rhythm-next-lh) - 1) * var(--rhythm-next-fs)) / 2)
    - (((var(--h4-lh) - 1) * var(--h4-fs)) / 2)
  );
}

/* A sub-accordion header is followed by .section-lead: h3 size, but the
   intro's leading. */
.accordion-secondary-body,
.accordion-secondary-header,
.accordion-secondary-item {
  --rhythm-next-fs: var(--h3-fs);
  --rhythm-next-lh: var(--section-intro-lh, 1.5);
}

/* Header text -> lead text == the lead's own line-to-line distance.

   Three things sit between the two text blocks, and the earlier version of
   this rule only cancelled the last one:

     1  --acc-secondary-header-pad-bottom  (0.30 x header height)
     2  --acc-secondary-content-pt         (the body's padding-top)
     3  the header box surplus, when its min-height exceeds its line box

   With those three removed, what remains is the header's bottom
   half-leading plus the lead's top half-leading. Both run on the h3
   tokens, so together they equal exactly one line of leading — which is
   the gap between two lines inside the lead itself. */
.accordion.accordion-secondary > .accordion-item.accordion-secondary-item > .accordion-collapse > .accordion-secondary-body .section-lead,
.section-lead {
  margin-top: calc(
    -1 * (
        var(--acc-secondary-header-pad-bottom, 0.6rem)
      + var(--acc-secondary-content-pt, 0rem)
      + max(0px, (var(--acc-secondary-header-h, 2rem) - (var(--h3-fs) * var(--h3-lh))) / 2)
    )
    /* The header and the lead no longer share a line-height: the header
       still runs on --h3-lh (2.6 between 768px and 1200px) while the lead
       now runs on --section-intro-lh. Their half-leadings therefore differ,
       and the difference has to be taken out here or the gap grows by ~11px
       in that band. Resolves to 0 wherever the two tokens agree. */
    + (((var(--section-intro-lh, 1.5) - 1) * var(--h3-fs)) / 2)
    - (((var(--h3-lh) - 1) * var(--h3-fs)) / 2)
  );
  margin-bottom: calc(
      (((var(--rhythm-next-lh) - 1) * var(--rhythm-next-fs)) / 2)
    - (((var(--section-intro-lh, 1.5) - 1) * var(--h3-fs)) / 2)
  );
}


/* =========================================================
   3 · SECTION INTROS READ THE SAME WHEREVER THEY SIT
   ---------------------------------------------------------
   accordion.css styles .section-intro only when it is a DIRECT
   child of .accordion-body:

       .accordion:not(.accordion-secondary) > .accordion-item
         > .accordion-collapse > .accordion-body > .section-intro

   2.1's intro is exactly that, so it picks up font-weight 400.
   2.3's sits one level deeper, inside .subgrid-2L75 > .pane-left,
   so that rule never matched and the bare `h3` rule in typography.css
   took over at --h3-fw (600) — the heavy weight.

   Family, size and line-height already agree via typography.css.
   Only the weight was diverging, so that is all this sets.
   ========================================================= */

.section-intro {
  font-family: var(--h3-font, var(--font-base));
  font-weight: 400;
}


/* =========================================================
   4 · THE WHOLE INTRO BLOCK HIDES WHEN A SUB-ACCORDION OPENS
   ---------------------------------------------------------
   accordion.css collapses .section-intro when it is a DIRECT child
   of .accordion-body. Ten of the twelve intros are exactly that and
   need nothing from here.

   2.2 and 2.3 pair their intro with a diagram inside

       .accordion-body > .subgrid-2L75 > .pane-left  (intro)
                                       > .pane-right (diagram)

   Collapsing only the intro left the diagram sitting there. These
   rules collapse the whole two-column block instead, so the diagram
   goes with it.

   max-height carries the animation, so the open state needs a ceiling
   taller than the block ever gets — hence --acc-intro-block-h rather
   than the 20rem used for a bare intro. Timing and easing are the
   same tokens accordion.css uses, so the two shapes collapse in step.
   ========================================================= */

.accordion:not(.accordion-secondary)
  > .accordion-item
  > .accordion-collapse
  > .accordion-body
  > :has(> .pane-left > .section-intro) {
  overflow: hidden;
  max-height: var(--acc-intro-block-h, 60rem);
  opacity: 1;
  visibility: visible;
  transition:
    max-height var(--acc-collapse-duration) var(--acc-collapse-ease),
    opacity var(--acc-intro-slide-fade-duration) ease,
    transform var(--acc-collapse-duration) var(--acc-collapse-ease),
    visibility 0s linear 0s;
}

.accordion:not(.accordion-secondary)
  > .accordion-item
  > .accordion-collapse
  > .accordion-body:has( .accordion-secondary:not(.accordion-tertiary) > .accordion-item > .accordion-header > .accordion-button:not(.collapsed) )
  > :has(> .pane-left > .section-intro) {
  max-height: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--acc-intro-slide-shift));
  pointer-events: none;
  transition:
    max-height var(--acc-collapse-duration) var(--acc-collapse-ease),
    opacity var(--acc-intro-slide-fade-duration) ease,
    transform var(--acc-collapse-duration) var(--acc-collapse-ease),
    visibility 0s linear var(--acc-collapse-duration);
}


/* =========================================================
   5 · THE INTRO GRID STAYS TWO COLUMNS AT EVERY WIDTH
   ---------------------------------------------------------
   layout.css collapses .subgrid-2 to a single column at
   <= 900.98px. The four section intros (2.1-2.4) are meant to hold
   their two-column split on phones as well, so .subgrid-2--intro
   opts out of that collapse.

   Two selectors, both at (0,2): the plain one, and an !important
   twin for the breakpoint, since the layout.css rule sits inside a
   media query and would otherwise win on source order within it.
   ========================================================= */

.subgrid-2--intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900.98px) {
  .subgrid-2--intro {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    /* Tighten the gutter rather than stacking, so two columns still
       fit a phone without the text column becoming unreadable. */
    gap: min(var(--card-gap, var(--subgrid-gap, 2rem)), 1rem);
  }
}


/* =========================================================
   6 · HEADING INK FOLLOWS THE FIELD
   ---------------------------------------------------------
   h3 and h4 take --heading-ink-on-light on white sections and
   --heading-ink-on-dark on black ones. Both are defined in
   variables.css; nothing here hardcodes a colour.

   Two overrides are needed on top of the :root default:

   1. Dark grounds (.area-dark / .on-black / offcanvas panels).
   2. Open accordion bodies. accordion.css re-points --h3-color and
      --h4-color at --accordion-full-color while a section is opening
      or open, which would otherwise wipe the ink out mid-animation.
      These restore it, keyed to the field the body sits on.
   ========================================================= */

.area-dark,
.on-black,
.offcanvas,
.popup.popup--dark {
  --h3-color: var(--heading-ink-on-dark);
  --h4-color: var(--heading-ink-on-dark);
}

.area-light,
.popup,
.offcanvas.offcanvas--light {
  --h3-color: var(--heading-ink-on-light);
  --h4-color: var(--heading-ink-on-light);
  --body-ink: var(--text-ink-on-light);
}

/* Re-assert through the accordion's own colour handoff. */
.area-light .accordion-item:has(> .accordion-header > .accordion-button[aria-expanded="true"]) > .accordion-collapse > .accordion-body,
.area-light .accordion-item > .accordion-collapse.collapsing > .accordion-body {
  --h3-color: var(--heading-ink-on-light);
  --h4-color: var(--heading-ink-on-light);
}

.area-dark .accordion-item:has(> .accordion-header > .accordion-button[aria-expanded="true"]) > .accordion-collapse > .accordion-body,
.area-dark .accordion-item > .accordion-collapse.collapsing > .accordion-body,
.on-black .accordion-item:has(> .accordion-header > .accordion-button[aria-expanded="true"]) > .accordion-collapse > .accordion-body,
.on-black .accordion-item > .accordion-collapse.collapsing > .accordion-body {
  --h3-color: var(--heading-ink-on-dark);
  --h4-color: var(--heading-ink-on-dark);
}


/* =========================================================
   7 · DEFAULT INK BELOW h2 ON A BLACK FIELD
   ---------------------------------------------------------
   Everything under h2 on a dark section takes --text-ink-on-dark
   (#C7C7C7): body copy, lists, table cells, and h5/h6 — the last two
   because --h5-color/--h6-color are `currentColor`, so they follow the
   container without needing their own declaration. h3/h4 already come
   from --heading-ink-on-dark, set to the same value.

   The two tiers that must NOT step back:
     h1  reads --h1-color-on-dark, which is unaffected by inheritance.
     h2  reads `currentColor`, so it WOULD follow this rule down. It is
         pinned back to --color-text-light here to keep full strength.

   Specificity note: layout.css sets `color: #fff` directly on
   #tactics-bg and #footer-bg at (1,0,0). The ID list below ties that
   and wins on source order, since this file loads after layout.css.
   The class selectors carry the same values for any dark surface that
   is not one of those bands.

   Light sections are untouched — #C7C7C7 on white is ~1.6:1.
   ========================================================= */

/* Offcanvas panels are INVERTED against their trigger: invent-city.js
   (applyOffcanvasSurfaceTheme) adds .offcanvas--light when the trigger
   sits on a dark surface, so a panel opened from a black section is
   white. :not() is used rather than .offcanvas--dark because a panel
   that has not been opened yet carries neither class, and the base
   .offcanvas is black. */
:is(#hero-bg, #mission-bg, #tactics-bg, #mart-bg, #ag-video, #footer-bg, #launch-bg),
.area-dark,
.on-black,
.offcanvas:not(.offcanvas--light) {
  color: var(--text-ink-on-dark);
  --body-ink: var(--text-ink-on-dark);
  --h2-color: var(--color-text-light);
  --accordion-header-text-color: var(--accordion-header-ink-on-dark);
}