/* Footer Component Styles */

/* Base Footer */
.footer p {
  color: var(--color-white);
  margin-bottom: 0px;
}
.footer {
  background-color: var(--color-secondary);
  color: var(--color-white);
  padding: var(--space-4xl) 0 var(--space-2xl);
  margin-top: var(--space-5xl);
}

.footer__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.footer__content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--grid-gap);
  margin-bottom: var(--space-3xl);
}

.footer__section {
  margin-bottom: var(--space-xl);
}

.footer__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-md);
  color: var(--color-white);
}

.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__list-item {
  margin-bottom: var(--space-sm);
}

.footer__link {
  color: var(--color-overlay-light);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--color-white);
  text-decoration: underline;
}


.footer__bottom {
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-overlay-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer__copyright {
  font-size: var(--font-size-sm);
  color: var(--color-overlay-light);

  p {
    font-size: 16px;
  }
}

.footer__social {
  display: flex;
  gap: var(--space-md);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--color-overlay-light);
  border-radius: var(--radius-full);
  color: var(--color-white);
  transition: all var(--transition-fast);
}

.footer__social-link:hover {
  background-color: var(--color-primary);
  transform: translateY(-2px);
}

.footer__social-link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ==========================================================================
   Footer Dark Variant — the 2026 site footer (CHR-2 / DONI-561)
   ==========================================================================

   Figma file key TJC7pZhPM2o5S0wuc1tnVI. The canonical footer address is
   `29999:57225 > Footer (0:455)` — 1440x308 at y=1454 inside 0.2 D Home.
   0.2 D Home is an INSTANCE, so the footer has no bare `29999:*` id and
   must be cited in that `<parent> > <child>` form (C-002).

   🔴 CORRECTED 2026-08-06 (DONI-561 QA). This block previously cited
   node 29701:77322. That is the SUPERSEDED file's numbering, which
   measured-frames.json quarantines permanently: a `29701:*` id may never
   authorise a length, whatever file key is quoted beside it. Every number
   below now comes from a verified `29999:*` entry in
   docs/hcp-nxt/measured-frames.json (C-024).

   THE ONE DEFECT NOT REPRODUCED — the horizontal padding.
   The Figma frame is `padding: 40px 392px` on a 1440 frame, which leaves
   a 656px content box, while the link row (~1310px) and the legal line
   (~1190px) are both `white-space: nowrap`. Figma resolves that by
   `overflow: clip` — it visibly CUTS both of them off. That is a
   design-file defect, not a layout instruction, and it is why the
   CONTENT box here is 1360 rather than 656.

   The corrected content value is 40px of padding, and that is derived
   rather than guessed: the cookie control in the same frame is pinned at
   `left: 40px; top: 40px`, so 40px is the padding the frame itself
   already uses on the one child that is positioned against it.
   1440 - (2 x 40) = 1360, and the link row fits on one line at 1360 but
   not at 1200.

   ⚠️ THAT CORRECTION APPLIES TO THE CONTENT BOX ONLY — NOT TO THE
   DIVIDER. Two claims that used to be written here are DISPROVEN:

   1. "the divider is `w-full`, so 656 was never intent" — FALSE. The
      divider is DRAWN at 656 x 1, x=392, y=144, centred (392 + 656 +
      392 = 1440), stroke STEEL #515861. Both files agree: the same line
      sits at the same coordinates in the superseded file. 656 IS the
      intent, and --footer-content is the token that holds it.
   2. "no mobile footer frame exists" — FALSE. See the 375 block below.

   So the footer's content is built from --footer-inner (1360) and the
   divider is built from --footer-content (656). They are different
   widths on purpose. */

.footer--dark {
  position: relative;
  background-color: var(--color-charcoal);
  color: var(--color-white);
  padding: var(--space-2xl);
  margin-top: 0;
}

.footer--dark .footer__container {
  /* 1360 = 1440 - 2 x 40. See the padding note above. */
  max-width: var(--footer-inner);
  margin: 0 auto;
  padding: 0;
}

.footer--dark .footer__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
  margin-bottom: 0;
}

.footer__logo-image {
  height: 65px;
  width: 198px;
}

