/* =========================================================
   Satphone site chrome — the header + search overlay for non-homepage
   routes (cart, checkout). Reuses the global --spc-* tokens from
   cart-drawer.css. Loaded only where this header is used.
   ========================================================= */

/* Dark page ground + room below the fixed header */
.page-wrapper { padding-top: 74px; background: var(--spc-bg); }
body { background: var(--spc-bg); color: var(--spc-fg); }

/* ---------- Header ---------- */
/* The background is owned by the header block in base.css — the bar is
   transparent at the top of the page and picks up a blurred, tinted backing once
   scrolled. Setting a solid background here would sit *behind* that backing and
   leave its blur with nothing to sample. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  /* Bottom rule from the start, rather than only once scrolled. base.css opens
     it transparent and reveals it on .is-stuck; here it is on immediately, so
     the bar reads as a defined edge against these pages' flat backgrounds.
     Scoping is the file itself: this stylesheet is loaded by every route that
     uses the Satphone header EXCEPT the homepage, which carries its own chrome
     and keeps the borderless-until-scrolled treatment over its hero.
     Only the colour is set — base.css already declares the 1px width, so the
     bar's height does not change. It loads first, so this wins on source order
     at equal specificity. */
  border-bottom-color: var(--spc-line);
}
/* Full-bleed, inset by the shared gutter — same as the footer, so the logo and
   the sign-in block sit on the footer's left and right edges at every width.
   It was capped at 1280px and centred before, which only lined up with the
   footer near a ~1330px viewport and drifted inward on anything wider. */
.site-header .header-inner {
  display: flex; align-items: center; gap: 2rem; height: 74px;
  max-width: none; margin: 0; padding: 0 var(--spc-gutter); width: 100%;
}
.site-header .sp-logo { display: inline-flex; align-items: center; }
.site-header .sp-logo-img { height: 34px; width: auto; display: block; }
.site-header .main-nav { display: flex; gap: 1.8rem; margin-left: 1rem; }
.site-header .main-nav a {
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--spc-muted); text-decoration: none; transition: color .15s ease;
}
.site-header .main-nav a:hover { color: var(--spc-fg); }
.site-header .header-actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.site-header .icon-btn { background: none; border: 0; color: var(--spc-fg); cursor: pointer; padding: 4px; display: inline-flex; }
.site-header .icon-btn svg { width: 20px; height: 20px; }
.site-header .nav-divider { width: 1px; height: 22px; background: var(--spc-line); flex-shrink: 0; }
.site-header .nav-signin {
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--spc-muted); white-space: nowrap; text-decoration: none; transition: color .15s ease;
}
.site-header .nav-signin:hover { color: var(--spc-fg); }
.site-header .burger { display: none; background: none; border: 0; color: var(--spc-fg); cursor: pointer; }
.site-header .burger svg { width: 26px; height: 26px; }

/* ---------- Search overlay ---------- */
.search-overlay { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; transition: visibility 0s linear .4s; }
.search-overlay.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.search-scrim { position: absolute; inset: 0; background: rgba(5,10,20,.6); opacity: 0; transition: opacity .35s ease; }
.search-overlay.is-open .search-scrim { opacity: 1; }
.search-bar {
  position: absolute; top: 0; left: 0; right: 0; background: var(--spc-bg-2);
  border-bottom: 1px solid var(--spc-accent); box-shadow: 0 20px 60px rgba(0,0,0,.45);
  transform: translateY(-100%); transition: transform .38s cubic-bezier(.22,.61,.36,1);
}
.search-overlay.is-open .search-bar { transform: translateY(0); }
/* Matches the header it drops out of, so the search icon and field keep the
   same left edge as the logo above them. */
.search-bar-inner { display: flex; align-items: center; gap: 1.25rem; min-height: 104px; max-width: none; margin: 0; padding: 0 var(--spc-gutter); }
.search-ico svg { width: 26px; height: 26px; color: var(--spc-accent); display: block; }
.search-form { flex: 1; margin: 0; }
.search-overlay .search-field {
  width: 100%; background: transparent; outline: 0; border: 0; border-bottom: 1px solid transparent;
  border-radius: 0; box-shadow: none; padding: 0 0 10px; color: var(--spc-fg);
  font-family: var(--spc-display); text-transform: uppercase; letter-spacing: .02em; line-height: 1.1;
  font-size: clamp(1.4rem, 3.2vw, 2.4rem); transition: border-color .2s ease;
}
.search-overlay .search-field:focus { border-bottom-color: var(--spc-accent); }
.search-overlay .search-field::placeholder { color: var(--spc-muted); }
.search-close { flex-shrink: 0; background: none; border: 0; color: var(--spc-fg); cursor: pointer; padding: 8px; line-height: 0; transition: color .15s ease; }
.search-close svg { width: 26px; height: 26px; display: block; }
.search-close:hover { color: var(--spc-accent); }

@media (max-width: 900px) {
  .site-header .main-nav {
    position: fixed; inset: 74px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--spc-bg-2); border-bottom: 1px solid var(--spc-line);
    max-height: 0; overflow: hidden; margin: 0; transition: max-height .3s ease;
  }
  body.nav-open .site-header .main-nav { max-height: 60vh; }
  .site-header .main-nav a { padding: 1rem 24px; border-top: 1px solid var(--spc-line); }
  .site-header .burger { display: block; }
}