/* BitsSolved shared site header — replica of the main website's header as
   it loads: dark navy bar over the hero, white "BitsSolved .com" wordmark,
   white links, brand-gradient CTA. Used on every generated page (tools,
   services, categories) and the blog; the homepage keeps its own original
   header, which this matches visually. Values copied from public/index.html:
   hero gradient (primary-900/700/800), .gradient-text-light, .btn-primary.
   Edit here, nowhere else. Needs /site-header.js for the mobile menu. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Pixel-sampled from the homepage hero strip behind its (transparent)
     header, so the bar reads as the exact same backdrop. */
  background: linear-gradient(90deg, #121b34 0%, #182446 10%, #172445 20%, #121b33 30%, #10172c 40%, #11192f 50%, #0d1624 60%, #0e1b29 70%, #0f1e2b 80%, #0f202d 90%, #0f1e2c 100%);
  /* Match the homepage header's computed styles exactly: it renders in the
     Tailwind default (system) stack — NOT Inter — with a global -0.011em
     tracking and 1.5 line-height. Measured, not guessed. */
  font-family: -apple-system, 'system-ui', 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif;
  letter-spacing: -0.011em;
  line-height: 1.5;
}
.site-header nav {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.site-header .brand {
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
}
.site-header .brand .brand-word {
  background: linear-gradient(135deg, #ffffff, #e5e7eb);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.site-header .brand .brand-tld { color: #fff; }
.site-header .nav-links { display: flex; gap: 32px; align-items: center; }
.site-header .nav-links a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  transition: color 0.3s;
}
.site-header .nav-links a:hover { color: #ffffff; }
.site-header .nav-links a.nav-cta {
  background-image: linear-gradient(120deg, #1a2a63 0%, #3b5bd0 45%, #22d3ee 100%);
  background-size: 140% 140%;
  background-position: 0% 50%;
  color: #fff;
  padding: 0.85rem 1.55rem;
  border-radius: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 26px -10px rgba(37, 73, 160, 0.75);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-position 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header .nav-links a.nav-cta:hover {
  color: #fff;
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 18px 38px -12px rgba(37, 73, 160, 0.9);
}

/* Account widget (tools pages mount HeaderAuth into #nav-auth, after the
   CTA). Signed-out visitors get NOTHING here — the header stays identical
   to the homepage; sign-in happens through the usage-gate modal. Signed-in
   members get the avatar. :has() keeps the empty span out of the flex gap. */
.site-header .nav-auth { display: none; }
.site-header .nav-auth:has(*) { display: inline-flex; align-items: center; position: relative; }
.site-header .nav-user { position: relative; display: inline-flex; }
.site-header .nav-avatar {
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(120deg, #3b5bd0, #22d3ee); color: #fff; font-weight: 800; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.site-header .nav-menu {
  position: absolute; right: 0; top: 44px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  background: #fff; border: 1px solid #e2e7f3; border-radius: 12px;
  padding: 12px 14px; box-shadow: 0 2px 6px rgba(14, 21, 48, 0.06), 0 12px 32px rgba(14, 21, 48, 0.1); white-space: nowrap;
}
.site-header .nav-menu-email { font-size: 13px; color: #4c5675; font-weight: 600; }

/* Hamburger + mobile panel (same pattern as the homepage header) */
.site-header .menu-btn {
  display: none; background: none; border: none; cursor: pointer;
  padding: 8px; color: #ffffff;
}
.site-header .menu-btn svg { width: 24px; height: 24px; display: block; }
.site-header .menu-btn .i-close { display: none; }
.site-header .menu-btn.is-open .i-open { display: none; }
.site-header .menu-btn.is-open .i-close { display: block; }
.site-header .mobile-menu-panel {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  padding: 24px;
}
.site-header .mobile-menu-panel.open { display: block; }
.site-header .mobile-menu-panel a {
  display: block; padding: 8px 0;
  color: #1f2937; text-decoration: none; font-weight: 500; font-size: 16px;
}
.site-header .mobile-menu-panel a:hover { color: #3b5bd0; }
.site-header .mobile-menu-panel a.nav-cta {
  margin-top: 16px; text-align: center;
  background-image: linear-gradient(120deg, #1a2a63 0%, #3b5bd0 45%, #22d3ee 100%);
  color: #fff; padding: 0.85rem 1.55rem; border-radius: 14px; font-weight: 600;
}
.site-header .mobile-menu-panel a.nav-cta:hover { color: #fff; }

/* The full link row (8 links + auth + CTA) needs ~1150px; below that,
   collapse to the hamburger like the homepage does. */
@media (max-width: 1199px) {
  .site-header .nav-links { display: none; }
  .site-header .menu-btn { display: block; }
}