.footer--dark .footer__links nav {
  display: flex;
  /* Figma: gap 40px. This was 60px (--footer-links), a legacy-port value
     that predates the 2026 frame. */
  gap: var(--space-md) var(--space-2xl);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.footer--dark .footer__link {
  font-family: var(--font-agenda);
  font-size: var(--fs-20);          /* Figma "Size/Body" */
  font-weight: var(--font-weight-normal);
  color: var(--color-white);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  transition: color var(--transition-fast);
  text-align: center;
}

.footer--dark .footer__link:hover {
  text-decoration: underline;
}

/* REMOVED 2026-08-08 (DONI-561 QA round 6). This used to read:
   "DONI-874. Distinct colour so the link stands out from its neighbours —
   deliberate per CHR-2, not an error." That claim traced back to unkeyed
   prose in CHR-2's own ticket text, never a measured colour (no fileKey +
   nodeId citation, per C-024). docs/hcp-nxt/archive/2026-08-status-dump.md
   had already flagged this as unconfirmed: "the AC and --color-alert-link
   say #ff00b7. In the final file that node carries no colour override...
   Inferred from codegen, not confirmed by screenshot." A keyed screenshot
   of the canonical file (TJC7pZhPM2o5S0wuc1tnVI) now confirms it directly:
   `29999:57225 > Footer` at 1440 and `29999:57228 > Footer` at 375 both
   render EVERY link, including "Report Adverse Events" and "Sitemap", as
   plain white with zero magenta pixels anywhere in the link row. C-020 /
   C-025: the render wins over ticket prose. .footer__link--alert deleted;
   .footer--dark .footer__link (above) now covers this link like every
   other one. --color-alert-link itself is untouched — still used by
   sections.css, taking-dawnzera.css, switching-to-dawnzera.css,
   about-hae.css and ionis-every-step-support.css, none of which this
   ticket investigated. */

.footer__privacy-icon {
  width: 30px;
  height: 14px;
  margin-left: var(--space-xs);
}

.footer--dark .footer__copyright {
  font-family: var(--font-agenda);
  font-size: var(--fs-16);          /* Figma "Footnote" */
  color: var(--color-white);
  text-align: center;
  line-height: var(--line-height-body);
}

.footer__code {
  color: var(--color-white);
  /* Regulated. The Veeva job code and its approval date must stay on one
     line — DONI-508 exists because they were allowed to wrap. Keeping
     the code atomic also lets it drop to its own line only when it does
     not fit, rather than forcing a break at every breakpoint. */
  white-space: nowrap;
}

/* The divider — 656 x 1, x=392, stroke STEEL.
   `29999:57225 > Footer divider (Line 1)` in measured-frames.json,
   verified 2026-08-06 off a 1:1 render of the canonical file.

   NOT --footer-inner (1360). That is the footer's CONTENT width, and it
   is deliberately wider than this line. 392 + 656 = 1048 and
   1440 - 1048 = 392, so the line is symmetric in the 1440 frame:
   centring it inside the 1360 content box lands it at x=392 by
   construction ((1360 - 656) / 2 = 352, + the 40px footer padding).

   `.footer__content` is a centred flex column, so this is already
   centred by its parent; `margin-inline: auto` states it here as well so
   the width does not depend on the parent's alignment staying put. */
.footer__seperation {
  border-bottom: var(--stroke-1) solid var(--color-steel);
  width: var(--footer-content);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Below 1440.

   🔴 CORRECTED 2026-08-06 (DONI-561 QA). This block used to open "NOT IN
   THE DESIGN — the final Figma file carries only a 1440 desktop footer
   frame". That is FALSE. `29999:57228 > Footer (0:311)` is a 375x776
   footer instance inside 0.2 M Home at y=2736, read with an explicit
   fileKey and recorded verified in measured-frames.json. It is a
   different layout from desktop rather than a reflow — 776 tall against
   308.

   What has been MEASURED off that frame so far is the divider (343 x 1
   at x=16, i.e. content width with a 16px gutter, STEEL) and the fact
   that the cookie control is CENTRED near the foot on mobile rather than
   pinned top-left. The divider is implemented below. The rest of this
   block — the side padding and the stacked link column — is still an
   engineering decision, taken before the frame was found, and is not yet
   reconciled against it. Do not read the two remaining rules as a
   hand-off; measure the frame before treating them as such.

   The 375 divider and the 1440 divider are DRAWN, not derived: 656
   centred in 1440 and 343 in 375 cannot be reasoned from one another.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* 40px of side padding costs 21% of a 375px viewport and squeezes the
     regulated legal line into more lines than it needs. The desktop
     figure is kept vertically and relaxed horizontally. Not measured —
     see the note above. */
  .footer--dark {
    padding: var(--space-2xl) var(--space-lg);
  }

  .footer--dark .footer__links nav {
    flex-direction: column;
    gap: var(--space-lg);
  }

  /* 343 x 1 at x=16 — `29999:57228 > Footer divider (mobile)`.
     343 = 375 - (2 x 16), so at 375 the divider is viewport width less a
     16px gutter, where at 1440 it is a fixed 656.

     The footer's own side padding here is --space-lg (24px), so the
     content box is 327 at 375 and the line has to reach 8px further out
     on each side: 100% + 2 x (24 - 16) = 100% + 16px = 343 at 375, and
     it keeps the 16px gutter at every width below 768 rather than
     hardcoding one viewport's answer. It grows into the footer's own
     padding, never past its border box, so it cannot introduce
     horizontal overflow.

     The -8px is NOT decoration, and `margin-inline: auto` cannot replace
     it. This line is WIDER than its flex parent, and both of the usual
     centring mechanisms give up when the free space is negative: auto
     margins resolve to 0 and `align-items: center` falls back to the
     start edge. Measured before this margin existed: width 343 but
     x=24 — the right width in the wrong place. */
  .footer__seperation {
    width: calc(100% + 16px);
    margin-inline: -8px;
  }
}

/* CHR-2 (DONI-561): the `.footer__cookie-preferences` control was removed —
 * see the comment in templates/footer.html.twig. OneTrust's own floating
 * launcher covers the AC; this file no longer styles a duplicate. */

/* CHR-2 (DONI-561), 2026-08-10 — mobile: reposition OneTrust's floating
 * launcher into the footer instead of its default fixed viewport corner.
 *
 * Figma draws the cookie control CENTRED near the bottom of the mobile
 * footer, between the link list and the legal line — not pinned to a
 * screen corner (`29999:57228 > Footer cookie control`, measured-frames.json,
 * verified: ink bbox x=150..222 y=541..614 in a 375x776 footer, midpoint
 * x=187 against a 187.5 centre).
 *
 * `#ot-sdk-btn-floating` ships `position: fixed`, which cannot express that
 * — a fixed element is always viewport-anchored regardless of scroll, the
 * opposite of "part of the footer's own content". Switching it to
 * `position: absolute` only reaches the true bottom of a tall document if
 * SOME ancestor establishes a containing block that tall; with none, the
 * browser falls back to the initial containing block (viewport-sized),
 * landing the icon near the top of the page instead — measured directly
 * before adding the `body` rule below.
 *
 * `body { position: relative }` makes `<body>` — which OneTrust's script
 * appends its container directly into — that containing block, so
 * `bottom: 162px` (776 - 614, the icon's Figma distance from the footer's
 * own bottom edge) lands it in the footer regardless of total page height,
 * since the footer is the last rendered content on every page. Verified
 * body has no other `position` declared anywhere in this theme and its
 * only other `position: absolute` body-level children (the skip link,
 * `#drupal-live-announce`) are both `visually-hidden` and unaffected —
 * `position: fixed` elements elsewhere (header, ISI tray, HCP gate) are
 * untouched, since fixed positioning is not relative to ancestor position.
 *
 * Docking is gated on `body.cookie-launcher-docked`, set by
 * js/cookie-launcher-dock.js only while the footer slot is in view. Until
 * then the launcher keeps OneTrust's fixed bottom-left position over the ISI
 * tray, as on the live site, so it is reachable at every scroll position.
 * The 2026-08-10 version docked it unconditionally, hiding it until the
 * visitor reached the footer. */
body {
  position: relative;
}

#onetrust-consent-sdk #ot-sdk-btn-floating {
  width: 79px !important;
  height: 83px !important;
  overflow: hidden;
}

