/* Isolated mobile navigation v2. Enabled only by mobile-nav-v2.js. */
#mobileNavV2Toggle,
#mobileNavV2Backdrop,
#mobileNavV2Drawer{display:none}

@media (max-width:860px){
  html.mobile-nav-v2-open,
  html.mobile-nav-v2-open body{
    overflow:hidden!important;
  }

  body.mobile-nav-v2-enabled .site-header > .main-nav,
  body.mobile-nav-v2-enabled #mobileMenuBtn,
  body.mobile-nav-v2-enabled #mobileMenuBackdrop{display:none!important}

  #mobileNavV2Toggle{
    grid-column:3;
    justify-self:end;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    min-width:48px;
    padding:0;
    border:1px solid var(--line);
    border-radius:17px;
    background:var(--panel-2);
    color:var(--gold);
    z-index:200003;
  }
  #mobileNavV2Toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

  #mobileNavV2Backdrop{
    position:fixed;
    inset:calc(72px + env(safe-area-inset-top,0px)) 0 0;
    display:block;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    background:rgba(2,6,23,.55);
    transition:opacity .2s ease,visibility .2s ease;
    z-index:200001;
  }
  body.mobile-nav-open #mobileNavV2Backdrop{visibility:visible;opacity:1;pointer-events:auto}

  #mobileNavV2Drawer{
    position:fixed;
    inset:calc(72px + env(safe-area-inset-top,0px)) 0 0 auto;
    display:flex;
    flex-direction:column;
    width:min(420px,90vw);
    min-height:0;
    overflow:hidden;
    background:#07111f;
    color:#e5e7eb;
    border-left:1px solid rgba(148,163,184,.22);
    transform:translate3d(110%,0,0);
    transition:transform .22s ease;
    z-index:200002;
  }
  body.mobile-nav-open #mobileNavV2Drawer{transform:translate3d(0,0,0)}
  html[data-theme="light"] #mobileNavV2Drawer{background:#fff;color:#142033;border-left-color:#d9e2ef}

  .mobile-nav-v2-scroll{
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    width:100%;
    min-width:0;
    min-height:0;
    padding:20px 16px calc(34px + env(safe-area-inset-bottom,0px));
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }

  .mobile-nav-v2-title{margin:2px 0 14px;color:#c89222;font-size:13px;font-weight:900;letter-spacing:1.8px}
  #mobileNavV2Links{display:grid;gap:8px}
  .mobile-nav-v2-link,
  .mobile-nav-v2-auth,
  .mobile-nav-v2-register,
  .mobile-nav-v2-account{
    display:flex;
    align-items:center;
    width:100%;
    min-height:52px;
    gap:13px;
    padding:0 14px;
    border:1px solid transparent;
    border-radius:14px;
    background:transparent;
    color:inherit;
    font:inherit;
    font-size:17px;
    font-weight:750;
    line-height:1.2;
    text-align:left;
    text-decoration:none;
  }
  .mobile-nav-v2-link svg{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .mobile-nav-v2-link:focus-visible,
  .mobile-nav-v2-auth:focus-visible,
  .mobile-nav-v2-register:focus-visible,
  .mobile-nav-v2-account:focus-visible,
  #mobileNavV2Toggle:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
  .mobile-nav-v2-link.active{background:var(--gold);color:var(--ink,#111827);border-color:var(--gold);box-shadow:inset 4px 0 color-mix(in srgb,var(--ink,#111827) 45%,transparent)}
  #mobileNavV2Actions{display:grid;flex:0 0 auto;gap:10px;margin-top:auto;padding-top:18px;border-top:1px solid rgba(148,163,184,.22)}
  .mobile-nav-v2-auth,.mobile-nav-v2-register{justify-content:center;text-align:center;border-color:rgba(148,163,184,.3)}
  .mobile-nav-v2-account{display:grid;justify-items:start;gap:3px;border-color:var(--line);background:var(--panel-2)}
  .mobile-nav-v2-account span{font-weight:850}
  .mobile-nav-v2-auth.logout{background:#7f1d1d;color:#fff;border-color:#991b1b}
  .mobile-nav-v2-auth.logout:hover{background:var(--danger);color:#fff;border-color:color-mix(in srgb,var(--danger) 75%,#fff)}
}

@media (max-width:860px) and (hover:hover) and (pointer:fine){
  .mobile-nav-v2-link:hover,
  .mobile-nav-v2-register:hover,
  .mobile-nav-v2-account:hover{background:color-mix(in srgb,var(--gold) 12%,transparent);border-color:color-mix(in srgb,var(--gold) 48%,transparent);color:var(--gold)}
  .mobile-nav-v2-link.active:hover{background:var(--gold);color:var(--ink,#111827);border-color:var(--gold)}
}

@media (max-width:860px) and (hover:none),(max-width:860px) and (pointer:coarse){
  .mobile-nav-v2-link:active,
  .mobile-nav-v2-register:active,
  .mobile-nav-v2-account:active{background:color-mix(in srgb,var(--gold) 14%,transparent);border-color:color-mix(in srgb,var(--gold) 52%,transparent);color:var(--gold)}
}

@media (prefers-reduced-motion:reduce){#mobileNavV2Drawer,#mobileNavV2Backdrop{transition:none}}
