/* =========================================================
   MOBILE NAV FIX + REDESIGN
   Loaded AFTER css/style.css, so these rules override it.
   Fixes: the slide-out menu had no z-index, so it visually
   covered the hamburger button once opened — there was no
   way to close it. This also adds a backdrop, an X icon
   animation, and a nicer-looking drawer.
   ========================================================= */

@media (max-width: 900px) {

  /* --- The hamburger button stays above the drawer + gets an X animation --- */
  .menu-toggle{
    position:relative;
    z-index:1002;
    width:24px;
    height:18px;
    justify-content:space-between;
  }
  .menu-toggle span{
    transition:transform .3s ease, opacity .3s ease;
  }
  .menu-toggle.is-active span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .menu-toggle.is-active span:nth-child(2){ opacity:0; }
  .menu-toggle.is-active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

  /* --- The drawer itself: proper stacking + nicer look --- */
  .nav-links{
    z-index:1001;
    top:0;
    right:-100%;
    width:min(82vw, 320px);
    padding:110px 32px 40px;
    align-items:flex-start;
    justify-content:flex-start;
    gap:0;
    box-shadow:-16px 0 40px rgba(0,0,0,0.35);
    background:var(--navy-2);
  }
  .nav-links a{
    width:100%;
    font-size:1.05rem;
    padding:13px 0;
    border-bottom:1px solid var(--border);
  }
  .nav-links a:last-of-type{
    border-bottom:none;
  }

  /* --- CTA button re-added inside the drawer (cloned in by JS) --- */
  .nav-links .mobile-cta{
    display:inline-flex;
    margin-top:24px;
    width:100%;
    justify-content:center;
  }

  /* --- Dark backdrop behind the drawer, click it to close --- */
  .nav-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(6,6,16,0.55);
    backdrop-filter:blur(2px);
    z-index:999;
  }
  .nav-overlay.show{
    display:block;
  }

  /* --- Stop the page from scrolling behind the open drawer --- */
  body.nav-open-lock{
    overflow:hidden;
  }
}