/* ════════════════════════════════════════════════════════════════════════
   VALLEY WEST — vw-nav.css   ·  cleaned header nav + mobile drawer  (v2026-06)
   Load LAST in the chain (after polish.css) so it wins:
     tokens → site → site2 → wsa → wsa2 → polish → mgx → mobile → vw-nav.css
   Pairs with vw-nav.js. Tokens (--m/--i/--accent/--ink/--sans/--serif…) come
   from tokens.css; the few below are fallbacks only.
   Brand-safe: NEUTRAL hairline borders + NEUTRAL shadows only — no accent
   glow/ring per Valley West hard rules. Accent appears as icon-chip fill,
   active text, and the CTA fills.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --vwn-pop-sh:0 24px 60px -20px rgba(8,8,10,.32), 0 6px 18px -10px rgba(8,8,10,.18);
  --vwn-ease-out:cubic-bezier(.22,1,.36,1);
}

/* ════════ HEADER — centered tabs (grid: brand | nav | actions) ════════ */
.site-header{
  display:grid !important; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
}
.site-header .brand{justify-self:start; min-width:0;}
.site-header .nav-links{justify-self:center; display:flex; align-items:center; gap:4px;}
.site-header .header-right{justify-self:end; display:flex; align-items:center; gap:12px;}

