/* ============================================================
   FHS main site - navigation redesign  (v2: fonts + motion + theming)
   Load AFTER main.css + components.css:
   <link rel="stylesheet" href="/assets/css/nav.css?ver=2">
   Self-hosted brand fonts (CSP on this site blocks Google Fonts,
   so Sora/Inter previously never loaded and fell back to system-ui).
   Color tokens are scoped --nav-* with light values on :root and
   dark values under [data-theme="dark"], matching the site's toggle.
   ============================================================ */

/* ---------- Brand fonts (self-hosted, variable, latin) ---------- */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/sora-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Font-swap stability ----------
   The brand fonts load with font-display:swap, so text first paints in the
   system fallback and then swaps. Sora/Inter have different x-heights to
   system-ui, so that swap shifts layout (hurts CLS) and visibly resizes the
   text. font-size-adjust:from-font scales the fallback to the real font's
   x-height, so the swap is near-invisible and nothing moves.
   Scoped to the header components this stylesheet owns - not the whole page.
   Baseline since 2024-07-25; older browsers simply skip it. */
.util,
.mq,
.hd,
.draw {
  font-size-adjust: from-font;
}

/* ---------- Nav color tokens (light) ---------- */
:root {
  --nav-bg: rgba(251, 252, 254, .88);          /* glass header over --bg */
  --nav-bg-solid: #FBFCFE;                     /* fallback, matches --bg */
  --nav-line: rgba(31, 79, 163, .12);
  --nav-ink: #101722;
  --nav-link-hover-bg: rgba(31, 79, 163, .08);
  --nav-panel-bg: #FFFFFF;
  --nav-panel-line: #DDE4EE;
  --nav-panel-accent: linear-gradient(90deg, #F4A81D, #D8352A 65%, #1F4FA3);
  --nav-item-hover: #FEF5E2;                   /* amber wash */
  --nav-underline: #F4A81D;
  --nav-shadow: 0 14px 38px rgba(21, 53, 110, .12);
  --nav-ease-pop: cubic-bezier(.34, 1.4, .64, 1);   /* gentle overshoot */

  /* Top strip: utility bar + marquee read as ONE navy band, with amber
     used as an accent rather than a full-width fill.
     These are the SITE's own brand navy (--blue-d #15356E) and a deeper
     shade of the exact same hue - not invented blues. */
  --strip-top: #15356E;                        /* = --blue-d, brand navy */
  --strip-bot: #102956;                        /* same hue, deeper */
  --strip-line: rgba(244, 168, 29, .22);       /* hairline between the two */
  --strip-ink: rgba(255, 255, 255, .92);
  --strip-ink-dim: rgba(255, 255, 255, .70);
  --strip-icon: #F4A81D;
  --mq-ink: #FFD24A;                           /* bright brand yellow on navy - 9.89 contrast */
  --mq-dot: #F4A81D;
  --mq-btn: rgba(255, 255, 255, .10);
  --mq-btn-hover: rgba(244, 168, 29, .28);
  --mq-speed: 24s;                             /* 13s was unreadable, 38s dragged */
  --strip-band: 45px;                          /* both bands share one height */
  /* 12.8px. Both bands share one size, and it is held at every breakpoint:
     this text is the phone number, email and address for an audience that
     skews older, so it does not get to shrink on the devices where it
     matters most. */
  --strip-text: .8rem;
}

/* ---------- Nav color tokens (dark - follows the site's toggle) ---------- */
[data-theme="dark"] {
  --nav-bg: rgba(12, 17, 27, .84);
  --nav-bg-solid: #0C111B;
  --nav-line: rgba(125, 165, 230, .16);
  --nav-ink: #F3F6FB;
  --nav-link-hover-bg: rgba(96, 145, 226, .16);
  --nav-panel-bg: #151D2C;
  --nav-panel-line: #243043;
  --nav-panel-accent: linear-gradient(90deg, #F4A81D, #E8634F 65%, #6B96DD);
  --nav-item-hover: rgba(244, 168, 29, .13);
  --nav-underline: #F4A81D;
  --nav-shadow: 0 18px 44px rgba(0, 0, 0, .5);

  /* In dark mode the strip must sit ABOVE the page in lightness, not below.
     Matching the near-black header made the seam invisible (1.01 contrast),
     merging strip and header into one undifferentiated mass. Still the brand
     navy family, just held up against the near-black header behind it. */
  --strip-top: #17386F;
  --strip-bot: #122C58;
  --strip-line: rgba(244, 168, 29, .18);
  --strip-ink: rgba(243, 246, 251, .90);
  --strip-ink-dim: rgba(243, 246, 251, .66);
  --strip-icon: #F4A81D;
  --mq-ink: #FFCB52;
  --mq-dot: #E09A18;
  --mq-btn: rgba(255, 255, 255, .08);
  --mq-btn-hover: rgba(244, 168, 29, .24);
}

/* ============================================================
   TOP STRIP - utility bar + marquee as one continuous navy band
   Overrides the older .util / .mq rules in main.css and dark.css.
   ============================================================ */

/* ---------- Utility bar ---------- */
.util {
  background: var(--strip-top);
  color: var(--strip-ink);
  border-bottom: 1px solid var(--strip-line);
}
[data-theme="dark"] .util { background: var(--strip-top); }

/* The two bands were 42px and 45px with 12.8px and 12.48px text - close
   enough that the differences read as mistakes rather than intent, while
   adding no hierarchy. They now share one height and one type size, so the
   strip reads as a single deliberate unit. */
.util-in { height: var(--strip-band); font-size: var(--strip-text); }

/* Contact links sit white at rest and pick up the marquee yellow on hover,
   so the accent is reserved for the interaction rather than the resting
   state. Weight 600, not 700: at 12.8px a full bold would compete with the
   nav for attention, and this is supporting information.
   The portal button is excluded because ".util-r a" outranks
   ".topbar-portal-btn" on specificity - without :not() it dragged the
   button's weight down and forced it into the body font. */
.util-l a,
.util-r a:not(.topbar-portal-btn) {
  color: #fff;
  font-family: var(--fb);
  font-weight: 600;
  border-radius: var(--r-sm);
  transition: color var(--t);
}
.util-l a:hover,
.util-l a:focus-visible,
.util-r a:not(.topbar-portal-btn):hover,
.util-r a:not(.topbar-portal-btn):focus-visible { color: var(--mq-ink); }

/* icons ride along with their label so the hover reads as one gesture */
.util-l svg { stroke: currentColor; transition: stroke var(--t); }

/* Patient & Caregiver Login - flat brand blue at rest, Favored amber on
   hover/press. Typography pinned to Sora so it matches the nav links
   rather than falling back to the body font. */
.topbar-portal-btn {
  background: var(--blue) !important;
  color: #fff !important;
  font-family: var(--fh) !important;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: -.01em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .20);
  transition: background var(--t), color var(--t), box-shadow .25s ease, translate .25s var(--nav-ease-pop);
}
.topbar-portal-btn:hover,
.topbar-portal-btn:focus-visible {
  background: var(--amber) !important;
  color: var(--blue-d) !important;
  translate: 0 -1px;
  box-shadow: 0 6px 18px rgba(244, 168, 29, .40);
}
.topbar-portal-btn:active {
  background: var(--amber-d) !important;
  color: var(--blue-d) !important;
  translate: 0 0;
}
.topbar-portal-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* the arrow icon inherits the text colour so it flips with the button */
.topbar-portal-btn svg { stroke: currentColor; }

/* ---------- Marquee ----------
   NO edge-fade mask here, deliberately. A CSS mask applies to the whole
   element including its BACKGROUND, not just the text - so fading the left
   edge punched a transparent notch in the navy band and let the near-white
   page show through as a pale overlay. Putting the mask on .mq-row instead
   is also wrong: that element is the one being translated, so the fade
   travels with the text and makes items vanish mid-screen.
   overflow:hidden already clips items cleanly at both edges, text flows
   continuously, and it passes behind the opaque controls on the right.
   This also drops the last prefixed property, so rendering is identical in
   Firefox, Safari and Chrome. */
.mq {
  background: var(--strip-bot);
  color: var(--mq-ink);
  border-bottom: none;
  position: relative;
  overflow: hidden;
  /* The controls are height:100% of this band, so pinning a floor here is
     what guarantees their 44px target size (WCAG 2.5.5) even on mobile,
     where the smaller font would otherwise shrink the band to ~43.5px. */
  min-height: var(--strip-band);
}
[data-theme="dark"] .mq { background: var(--strip-bot); color: var(--mq-ink); }

/* brand hairline closing the strip, echoing the nav dropdown panels */
.mq::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--nav-panel-accent);
  opacity: .85;
  z-index: 3;
}

