/*
 * nav.css: the ONE site header stylesheet, shared by every page mode.
 *
 * Self-contained on purpose: every color/size reads a design token with a literal
 * fallback (var(--x, #hex)), so the header renders identically whether it loads on a
 * canvas marketing page (its own inline :root tokens), a content view (content.css's
 * body.cs-template tokens), or a normal theme page. Nothing here depends on content.css
 * or a page's reset. Markup: parts/site-header.php. Behavior: assets/nav.js.
 */

/* ---- Bar ---- */
.site-nav{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:1000;width:calc(100% - 32px);max-width:1240px;background:rgba(245,243,236,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(45,61,35,.10);border-radius:16px;height:var(--nav-h,72px);box-shadow:0 4px 24px rgba(45,61,35,.10),0 1px 4px rgba(45,61,35,.06);transition:box-shadow .3s;}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:100%;gap:2rem;padding-inline:clamp(1.25rem,4vw,3rem);}
.nav-logo{display:inline-flex;align-items:center;}
.nav-logo img{height:26px;width:auto;display:block;}

/* ---- Menu (bar) ---- */
.nav-menu{display:flex;align-items:center;gap:2.5rem;flex:1;justify-content:center;list-style:none;margin:0;padding:0;}
.nav-menu li{margin:0;padding:0;}
.nav-menu a{font-size:14px;font-weight:500;color:var(--forest-mid,#556154);letter-spacing:.02em;text-decoration:none;transition:color .2s;position:relative;}
.nav-menu a::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:1.5px;background:var(--lime-bright,#C8E85A);transform:scaleX(0);transform-origin:left;transition:transform .2s;}
.nav-menu a:hover,.nav-menu a.nav-active,.nav-menu .current-menu-item>a{color:var(--forest,#2D3D23);}
.nav-menu a:hover::after,.nav-menu a.nav-active::after,.nav-menu .current-menu-item>a::after{transform:scaleX(1);}

/* ---- Actions (CTA) ---- */
.nav-actions{display:flex;align-items:center;gap:.75rem;}
.site-nav .btn,.nav-drawer .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:'DM Sans',system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:100px;padding:.75rem 1.5rem;border:1.5px solid var(--forest,#2D3D23);background:var(--forest,#2D3D23);color:var(--cream,#F5F3EC);white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s;}
.site-nav .btn:hover,.nav-drawer .btn:hover{background:var(--charcoal,#282828);border-color:var(--charcoal,#282828);box-shadow:0 4px 24px rgba(45,61,35,.10);}

/* ---- Hamburger ---- */
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:.4rem;}
.nav-hamburger span{display:block;width:22px;height:1.5px;background:var(--forest,#2D3D23);border-radius:2px;transition:transform .25s,opacity .25s;}
.nav-hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ---- Drawer (mobile) ---- */
.nav-drawer{display:none;position:fixed;top:calc(12px + var(--nav-h,72px) + 8px);left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:1240px;background:rgba(245,243,236,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:1.5rem clamp(1.25rem,4vw,3rem) 2rem;flex-direction:column;gap:.25rem;border:1px solid rgba(45,61,35,.10);border-radius:16px;box-shadow:0 8px 32px rgba(45,61,35,.12);z-index:999;}
.nav-drawer.open{display:flex;}
.drawer-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.drawer-menu li{margin:0;padding:0;}
.nav-drawer a{font-size:16px;font-weight:500;color:var(--forest,#2D3D23);text-decoration:none;}
.drawer-menu a{display:block;padding:.75rem 0;border-bottom:1px solid rgba(45,61,35,.06);}
.drawer-menu .current-menu-item>a,.drawer-menu a.nav-active{color:var(--forest,#2D3D23);font-weight:700;}
.nav-drawer .btn{align-self:flex-start;margin-top:.75rem;}

/* ---- Reading-progress bar (article singles only) ---- */
.progress-bar{position:fixed;top:0;left:0;z-index:1001;height:2px;background:var(--lime-bright,#C8E85A);width:0%;transition:width .08s linear;}

/* ---- Collapse to hamburger on tablet + phone ----
   The full 5-link bar (logo + links + CTA) needs ~1030px to sit without crowding,
   so it stays horizontal only on laptop/desktop. At <=1024px (every iPad, portrait
   AND landscape, plus phones) we switch to the drawer. 1024 is the conventional
   tablet line and matches our ICP's device tiers (desktop primary, iPad secondary). */
@media(max-width:1024px){
  .nav-menu,.nav-actions{display:none;}
  .nav-hamburger{display:flex;}
}