/* tevos-horizon-menu.css (2026-11-01) - mobile navigation sheet for the Horizon redesign. Loaded ONLY under the flag (includes/hz-chrome.php hzHeadCss).
   Uses --hz-* tokens only, so Night/Morning and the Dusk / Sky Blur / Teal Aurora variants all restyle it. Sheet is built by tevos-horizon-menu.js from the real .nav markup.
   Breakpoint 980px = where the legacy desktop nav hides. Motion: transform/opacity only, 220ms open / 180ms close, ease-out; reduced-motion = instant. */
html[data-rd]{--hzm-out:cubic-bezier(.23,1,.32,1)}
.hzm,.hzm-scrim{display:none}
@media (max-width:980px){
  /* header: menu button gets a visible label; theme switch moves into the sheet */
  html[data-rd] .hz-slot{display:none}
  html[data-rd] #drawer-toggle{width:auto;min-width:44px;height:44px;padding:0 16px 0 14px;gap:8px;border-radius:999px;font:600 14px/1 var(--hz-sans);color:var(--hz-ink);-webkit-tap-highlight-color:transparent}
  html[data-rd] #drawer-toggle::after{content:"Menu"}
  html[data-rd] #drawer-toggle:focus-visible{outline:2px solid var(--hz-pink-text);outline-offset:3px}
  html.hzm-ready[data-rd] .drawer,html.hzm-ready[data-rd] .drawer-scrim{display:none!important}
  html.hzm-lock{overflow:hidden}
  html.hzm-open[data-rd] #ta-btn{opacity:0;pointer-events:none;visibility:hidden}

  .hzm-scrim{display:block;position:fixed;inset:0;z-index:1000;background:rgba(2,7,10,.55);opacity:0;visibility:hidden;touch-action:none;
    transition:opacity 180ms var(--hzm-out),visibility 0s linear 180ms}
  .hzm-scrim.is-open{opacity:1;visibility:visible;transition:opacity 220ms var(--hzm-out),visibility 0s}
  .hzm{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:1001;width:min(100vw,420px);height:100vh;height:100dvh;
    background:var(--hz-pop);
    background:radial-gradient(120% 55% at 100% 0%,var(--hz-aur1),transparent 62%),radial-gradient(110% 45% at 0% 100%,var(--hz-glow),transparent 66%),color-mix(in srgb,var(--hz-pop) 90%,transparent);
    -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
    border-left:1px solid var(--hz-line);border-radius:24px 0 0 24px;color:var(--hz-ink);font-family:var(--hz-sans);
    transform:translate3d(100%,0,0);visibility:hidden;will-change:transform;
    transition:transform 180ms var(--hzm-out),visibility 0s linear 180ms}
  .hzm.is-open{transform:none;visibility:visible;transition:transform 220ms var(--hzm-out),visibility 0s}
  @media (max-width:480px){.hzm{width:100vw;border-left:0;border-radius:0}}

  .hzm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;min-height:60px;
    padding:calc(env(safe-area-inset-top) + 8px) 14px 8px max(16px,env(safe-area-inset-left))}
  .hzm-head .brand{min-height:44px;display:flex;align-items:center;color:var(--hz-ink);text-decoration:none}
  .hzm-head .brand svg{height:26px;width:auto;display:block}
  .hzm-x{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--hz-surface);border:1px solid var(--hz-border);color:var(--hz-ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .hzm-x:active{transform:scale(.96)}

  .hzm-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left))}
  .hzm-grp{border-bottom:1px solid var(--hz-line)}
  .hzm-trig{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:0 4px;background:none;border:0;color:var(--hz-ink);font:600 18px/1.2 var(--hz-sans);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .hzm-trig svg{flex:none;opacity:.75;transition:transform 200ms var(--hzm-out)}
  .hzm-trig[aria-expanded=true] svg{transform:rotate(180deg)}
  .hzm-trig[aria-expanded=true] .hzm-lab{color:var(--hz-pink-text)}
  .hzm-pan{display:grid;grid-template-rows:0fr;transition:grid-template-rows 200ms var(--hzm-out)}
  .hzm-pan.is-open{grid-template-rows:1fr}
  .hzm-pan>div{min-height:0;overflow:hidden}
  .hzm-blurb{margin:0;padding:0 4px 6px;font:400 13px/1.4 var(--hz-sans);color:var(--hz-ink2)}
  .hzm-links{list-style:none;margin:0;padding:0 0 10px}
  .hzm-links a{display:flex;align-items:center;min-height:48px;padding:0 12px;border-radius:12px;font:500 16px/1.2 var(--hz-sans);color:var(--hz-ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
  .hzm-links a:active{background:var(--hz-line)}
  .hzm a:focus-visible,.hzm button:focus-visible{outline:2px solid var(--hz-pink-text);outline-offset:2px}

  .hzm-foot{flex:none;display:grid;gap:10px;padding:12px max(16px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border-top:1px solid var(--hz-line);background:color-mix(in srgb,var(--hz-pop) 80%,transparent)}
  .hzm .hz-switch{display:grid;width:100%}
  .hzm .hz-switch .hz-t{display:inline}
  .hzm-act{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
  .hzm-cta,.hzm-sign{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;font:600 15px/1 var(--hz-sans);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .hzm-cta{background:var(--hz-pink);color:var(--hz-pink-ink);border:1px solid var(--hz-edge)}
  .hzm-sign{background:var(--hz-surface);color:var(--hz-ink);border:1px solid var(--hz-border)}
  .hzm-cta:active,.hzm-sign:active{transform:scale(.98)}
  @media (hover:hover){.hzm-cta:hover{background:var(--hz-pink-hover)}.hzm-sign:hover,.hzm-links a:hover{background:var(--hz-line)}}
  @media (prefers-reduced-motion:reduce){.hzm,.hzm-scrim,.hzm-pan,.hzm-trig svg,.hzm *{transition:none!important}}
}