/* ════════════════════════════════════════════════════════════════
   DEALT — shared mobile menu (full-screen overlay), used site-wide
   except the home page (which has its own .home-mobile menu for now).
   Self-contained: distinct .site-* names (won't match index's .menu),
   design tokens defined locally on the menu roots, gated <=760px.
   Pairs with the siteMenu() toggle in home.js + static .site-menu markup.
   ════════════════════════════════════════════════════════════════ */

/* Burger hidden on desktop (full nav-links show); shown on mobile. */
.site-burger { display: none; }

/* Drawer hidden at all widths by default (mirrors home.css .nav-drawer);
   the <=760px block re-enables it as the fixed overlay. Without this the
   drawer renders in-flow, unstyled, below the footer on desktop. */
.site-menu { display: none; }

@media (max-width: 760px){
  .site-burger{
    --ink:#F2EFE6;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:44px; height:44px; gap:5px; padding:0; margin-right:-10px;
    background:none; border:none; cursor:pointer;
  }
  .site-burger span{ display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:.25s; }
  .site-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .site-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .site-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .site-menu{
    /* local tokens — no dependency on .home-mobile vars */
    --navy:#0D1119; --panel:#151C26; --ink:#F2EFE6; --ink-2:#B3B6BC;
    --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.12);
    --jade:#45B888; --jade-bg:rgba(69,184,136,.12);
    --f-display:'Archivo',system-ui,sans-serif; --col:440px; --pad:24px;
    position:fixed; inset:0; z-index:60;
    background:var(--navy);
    background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
    background-size:26px 26px;
    display:flex; flex-direction:column;
    padding:16px var(--pad) calc(30px + env(safe-area-inset-bottom));
    opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none;
    transition:transform .32s cubic-bezier(.2,.7,.2,1), opacity .32s ease, visibility .32s;
  }
  /* id override: beat cosmos `body > *:not(.ambient-bg){position:relative;z-index:1}`
     (0,1,1) — .site-menu (0,1,0) loses to it since the menu is a direct body child. */
  #site-drawer{ position:fixed; inset:0; z-index:60; }
  .site-menu.open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .site-menu>*{ width:100%; max-width:var(--col); margin-inline:auto; }
  .site-menu-top{ display:flex; align-items:center; justify-content:space-between; height:40px; }
  .site-menu-top .wordmark{ height:24px; display:inline-block; }
  .site-menu-top .wordmark svg{ height:100%; width:auto; }
  .site-menu-close{
    width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line-2); border-radius:12px; color:var(--ink-2); background:var(--panel);
    cursor:pointer; transition:color .15s, border-color .15s;
  }
  .site-menu-close:active{ color:var(--ink); }
  .site-menu-links{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
  .site-menu-links a{
    font-family:var(--f-display); font-weight:700; font-size:clamp(28px,8vw,34px); letter-spacing:-.025em;
    color:var(--ink); padding:16px; text-align:center; text-decoration:none; transition:color .15s;
  }
  .site-menu-links a:active{ color:var(--jade); }
  .site-menu-cta{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
  .site-menu-foot{ display:flex; align-items:center; justify-content:center; gap:9px; color:var(--ink-2); font-size:13.5px; }
  .site-menu-foot .dot-live{ width:8px; height:8px; border-radius:50%; background:var(--jade); box-shadow:0 0 0 4px var(--jade-bg); flex:none; }

  body.site-menu-open{ overflow:hidden; }
}