/* ═════════════════════════════════════════
   WV Footer — site footer component
   ─────────────────────────────────
   Extracted 2026-06-18 from wv-components.css (v79→v80) per the
   one-component-one-file convention, so the footer can load NON-render-blocking
   (it is below the fold on every page). ⚠ FROZEN — extraction preserves
   wv-components.css's freeze; this file is READ-ONLY (edit only on designer
   sign-off + version bump — see CLAUDE.md Rule 2). Rendered by parts/footer.php.
   Cascade preserved verbatim: base → mobile-first re-statement → @768 → @1280.
   ═════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   FOOTER — from Figma node 40:152
   ═══════════════════════════════════════════ */
.wv-footer {
  position: relative;
  background: var(--wv-color-background);
}

/* Authorized change — user approved 2026-04-03.
   Constrains footer content to match header max-width (1440px).
   2026-06-02 (v53): padding switched to --wv-page-gutter token to
   match header alignment after the gutter rename / 48px desktop
   change. Token cascade handles tier values (16/40/48 mobile/
   tablet/desktop) automatically, so the mobile-first override
   blocks below for this property are now redundant; left in place
   to keep the diff focused on the gutter alignment. */
.wv-footer__inner {
  max-width: var(--wv-container-max);
  margin: 0 auto;
  padding: 0 var(--wv-page-gutter);
}

.wv-footer__bg {
  position: absolute;
  inset: 0;
  background: var(--wv-color-surface);
  z-index: -1;
}

/* ── Footer Top ── */
/* Tagline row sits between two horizontal rules that extend to the
   viewport edge (v62). Pseudo-elements positioned via
   left/right: calc(50% - 50vw) escape the .wv-footer__inner padding
   and span the full viewport regardless of container width. */
.wv-footer__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
}
.wv-footer__top::before,
.wv-footer__top::after {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  height: 1px;
  background: var(--wv-color-text-primary);
  pointer-events: none;
}
.wv-footer__top::before { top: 0; }
.wv-footer__top::after  { bottom: 0; }

.wv-footer__logo {
  width: 223px;
  height: auto;
}

.wv-footer__tagline {
  font-family: var(--wv-font-primary);
  font-size: 24px;
  font-weight: 400;
  color: var(--wv-color-text-primary);
  margin: 0;
}

/* ── Footer Middle ── */
.wv-footer__middle {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 41px;
  padding: 40px 0 22px;
}

.wv-footer__left {
  flex: 0 0 553px;
  display: flex;
  flex-direction: column;
  gap: 41px;
}

.wv-footer__email-wrap {
  /* Lives inside .wv-footer__left now (v59), so width is governed by
     __left's flex-basis at each breakpoint. Only the internal stack
     rule belongs here. */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Email Signup Heading */
.wv-footer__signup-heading {
  font-family: var(--wv-font-primary);
  font-size: var(--wv-text-lg);
  font-weight: 400;
  color: var(--wv-color-text-primary);
  margin: 0 0 8px;
}

/* Disclaimer */
.wv-footer__disclaimer {
  font-family: var(--wv-font-primary);
  font-size: 11px;
  font-weight: 700; /* FDA 21 CFR 101.93(e) requires boldface — do not change */
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--wv-color-text-primary);
  margin: 16px 0;            /* v75: full container-max width (was 16px 40px inset); text stays centered with its 6/10 padding */
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--wv-color-text-primary);
  border-radius: 8px;
}

/* ── Footer Nav ── */
.wv-footer-nav {
  flex: 1;
  display: flex;
  gap: 30px;
  padding-left: 0;
}

.wv-footer-nav__col {
  flex: 1;
}

.wv-footer-nav__label {
  font-family: var(--wv-font-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 19px;
  letter-spacing: -0.45px;
  color: var(--wv-color-text-primary);
  margin: 0 0 12px;
  text-transform: uppercase;
}

.wv-footer-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wv-footer-nav__list li {
  margin: 0;
}

.wv-footer-nav__list a {
  display: block;
  padding: 5.5px 0;
  font-family: var(--wv-font-primary);
  font-size: 15.7px;
  font-weight: 400;
  line-height: 18.8px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--wv-color-text-primary);
  transition: color var(--wv-transition-base);
}

.wv-footer-nav__list a:hover {
  color: var(--wv-color-text-link-hover);
}