@media (max-width: 1159px) {
  .footer--dark .footer__content {
    gap: var(--space-2xl);
  }

  .footer__cookie-spacer {
    display: block;
    flex-shrink: 0;
    width: 100%;
    height: 83px;
    margin: 0;
  }

  /* Floating over the ISI tray: OneTrust's native 50x50, as on the live
     site, so it covers less regulated copy. Docked, it keeps Figma's size.
     `overflow: visible` as on live: the 79x83 rule's `hidden` cuts the
     icon's drop shadow square at a 50x50 box. */
  body:not(.cookie-launcher-docked) #onetrust-consent-sdk #ot-sdk-btn-floating {
    width: 50px !important;
    height: 50px !important;
    overflow: visible;
  }

  .cookie-launcher-docked #onetrust-consent-sdk #ot-sdk-btn-floating {
    position: absolute !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
  }
}

@media (min-width: 1160px) {
  .footer__cookie-spacer {
    display: none;
  }
}

@media (min-width: 655px) and (max-width: 1159px) {
  .cookie-launcher-docked #onetrust-consent-sdk #ot-sdk-btn-floating {
    bottom: calc(60px + 44px + var(--space-2xl)) !important;
  }
}

@media (min-width: 464px) and (max-width: 654px) {
  .cookie-launcher-docked #onetrust-consent-sdk #ot-sdk-btn-floating {
    bottom: calc(60px + 60px + var(--space-2xl)) !important;
  }
}

@media (min-width: 385px) and (max-width: 463px) {
  .cookie-launcher-docked #onetrust-consent-sdk #ot-sdk-btn-floating {
    bottom: calc(90px + 60px + var(--space-2xl)) !important;
  }
}

@media (max-width: 384px) {
  .cookie-launcher-docked #onetrust-consent-sdk #ot-sdk-btn-floating {
    bottom: calc(120px + 60px + var(--space-2xl)) !important;
  }
}