/**
 * @file
 * The 2026 site footer. CHR-5 / DONI-713.
 *
 * Replaces `css/components/footer.css`, which was legacy fork markup written
 * against `.footer` / `.footer__*`. The new block is `.site-footer` — a new
 * name on purpose, so the two can never half-apply to one element.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * MEASURED 2026-08-05 from the CANONICAL Figma file `PMOumVEsuQEHJFYkbGBD84`
 * Masters: `8045:27193` desktop 1440x477 · `4280:3688` mobile 375x774
 * ─────────────────────────────────────────────────────────────────────────
 *
 * ## The whole footer is one 40px vertical rhythm
 *
 * Both masters are a centred column with `padding: 40px 0` and a 40px gap,
 * and every child's y in Figma falls out of that. Nothing here is a guess:
 *
 * | y      | Desktop                      | Mobile                       |
 * |--------|------------------------------|------------------------------|
 * | 40     | Ionis logo 198x65            | same                         |
 * | 145    | divider, x=120 w=1200        | divider, x=16 w=343          |
 * | 185    | social row 72x24             | same                         |
 * | 249    | links 1106x72 (2 rows)       | links 294x312 (7 rows)       |
 * | 361/601| legal 782x76 / 343x133       |                              |
 * | 477/774| bottom edge                  |                              |
 *
 *   40 + 65 + 40 + 0 + 40 + 24 + 40 + 72 + 40 + 76 + 40 = 477  ✅
 *   40 + 65 + 40 + 0 + 40 + 24 + 40 + 312 + 40 + 133 + 40 = 774 ✅
 *
 * ## 🔴 Mobile side padding is 16, not the 24 every other section uses
 *
 * `css/base/layout.css` anticipated this and named the mechanism: a component
 * with a genuinely different measured inset re-declares `--layout-gutter` on
 * itself and keeps using `.l-band` / `.l-container`. That is what happens
 * below. It is NOT a global token and must not become one.
 *
 * Evidence: `4280:3690`, the mobile divider, is x=16 w=343 on a 375 artboard.
 * 375 - 343 = 32, i.e. 16 a side. The desktop divider `8045:27195` is
 * x=120 w=1200, which is the normal gutter, so only mobile is overridden.
 */

/**
 * 🔴 BLEED DEFENCE — read this before deleting any `inherit` below.
 *
 * `global` still loads the legacy `css/base/typography.css` and
 * `css/base/reset.css` (both `replace`-class in the retirement map, owned by
 * FND-3 / FND-5, neither retired yet). They set ELEMENT rules, and an element
 * rule beats an INHERITED value no matter how specific the ancestor is. So a
 * `.t-footnote` on a wrapper does not reach the `<p>` inside it.
 *
 * Measured in Chrome at 1440 on 2026-08-05 — what leaked, and what it cost:
 *
 * | Legacy rule | Bled in as | Cost |
 * |---|---|---|
 * | `typography.css:53` `p { color: var(--color-text-primary) }` | `#1d2d3a` | 🔴 CHARCOAL LEGAL COPY ON A CHARCOAL FOOTER — invisible |
 * | `typography.css:54` `p { font-size: 20px }` | 20px, not 16 | legal block 975px wide instead of 782 |
 * | `typography.css:55` `p { line-height: 1.75 }` | 35px lines | legal block 140px tall instead of 76 |
 * | `typography.css:116` `li { margin-bottom: 4px }` | +4px per row | footer 551px instead of 477 |
 * | `typography.css:84` `a:hover { color: var(--color-primary) }` | coral | white links turn coral on hover |
 *
 * Each is countered explicitly below rather than with `!important`, and each
 * counter should be DELETED when FND-3 / FND-5 retire the file that caused it.
 */

.site-footer {
  position: relative;
  z-index: 2;
  background-color: var(--color-charcol);
  color: var(--color-white);
  padding-block: 40px;
}