/* ── Footer Bottom ──
   Vertical stack of two rows (v60):
     row 1 — legal links (terms | privacy | accessibility)
     row 2 — copyright (left) + social (right), via .wv-footer__bottom-row
   16px gap between the horizontal line and the legal row mirrors the
   disclaimer's 16px margin-bottom-to-line gap above the border. */
.wv-footer__bottom {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0 22px;
}
/* Horizontal rule above the legal row extends to viewport edge (v62). */
.wv-footer__bottom::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  top: 0;
  height: 1px;
  background: var(--wv-color-text-primary);
  pointer-events: none;
}

.wv-footer__bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wv-footer__copyright {
  font-family: var(--wv-font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--wv-color-text-primary);
}

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

.wv-footer__legal a,
.wv-footer__legal-divider {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--wv-color-text-primary);
}

.wv-footer__legal a {
  text-transform: uppercase;
  transition: color var(--wv-transition-base);
}

.wv-footer__legal a:hover {
  color: var(--wv-color-text-link-hover);
}

.wv-footer__legal-divider {
  margin: 0 8px;
  opacity: 0.5;
}

.wv-footer__social {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wv-footer__social a {
  display: inline-flex;
  opacity: 0.8;
  transition: opacity var(--wv-transition-base);
}

/* Force the two social PNGs into identical 20×20 boxes with letterbox
   so their differing native aspect ratios (FB 22×41 vs IG 52×47) can't
   visually distort. Replaces v59's reliance on width/height attrs alone. */
.wv-footer__social img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.wv-footer__social a:hover {
  opacity: 1;
}

.wv-footer__inner {
  padding: 0 var(--wv-page-gutter);
}

.wv-footer__top {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.wv-footer__tagline {
  font-size: 20px;
  line-height: 28px;
}

.wv-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 16px;
  padding-left: 20px;
  order: 2;
}

.wv-footer-nav__col {
  flex: 0 0 calc(50% - 16px);
}

.wv-footer__middle {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 0;
}

.wv-footer__left {
  order: 1;
  margin-bottom: 25px;
  gap: 12px;
  flex: none;
  width: 100%;
}

.wv-footer__bottom {
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
}

/* v75: bottom row now holds copyright · policies · social. Stack them
   centered on mobile; the @768 block restores the single space-between row. */
.wv-footer__bottom-row {
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {


  .wv-footer__inner {
    padding: 0 var(--wv-page-gutter);
  }

  .wv-footer__top {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }

  .wv-footer__tagline {
    font-size: 24px;
    line-height: normal;
  }

  .wv-footer-nav {
    flex: 1;
    flex-wrap: nowrap;
    gap: 20px;
    padding-left: 0;
    order: 0;
  }

  .wv-footer-nav__col {
    flex: 1;
  }

  .wv-footer__middle {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 41px;
    padding-bottom: 22px;
  }

  .wv-footer__left {
    order: 0;
    margin-bottom: 0;
    gap: 41px;
    flex: 0 0 320px;
    width: auto;
  }

  /* v75: single centered row — copyright (left) · policies (center) · social
     (right). Base rule already sets align-items:center + space-between. */
  .wv-footer__bottom-row {
    flex-direction: row;
  }
}

@media (min-width: 1280px) {


  .wv-footer__inner {
    padding: 0 var(--wv-page-gutter);
  }

  /* v77 (Option 2): pin the nav block flush-right within the middle row via
     justify-content on .wv-footer__middle, so the rightmost column's text
     right-edge lands on the container-max right edge (under the tagline). The
     nav is content-width with a tidy FIXED inter-column gap; all leftover width
     pools into the single left↔nav gap — making it the dominant gap that
     separates the quiz/subscribe block from the link cluster (fixes the v76
     inversion where the scaling space-between column gaps exceeded the fixed
     left↔nav gap). */
  .wv-footer__middle {
    justify-content: space-between;
    gap: 40px;            /* floor only — space-between makes the real left↔nav gap much larger */
  }

  .wv-footer-nav {
    flex: 0 1 auto;       /* content-width — sits flush right, no longer grows to fill */
    gap: 56px;            /* tidy fixed inter-column spacing (was the airy auto-distributed gap) */
  }

  .wv-footer-nav__col {
    flex: 0 0 auto;       /* content-width columns */
  }

  .wv-footer__left {
    flex: 0 0 500px;      /* trimmed from 553 to give the link cluster room */
  }
}