.mq-row { animation-duration: var(--mq-speed); }
/* The animation translates -50% of the row, i.e. exactly one pass. If a
   single pass were ever narrower than the viewport (ultrawide monitors,
   or if items are removed from config/marquee.php) the wrap would expose
   empty space. min-width pins each pass to at least a full viewport and
   space-around spreads the badges to fill it, so a gap can never appear. */
.mq-item {
  font-size: var(--strip-text);
  /* 11px, not 12px: at --strip-text 12.8px the taller line box pushed this
     band to 46px while the utility bar stayed pinned at --strip-band, so the
     two drifted out of alignment again. This keeps the content under the
     shared height, letting min-height govern both bands equally. */
  padding: 11px 0;
  min-width: 100vw;
  flex-shrink: 0;              /* flex children shrink by default, which was
                                  compressing each pass down to the viewport */
  justify-content: space-around;
}
.mq-item b {
  padding: 0 20px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--mq-ink);
}
.mq-d {
  width: 5px;
  height: 5px;
  background: var(--mq-dot);
  box-shadow: 0 0 0 3px rgba(244, 168, 29, .14);
}

/* ---------- Marquee controls (kept: WCAG 2.2.2 Pause, Stop, Hide) ---------- */
/* An OPAQUE base with the tint layered over it, so moving text can never
   show through the controls.
   Note: a ::before scrim was tried first and is wrong here - a negative-z
   child paints AFTER its parent's background, so it covered the button's own
   tint and killed the hover state. Declaring background-color and
   background-image separately keeps the opaque base and the hover tint on
   independent properties, which also lets the theme swap stay untransitioned
   (see the transition rule below) while hover still animates. */
