/* ═══════════════════════════════════════════════════════════════════════
   PREMIUM MOBILE SIDE NAV - v1
   Source prototype: mobile-sidenav-premium-v1.html
   Built 2026-08-01. Prepared for Codex review + release.

   WHY A SEPARATE FILE:
   style.css must never be deployed (production holds a hand-appended
   "DOTCITY DESKTOP NAV GEOMETRY 2026-07-30" block that exists nowhere in
   source). This layer is enqueued AFTER style.css, so equal-specificity
   !important rules win on source order without editing style.css at all.

   OVERRIDES: the v13.2.0 (style.css ~L31065) and v13.2.6 (~L31116) mobile
   nav blocks. Selector shape is matched to those (html body .mcr-global-
   mob-panel ...) deliberately - do not reduce specificity.

   Applies at max-width:900px only, matching the blocks it overrides.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width:900px){

  :root{
    /* Single source of truth for the drawer width. There is no page push any
       more - the drawer is an overlay as of 2026-08-19 - so this value is now
       only the panel width and the scrim offset.
       210px is what the site has measurably been rendering since 2026-08-12:
       header.php:643 and page-new.php:442 both force width:210px!important at
       specificity 1-1-3, which outranks the 1-0-2 rule below. 268px was only
       ever the distance the mobile header travelled, and it no longer travels.
       Measured live on 2026-08-19 before this change: panel 209.997px wide,
       header sliding 268px - a 58px overshoot past the panel edge. */
    --mobnav-w:210px;
  }
  /* Keep the panel aligned with the live mobile header. Older emergency
     rules in style.css force 50px, but header.php now owns a 56px shell. */

  /* ── PANEL SHELL ────────────────────────────────────────────────── */
  html body .mcr-global-mob-panel{
    top:56px!important;
    bottom:0!important;
    height:auto!important;
    width:var(--mobnav-w)!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    background:var(--dotz-drawer-bg,#000)!important;
    border-right:1px solid rgba(255,255,255,.06)!important;
    overflow:hidden!important;
  }

  /* ══ OVERLAY DRAWER - 2026-08-19 ═══════════════════════════════════════
     The page and the fixed mobile header do NOT move. Only the panel and the
     scrim animate.

     Measured on the live site immediately before this change:
       #MOB-HEADER  matrix(1,0,0,1,0,0) -> matrix(1,0,0,1,268,0) over 550ms
       #WRAP        identity in both states, i.e. zero pixels of movement
     so the full-width black header bar, with the close X inside it, was the
     only thing on screen in motion, and it overshot the 210px panel edge by
     58px, parking the X at x=280 over live page content.

     transform:none is declared in BOTH states deliberately. Flipping between
     none and translateX(0) toggles whether #WRAP is a containing block for
     its position:fixed descendants, and makes the browser build and tear down
     a compositing layer for the ~1600-node #WRAP subtree on every toggle.

     Deleting the inline rules in header.php and page-new.php is NOT enough on
     its own: style.css:28579 carries
       html body.nav-open #WRAP{transform:translateX(216px)!important}
     This file is enqueued after style.css, so the equal-specificity rule below
     wins on source order. Keep it.

     .BODY / footer / .mcr-ft-about are listed because page-new.php:715 still
     carries a legacy non-important push:
       body.nav-open .BODY,body.nav-open footer,...{transform:translateX(232px)}
     The !important below keeps it dead. Do not drop them from this list
     without deleting that rule first. They get no transition:none because
     their transform never changes, so no transform transition can ever fire,
     and blanking their transition shorthand would also kill unrelated ones.
     ═══════════════════════════════════════════════════════════════════════ */
  html body #WRAP,
  html body.nav-open #WRAP,
  html body #MOB-HEADER,
  html body.nav-open #MOB-HEADER{
    transform:none!important;
    transition:none!important;
  }
  html body .BODY,
  html body.nav-open .BODY,
  html body footer,
  html body.nav-open footer,
  html body .mcr-ft-about,
  html body.nav-open .mcr-ft-about{
    transform:none!important;
  }

  /* Scrim: opacity only. 280ms in, 180ms out.
     The CLOSE duration has to live on the resting rule. A CSS transition
     reads its timing from the after-change style, and on close that is this
     rule, not the .nav-open one. Do not tidy these two durations into one
     place. The dim clears just before the panel lands so the page is never
     left veiled and motionless. */
  html body .mcr-global-mob-scrim{
    top:56px!important;
    left:var(--mobnav-w)!important;
    background:rgba(3,3,6,.55)!important;
    will-change:opacity;
    transition:opacity .18s cubic-bezier(.32,.72,0,1)!important;
  }
  html body.nav-open .mcr-global-mob-scrim{
    transition:opacity .28s cubic-bezier(.32,.72,0,1)!important;
  }

  html body #MOB-HEADER,
  html body #MOB-HEADER.mcr-nav-built{
    height:56px!important;
    min-height:56px!important;
    background:var(--dotz-topnav-bg,#000)!important;
  }

  html body #WRAP,
  html body.home #WRAP{
    padding-top:56px!important;
  }

  html body #MOB-HEADER .mob-hdr-logo img,
  html body #MOB-HEADER.mcr-nav-built .mob-hdr-logo img{
    width:36px!important;
    height:36px!important;
    max-width:36px!important;
    max-height:36px!important;
    object-fit:contain!important;
  }

  /* ── SEARCH (markup added in header.php) ────────────────────────── */
  html body .mcr-global-mob-panel .mobnav-search{
    flex-shrink:0;margin:12px 12px 2px;position:relative;
  }
  html body .mcr-global-mob-panel .mobnav-search input{
    width:100%;height:40px;border-radius:12px;
    border:1px solid rgba(255,255,255,.07);
    background:rgba(255,255,255,.045);
    color:#fff;font-size:.78rem;font-family:inherit;
    padding:0 12px 0 34px;outline:none;
    transition:border-color .25s,background .25s,box-shadow .25s;
    -webkit-appearance:none;appearance:none;
  }
  html body .mcr-global-mob-panel .mobnav-search input::placeholder{
    color:rgba(255,255,255,.42);
  }
  html body .mcr-global-mob-panel .mobnav-search input:focus{
    border-color:rgba(245,200,107,.5);
    background:rgba(255,255,255,.07);
    box-shadow:0 0 0 3px rgba(245,200,107,.12);
  }
  html body .mcr-global-mob-panel .mobnav-search i{
    position:absolute;left:12px;top:13px;
    font-size:.7rem;color:rgba(255,255,255,.42);pointer-events:none;
  }

  /* ── SCROLL REGION ──────────────────────────────────────────────── */
  html body .mcr-global-mob-panel .mobnav-scroll{
    flex:1;overflow-y:auto;overscroll-behavior:contain;
    padding:6px 10px 12px;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 20px),transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 20px),transparent 100%);
  }
  html body .mcr-global-mob-panel .mobnav-scroll::-webkit-scrollbar{display:none}

  /* ── SECTION LABELS ─────────────────────────────────────────────── */
  html body .mcr-global-mob-panel .sb-section{
    padding:0!important;margin:0 0 2px!important;
  }
  html body .mcr-global-mob-panel .sb-label{
    display:flex!important;align-items:center!important;gap:8px!important;
    font-size:.52rem!important;font-weight:800!important;letter-spacing:.3em!important;
    color:rgba(255,255,255,.42)!important;
    padding:0 10px 6px!important;margin:15px 0 0!important;
  }
  html body .mcr-global-mob-panel .sb-label::after{
    content:'';flex:1;height:1px;
    background:linear-gradient(90deg,rgba(255,255,255,.07),transparent);
  }
  html body .mcr-global-mob-panel .sb-section:first-child .sb-label{margin-top:6px!important}

  /* ── NAV ITEMS - readable mobile text, icon only on selected page ── */
  html body .mcr-global-mob-panel .sb-item{
    --ac:#e8e8f2;
    display:flex!important;align-items:center!important;gap:11px!important;
    min-height:0!important;
    padding:8px 10px!important;
    border-radius:13px!important;
    font-size:.9rem!important;font-weight:600!important;letter-spacing:.012em!important;
    color:rgba(255,255,255,.72)!important;
    background:transparent!important;
    border:1px solid transparent!important;
    box-shadow:none!important;transform:none!important;
    transition:background .22s,border-color .22s,color .22s,transform .18s!important;
  }
  html body .mcr-global-mob-panel .sb-item:hover{
    background:rgba(255,255,255,.045)!important;
    border-color:rgba(255,255,255,.07)!important;
    color:#fff!important;
  }
  html body .mcr-global-mob-panel .sb-item:active{transform:scale(.975)!important}

  /* unselected pages carry no icon (already true in v13.2.6 - asserted here
     so this file is self-contained if that block is ever removed) */
  html body .mcr-global-mob-panel .sb-item:not(.on) .sb-ico-wrap{display:none!important}

  /* ── THE SELECTED PAGE ──────────────────────────────────────────── */
  html body .mcr-global-mob-panel .sb-item.on{
    min-height:0!important;
    padding:7px 10px!important;
    font-size:.96rem!important;font-weight:700!important;
    color:#fff!important;
    background:linear-gradient(135deg,
      color-mix(in srgb, var(--ac) 13%, transparent),
      rgba(255,255,255,.035))!important;
    border-color:color-mix(in srgb, var(--ac) 26%, transparent)!important;
  }
  html body .mcr-global-mob-panel .sb-item.on::before{
    content:''!important;position:absolute!important;
    left:-10px!important;top:8px!important;bottom:8px!important;
    width:3px!important;border-radius:3px!important;
    background:var(--ac)!important;
    box-shadow:0 0 12px var(--ac)!important;
  }
  html body .mcr-global-mob-panel .sb-item.on .sb-ico-wrap{
    display:inline-flex!important;
    width:28px!important;height:28px!important;min-width:28px!important;
    margin-right:0!important;
    border-radius:9px!important;
    opacity:1!important;
    /* inline style="background:...;color:..." on the element supplies the
       per-page gradient + glyph colour; these add the lift on top */
    border:1px solid color-mix(in srgb, var(--ac) 24%, transparent)!important;
    box-shadow:0 0 18px color-mix(in srgb, var(--ac) 26%, transparent),
               inset 0 1px 0 rgba(255,255,255,.07)!important;
  }
  html body .mcr-global-mob-panel .sb-item.on .sb-ico-wrap i{font-size:.66rem!important}

  /* Per-page accent. Drives the left bar, the active pill wash and the icon
     tile ring. Matches the inline gradient colours already in header.php. */
  html body .mcr-global-mob-panel .sb-item[href$="/events"],
  html body .mcr-global-mob-panel .sb-item[href*="/events/"]      {--ac:#ff6b5b}
  html body .mcr-global-mob-panel .sb-item[href$="/food"],
  html body .mcr-global-mob-panel .sb-item[href*="/food/"]        {--ac:#4ade80}
  html body .mcr-global-mob-panel .sb-item[href$="/nightlife"],
  html body .mcr-global-mob-panel .sb-item[href*="/nightlife/"]   {--ac:#fb923c}
  html body .mcr-global-mob-panel .sb-item[href$="/music"],
  html body .mcr-global-mob-panel .sb-item[href*="/music/"]       {--ac:#f87171}
  html body .mcr-global-mob-panel .sb-item[href$="/sport"],
  html body .mcr-global-mob-panel .sb-item[href*="/sport/"]       {--ac:#60a5fa}
  html body .mcr-global-mob-panel .sb-item[href$="/art"],
  html body .mcr-global-mob-panel .sb-item[href*="/art/"]         {--ac:#facc15}
  html body .mcr-global-mob-panel .sb-item[href$="/film"],
  html body .mcr-global-mob-panel .sb-item[href*="/film/"]        {--ac:#93c5fd}
  html body .mcr-global-mob-panel .sb-item[href$="/fashion"],
  html body .mcr-global-mob-panel .sb-item[href*="/fashion/"]     {--ac:#f472b6}
  html body .mcr-global-mob-panel .sb-item[href$="/culture"],
  html body .mcr-global-mob-panel .sb-item[href*="/culture/"]     {--ac:#a78bfa}
  html body .mcr-global-mob-panel .sb-item[href$="/areas"],
  html body .mcr-global-mob-panel .sb-item[href*="/areas/"]       {--ac:#e8998a}
  html body .mcr-global-mob-panel .sb-item[href*="/venues"]       {--ac:#5b9bff}
  html body .mcr-global-mob-panel .sb-item[href$="/stories"],
  html body .mcr-global-mob-panel .sb-item[href*="/stories/"]     {--ac:#fbbf24}
  html body .mcr-global-mob-panel .sb-item[href$="/students"],
  html body .mcr-global-mob-panel .sb-item[href*="/students/"]    {--ac:#22d3ee}
  html body .mcr-global-mob-panel .sb-item[href$="/tv"],
  html body .mcr-global-mob-panel .sb-item[href*="/tv/"]          {--ac:#2dd4bf}
  html body .mcr-global-mob-panel .sb-item[href*="/plan/"]{--ac:#c4b5fd}
  html body .mcr-global-mob-panel .sb-item[href*="/jobs"]         {--ac:#4ade80}

  /* ── MARKERS ────────────────────────────────────────────────────── */
  html body .mcr-global-mob-panel .sb-badge{
    margin-left:auto!important;
    display:inline-flex!important;align-items:center!important;gap:4px!important;
    font-size:.5rem!important;font-weight:800!important;letter-spacing:.08em!important;
    text-transform:uppercase!important;
    color:#ff6b5b!important;
    background:rgba(255,107,91,.12)!important;
    border:1px solid rgba(255,107,91,.3)!important;
    padding:2px 7px!important;border-radius:99px!important;
    min-width:0!important;
  }
  html body .mcr-global-mob-panel .sb-badge::before{
    content:'';width:4px;height:4px;border-radius:50%;
    background:#ff6b5b;
  }
  /* The panel is never display:none on mobile, it is only translated
     off-screen, so an unconditional infinite box-shadow animation repaints on
     every mobile page view forever, including all the way through a close.
     Run it only while the drawer is open. */
  html body.nav-open .mcr-global-mob-panel .sb-badge::before{
    animation:mobnavPulse 1.6s infinite;
  }
  @keyframes mobnavPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(255,107,91,.5)}
    50%    {box-shadow:0 0 0 5px rgba(255,107,91,0)}
  }
  html body .mcr-global-mob-panel .sb-dot{
    margin-left:auto!important;
    width:5px!important;height:5px!important;
    box-shadow:0 0 8px currentColor!important;
  }

  /* ── FOOTER (markup added in header.php) ────────────────────────── */
  html body .mcr-global-mob-panel .mobnav-foot{
    flex-shrink:0;
    padding:12px 16px calc(18px + env(safe-area-inset-bottom));
    border-top:1px solid rgba(255,255,255,.07);
  }
  html body .mcr-global-mob-panel .mobnav-foot-links{display:flex;gap:16px}
  html body .mcr-global-mob-panel .mobnav-foot-links a{
    font-size:.52rem;font-weight:700;letter-spacing:.14em;
    color:rgba(255,255,255,.42);transition:color .25s;
  }
  html body .mcr-global-mob-panel .mobnav-foot-links a:hover{color:#fff}
  html body .mcr-global-mob-panel .mobnav-foot-meta{
    margin-top:12px;display:flex;justify-content:space-between;align-items:center;
    font-size:.5rem;letter-spacing:.14em;color:rgba(255,255,255,.42);
  }
  html body .mcr-global-mob-panel .mobnav-foot-meta .st{
    display:flex;align-items:center;gap:5px;
  }
  html body .mcr-global-mob-panel .mobnav-foot-meta .st::before{
    content:'';width:5px;height:5px;border-radius:50%;
    background:#4ade80;box-shadow:0 0 8px #4ade80;
  }

  /* Motion-safety block MOVED to the very end of this file on 2026-08-19.
     It has to come after the panel and scrim rules to beat them on source
     order - sitting here it tied them on specificity and lost, so it was
     silently doing nothing. See the reduce-motion block at the bottom of
     this file. */

  /* Live geometry guard: beats older page-specific emergency rules without
     changing the nav structure. */
  html body #MOB-HEADER.mcr-nav-built .mob-hdr-logo img,
  html body #MOB-HEADER .mob-hdr-logo img.skip-lazy{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    max-width:36px!important;
    max-height:36px!important;
  }
  /* ══ PANEL MOTION - the only thing that moves ═══════════════════════════
     320ms in, 220ms out, one easing: cubic-bezier(.32,.72,0,1), already the
     house curve (header.php:170, :184, :199).

     Opening reveals content the reader has not seen, and the motion is what
     tells them where it came from, so it is allowed to be legible. Closing
     returns to a page that has been fully visible behind a 55% scrim the
     whole time - there is nothing to read on the way out and the user has
     already committed - so it gets out of the way faster.

     The ID is in the selector deliberately: style.css:28626 carries
       html body.nav-open #MCR-GLOBAL-MOB-NAV{transform:translateX(0)!important}
     at specificity 1-1-2, which outranks any class-only rule here regardless
     of source order. These two are 1-1-3 and 1-2-3, so they win.
     Same close-duration-on-the-resting-rule note as the scrim above.
     ═══════════════════════════════════════════════════════════════════════ */
  html body nav#MCR-GLOBAL-MOB-NAV.mcr-global-mob-panel{
    transform:translateX(-100%)!important;
    transition:transform .22s cubic-bezier(.32,.72,0,1)!important;
    will-change:transform;
  }
  html body.nav-open nav#MCR-GLOBAL-MOB-NAV.mcr-global-mob-panel{
    transform:translateX(0)!important;
    transition:transform .32s cubic-bezier(.32,.72,0,1)!important;
  }

  /* Motion-safety: honour the OS reduce-motion setting.
     Relocated here 2026-08-19 so it comes AFTER everything it has to cancel.
     It now names the elements that actually move - panel, scrim, burger bars -
     instead of #WRAP and #MOB-HEADER, which no longer move at all. Keep this
     block last in the file. */
  @media (prefers-reduced-motion:reduce){
    html body nav#MCR-GLOBAL-MOB-NAV.mcr-global-mob-panel,
    html body.nav-open nav#MCR-GLOBAL-MOB-NAV.mcr-global-mob-panel,
    html body .mcr-global-mob-scrim,
    html body.nav-open .mcr-global-mob-scrim,
    html body .mcr-global-burger .mob-burger span,
    html body .mcr-global-mob-panel .sb-item{transition:none!important}
    html body .mcr-global-mob-panel .sb-badge::before,
    html body.nav-open .mcr-global-mob-panel .sb-badge::before{animation:none!important}
  }
}