/* ============================================================
   TAMPERLOGS shared site header (the one used by index.html).
   Rendered by /site-header.js into <header id="site-header">.
   Self-contained: every rule is scoped under .sh and the header
   carries its own colour tokens, so it looks identical on pages
   whose own page tokens differ from the home page.
   Theme convention (same as every page): bare :root is DARK,
   :root[data-theme="light"] is LIGHT, choice stored in
   localStorage 'proveit_theme'.
   ============================================================ */

/* ---------- tokens: DARK (bare) ---------- */
.sh{
  --sh-ink:#f3f3f7; --sh-muted:#9b9baa; --sh-faint:#6a6a78;
  --sh-line:rgba(255,255,255,.09); --sh-line2:rgba(255,255,255,.05);
  --sh-glass:rgba(255,255,255,.045); --sh-glass2:rgba(255,255,255,.07);
  --sh-red:#d9a441;
  --sh-glow-red:rgba(217,164,65,.55);
  --sh-header-bg:rgba(8,8,11,.66);
  --sh-menu-bg:#141210;
  --sh-shadow-lg:0 6px 14px rgba(0,0,0,.5), 0 44px 120px -44px rgba(0,0,0,.92);
  --sh-btn-red-ink:#1a1300;
  --sh-btn-red-grad:linear-gradient(180deg,#e6c268,#b8860b);
  --sh-btn-red-shadow:0 0 0 1px rgba(230,194,104,.4), 0 10px 34px -8px var(--sh-glow-red);
  --sh-btn-red-shadow-hover:0 0 0 1px rgba(230,194,104,.6), 0 14px 46px -8px var(--sh-glow-red);
  --sh-btn-glass-shadow:none; --sh-btn-glass-hover-border:rgba(255,255,255,.24);
  --sh-pad-x:clamp(18px,4vw,44px);
}
/* ---------- tokens: LIGHT ---------- */
:root[data-theme="light"] .sh{
  --sh-ink:#141319; --sh-muted:#5c5b68; --sh-faint:#9796a4;
  --sh-line:rgba(20,19,30,.11); --sh-line2:rgba(20,19,30,.06);
  --sh-glass:rgba(255,255,255,.66); --sh-glass2:rgba(255,255,255,.92);
  --sh-red:#b8860b;
  --sh-glow-red:rgba(184,134,11,.30);
  --sh-header-bg:rgba(244,245,248,.72);
  --sh-menu-bg:#ffffff;
  --sh-shadow-lg:0 2px 4px rgba(20,19,30,.05), 0 46px 110px -46px rgba(20,19,30,.40);
  --sh-btn-red-grad:linear-gradient(180deg,#d9a441,#b8860b);
  --sh-btn-red-shadow:0 10px 30px -8px var(--sh-glow-red);
  --sh-btn-red-shadow-hover:0 16px 44px -8px var(--sh-glow-red);
  --sh-btn-glass-shadow:0 1px 2px rgba(20,19,30,.05), 0 26px 60px -34px rgba(20,19,30,.30);
  --sh-btn-glass-hover-border:rgba(20,19,30,.24);
}

/* ---------- reset inside the header only ---------- */
.sh, .sh *{box-sizing:border-box; margin:0; padding:0;}
.sh{
  display:block; position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--sh-line2);
  background:var(--sh-header-bg);
  -webkit-backdrop-filter:saturate(1.3) blur(16px); backdrop-filter:saturate(1.3) blur(16px);
  color:var(--sh-ink); font-family:'Inter',system-ui,sans-serif; font-size:16px; font-weight:400;
  line-height:1.6; letter-spacing:-.012em; text-align:left; text-transform:none;
  -webkit-font-smoothing:antialiased;
}
/* :where() keeps these at single-class weight so component rules below win */
.sh :where(a){color:inherit; text-decoration:none;}
.sh :where(img){max-width:100%;}
.sh :where(button){font-family:inherit; letter-spacing:inherit;}
.sh :where(svg){display:block;}

.sh-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px var(--sh-pad-x); max-width:1200px; margin:0 auto;}

/* ---------- brand lockup ---------- */
.sh-brand{display:flex; align-items:center; gap:16px;}
.sh-parent{display:flex; flex-direction:column; gap:2px; padding-right:16px; border-right:1px solid var(--sh-line);}
.sh-parent-top{font-family:'Anton',sans-serif; font-size:14px; color:var(--sh-ink);}
.sh-it{color:var(--sh-red);}
.sh-parent-sub{font-family:'IBM Plex Mono',monospace; font-size:7.5px; letter-spacing:.22em; color:var(--sh-faint);}
.sh-product{display:flex; align-items:center; gap:11px;}
.sh-mark{width:38px; height:38px; flex-shrink:0;}
.sh-name{font-family:'Anton',sans-serif; font-size:22px; letter-spacing:.01em; line-height:1; color:var(--sh-ink);}
.sh-lg{color:var(--sh-red);}
.sh-tag{font-family:'Barlow Condensed',sans-serif; font-size:9.5px; color:var(--sh-faint); letter-spacing:.1em; text-transform:uppercase; margin-top:3px;}

