@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

/* ==============================================================
   COLLECTiT! shared site header (rendered by /site-header.js).
   One copy of the marketing header for every public page.

   Everything is scoped under .sh and carries its own colour tokens,
   so the header looks identical on pages whose own tokens differ.
   Theme convention matches the rest of the site: the bare scope is
   the DARK palette, :root[data-theme="light"] is the LIGHT palette,
   and the choice is stored in localStorage under 'proveit_theme'.
   ============================================================== */
.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:#ff2b30; --sh-glow-red:rgba(255,43,48,.55);
  --sh-header-bg:rgba(8,8,11,.66);
  --sh-menu-bg:#111118;
  --sh-shadow-lg:0 6px 14px rgba(0,0,0,.5), 0 44px 120px -44px rgba(0,0,0,.92);
  --sh-btn-red-grad:linear-gradient(180deg,#ff3a3f,#cf070d);
  --sh-btn-red-shadow:0 0 0 1px rgba(255,90,94,.4), 0 10px 34px -8px var(--sh-glow-red);
  --sh-btn-red-shadow-hover:0 0 0 1px rgba(255,120,124,.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-r-sm:11px; --sh-r-xs:9px; --sh-r-pill:100px;
}
: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:#e8161a; --sh-glow-red:rgba(232,22,26,.34);
  --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,#f42027,#c5070d);
  --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);
}

/* ---------- scope reset (independent of each page's own reset) ---------- */
.sh, .sh *, .sh *::before, .sh *::after{box-sizing:border-box; margin:0; padding:0;}
.sh{position:sticky; top:0; z-index:50; display:block; 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;
  -webkit-font-smoothing:antialiased; text-align:left;}
.sh a{color:inherit; text-decoration:none;}
.sh ul{list-style:none;}
.sh img{max-width:100%;}
.sh button{font-family:inherit; letter-spacing:inherit;}

.sh .sh-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px clamp(18px,4vw,44px); max-width:1200px; margin:0 auto;}

/* ---------- brand lockup ---------- */
.sh .sh-brand{display:flex; align-items:center; gap:16px;}
.sh .sh-parent{display:flex; flex-direction:column; gap:2px; padding-right:16px; border-right:1px solid var(--sh-line); line-height:1.6;}
.sh .sh-parent .sh-top{font-family:'Anton',sans-serif; font-size:14px; color:var(--sh-ink);}
.sh .sh-parent .sh-sub{font-family:'IBM Plex Mono',monospace; font-size:7.5px; letter-spacing:.22em; color:var(--sh-faint);}
.sh .sh-it{color:var(--sh-red);}
.sh .sh-product{display:flex; align-items:center; gap:11px;}
.sh .sh-mark{width:38px; height:38px; flex-shrink:0;}
.sh .sh-name{font-family:'Anton',sans-serif; font-size:22px; letter-spacing:.01em; line-height:1; color:var(--sh-ink);}
.sh .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 .sh-links{display:flex; align-items:center; gap:28px;}
.sh .sh-link{font-size:14px; font-weight:500; color:var(--sh-muted); padding-bottom:18px; position:relative; line-height:1; display:inline-flex; align-items:center; gap:4px; transition:color .15s;}
.sh .sh-link.is-active{color:var(--sh-ink);}
.sh .sh-link.is-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);}
.sh .sh-link:hover{color:var(--sh-ink);}

/* Resources dropdown */
.sh .sh-dd{position:relative; display:flex; align-items:center; padding-bottom:18px;}
.sh .sh-dd-trigger{padding-bottom:0; background:none; border:0; cursor:pointer;}
.sh .sh-dd-trigger svg{transition:transform .15s;}
.sh .sh-dd-trigger[aria-expanded="true"]{color:var(--sh-ink);}
.sh .sh-dd-trigger[aria-expanded="true"] svg{transform:rotate(180deg);}
.sh .sh-dd-trigger.is-active::after{bottom:-18px;}
.sh .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:var(--sh-r-sm); 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);}
.sh .sh-dd-menu::before{content:""; position:absolute; left:0; right:0; top:-8px; height:8px;}
.sh .sh-dd.open .sh-dd-menu{display:block;}
.sh .sh-dd-menu a{display:block; padding:10px 12px; font-size:13px; color:var(--sh-muted); border-radius:var(--sh-r-xs); line-height:1.6;}
.sh .sh-dd-menu a:hover{background:var(--sh-glass); color:var(--sh-ink);}
.sh .sh-dd-menu a[aria-current="page"]{color:var(--sh-red);}