/**
 * 🔴 16, not 24. Figma `4280:3690`. Deliberate, measured, footer-only.
 *
 * Scoped to BELOW the mode switch, so the desktop 120 keeps coming from
 * `css/base/layout.css` instead of being restated here and drifting.
 *
 * `.98` rather than `767` so no fractional viewport falls between this query
 * and layout.css's `min-width: 768` and silently gets the 24px root default.
 */
@media (max-width: 767.98px) {
  .site-footer {
    --layout-gutter: 16px;
  }
}

/**
 * The column. One flex stack, 40px gap, everything centred — which is the
 * whole of both masters' auto-layout.
 */
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* OneTrust's floating trigger duplicates DONI-716's tray/footer buttons.
   Keep the banner and preference center visible; hide only the provider trigger. */
#ot-sdk-btn-floating {
  display: none !important;
}

/* ── Cookie preferences control ─────────────────────────────────────────── */

.cookie-control {
  inline-size: var(--cookie-control-width, 79.963px);
  block-size: var(--cookie-control-height, 83px);
  min-inline-size: 44px;
  min-block-size: 44px;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.cookie-control__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.cookie-control--footer {
  position: absolute;
  inset-block-start: 264px;
  inset-inline-start: 40px;
  z-index: 1;
}

@media (max-width: 768px) {
  .cookie-control--footer {
    display: none;
  }
}

/* ── Ionis logo ─────────────────────────────────────────────────────────── */

/* No `::after` overlay here — the logo box is already 198x65. */
.site-footer__logo {
  display: block;
  line-height: 0;
}

.site-footer__logo-image {
  display: block;
  /* Figma `8045:27194` / `4280:3689`. Identical at both widths. */
  inline-size: 198px;
  block-size: 65px;
}

/* ── Divider ────────────────────────────────────────────────────────────── */

/**
 * 🔴 A border, never the exported `<line>`.
 *
 * Figma exports this as a 1200x1 raster/vector `<line>`. Shipping that image
 * pins the rule to 1200px, so it overflows below 1440 and stops short above
 * it. A border follows the container at every width.
 *
 * The height arithmetic, because it is not obvious:
 * Figma's line is a ZERO-height auto-layout item with a 1px centre-aligned
 * stroke, so it contributes 0 to the 477 total. A CSS border always adds to
 * the border box, so this element is 1px tall. `margin-block-end: -1px` gives
 * that pixel back to the next gap — the rule draws, and the footer still
 * measures exactly 477.
 */
.site-footer__divider {
  inline-size: 100%;
  block-size: 0;
  margin: 0 0 -1px;
  border: 0;
  border-block-start: 1px solid var(--color-steel);
}

/* ── Social icons ───────────────────────────────────────────────────────── */

.site-footer__social {
  display: flex;
  /* Figma `21359:43113`: frame 72 wide holding two 24px icons at x=0 and
     x=48, so the gap is 24. */
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__social-link {
  position: relative;
  display: block;
  color: var(--color-white);
  line-height: 0;
}

.site-footer__icon {
  display: block;
  inline-size: 24px;
  block-size: 24px;
}

/* ── Link list ──────────────────────────────────────────────────────────── */

/**
 * Desktop is ONE wrapping row, and the wrap point is not arbitrary.
 *
 * Figma `8045:27196` measures 1106px for the five long links at a 60px gap.
 * Adding `Contact Us` (90px) needs 1106 + 60 + 90 = 1256, which does not fit
 * the 1200 container — so the natural wrap puts exactly `Contact Us` and
 * `Sitemap` on row two, 216px wide and centred. That is what `23640:64149`
 * draws. No nth-child, no hardcoded split.
 *
 * Row gap is 24 on both masters (`8045:27196` y=0 h=24, `23640:64149` y=48).
 */
.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .site-footer__links {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /* row 24 · column 60 */
    gap: 24px 60px;
  }
}

/* `margin: 0` counters `typography.css:117` `li { margin-bottom: 4px }`. That
   4px is what made the footer 551 instead of 477. */
.site-footer__links-item,
.site-footer__social > li {
  display: flex;
  margin: 0;
}

.site-footer__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Figma draws every link's text box exactly 24px tall (`8045:27198` and the
     six beside it, both masters). Chrome's `normal` on `agenda` is 1.16, i.e.
     23.2 at 20px — 0.8 short per row, and the 477/774 totals are built from
     24. Pinned to the measured box. */
  line-height: 24px;
  /* Figma `10420:31556`: the privacy mark sits 8px after its label. The gap
     is inert on every other link, which has no second child. */
  gap: 8px;
  color: var(--color-white);
  text-decoration: none;
}