.mq-stop,
.mq-close {
  background-color: var(--strip-bot);
  background-image: linear-gradient(var(--mq-btn), var(--mq-btn));
  color: var(--mq-ink);
  width: 44px;                    /* WCAG 2.5.5 target size */
  border-left: 1px solid rgba(255, 255, 255, .08);
  /* background-color is deliberately NOT transitioned: on a theme switch the
     band snaps instantly, so animating the buttons leaves them a different
     colour than the band for 300ms. Only the hover tint animates. */
  transition: background-image var(--t), color var(--t);
  z-index: 4;
}
.mq-stop { right: 44px; }
.mq-close { right: 0; }
.mq-stop:hover,
.mq-close:hover {
  background-image: linear-gradient(var(--mq-btn-hover), var(--mq-btn-hover));
  color: #fff;
}
.mq-stop:focus-visible,
.mq-close:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
/* main.css sized these 11px and 13px - two different icon sizes inside two
   identical adjacent buttons. Unified. */
.mq-stop svg,
.mq-close svg { width: 12px; height: 12px; }
.mq-stop svg { fill: currentColor; }
.mq-close svg { stroke: currentColor; fill: none; }

/* ---------- Sticky glass header ---------- */
.hd {
  background: var(--nav-bg-solid);
  border-bottom: 1px solid var(--nav-line);
}
@supports (backdrop-filter: blur(1px)) {
  .hd {
    background: var(--nav-bg);
    backdrop-filter: blur(14px) saturate(1.35);
    -webkit-backdrop-filter: blur(14px) saturate(1.35);
  }
}
.hd.sm { box-shadow: 0 4px 24px rgba(21, 53, 110, .10); }
[data-theme="dark"] .hd.sm { box-shadow: 0 4px 24px rgba(0, 0, 0, .45); }

/* dark.css sets [data-theme="dark"] .hd (higher specificity) - re-take it */
[data-theme="dark"] .hd {
  background: var(--nav-bg-solid);
  border-bottom-color: var(--nav-line);
}
@supports (backdrop-filter: blur(1px)) {
  [data-theme="dark"] .hd { background: var(--nav-bg); }
}

/* ---------- Brand logo: single image, heartbeat on hover ----------
   Server picks the light or dark PNG based on the current theme, so only
   the matching file is loaded. nav.js swaps src on the theme toggle.
   The whole mark beats on hover, scaled from the center of the heart. */
.brand { animation: nav-logo-in .6s var(--nav-ease-pop) both; }
.brand img,
.draw-top img {
  border-radius: var(--r-sm);
  transform-origin: 48.7% 28.2%;  /* heart center inside a 352x233 image */
  transition: transform .3s var(--nav-ease-pop), height var(--t);
}
.brand:hover img,
.brand:focus-visible img { animation: nav-heartbeat .9s ease-in-out forwards; }
.brand:active img { animation: none; transform: scale(.97); }
.brand:focus-visible { outline: 2px solid var(--blue-l); outline-offset: 2px; border-radius: var(--r-sm); }

@keyframes nav-logo-in {
  from { opacity: 0; translate: 0 -6px; }
  to   { opacity: 1; translate: 0 0; }
}

/* two quick heartbeats, then rest slightly enlarged */
@keyframes nav-heartbeat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.12); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.12); }
  70%  { transform: scale(1.03); }
  100% { transform: scale(1.06); }
}

/* ---------- Top-level items ---------- */
.nav { gap: 0; }
.nav > li { position: relative; }

.nav-split { display: flex; align-items: center; position: relative; }

