/* =========================================================
   DLF — RESPONSIVE (AUTHORITATIVE)
   Mobile drawer uses body.nav-open to show .main-nav
   Breakpoint: 900px (matches JS + existing system)
   ========================================================= */

@media (max-width: 980px){
  body.legacy .legacy-grid{ grid-template-columns: 1fr; }
}

/* Mobile nav behavior */
@media (max-width: 900px){
  :root{
    --gutter:18px;
    --logo-h:88px;
    --header-pad-y:10px;
  }

  .nav-toggle{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
  }

  /* HARD DEFAULT CLOSED (beats hotfix if it tries to force open) */
  header.site-header nav.main-nav{
    display:none !important;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:var(--navy);
    border-top:1px solid rgba(247,241,227,.10);
    padding:12px var(--gutter) 16px;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }

  /* open state */
  body.nav-open header.site-header nav.main-nav{
    display:flex !important;
  }

  /* Remove separators on mobile */
  header.site-header nav.main-nav a + a::before{ display:none; }

  header.site-header nav.main-nav a{
    width:100%;
    padding:14px 12px 16px;
    border-radius:14px;
    letter-spacing:.12em;
    background:transparent;
  }

  /* Underline on mobile: soften further */
  header.site-header nav.main-nav a::after{
    left:12px;
    right:12px;
    bottom:8px;
    background:rgba(209,183,122,.22);
    box-shadow:0 0 10px rgba(209,183,122,.08);
  }
}

/* Very small */
@media (max-width: 520px){
  :root{ --gutter:16px; }
  .page-hero h1{ font-size:2.65rem; }
  .footer-logo{ width:170px; max-width:170px; }
}