/* ============================================================
   Shared mobile navigation — drop-in component.
   Pairs with shared/nav.js (initMobileNav) and the --bc-* token
   contract (see shared/bc-contract.css). Each draft keeps its own
   desktop nav look (.brand, .navlinks, .btn, .tt); this file only
   owns the hamburger toggle + the mobile dropdown panel.

   Markup contract (same ids/classes on every draft):
     <nav>
       <div class="wrap">
         <a class="brand" …>…</a>
         <div class="navlinks"> …links… <button id="themeToggle" class="tt">…</button> <a class="btn" href="#contact">…</a> </div>
         <button class="menu-toggle" id="menuToggle" type="button"
                 aria-expanded="false" aria-controls="mobileMenu" aria-label="Open menu"><span></span></button>
       </div>
       <div class="mobile-menu" id="mobileMenu" aria-label="Mobile navigation" hidden>
         <div class="mobile-menu__inner"> …same links… <button id="mobileThemeToggle" class="tt">…</button> <a class="btn" href="#contact">…</a> </div>
       </div>
     </nav>
   Requires nav .wrap to be a flex row with space-between.
   ============================================================ */

.menu-toggle{display:none;flex-direction:column;background:transparent;
  border:1px solid var(--bc-border);border-radius:var(--bc-radius-sm,2px);
  color:var(--bc-text);width:46px;height:46px;align-items:center;justify-content:center;cursor:pointer}
.menu-toggle span,.menu-toggle::before,.menu-toggle::after{content:"";display:block;
  width:20px;height:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.menu-toggle span{margin:5px 0}
.mobile-menu{display:none}

@media(max-width:720px){
  nav .navlinks{display:none}
  .menu-toggle{display:inline-flex;flex:none}
  nav.is-menu-open .menu-toggle span{opacity:0}
  nav.is-menu-open .menu-toggle::before{transform:translateY(7px) rotate(45deg)}
  nav.is-menu-open .menu-toggle::after{transform:translateY(-7px) rotate(-45deg)}
  .mobile-menu{display:block;border-top:1px solid var(--bc-border);background:var(--bc-bg)}
  .mobile-menu[hidden]{display:none}
  .mobile-menu__inner{padding:14px 20px 20px;display:grid;gap:10px}
  .mobile-menu a,.mobile-menu button{min-height:44px;width:100%;display:flex;
    align-items:center;justify-content:space-between;border-radius:var(--bc-radius-sm,2px);font:inherit}
  .mobile-menu a{padding:10px 0;color:var(--bc-text-muted);border-bottom:1px solid var(--bc-border)}
  .mobile-menu a:hover{color:var(--bc-text)}
  .mobile-menu .tt{justify-content:center;margin-top:2px}
  .mobile-menu .btn{justify-content:center;color:var(--bc-on-accent);margin-top:4px}
}

@media(prefers-reduced-motion:reduce){
  .menu-toggle span,.menu-toggle::before,.menu-toggle::after{transition:none}
}