/* ZPOP — header.css
   Phase 1 header / nav overrides.
   Load order on every page: animations.css > style.css > header.css > home.css > polish.css
   (order matters: later files intentionally override earlier ones). */

/* =========================================================================
   ZPOP — PHASE 1 · HEADER / NAVIGATION
   Overrides the three earlier #site-nav rule sets (shared + per-page merges).
   Loaded last in <head>; header rules are not touched by any in-body <style>.
   ========================================================================= */
:root{ --zp-nav-h:74px; }

#site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--zp-nav-h); padding:0 max(6vw,20px);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,2.4vw,40px);
  background:rgba(255,248,231,.97);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(36,27,18,.07), 0 10px 28px -16px rgba(36,27,18,.28);
  transition:height 220ms var(--pop-ease-settle,ease);
}
#site-nav.scrolled{ height:62px; padding:0 max(6vw,20px); background:rgba(255,248,231,.97); }

/* ---- logo: official file once supplied (see ZPOP_LOGO in the page script); text wordmark until then ---- */
#site-nav .nav-logo{ display:inline-flex; align-items:center; flex:0 0 auto; line-height:1; text-decoration:none; }
#site-nav .nav-logo-img{ display:block; height:46px; width:auto; max-width:180px; object-fit:contain; transition:height 220ms var(--pop-ease-settle,ease); }
#site-nav.scrolled .nav-logo-img{ height:40px; }
#site-nav .nav-logo-img[hidden],
#site-nav .nav-logo-text[hidden]{ display:none; }
#site-nav .nav-logo-text{ font-family:var(--font-display); font-weight:700; font-size:28px; letter-spacing:.01em; color:var(--zpop-red); }

/* ---- primary links ---- */
#site-nav .nav-links{ display:flex; align-items:center; gap:clamp(18px,2.6vw,38px); list-style:none; }
#site-nav .nav-links a{
  position:relative; display:inline-block; padding:10px 2px;
  font-family:var(--font-body); font-weight:700; font-size:15px; color:var(--ink); text-decoration:none;
  transition:color 160ms ease;
}
#site-nav .nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:3px; height:3px; border-radius:2px;
  background:var(--zpop-red); transform:scaleX(0); transform-origin:left center;
  transition:transform 220ms var(--pop-ease-settle,ease);
}
#site-nav .nav-links a:hover{ color:var(--zpop-red); }
#site-nav .nav-links a:hover::after,
#site-nav .nav-links a.active::after{ transform:scaleX(1); }
#site-nav .nav-links a.active{ color:var(--zpop-red); }

/* ---- right cluster: social (only when real URLs are configured) + Franchise CTA + mobile toggle ---- */
#site-nav .nav-right{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
#site-nav .nav-social{ display:flex; align-items:center; gap:8px; }
#site-nav .nav-social[hidden]{ display:none; }
#site-nav .nav-social a{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  color:var(--ink); background:rgba(36,27,18,.06); transition:background 160ms ease, color 160ms ease;
}
#site-nav .nav-social a:hover{ background:var(--ink); color:var(--zpop-cream); }
#site-nav .nav-social svg{ width:19px; height:19px; display:block; }
#site-nav .nav-cta{ display:inline-flex; height:46px; padding:0 24px; font-size:14.5px; }
#site-nav .nav-cta .cta-short{ display:none; }

#nav-mobile-toggle{ width:46px; height:46px; font-size:20px; line-height:1; }

/* ---- mobile / tablet drawer ---- */
#nav-mobile-panel{
  padding:calc(var(--zp-nav-h) + 12px) 24px 32px; overflow-y:auto; gap:22px;
}
#nav-mobile-panel a{ font-size:28px; }
#nav-mobile-panel .btn{ font-size:16px; }
#nav-mobile-panel a.btn-yellow{ color:var(--ink); }
#nav-mobile-panel .panel-social{ display:flex; gap:14px; margin-top:6px; }
#nav-mobile-panel .panel-social[hidden]{ display:none; }
#nav-mobile-panel .panel-social a{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,248,231,.12); color:var(--zpop-cream);
}
#nav-mobile-panel .panel-social svg{ width:21px; height:21px; }
html.zp-nav-lock, html.zp-nav-lock body{ overflow:hidden; }

@media (max-width:1180px){ #site-nav .nav-social{ display:none; } }
@media (max-width:980px){
  #site-nav .nav-links{ display:none; }
  #site-nav .nav-right .nav-cta{ display:inline-flex; height:42px; padding:0 18px; font-size:13.5px; }
  #nav-mobile-toggle{ display:block; }
}
@media (max-width:420px){
  #site-nav{ gap:10px; }
  #site-nav .nav-right{ gap:10px; }
  #site-nav .nav-logo-img{ height:38px; max-width:120px; }
  #site-nav .nav-logo-text{ font-size:25px; }
  #site-nav .nav-cta{ padding:0 14px; }
  #site-nav .nav-cta .cta-long{ display:none; }
  #site-nav .nav-cta .cta-short{ display:inline; }
}
@media (prefers-reduced-motion:reduce){
  #site-nav, #site-nav .nav-logo-img, #site-nav .nav-links a::after{ transition:none; }
}