:root { --bar-h: 64px; }

/* Desktop unchanged */
@media (min-width: 981px){
  .topbar { display: none !important; }
  .nav-backdrop { display: none !important; }
  header nav { display: block !important; position: static; transform: none !important; }
}

/* Mobile behavior: nav hidden; backdrop carries the links */
@media (max-width: 980px){
  header nav { display: none !important; }

  .topbar{
    position:fixed; top:0; left:0; right:0; height:var(--bar-h);
    display:flex; align-items:center; justify-content:center;
    background:#fff; z-index:10020; padding:0 16px;
    box-shadow:0 6px 20px rgba(0,0,0,.08);
  }
  .topbar .brand{ font-size:18px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar .burger{
    position:absolute; right:10px; top:10px; width:44px; height:44px;
    border:0; background:transparent; display:grid; place-items:center; border-radius:10px; cursor:pointer;
  }
  .topbar .burger .bars,
  .topbar .burger .bars::before,
  .topbar .burger .bars::after{
    content:""; display:block; width:24px; height:2px; background:currentColor; position:relative; border-radius:2px;
  }
  .topbar .burger .bars::before{ position:absolute; left:0; top:-7px; }
  .topbar .burger .bars::after { position:absolute; left:0; top: 7px; }
  .topbar .burger[aria-expanded="true"] .bars{ background:transparent; }
  .topbar .burger[aria-expanded="true"] .bars::before{ transform:rotate(45deg); top:0; }
  .topbar .burger[aria-expanded="true"] .bars::after { transform:rotate(-45deg); top:0; }

  body{ padding-top: var(--bar-h); }

  .nav-backdrop{
    display:none;
    position:fixed; inset:var(--bar-h) 0 0 0;
    background:rgba(0,0,0,.85);
    color:#fff; z-index:10000;
    justify-content:center; align-items:center;
  }
  .nav-backdrop.open{ display:flex; }

  .nav-backdrop .navlinks{
    display:flex; flex-direction:column; gap:20px;
    text-align:center; padding:16px;
  }
  .nav-backdrop .navlinks a{
    color:#fff; font-size:20px; text-decoration:none;
  }
  .nav-backdrop .navlinks a.cta{
    background:#8f1717; padding:10px 20px; border-radius:8px;
  }
}


/* -- Hide nav-inner on mobile -- */
@media (max-width: 980px){
  /* Hide nav-inner container on mobile */
  header nav .nav-inner { display: none !important; }
}


/* --- V3: force-hide nav-inner on mobile when topbar/burger is present --- */
@media (max-width: 980px){
  body.has-topbar header nav,
  body.has-topbar header .nav-inner,
  body.has-topbar .nav-inner,
  .topbar ~ header .nav-inner,
  .topbar ~ .nav-inner {
    display: none !important;
  }
}