/* =====================================================================
   site-nav.css — the landing page's navigation bar, extracted as a
   standalone module so the category pages (metal / plastic / electronics)
   render an IDENTICAL header to the homepage. Values mirror the current
   /styles/home.css nav (the /plastic/-matched 64px bar) 1:1, with var()
   resolved to literals so it is token-independent. Layout is driven by the
   data-view / data-menu attributes that the inline resolver + site-nav.js
   set, so no @media juggling is needed. Link this LAST so it wins the
   .site-header / .header-actions / .nav-label collisions with category CSS.
   ===================================================================== */

@font-face{font-family:Inter;src:url('/plastic/assets/fonts/Inter-Regular-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('/plastic/assets/fonts/Inter-Medium-latin.woff2') format('woff2');font-style:normal;font-weight:500 600;font-display:swap}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- base header ---------- */
.site-header{position:fixed;z-index:100;top:0;left:0;right:0;height:74px;display:flex;align-items:center;padding:0 28px;border-bottom:1px solid rgba(0,0,0,.08);background:rgba(247,247,244,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:transform .45s cubic-bezier(.22,1,.36,1),background .3s}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header .brand{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.site-header .brand-image{display:block;width:164px;height:auto}
.site-header .desktop-nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:26px;font-family:Inter,Arial,sans-serif;font-size:14px}
.site-header .desktop-nav a,.site-header .header-actions a{transition:opacity .2s;text-decoration:none;color:inherit}
.site-header .desktop-nav a:hover,.site-header .header-actions a:hover{opacity:.5}
.site-header .nav-label{color:#999;margin-right:10px}
.site-header .header-actions{margin-left:auto;display:flex;align-items:center;gap:24px;font-size:14px}
.site-header .ask-link{display:inline-flex;align-items:center;gap:7px;color:#111}
.site-header .ask-mark{font-size:18px;line-height:1;color:#111}
.site-header .pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;min-height:46px;padding:0 24px;font-weight:600;font-family:Geist,Arial,sans-serif;text-decoration:none;cursor:pointer;transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s,color .25s}
.site-header .pill:hover{transform:translateY(-2px)}
.site-header .pill-dark{min-height:40px;padding-inline:24px;background:#050505;color:#fff;border:0}
.site-header .pill-outline{min-height:36px;padding:0 22px;border:1px solid #111;background:transparent;color:#111}
.site-header .menu-button{display:none;margin-left:auto;width:46px;height:46px;border:0;border-radius:50%;background:#080808;color:#111;cursor:pointer;position:relative;z-index:2}
.site-header .menu-button i{display:block;width:17px;height:1px;background:#fff;margin:5px auto;transition:.3s}

/* ---------- base mobile drawer (parked off-screen; shown via .is-open in drawer mode) ---------- */
.mobile-menu{position:fixed;inset:0;z-index:90;background:#0a0a0a;color:#fff;padding:110px 24px 28px;transform:translateY(-100%);visibility:hidden}
.mobile-menu.is-open{transform:none;visibility:visible}
html[data-menu="full"] .mobile-menu{display:none}
.mobile-menu-inner{display:flex;flex-direction:column;height:100%}
.mobile-menu p{margin:0}
.mobile-menu a{text-decoration:none;color:inherit}
.mobile-menu .mobile-menu-actions button{font:inherit;color:inherit;cursor:pointer}
body.menu-open{overflow:hidden}
body.menu-open .brand-image{filter:invert(1)}

/* ---------- desktop (matches /plastic/: 64px bar, 213px logo, 36px gap) ---------- */
html[data-view="desktop"] .site-header{height:64px;padding:0 16px;border-bottom:1px solid rgba(0,0,0,.12);background:rgba(250,250,250,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
html[data-view="desktop"] .site-header .brand-image{width:213px}
html[data-view="desktop"] .site-header .desktop-nav{gap:36px;font-family:Inter,Geist,Arial,sans-serif;font-size:16px;font-weight:400}
html[data-view="desktop"] .site-header .nav-label{position:relative;margin-right:37px;color:#777}
html[data-view="desktop"] .site-header .nav-label:after{content:"";position:absolute;right:-36.5px;top:50%;width:1px;height:20px;background:#d8d8d3;transform:translateY(-50%)}
html[data-view="desktop"] .site-header .desktop-nav > a,
html[data-view="desktop"] .site-header .desktop-nav > .nav-label{padding:6px 8px}
html[data-view="desktop"] .site-header .header-actions{gap:8px;font-size:14px}
html[data-view="desktop"] .site-header .ask-link{position:relative;height:39px;margin-right:9px;padding:0 10px;border-right:0;gap:8px;font-size:15px;font-weight:500}
html[data-view="desktop"] .site-header .ask-link:after{content:"";position:absolute;right:-8.5px;top:50%;width:1px;height:20px;background:#d8d8d3;transform:translateY(-50%)}
html[data-view="desktop"] .site-header .header-actions .header-flow-button.pill-dark,
html[data-view="desktop"] .site-header .header-actions .header-flow-button.pill-outline{width:auto;height:34px;min-height:34px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:500}
html[data-view="desktop"] .site-header .header-actions .header-flow-button.pill-dark{border:1px solid #050505}
html[data-view="desktop"] .site-header .menu-button{display:none}

/* ---------- full ⇄ drawer switch ---------- */
:where(html[data-menu="drawer"]) .site-header .desktop-nav{display:none}
:where(html[data-menu="full"]) .site-header .menu-button{display:none}
/* narrow desktop keeps the actions run beside the burger, exactly like /plastic/ */
html[data-view="desktop"][data-menu="drawer"] .site-header .header-actions{display:flex}
html[data-view="desktop"][data-menu="drawer"] .site-header .menu-button{margin-left:12px}

/* ---------- phone ---------- */
html[data-view="mobile"] .site-header{height:64px;padding:0 16px;border-bottom:1px solid rgba(0,0,0,.12);background:rgba(250,250,250,.97)}
html[data-view="mobile"] .site-header .brand-image{width:min(213px,58vw)}
html[data-view="mobile"] .site-header .header-actions{display:none}

/* ---------- burger → X (drawer) ---------- */
html[data-menu="drawer"] .site-header .menu-button{display:grid;place-items:center;gap:5px;width:44px;height:44px;padding:0;border-radius:0;background:transparent;color:#111;align-content:stretch}
html[data-menu="drawer"] .site-header .menu-button i{position:static;width:22px;height:1.5px;margin:0;background:currentColor;transition:transform .35s,opacity .35s,background .35s}
html[data-menu="drawer"] body.menu-open .site-header .menu-button{color:#0A0A0A}
html[data-menu="drawer"] body.menu-open .site-header .menu-button i:nth-of-type(1){transform:translateY(6.5px) rotate(45deg)}
html[data-menu="drawer"] body.menu-open .site-header .menu-button i:nth-of-type(2){opacity:0}
html[data-menu="drawer"] body.menu-open .site-header .menu-button i:nth-of-type(3){transform:translateY(-6.5px) rotate(-45deg)}
html[data-menu="drawer"] body.menu-open .site-header{background:#FAFAFA;border-bottom-color:rgba(0,0,0,.12)}
html[data-menu="drawer"] body.menu-open .brand-image{filter:none}

/* ---------- drawer panel (light full-screen, /plastic/) ---------- */
html[data-menu="drawer"] .mobile-menu{position:fixed;inset:0;z-index:90;width:100%;height:100dvh;min-height:100vh;box-sizing:border-box;padding:96px 4.5vw 32px;background:#FAFAFA;color:#0A0A0A;overflow-y:auto;overscroll-behavior:contain;transition:transform .5s cubic-bezier(.22,1,.36,1),visibility .5s cubic-bezier(.22,1,.36,1)}
html[data-menu="drawer"] .mobile-menu-inner{width:100%;height:auto;min-height:0;margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:22.4px}
html[data-menu="drawer"] .mobile-menu p,
html[data-menu="drawer"] .mobile-menu a{display:block;min-height:0;margin:0;padding:0;border:0;font-family:"Bricolage Grotesque",Arial,sans-serif;font-size:1.6rem;font-weight:500;line-height:1.2;letter-spacing:-.03em;color:#0A0A0A;text-transform:none;text-decoration:none}
html[data-menu="drawer"] .mobile-menu p{opacity:.5;cursor:default}
html[data-menu="drawer"] .mobile-menu a.mobile-menu-ask{display:flex;align-items:center;gap:11px}
html[data-menu="drawer"] .mobile-ask-mark{flex:0 0 20px;width:20px;height:20px}
html[data-menu="drawer"] .mobile-menu-ask span{font:inherit;color:inherit}
html[data-menu="drawer"] .mobile-menu-actions{width:auto;margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:22.4px}
html[data-menu="drawer"] .mobile-menu .mobile-menu-actions .pill,
html[data-menu="drawer"] .mobile-menu .mobile-menu-actions button{width:auto;height:50px;min-height:0;margin:0;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-family:Geist,Arial,sans-serif;font-size:15px;font-weight:500;line-height:1}
html[data-menu="drawer"] .mobile-menu .mobile-menu-actions .pill-outline{background:#fff;color:#0A0A0A;border:1px solid #000}
html[data-menu="drawer"] .mobile-menu .mobile-menu-actions button[data-flow-open]{background:#000;color:#fff;border:1px solid #000}

/* ---------------------------------------------------------------------------
   TRANSPARENT OVER HERO
   Opt in per page by putting data-nav-transparent on the <header>; site-nav.js
   then adds .is-over-hero for exactly as long as the fixed bar overlaps the
   hero, and removes it the moment the hero's bottom edge passes underneath.
   Only pages whose hero is dark behind the bar should opt in — measured mean
   luminance of that band is 6 on /electronics/ and 19 on /plastic/ (white
   content reads cleanly), but 216 on /metal/'s opening sunset frame, which is
   why /metal/ is deliberately left on the solid bar.
   Specificity note: (0,3,0) here deliberately outranks the html[data-view=…]
   .site-header background rules above, while the drawer's body.menu-open rule
   (0,4,2) still outranks this, so an open menu correctly goes solid.
   --------------------------------------------------------------------------- */
.site-header[data-nav-transparent].is-over-hero{
  background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom-color:transparent;
}
/* The brand ships as a black PNG; inverting is the same trick the open drawer
   already uses, so there is no second asset to keep in sync. */
.site-header[data-nav-transparent].is-over-hero .brand-image{filter:invert(1)}
.site-header[data-nav-transparent].is-over-hero .desktop-nav,
.site-header[data-nav-transparent].is-over-hero .ask-link,
.site-header[data-nav-transparent].is-over-hero .ask-mark,
.site-header[data-nav-transparent].is-over-hero .menu-button{color:#fff}
.site-header[data-nav-transparent].is-over-hero .nav-label{color:rgba(255,255,255,.72)}
.site-header[data-nav-transparent].is-over-hero .nav-label:after,
.site-header[data-nav-transparent].is-over-hero .ask-link:after{background:rgba(255,255,255,.38)}
.site-header[data-nav-transparent].is-over-hero .pill-outline{border-color:rgba(255,255,255,.85);color:#fff}
/* Transact inverts to a white pill — a near-black pill on a near-black hero
   would otherwise disappear entirely. */
.site-header[data-nav-transparent].is-over-hero .pill-dark{background:#fff;color:#050505;border-color:#fff}

@media (prefers-reduced-motion:reduce){
  html[data-menu="drawer"] .mobile-menu{transition:none}
  html[data-menu="drawer"] .site-header .menu-button i{transition:none}
  .site-header,.site-header .pill{transition:none}
}