.nav-lnk {
  position: relative;
  font-family: var(--fh);
  font-weight: 650;
  font-size: .83rem;
  letter-spacing: -.01em;
  color: var(--nav-ink);
  padding: 10px 6px 10px 12px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-sm);
  transition: background var(--t), color var(--t);
}
.nav > li:not(.has) .nav-lnk { padding-right: 12px; }
.nav-lnk:hover { color: var(--blue); background: var(--nav-link-hover-bg); }

/* Home is the one .nav-lnk that is a DIRECT child of its li, so the old
   components.css `.nav > li > a` rules outrank plain .nav-lnk - re-take them */
.nav > li > a.nav-lnk { font-weight: 650; }
.nav > li > a.nav-lnk:hover { color: var(--blue); background: var(--nav-link-hover-bg); }
[data-theme="dark"] .nav > li > a.nav-lnk:hover { color: #AFCBF5; background: var(--nav-link-hover-bg); }

/* animated underline - slides in from the left on hover, stays on active */
.nav-lnk::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--nav-underline);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s var(--nav-ease-pop);
}
.nav-lnk:hover::after,
.nav > li.open > .nav-split .nav-lnk::after,
.nav > li.is-active .nav-lnk::after { transform: scaleX(1); }

.nav-tog {
  border: 0;
  background: transparent;
  color: var(--mute);
  cursor: pointer;
  width: 26px;
  height: 34px;
  margin-left: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  transition: background var(--t), color var(--t);
}
.nav-tog:hover { color: var(--blue); background: var(--nav-link-hover-bg); }
.nav-tog .cr {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  transition: transform .32s var(--nav-ease-pop);
}
.nav > li.open .nav-tog .cr,
.nav-tog[aria-expanded="true"] .cr { transform: rotate(180deg); }
.nav > li.open > .nav-split .nav-lnk { color: var(--blue); background: var(--nav-link-hover-bg); }

/* legacy is-active underline block replaced by ::after above */
.nav > li.is-active > .nav-split .nav-lnk,
.nav > li.is-active > .nav-lnk { color: var(--blue); }

/* ---------- Dropdown panels ---------- */
.pn {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 250px;
  background: var(--nav-panel-bg);
  border: 1px solid var(--nav-panel-line);
  border-radius: var(--r-md);
  box-shadow: var(--nav-shadow);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.98);
  transform-origin: top left;
  /* visibility flips instantly on open (links immediately focusable),
     and only after the fade on close */
  transition: opacity .28s var(--nav-ease-pop), transform .28s var(--nav-ease-pop), visibility 0s linear .28s;
  z-index: 20;
  overflow: hidden;
}
.pn::before {
  /* brand accent hairline across the panel top */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--nav-panel-accent);
  opacity: .9;
}
.pn-right { left: auto; right: 0; transform-origin: top right; }
.nav > li.open > .pn {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity .28s var(--nav-ease-pop), transform .28s var(--nav-ease-pop), visibility 0s;
}
.pn-wide { min-width: 440px; }

.pn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
}

.pn-head {
  font-family: var(--fh);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  padding: 12px 14px 4px;
  margin: 0;
}
[data-theme="dark"] .pn-head { color: #8FB4EA; }

.pn ul { list-style: none; margin: 0; padding: 0; }
.pn ul a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: .86rem;
  font-weight: 500;
  color: var(--slate);
  font-family: var(--fb);
  transition: background var(--t), color var(--t), translate .18s ease;
}
.pn ul a:hover { background: var(--nav-item-hover); color: var(--blue); translate: 2px 0; }
[data-theme="dark"] .pn ul a:hover { color: #AFCBF5; }
.pn a svg { width: 12px; height: 12px; stroke: currentColor; flex-shrink: 0; opacity: .55; }

/* staggered rise-in of panel links while opening */
.pn li { opacity: 0; translate: 0 6px; transition: opacity .24s ease, translate .24s ease; }
.nav > li.open .pn li { opacity: 1; translate: 0 0; }
.nav > li.open .pn li:nth-child(1) { transition-delay: .03s; }
.nav > li.open .pn li:nth-child(2) { transition-delay: .06s; }
.nav > li.open .pn li:nth-child(3) { transition-delay: .09s; }
.nav > li.open .pn li:nth-child(4) { transition-delay: .12s; }
.nav > li.open .pn li:nth-child(5) { transition-delay: .15s; }
.nav > li.open .pn li:nth-child(6) { transition-delay: .18s; }
.nav > li.open .pn li:nth-child(n+7) { transition-delay: .2s; }

.pn-foot {
  margin-top: 8px;
  padding: 8px 4px 2px;
  border-top: 1px solid var(--nav-panel-line);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pn-foot a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-family: var(--fh);
  font-weight: 600;
  font-size: .78rem;
  color: var(--blue);
  transition: background var(--t);
}
[data-theme="dark"] .pn-foot a { color: #8FB4EA; }
.pn-foot a:hover { background: var(--nav-link-hover-bg); }
.pn-foot a svg { width: 12px; height: 12px; stroke: currentColor; }

/* ---------- Header actions ---------- */
.hd-act { display: flex; align-items: center; gap: 10px; }

/* ---------- Header icon buttons (accessibility + theme toggle) ---------- */
.ico-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--nav-panel-line);
  background: transparent;
  color: var(--nav-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.ico-btn:hover { border-color: var(--amber); color: var(--amber); background: var(--nav-link-hover-bg); }
.ico-btn svg { width: 20px; height: 20px; }

/* amber halo ping on hover */
.ico-btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid var(--amber);
  opacity: 0;
  pointer-events: none;
}
.ico-btn:hover::after { animation: nav-ping .55s var(--nav-ease-pop) forwards; }
@keyframes nav-ping {
  0%   { opacity: .55; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.35); }
}