/* ---------- desktop links ---------- */
.sh-links{display:flex; align-items:center; gap:28px;}
.sh-link, .sh-dd-trigger{font-size:14px; font-weight:500; color:var(--sh-muted); line-height:1; display:inline-flex; align-items:center; gap:4px; position:relative; transition:color .15s;}
.sh-link{padding-bottom:18px;}
.sh-link:hover, .sh-dd-trigger:hover, .sh-dd.open .sh-dd-trigger{color:var(--sh-ink);}
.sh-link.sh-active, .sh-dd.sh-active .sh-dd-trigger{color:var(--sh-ink);}
.sh-link.sh-active::after, .sh-dd.sh-active::after{content:""; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--sh-red); border-radius:2px; box-shadow:0 0 10px var(--sh-glow-red);}

/* Resources dropdown */
.sh-dd{position:relative; display:flex; align-items:center; padding-bottom:18px;}
.sh-dd-trigger{background:none; border:none; cursor:pointer; padding:0;}
.sh-dd-trigger svg{transition:transform .15s;}
.sh-dd.open .sh-dd-trigger svg{transform:rotate(180deg);}
.sh-dd-menu{display:none; position:absolute; top:100%; left:0; margin-top:6px; background:var(--sh-menu-bg); border:1px solid var(--sh-line); border-radius:11px; min-width:184px; box-shadow:var(--sh-shadow-lg); z-index:60; overflow:hidden; padding:6px; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);}
/* invisible bridge over the 6px gap so a hover-opened menu does not close on the way down */
.sh-dd-menu::before{content:""; position:absolute; left:0; right:0; top:-8px; height:8px;}
.sh-dd.open .sh-dd-menu{display:block;}
.sh-dd-menu a{display:block; padding:10px 12px; font-size:13px; line-height:1.6; color:var(--sh-muted); border-radius:9px;}
.sh-dd-menu a:hover, .sh-dd-menu a[aria-current="page"]{background:var(--sh-glass); color:var(--sh-ink);}

/* ---------- actions ---------- */
.sh-actions{display:flex; align-items:center; gap:12px;}
.sh-btn{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:14px; line-height:1.6; padding:13px 24px; border-radius:12px; cursor:pointer; border:1px solid transparent; white-space:nowrap; transition:transform .1s, box-shadow .25s, background .2s, border-color .2s;}
.sh-btn:active{transform:translateY(1px);}
.sh-btn-red{background:var(--sh-btn-red-grad); color:var(--sh-btn-red-ink); box-shadow:var(--sh-btn-red-shadow);}
.sh-btn-red:hover{box-shadow:var(--sh-btn-red-shadow-hover); transform:translateY(-1px);}
.sh-btn-outline{background:var(--sh-glass2); color:var(--sh-ink); border-color:var(--sh-line); box-shadow:var(--sh-btn-glass-shadow); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
.sh-btn-outline:hover{border-color:var(--sh-btn-glass-hover-border);}

/* ---------- theme toggle ---------- */
.sh-theme{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--sh-line); background:var(--sh-glass2); color:var(--sh-muted); cursor:pointer; transition:color .15s, border-color .15s; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); flex-shrink:0;}
.sh-theme:hover{color:var(--sh-ink); border-color:var(--sh-red);}
.sh-theme .sh-i-sun{display:block;}
.sh-theme .sh-i-moon{display:none;}
:root[data-theme="light"] .sh-theme .sh-i-sun{display:none;}
:root[data-theme="light"] .sh-theme .sh-i-moon{display:block;}

/* ---------- phone menu ---------- */
.sh-burger{display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0;}
.sh-burger span{display:block; width:22px; height:2px; background:var(--sh-ink); transition:.2s; margin:0 auto; border-radius:2px;}
.sh-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.sh-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.sh-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.sh-mobile{display:none; flex-direction:column; padding:0 var(--sh-pad-x); max-height:0; overflow:hidden; visibility:hidden; transition:max-height .25s ease, visibility 0s linear .25s; border-top:1px solid var(--sh-line);}
.sh-mobile.open{max-height:calc(100vh - 64px); overflow-y:auto; visibility:visible; transition:max-height .25s ease, visibility 0s; padding:16px var(--sh-pad-x) 20px;}
.sh-mobile a:not(.sh-btn){padding:13px 0; font-size:15px; border-bottom:1px solid var(--sh-line2); color:var(--sh-muted);}
.sh-mobile a.sh-active{color:var(--sh-red);}
.sh-mobile-actions{display:flex; gap:10px; margin-top:16px;}
.sh-mobile-actions .sh-btn{flex:1; justify-content:center; font-size:15px; padding:13px 0; border-bottom-color:var(--sh-line2);}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .sh-links{display:none;}
  .sh-burger{display:flex;}
  .sh-mobile{display:flex;}
  .sh-actions{gap:8px;}
  .sh-actions .sh-btn{padding:9px 14px; font-size:12px;}
  .sh-actions .sh-btn-red{display:none;}
}
@media(max-width:600px){ .sh-parent{display:none;} }
/* narrow phones: tighten spacing so the bar never overflows a 375px screen */
@media(max-width:420px){
  .sh-inner{gap:10px;}
  .sh-actions .sh-btn{padding:9px 12px;}
}
@media (prefers-reduced-motion:reduce){
  .sh-mobile, .sh-mobile.open, .sh-burger span, .sh-dd-trigger svg{transition:none;}
}