/* ============================================================
   ENGINEERED PREPAREDNESS — mobile navigation styles
   Pairs with shared/mobile-nav.js. Desktop: invisible.
   ============================================================ */
.navtoggle { display: none; }
.mobilemenu { display: none; }

@media (max-width: 1080px){
  header.nav .navwrap { position: relative; padding-left: 20px; padding-right: 14px; gap: 12px; }
  header.nav { position: relative; }

  /* the desktop nav + right-side actions collapse into the hamburger menu.
     Force-hide them here so the breakpoint is uniform across every page,
     regardless of each page's own (varying) nav-hiding media query. */
  header.nav nav.links { display: none !important; }
  header.nav .navright { display: none !important; }
  /* ...but the live gauge stays in the bar (its wrapper survives; navright
     inside it is what collapses). It carries margin-left:auto to hug the right. */
  header.nav .navactions { display: flex !important; }
  /* cloned menu links are icon-free (the account icon would otherwise render
     as a lone glyph next to its text) */
  .mobilemenu svg { display: none; }
  .mobilemenu .navacct span, .mobilemenu a span { display: inline; }

  /* hamburger — no margin-left:auto: only .navactions carries the auto margin, so
     the gauge + hamburger group hugs the right edge together (instead of the free
     space splitting between them and parking the gauge mid-bar). */
  header.nav .navtoggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin-left: 0; flex: none;
    background: none; border: none; cursor: pointer; padding: 10px;
  }
  header.nav .navtoggle span {
    display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px;
    transition: transform .22s ease, opacity .18s ease;
  }
  header.nav.menu-open .navtoggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  header.nav.menu-open .navtoggle span:nth-child(2){ opacity: 0; }
  header.nav.menu-open .navtoggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* dropdown panel */
  .mobilemenu {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    display: flex; flex-direction: column;
    background: var(--navy-900);
    border-top: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 24px 40px rgba(0,0,0,.35);
    max-height: 0; overflow: hidden;
    transition: max-height .26s ease;
  }
  header.nav.menu-open .mobilemenu { max-height: 85vh; overflow-y: auto; }
  .mobilemenu a {
    color: rgba(234,230,221,.85); text-decoration: none;
    font-family: var(--sans); font-size: 16px; font-weight: 500;
    padding: 15px 22px; border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .mobilemenu a:hover, .mobilemenu a:focus { background: rgba(255,255,255,.05); color: #fff; }
  .mobilemenu a.mm-cta { color: var(--gold-300); font-weight: 600; }

  /* keep the brand from overflowing on small screens */
  header.nav .brand { min-width: 0; }
  header.nav .brand .wm { font-size: 15px; }
  header.nav .brand .wm small { letter-spacing: .28em; }
  header.nav .brand .logo { height: 36px; }

}

/* Smallest screens: drop the "Prepare with Purpose" tagline and let the wordmark
   wrap to two lines ("Engineered" / "Preparedness") so the header never overflows.
   Desktop keeps the one-line wordmark + tagline. */
@media (max-width: 420px){
  /* max-width sits between the longest word (~93px) and the one-line width (~173px),
     so the wrap is FORCED the moment the tagline drops — no in-between window where
     the one-line wordmark runs under the gauge before it decides to wrap. */
  header.nav .brand .wm { white-space: normal; line-height: 1.12; max-width: 130px; }
  header.nav .brand .wm small { display: none; }
}