/**
 * ⚠️ OUR DECISION, not the design's. Figma draws no hover and no focus state
 * for any footer link. WCAG 1.4.1 means colour alone cannot be the only
 * affordance, so the underline is added rather than a colour shift. Do not
 * delete this for being absent upstream.
 */
.site-footer__link:hover,
.site-footer__link:focus-visible,
.site-footer__logo:hover,
.site-footer__social-link:hover {
  /* The colour is restated because `typography.css:85` turns every hovered
     `a` coral, which on charcoal is both off-design and low contrast. */
  color: var(--color-white);
  text-decoration: underline;
}

.site-footer__privacy-mark {
  display: block;
  /* Figma `10420:27997`. Not square — 30x14. */
  inline-size: 30px;
  block-size: 14px;
  flex-shrink: 0;
}

/* ── 44x44 hit areas ────────────────────────────────────────────────────── */

/**
 * 🔴 Grown with an absolute `::after`, never with padding.
 *
 * The Figma boxes are 24px tall and the design's 60px / 24px gaps are
 * measured against those boxes. Padding a link to 44 would push every
 * neighbour and the footer would no longer measure 477 / 774. An overlay
 * takes the pointer and takes no space.
 *
 * ⚠️ 44x44 is THIS PROJECT'S policy, not the AA bar — WCAG 2.1 puts 44x44 at
 * Level AAA (2.5.5); the AA equivalent is 24x24 in WCAG 2.2 (2.5.8).
 *
 * No two targets collide: the row pitch is 48 (24 box + 24 gap), so centred
 * 44px targets span 2..46 and 50..94.
 */
.site-footer__link::after,
.site-footer__social-link::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: 100%;
  min-inline-size: 44px;
  block-size: 100%;
  min-block-size: 44px;
}

/* ── Legal block ────────────────────────────────────────────────────────── */

.site-footer__legal {
  text-align: center;
}

/**
 * 🔴 Every declaration here is countering `typography.css:53-58`, which sets
 * `font-size`, `line-height`, `margin-bottom` and `color` on the `p` ELEMENT.
 * Without `color: inherit` the legal copy renders CHARCOAL ON CHARCOAL.
 *
 * `19px` is measured, not chosen: the desktop legal node `8045:27222` is 76px
 * over 4 lines and the mobile node `4280:3712` is 133px over 7. Both give
 * exactly 19.0, and both totals (477 / 774) are built from it.
 */
.site-footer__legal-line {
  margin: 0;
  font-size: inherit;
  line-height: 19px;
  color: inherit;
}

/**
 * 🔒 REGULATED. The Veeva promotional code.
 *
 * `8045:27222` (desktop) keeps `©<year> Ionis Pharmaceuticals, Inc.` and the
 * code on ONE line. `4280:3712` (mobile) breaks between them, leaving a
 * trailing space after `Inc.`. That is the only difference between the two
 * masters, and it is a line break — the STRING is identical at every width,
 * which is what `docs/design-deviations.yml` requires.
 *
 * `nowrap` so the code can never be split across two lines by a viewport
 * nobody measured.
 */
.site-footer__veeva {
  display: block;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .site-footer__veeva {
    display: inline;
  }
}