/* Accessibility glyph: gentle pop, ring picks up amber on hover */
.ay-ic { transition: transform .3s var(--nav-ease-pop); }
.ay-btn:hover .ay-ic,
.ay-btn[aria-expanded="true"] .ay-ic { transform: scale(1.1); }
.ay-ring { transition: stroke var(--t); }
.ay-btn[aria-expanded="true"] { border-color: var(--amber); color: var(--amber); }

/* Theme toggle: sun <-> moon morph, driven by [data-theme] on <html>.
   The mask dot slides in to bite a crescent out of the core while the
   rays shrink away; the whole icon does a slow half-turn. */
.tg-ic { transition: transform .5s var(--nav-ease-pop); }
.tg-core {
  transform-origin: 12px 12px;
  transition: transform .4s var(--nav-ease-pop);
}
.tg-dot { transition: transform .4s var(--nav-ease-pop); }
.tg-rays {
  transform-origin: 12px 12px;
  transition: transform .4s ease, opacity .3s ease;
}
[data-theme="dark"] .tg-ic { transform: rotate(-40deg); }
[data-theme="dark"] .tg-core { transform: scale(1.55); }
[data-theme="dark"] .tg-dot { transform: translate(-13px, 2px); }
[data-theme="dark"] .tg-rays { transform: scale(.35) rotate(45deg); opacity: 0; }
.tg-btn:hover { color: var(--amber); }
[data-theme="dark"] .tg-btn:hover { color: #FFD37A; }

/* ---------- Hamburger morphs into an X ---------- */
.brg span { transition: transform .3s var(--nav-ease-pop), opacity .2s ease; }
.brg[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.brg[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.brg[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Focus visibility (keyboard) ---------- */
.nav-lnk:focus-visible,
.nav-tog:focus-visible,
.pn a:focus-visible,
.draw-nav a:focus-visible,
.m-tog:focus-visible {
  outline: 2px solid var(--blue-l);
  outline-offset: 2px;
}

/* ---------- Mobile drawer ---------- */
.draw { box-shadow: var(--nav-shadow); }

.m-sub-head {
  display: block;
  padding: 10px 14px 4px;
  font-family: var(--fh);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
}
[data-theme="dark"] .m-sub-head { color: #8FB4EA; }
.m-sub .m-sub-nested { padding-left: 28px; }

/* submenu links ease in as the accordion expands */
.draw-nav .m-sub { transition: max-height .3s ease, opacity .25s ease; opacity: 0; }
.draw-nav .m-tog[aria-expanded="true"] + .m-sub { opacity: 1; }

.draw-foot { display: flex; flex-direction: column; gap: 10px; }
.draw-foot .btn { justify-content: center; }
.draw-tel {
  border: 2px solid var(--blue);
  color: var(--blue);
  background: transparent;
}
[data-theme="dark"] .draw-tel { border-color: #6B96DD; color: #AFCBF5; }
.draw-tel:hover { background: var(--nav-link-hover-bg); }
.draw-tel svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Larger touch targets in the drawer (senior-friendly) */
.draw-nav > li > a,
.draw-nav .m-tog { min-height: 48px; font-size: .95rem; font-family: var(--fh); font-weight: 600; }
.draw-nav .m-sub a { min-height: 44px; display: flex; align-items: center; font-size: .9rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .nav-lnk { font-size: .8rem; padding-left: 9px; }
}

/* Top strip on small screens: labels collapse to icons (main.css already
   hides .util-l a span at 760px); keep the row breathable and the marquee
   clear of the controls. */
@media (max-width: 760px) {
  /* Deliberately NO overrides for band height or text size here.
     An earlier .util-in { height: 40px } broke the equal-band pairing, and
     stepping the text down to .74rem shrank the phone number and address to
     11.84px on exactly the devices where legibility matters most. Both bands
     stay on --strip-band and --strip-text at every width. */
  .mq-item b { padding: 0 15px; }
  /* No edge-fade override here - there is no mask anywhere in this component
     any more. See the .mq block for why (a mask fades the background too). */
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pn,
  .nav > li.open > .pn {
    transition: opacity .1s ease, visibility 0s;
    transform: none;
  }
  .pn li,
  .nav > li.open .pn li { transition: none; transition-delay: 0s; opacity: 1; translate: 0 0; }
  .pn ul a { transition: background .1s ease, color .1s ease; }
  .pn ul a:hover { translate: 0 0; }
  .nav-lnk::after { transition: none; }
  .nav-tog .cr { transition: none; }
  .brg span { transition: none; }
  .brand,
  .brand img,
  .draw-top img {
    animation: none;
    transition: height var(--t);
  }
  .brand:hover img,
  .brand:focus-visible img { animation: none; transform: none; }
  .brand:active img { transform: none; }
  /* marquee stops entirely - the accessibility widget also handles this in
     JS, this is the CSS-level guarantee */
  .mq-row { animation: none; transform: none; }
  .topbar-portal-btn { transition: none; }
  .topbar-portal-btn:hover { translate: 0 0; }
  .draw,
  .draw-nav .m-sub { transition-duration: 1ms; }
  .ico-btn:hover::after { animation: none; }
  .ay-ic, .tg-ic, .tg-core, .tg-dot, .tg-rays { transition: none; }
  .ay-btn:hover .ay-ic { transform: none; }
}


/* ============================================================
   FOOTER v3 - full redesign, distinct light and dark palettes
   Layout is banded rather than columnar: every band spans the
   full width so content reads ACROSS instead of down.
   ============================================================ */
:root{
  --pop:var(--nav-ease-pop);
  --r-lg:20px;

  /* ---- LIGHT: a soft, airy footer that belongs to a light page ---- */
  --ft-bg:#EDF2FA;             /* tinted, not white - separates from page */
  --ft-panel:#FFFFFF;          /* raised cards */
  --ft-line:#D6E0F0;
  --ft-ink:#0F1F38;            /* deepened: text now sits over video */
  --ft-ink-dim:#152A4A;
  --ft-head:#15356E;           /* headings in brand navy */
  --ft-accent:#C9870E;         /* amber, darkened for light bg contrast */
  --ft-link:#1B3050;
  --ft-link-hover:#1F4FA3;
  --ft-bar:#15356E;            /* bottom bar anchors the page in navy */
  --ft-bar-ink:rgba(255,255,255,.86);
  --ft-bar-ink-dim:rgba(255,255,255,.66);
  --ft-shadow:0 2px 10px rgba(21,53,110,.07);
  --em-bg:#FFF1EE; --em-ink:#A81E12; --em-line:#D8352A;
  /* Heavy scrim over the background video. The footer palette was tuned for
     a solid surface; without this the contrast guarantees vanish the moment
     a bright frame plays. .93 keeps the video as texture, not wallpaper. */
  --ft-scrim:rgba(237,242,250,.58);
}
[data-theme="dark"]{
  /* ---- DARK: deep and dimensional, not a recolour of light ---- */
  --ft-bg:#0B1220;
  --ft-panel:#141D30;
  --ft-line:#22314A;
  --ft-ink:#E8EEF8;
  --ft-ink-dim:#CBD8EA;
  --ft-head:#9CC0F0;
  --ft-accent:#F8C868;
  --ft-link:#D5E0F0;
  --ft-link-hover:#F8C868;
  --ft-bar:#070C16;
  --ft-bar-ink:rgba(232,238,248,.86);
  --ft-bar-ink-dim:rgba(232,238,248,.62);
  --ft-shadow:0 2px 14px rgba(0,0,0,.4);
  --em-bg:#2B0E09; --em-ink:#FF9084; --em-line:#E8402F;
  --ft-scrim:rgba(11,18,32,.62);
}


/* ============ FOOTER ============ */
/* main.css sets `.ft{padding:64px 0 26px}` for the old columnar footer -
   this layout carries its own per-band padding, and that trailing 26px
   left a strip of footer colour BELOW the bottom bar. Reset to 0.
   main.css also has `[data-theme="dark"] .ft{background:#070b12}` at (0,2,0),
   which outranks a plain `.ft` rule - the dark override below matches its
   specificity so the token actually wins. */
.ft{position:relative;isolation:isolate;
  background:var(--ft-bg);color:var(--ft-ink);font-size:.88rem;line-height:1.6;padding:0;
  border-top:3px solid transparent;
  border-image:linear-gradient(90deg,var(--amber),var(--red) 62%,var(--blue)) 1}
[data-theme="dark"] .ft{background:var(--ft-bg);color:var(--ft-ink)}

/* ---- background video ---- */
.ft-video{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ft-video video{width:100%;height:100%;object-fit:cover;display:block;
  /* compresses the clip toward the footer surface so a very dark or very
     bright frame cannot drag text contrast below the measured floor */
  filter:brightness(1.34) contrast(.66) saturate(.85)}
[data-theme="dark"] .ft-video video{filter:brightness(.62) contrast(.8) saturate(.85)}
.ft::before{content:"";position:absolute;inset:0;z-index:1;
  background:var(--ft-scrim);pointer-events:none}
.ft > .wrap,
.ft > .ft-bot{position:relative;z-index:2}
/* Visitors who ask for less motion get the solid footer instead. The
   accessibility panel also pauses any video[autoplay] on its own. */
@media (prefers-reduced-motion:reduce){
  .ft-video{display:none}
  .ft::before{background:var(--ft-bg)}
}

/* ---- BAND 1: brand + newsletter, side by side ---- */
.ft-intro{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start;padding:38px 0 30px}
.ft-brand-col{display:flex;flex-direction:column}
.ft-brand-row{display:flex;gap:22px;align-items:center;margin-bottom:4px}
/* Deliberately NOT .ft-brand - main.css styles that class as a white pill
   (background:#fff;padding:13px 17px) for the old footer, and our markup
   puts the class on the <img> itself, so it inherited a white box. */
.ft-logo{width:138px;height:auto;flex-shrink:0;display:block;
  background:none;padding:0;margin:0;border-radius:10px}
/* the light-mode file is an opaque JPG, so it carries its own white field.
   A soft border stops it reading as an accidental white block. */
.ft-logo{box-shadow:0 0 0 1px var(--ft-line)}
[data-theme="dark"] .ft-logo{box-shadow:none}
.ft-mission{color:var(--ft-ink-dim);font-size:.87rem;margin-bottom:9px}
/* centred beneath the mission paragraph, within the text column */
.ft-creds{font-size:.79rem;color:var(--ft-ink-dim);opacity:.9;text-align:center;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--ft-line)}

.ft-sub{background:var(--ft-panel);border:1px solid var(--ft-line);border-radius:var(--r-md);
  padding:16px 17px;box-shadow:none}
.ft-sub h3{font-family:var(--fh);font-size:.85rem;color:var(--ft-head);margin-bottom:2px}
.ft-sub p{font-size:.79rem;color:var(--ft-ink-dim);margin-bottom:10px}
/* honeypot: off-screen for people, still reachable for bots. Not
   display:none - some bots skip hidden fields, which defeats the trap. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.news{display:flex;gap:10px;flex-wrap:wrap}
.news .field{flex:1;min-width:170px;display:flex;flex-direction:column;gap:3px}
.news label{font-size:.76rem;font-family:var(--fh);font-weight:600;color:var(--ft-ink-dim)}
.news input[type=email]{width:100%;min-height:44px;padding:10px 13px;border-radius:var(--r-sm);
  border:1px solid var(--ft-line);background:var(--ft-bg);color:var(--ft-ink);
  font-family:var(--fb);font-size:.88rem;transition:border-color var(--t),background var(--t)}
.news input[type=email]::placeholder{color:var(--ft-ink-dim);opacity:.7}
.news input[type=email]:focus{outline:2px solid var(--amber);outline-offset:2px;border-color:var(--amber)}
.news input:user-invalid{border-color:var(--em-line);background:var(--em-bg)}
.news input:user-invalid + .err{display:flex}
.news input:user-valid{border-color:#2E9E63}
.err{display:none;align-items:center;gap:5px;color:var(--em-ink);font-size:.76rem}
.news-note{font-size:.73rem;color:var(--ft-ink-dim);opacity:.9;margin-top:2px}
.news-note a{color:var(--ft-link-hover);font-weight:600;text-decoration:underline;
  text-underline-offset:2px;transition:color var(--t)}
.news-note a:hover,.news-note a:focus-visible{color:var(--ft-head)}
.news button{align-self:flex-start;margin-top:20px;min-height:44px;padding:10px 20px;border:0;cursor:pointer;
  border-radius:var(--r-sm);font-family:var(--fh);font-weight:700;font-size:.86rem;
  color:#fff;background:var(--blue);
  transition:background var(--t),color var(--t),translate .25s var(--pop),box-shadow .25s ease}
.news button:hover,.news button:focus-visible{background:var(--amber);color:var(--blue-d);
  translate:0 -1px;box-shadow:0 6px 16px rgba(244,168,29,.36)}

/* ---- BAND 2: link columns, lists run two-up ---- */
.ft-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
  padding:30px 0;border-top:1px solid var(--ft-line)}
.ft h3.col{font-family:var(--fh);font-weight:700;font-size:.73rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ft-head);padding-bottom:9px;margin-bottom:9px;position:relative}
.ft h3.col::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;
  background:var(--ft-accent);border-radius:2px}
.ft-links{list-style:none;display:block;column-count:2;column-gap:20px}
.ft-links li{break-inside:avoid}
.ft-links a{display:inline-flex;width:100%;align-items:center;gap:5px;color:var(--ft-link);text-decoration:none;
  padding:4px 0;font-size:.85rem;transition:color var(--t),translate .18s ease}
.ft-links a:hover,.ft-links a:focus-visible{color:var(--ft-link-hover);translate:3px 0}
.ft-links svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.4;opacity:.65}

/* ---- BAND 3: the two locations as horizontal cards ---- */
.ft-loc-band{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;
  padding:0 0 30px}
.loc{background:var(--ft-panel);border:1px solid var(--ft-line);border-radius:var(--r-md);
  padding:16px 18px;box-shadow:var(--ft-shadow);display:flex;gap:14px;align-items:flex-start}
.loc-pin{flex-shrink:0;width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--ft-bg);color:var(--ft-accent)}
.loc-pin svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.loc strong{display:block;font-family:var(--fh);font-size:.88rem;color:var(--ft-ink);margin-bottom:2px}
.loc address{font-style:normal;font-size:.82rem;color:var(--ft-ink-dim);margin-bottom:6px}
.loc-links{display:flex;flex-wrap:wrap;gap:6px 14px}
.loc-links a{display:inline-flex;align-items:center;gap:5px;color:var(--ft-link-hover);
  font-weight:600;font-size:.81rem;text-decoration:none;transition:translate .18s ease}
.loc-links a:hover,.loc-links a:focus-visible{translate:3px 0}
.loc-links svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.4}

