/* =============================================================
   SHARED SITE HEADER
   Used across every page via the <header class="site-header ..."> pattern.
   Two variants:
     .site-header--hero     → landing page; bigger, more presence
     .site-header--minimal  → every utility page (configurator, guides,
                              troubleshooter, FAQ, wallet-guide, releases, docs)
   Both use the same SVG logo so branding stays consistent.
   ============================================================= */

.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid var(--ink, #1a1a1a);
  background: var(--paper, #f4ead5);
}

/* -------------------------------------------------------------
   Logo lockup — shared
   ------------------------------------------------------------- */
.site-header .site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink, #1a1a1a);
}
.site-header .site-logo:hover { opacity: 0.85; }
.site-header .site-logo img {
  display: block;
  height: auto;
}

/* -------------------------------------------------------------
   MINIMAL variant — utility pages
   ------------------------------------------------------------- */
.site-header--minimal {
  padding: 0.7rem 1.25rem;
}
.site-header--minimal .site-logo img {
  height: 32px;
}
.site-header--minimal .site-header-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-body, 'Space Mono', monospace);
  font-size: 0.85rem;
}
.site-header--minimal .site-header-nav a {
  color: var(--ink, #1a1a1a);
  text-decoration: none;
}
.site-header--minimal .site-header-nav a:hover {
  color: var(--red, #d6372e);
}
.site-header--minimal .site-header-nav .cta-small {
  background: var(--mustard, #e8b62c);
  padding: 0.35rem 0.8rem;
  border: 2px solid var(--ink, #1a1a1a);
  font-family: var(--font-heading, 'Archivo Black', sans-serif);
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.site-header--minimal .site-header-nav .cta-small:hover {
  background: var(--red, #d6372e);
  color: var(--cream, #fff5d6);
}

/* -------------------------------------------------------------
   HERO variant — landing page
   Slightly larger logo, full nav, more presence
   ------------------------------------------------------------- */
.site-header--hero {
  padding: 1rem 2rem;
}
.site-header--hero .site-logo img {
  height: 48px;
}
.site-header--hero .site-header-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-heading, 'Archivo Black', sans-serif);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.site-header--hero .site-header-nav a {
  color: var(--ink, #1a1a1a);
  text-decoration: none;
}
.site-header--hero .site-header-nav a:hover {
  color: var(--red, #d6372e);
}
.site-header--hero .site-header-nav .nav-cta {
  background: var(--red, #d6372e);
  color: var(--cream, #fff5d6);
  padding: 0.55rem 1.1rem;
  border: 2px solid var(--ink, #1a1a1a);
  box-shadow: 4px 4px 0 var(--ink, #1a1a1a);
  font-family: var(--font-display, 'Bungee', sans-serif);
  transition: transform 0.1s, box-shadow 0.1s;
}
.site-header--hero .site-header-nav .nav-cta:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ink, #1a1a1a);
  color: var(--cream, #fff5d6);
}

/* -------------------------------------------------------------
   RESPONSIVE — collapse on small screens
   ------------------------------------------------------------- */
@media (max-width: 640px) {
  .site-header--hero {
    padding: 0.7rem 1rem;
    flex-wrap: wrap;
  }
  .site-header--hero .site-logo img { height: 36px; }
  .site-header--hero .site-header-nav {
    gap: 0.8rem;
    font-size: 0.75rem;
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .site-header--minimal .site-header-nav {
    font-size: 0.75rem;
  }
  .site-header--minimal .site-header-nav .cta-small {
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
  }
}