/* ---------- actions + buttons ---------- */
.sh .sh-actions{display:flex; align-items:center; gap:12px;}
.sh .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 .sh-btn:active{transform:translateY(1px);}
.sh .sh-btn-red{background:var(--sh-btn-red-grad); color:#fff; box-shadow:var(--sh-btn-red-shadow);}
.sh .sh-btn-red:hover{box-shadow:var(--sh-btn-red-shadow-hover); transform:translateY(-1px);}
.sh .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 .sh-btn-outline:hover{border-color:var(--sh-btn-glass-hover-border);}
.sh [hidden]{display:none !important;}

/* Account menu (signed-in visitors) */
.sh .sh-account{position:relative;}
.sh .sh-account-btn{display:flex; align-items:center; gap:8px; background:var(--sh-glass2); border:1px solid var(--sh-line); color:var(--sh-ink); padding:8px 14px; cursor:pointer; font-size:13px; font-weight:500; line-height:1.6; border-radius:var(--sh-r-pill); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:border-color .15s;}
.sh .sh-account-btn:hover{border-color:var(--sh-red);}
.sh .sh-avatar{width:22px; height:22px; border-radius:50%; background:var(--sh-btn-red-grad); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; text-transform:uppercase;}
.sh .sh-avatar-img{width:22px; height:22px; border-radius:50%; object-fit:cover; flex-shrink:0; display:none;}
.sh .sh-account-menu{display:none; position:absolute; top:100%; right:0; margin-top:10px; background:var(--sh-menu-bg); border:1px solid var(--sh-line); border-radius:var(--sh-r-sm); min-width:210px; box-shadow:var(--sh-shadow-lg); z-index:60; overflow:hidden; padding:6px; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);}
.sh .sh-account.open .sh-account-menu{display:block;}
.sh .sh-account-email{padding:11px 12px; font-size:11.5px; color:var(--sh-faint); border-bottom:1px solid var(--sh-line); word-break:break-all; margin-bottom:4px; line-height:1.6;}
.sh .sh-account-menu a, .sh .sh-account-menu button{display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:10px 12px; font-size:13px; font-weight:400; line-height:1.6; color:var(--sh-muted); border-radius:var(--sh-r-xs);}
.sh .sh-account-menu a:hover, .sh .sh-account-menu button:hover{background:var(--sh-glass); color:var(--sh-ink);}

/* Theme toggle */
.sh .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 .sh-theme:hover{color:var(--sh-ink); border-color:var(--sh-red);}
.sh .sh-theme .sh-i-sun{display:block;}
.sh .sh-theme .sh-i-moon{display:none;}
:root[data-theme="light"] .sh .sh-theme .sh-i-sun{display:none;}
:root[data-theme="light"] .sh .sh-theme .sh-i-moon{display:block;}

/* ---------- phone menu ---------- */
.sh .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 .sh-burger span{display:block; width:22px; height:2px; background:var(--sh-ink); transition:.2s; margin:0 auto; border-radius:2px;}
.sh .sh-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.sh .sh-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.sh .sh-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.sh .sh-mobile{display:none; flex-direction:column; padding:0 clamp(18px,4vw,44px); max-height:0; overflow:hidden; visibility:hidden; transition:max-height .25s ease, visibility 0s linear .25s; border-top:1px solid var(--sh-line);}
.sh .sh-mobile.open{max-height:calc(100vh - 64px); overflow-y:auto; visibility:visible; transition:max-height .25s ease, visibility 0s linear 0s; padding:16px clamp(18px,4vw,44px) 20px;}
/* Applies to the action buttons too (same as the original home-page menu). */
.sh .sh-mobile a, .sh .sh-mobile button.sh-btn{padding:13px 0; font-size:15px; line-height:1.6; border-bottom:1px solid var(--sh-line2); color:var(--sh-muted);}
.sh .sh-mobile > a[aria-current="page"]{color:var(--sh-red);}
.sh .sh-mobile-actions{display:flex; gap:10px; margin-top:16px;}
.sh .sh-mobile-actions .sh-btn{flex:1; justify-content:center;}
/* the generic ".sh-mobile a" rule above would grey these button links; restore button colours */
.sh .sh-mobile .sh-mobile-actions .sh-btn{padding:13px 24px; font-size:14px; border:1px solid transparent;}
.sh .sh-mobile .sh-mobile-actions .sh-btn-red{color:#fff;}
.sh .sh-mobile .sh-mobile-actions .sh-btn-outline{color:var(--sh-ink); border-color:var(--sh-line);}

@media(max-width:900px){
  .sh .sh-links{display:none;}
  .sh .sh-burger{display:flex;}
  .sh .sh-mobile{display:flex;}
  .sh .sh-actions{gap:8px;}
  .sh .sh-actions .sh-btn{padding:9px 14px; font-size:12px;}
  .sh .sh-actions .sh-btn-red{display:none;}
  .sh .sh-account-btn .sh-account-name, .sh .sh-account-btn svg{display:none;}
  .sh .sh-account-btn{padding:7px;}
}
@media(max-width:600px){
  .sh .sh-parent{display:none;}
  /* Signed-in on a phone: Dashboard is already in the phone menu, and the
     extra button pushed the header wider than the screen. */
  .sh #sh-dashboard-link{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .sh .sh-mobile, .sh .sh-burger span, .sh .sh-dd-trigger svg{transition:none;}
}