/* social block sits inline with the location cards - keeps things horizontal */
.soc-card{background:var(--ft-panel);border:1px solid var(--ft-line);border-radius:var(--r-md);
  padding:16px 18px;box-shadow:var(--ft-shadow);display:flex;flex-direction:column;gap:10px;justify-content:center}
.soc-card span{font-family:var(--fh);font-weight:700;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ft-head)}
.soc{display:flex;gap:8px}
.soc a{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--ft-bg);color:var(--ft-link);
  transition:background var(--t),color var(--t),translate .25s var(--pop)}
.soc a:hover,.soc a:focus-visible{background:var(--amber);color:var(--blue-d);translate:0 -2px}
.soc svg{width:18px;height:18px;fill:currentColor}


/* ---- BAND 5: bottom bar ---- */
.ft-bot{background:var(--ft-bar);color:var(--ft-bar-ink);
  display:block;padding:0;border-top:0}
.ft-bot-in{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:flex-start;justify-content:space-between;padding:20px 0 22px}
.ft-legal{display:flex;flex-direction:column;gap:4px;text-align:center;flex:1}
/* the emergency line keeps its original inline red treatment */
.ft-legal p.emerg{color:#FF8A80;font-weight:700}
[data-theme="dark"] .ft-legal p.emerg{color:#FF6B5E}
.ft-bot p{font-size:.81rem;color:var(--ft-bar-ink-dim)}
.ft-bot .copy{color:var(--ft-bar-ink)}
.ft-credit a{color:#7BD9A0;text-decoration:none;font-weight:600;transition:color var(--t)}
.ft-credit a:hover,.ft-credit a:focus-visible{color:#fff}
.ft-legal-links{list-style:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.ft-legal-links li{display:flex;align-items:center}
.ft-legal-links li+li::before{content:"";width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.6);margin:0 11px}
.ft-legal-links a{color:rgba(255,255,255,.95);text-decoration:none;font-size:.82rem;
  font-weight:500;padding:4px 0;transition:color var(--t)}
.ft-legal-links a:hover,.ft-legal-links a:focus-visible{color:var(--amber)}

:where(.ft a,.ft button):focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}

/* ---- responsive ---- */
@media (max-width:980px){
  .ft-intro{grid-template-columns:1fr;gap:26px}
  .ft-nav{grid-template-columns:1fr 1fr}
  .ft-loc-band{grid-template-columns:1fr 1fr}
  .soc-card{grid-column:1/-1;flex-direction:row;align-items:center;gap:16px}
}
@media (max-width:660px){
  .ft-nav{grid-template-columns:1fr}
  .ft-links{column-count:2}
  .ft-loc-band{grid-template-columns:1fr}
  .ft-brand-row{flex-direction:column;gap:14px}
  .news button{align-self:stretch;margin-top:8px;width:100%}
  .ft-bot-in{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .ft-links a,.loc-links a,.soc a,.news button{transition:color var(--t);translate:none!important}
}