.vwnav-a,.vwnav-btn{
  font-family:var(--sans); font-weight:500; font-size:14.5px; color:var(--t-hi,#16181B);
  text-decoration:none; background:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-radius:10px;
  transition:background-color .16s, color .16s; white-space:nowrap; line-height:1; min-height:40px;
}
.vwnav-a:hover,.vwnav-btn:hover,.vwnav-grp.open .vwnav-btn{ background:var(--paper-3,#F1F0EC); color:var(--t-hi,#16181B); }
.vwnav-btn .vwchev{ width:15px; height:15px; opacity:.55; transition:transform .22s var(--vwn-ease-out); }
.vwnav-grp.open .vwnav-btn .vwchev{ transform:rotate(180deg); opacity:.85; }

/* ════════ DESKTOP POPUPS — centered + caret-aligned under each tab ════════ */
.vwnav-grp{ position:relative; }
.vwmega{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--paper,#fff); color:var(--t-hi,#16181B); border:1px solid rgba(8,8,10,.08); border-radius:18px;
  box-shadow:var(--vwn-pop-sh); padding:10px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s var(--vwn-ease-out), transform .18s var(--vwn-ease-out), visibility .18s; z-index:120;
}
.vwmega.open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.vwmega::after{ content:""; position:absolute; top:-7px; left:var(--caret,50%); transform:translateX(-50%) rotate(45deg);
  width:13px; height:13px; background:var(--paper,#fff); border-left:1px solid rgba(8,8,10,.08); border-top:1px solid rgba(8,8,10,.08); border-radius:3px 0 0 0; }
.vwmega::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px; } /* hover bridge */

.vwmega-sm{ width:300px; }
.vwm-sm-list{ display:flex; flex-direction:column; gap:2px; }

.vwmega-lc{ width:min(720px,92vw); display:grid; grid-template-columns:repeat(3,1fr); gap:6px 10px; }
.vwm-col{ display:flex; flex-direction:column; gap:1px; }
.vwm-col-h{ font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--t-lo,#8A8D93); padding:10px 12px 6px; }
.vwm-col.eco{ background:var(--paper-2,#FAFAF8); border-radius:12px; }
.vwm-foot{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:6px; padding:14px 12px 6px; border-top:1px solid rgba(8,8,10,.07); }
.vwm-note{ font-size:12.5px; color:var(--t-mid,#5B5D63); }
.vwm-cta{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; background:var(--accent,#D0202F); color:#fff;
  font-weight:600; font-size:13.5px; padding:10px 16px; border-radius:var(--r-pill,100px); min-height:42px; box-sizing:border-box; transition:background-color .18s; }
.vwm-cta svg{ width:15px; height:15px; }
.vwm-cta:hover{ background:var(--accent-hover,#A81A27); }

.vwm-link{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; text-decoration:none;
  color:var(--t-hi,#16181B); font-size:14px; font-weight:500; transition:background-color .14s; min-height:42px; }
.vwm-link:hover{ background:var(--paper-3,#F1F0EC); }
.vwm-ic{ width:30px; height:30px; border-radius:8px; background:var(--accent-soft,#FBE7E9); color:var(--accent,#D0202F); display:grid; place-items:center; flex:none; }
.vwm-ic svg{ width:16px; height:16px; }
.vwm-t{ flex:1; }
.vwm-ext{ width:14px; height:14px; color:var(--t-lo,#8A8D93); flex:none; }

@media (prefers-reduced-motion:reduce){
  .vwmega{ transition:opacity .12s linear; transform:translateX(-50%); }
  .vwmega.open{ transform:translateX(-50%); }
}

/* ════════════════════ MOBILE DRAWER (cleaned, flat) ════════════════════ */
.scrim{ position:fixed; inset:0; background:rgba(8,8,10,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; z-index:140; }
.scrim.open{ opacity:1; visibility:visible; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(380px,92vw); z-index:150;
  background:linear-gradient(180deg,var(--ink-1,#16181B) 0%,var(--ink,#0E0F11) 64%); color:#fff;
  transform:translateX(100%); transition:transform .42s var(--vwn-ease-out);
  display:flex; flex-direction:column;
  padding:max(18px,env(safe-area-inset-top)) 22px max(18px,env(safe-area-inset-bottom));
  box-shadow:-32px 0 80px rgba(0,0,0,.5);
}
.drawer.open{ transform:translateX(0); }

.drawer-top{ display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; margin-bottom:6px; border-bottom:1px solid var(--ink-3,#2A2E33); flex:none; }
.drawer-top .brand .bn{ color:#fff; }
.drawer-close{ width:42px; height:42px; border-radius:50%; background:var(--ink-3,#2A2E33); border:1px solid var(--ink-4,#3A3F45); color:#fff; cursor:pointer; display:grid; place-items:center; flex:none; }
.drawer-close svg{ width:18px; height:18px; }

.drawer-scroll{ flex:1; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; margin:0 -22px; padding:6px 22px 8px; }
.drawer-lbl{ font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--t-lo-d,#7E828A); margin:18px 2px 6px; }
.drawer-lbl:first-child{ margin-top:8px; }
.drawer-link{ display:flex; align-items:center; gap:13px; padding:13px 10px; border-radius:12px; text-decoration:none;
  color:var(--t-hi-d,#F4F4F2); font-size:16px; font-weight:500; min-height:48px; transition:background-color .16s, color .16s; }
.drawer-link:hover,.drawer-link:active{ background:rgba(255,255,255,.07); color:#fff; }
.drawer-link .di{ width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.07); color:#fff; display:grid; place-items:center; flex:none; }
.drawer-link .di svg{ width:16px; height:16px; }
.drawer-link .dt{ flex:1; }
.drawer-link .dext{ width:15px; height:15px; color:var(--t-lo-d,#7E828A); flex:none; }
.drawer-eco{ font-size:15px; color:var(--t-mid-d,#B7BAC0); }

.drawer-apply{ display:flex; align-items:center; justify-content:center; gap:9px; text-decoration:none;
  background:var(--accent,#D0202F); color:#fff; font-weight:600; font-size:15.5px; border-radius:var(--r-pill,100px);
  padding:15px; min-height:52px; margin:16px 0 14px; flex:none; transition:background-color .18s; }
.drawer-apply svg{ width:17px; height:17px; }
.drawer-apply:hover{ background:var(--accent-hover,#A81A27); }

.drawer-foot{ flex:none; padding-top:14px; border-top:1px solid var(--ink-3,#2A2E33); display:flex; flex-direction:column; gap:8px; }
.drawer-foot .phone{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:#fff; font-weight:600; font-size:16px; min-height:44px; }
.drawer-foot .phone svg{ width:18px; height:18px; }
.drawer-foot .lic{ font-size:11.5px; color:var(--t-lo-d,#7E828A); line-height:1.5; }

@media (prefers-reduced-motion:no-preference){
  .drawer .drawer-scroll > *,.drawer .drawer-apply,.drawer .drawer-foot{ opacity:0; transform:translateX(14px); }
  .drawer.open .drawer-scroll > *,.drawer.open .drawer-apply,.drawer.open .drawer-foot{ opacity:1; transform:none;
    transition:opacity .4s var(--vwn-ease-out), transform .45s var(--vwn-ease-out); }
  .drawer.open .drawer-scroll > *:nth-child(1){ transition-delay:.06s; }
  .drawer.open .drawer-scroll > *:nth-child(2){ transition-delay:.09s; }
  .drawer.open .drawer-scroll > *:nth-child(3){ transition-delay:.12s; }
  .drawer.open .drawer-scroll > *:nth-child(4){ transition-delay:.15s; }
  .drawer.open .drawer-scroll > *:nth-child(5){ transition-delay:.18s; }
  .drawer.open .drawer-scroll > *:nth-child(n+6){ transition-delay:.21s; }
  .drawer.open .drawer-apply{ transition-delay:.24s; }
  .drawer.open .drawer-foot{ transition-delay:.28s; }
}

/* ════════ COLLAPSE: hamburger ≤ 1200px, full centered nav above ════════ */
@media (max-width:1200px){
  .site-header .nav-links,.site-header .header-phone{ display:none !important; }
  .site-header .hamburger{ display:grid !important; }
  .site-header{ grid-template-columns:1fr auto !important; }
  .vwmega{ display:none !important; }
}
@media (max-width:560px){
  .drawer{ width:100vw; max-width:100vw; }
}
.vwnav-a:focus-visible,.vwnav-btn:focus-visible,.vwm-link:focus-visible{ outline:2px solid var(--accent,#D0202F); outline-offset:2px; border-radius:8px; }
.drawer a:focus-visible,.drawer button:focus-visible{ outline:2px solid #fff; outline-offset:2px; border-radius:8px; }