/* ===========================================================================
   ServeHub — Global marketing chrome (rugged trade-built nav + footer)
   Loaded for signed-out users on every page. Uses self-contained `.sh-*`
   component classes (no global reset — Tailwind preflight already handles
   that) so it never bleeds into Tailwind-styled page bodies.
   =========================================================================== */

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

.sh-nav, .sh-sheet, .sh-foot {
  --paper:#f3efe6;
  --ink:#17191d;
  --ink-2:#22262c;
  --steel:#6a7079;
  --steel-2:#8b9099;
  --line-ink:#2e333b;
  --blue:#0ea5e9;
  --amber:#f5a31f;
  --green:#18794e;
  --shadow-sm:2px 2px 0 var(--ink);
  --wrap:1120px;
}

/* ---- shared buttons ---- */
.sh-btn{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;font-size:18px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 22px;border:2px solid var(--ink);border-radius:11px;
  background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;
  box-shadow:3px 3px 0 var(--ink);transition:transform .05s ease, box-shadow .05s ease;
}
.sh-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.sh-btn-block{width:100%}
.sh-btn-primary{background:var(--blue);color:#04222f}
.sh-btn-ghost{background:transparent;box-shadow:none}
.sh-btn-ghost:active{transform:none}
.sh-btn-sm{font-size:15px;padding:10px 16px;border-radius:9px;box-shadow:var(--shadow-sm)}
.sh-btn-sm:active{transform:translate(2px,2px)}

/* ---- shared brand ---- */
.sh-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.sh-brand .sh-mark{
  width:30px;height:30px;border-radius:8px;background:var(--blue);
  display:grid;place-items:center;border:2px solid #04222f;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);flex:0 0 auto;
}
.sh-brand .sh-mark svg{width:17px;height:17px}
.sh-brand .sh-logo{width:42px;height:42px;flex:0 0 auto;object-fit:contain}
.sh-brand .sh-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:27px;
  color:var(--paper);text-transform:uppercase;letter-spacing:.01em;
}
/* "Hub" carries the sky accent in the wordmark lockup (nav + footer are dark). */
.sh-brand .sh-name b{color:var(--blue);font-weight:inherit}

/* ---- nav ---- */
.sh-nav{
  position:sticky;top:0;z-index:60;background:var(--ink);border-bottom:2px solid #000;
  padding:0 20px;font-family:'Barlow',system-ui,sans-serif;
}
.sh-nav-in{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;max-width:var(--wrap);margin:0 auto;padding:13px 0;
}
.sh-nav-links{display:none;align-items:center;gap:22px}
.sh-nav-links a{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:#c6cace;text-decoration:none;transition:color .15s;
}
.sh-nav-links a:hover{color:var(--blue)}
.sh-nav-actions{display:flex;align-items:center;gap:9px}
.sh-nav-signin{display:none}
.sh-hamburger{
  width:42px;height:42px;border:2px solid var(--line-ink);border-radius:9px;
  background:var(--ink-2);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;padding:0;
}
.sh-hamburger span{display:block;width:18px;height:2px;background:var(--paper);margin:2.5px 0;border-radius:2px;transition:.2s}
.sh-hamburger.open span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.sh-hamburger.open span:nth-child(2){opacity:0}
.sh-hamburger.open span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

/* mobile menu sheet */
.sh-sheet{
  position:fixed;inset:0;z-index:55;background:rgba(8,10,13,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .2s;font-family:'Barlow',system-ui,sans-serif;
}
.sh-sheet.open{opacity:1;pointer-events:auto}
.sh-sheet-inner{
  position:absolute;top:0;left:0;right:0;background:var(--ink);
  border-bottom:3px solid var(--blue);padding:78px 22px 26px;
  transform:translateY(-12px);transition:transform .22s;
}
.sh-sheet.open .sh-sheet-inner{transform:translateY(0)}
.sh-sheet a{
  display:flex;align-items:center;justify-content:space-between;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:24px;text-transform:uppercase;
  color:var(--paper);text-decoration:none;padding:13px 4px;border-bottom:1px solid var(--line-ink);
}
.sh-sheet a .sh-tag{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--steel-2);text-transform:none}
.sh-sheet .sh-menu-cta{margin-top:18px;display:grid;gap:10px}

/* ---- footer ---- */
.sh-foot{
  background:var(--ink);color:var(--steel-2);padding:48px 20px 36px;
  font-family:'Barlow',system-ui,sans-serif;
}
.sh-foot-in{max-width:var(--wrap);margin:0 auto}
.sh-foot .sh-brand .sh-name{color:var(--paper)}
.sh-foot-blurb{font-size:14px;margin-top:14px;line-height:1.5;max-width:40ch}
.sh-foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px 16px;margin-top:30px}
.sh-foot h5{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:12px}
.sh-foot ul{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.sh-foot a{color:#c6cace;text-decoration:none;font-size:14px;font-weight:500}
.sh-foot a:hover{color:var(--blue)}
.sh-foot-tradepills{display:flex;flex-wrap:wrap;gap:6px;margin-top:28px}
.sh-foot-tradepills span{font-family:'JetBrains Mono',monospace;font-size:10.5px;border:1px solid var(--line-ink);
  border-radius:6px;padding:5px 8px;color:var(--steel-2);text-transform:uppercase}
.sh-foot-legal{margin-top:30px;padding-top:18px;border-top:1px solid var(--line-ink);font-size:12px;
  font-family:'JetBrains Mono',monospace;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;align-items:center;color:var(--steel-2)}
/* recolor the shared (light-themed) locale switcher for the dark footer */
.sh-foot-legal .sh-locale :is(span,a){color:var(--steel-2)}
.sh-foot-legal .sh-locale :is(span,a):hover{color:var(--blue)}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(min-width:760px){
  .sh-nav{padding:0 32px}
  .sh-foot{padding:48px 32px 36px}
  .sh-foot-in{display:grid;grid-template-columns:1.4fr 2.6fr;gap:40px;align-items:start}
  .sh-foot-cols{margin-top:0;grid-template-columns:repeat(4,1fr)}
}
@media(min-width:960px){
  .sh-nav-links{display:flex}
  .sh-nav-signin{display:inline-flex}
  .sh-hamburger{display:none}
  .sh-sheet{display:none}
}