/* =========================================================
   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); }
/* Full-screen menu footer (support link + copyright) — only shown in the mobile
   full-screen menu (revealed in the ≤900 block below), hidden on desktop. */
.site-header .sp-nav-footer { display: none; }
.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); }
/* Handheld user icon inside the Sign In link — hidden until ≤448px */
.site-header .nav-signin { display: inline-flex; align-items: center; }
/* #fff (not --spc-fg) so the glyph reads at full strength against the bar,
   matching the sign-in user icon beside it. */
.site-header .nav-signin-ico { display: none; align-items: center; line-height: 0; color: #fff; }
.site-header .nav-signin-ico svg { width: 24px; height: 24px; display: block; }
/* Animated hamburger — three bars (short–long–short) that morph into an arrow
   when the menu opens (body.nav-open). Adapted from the reference Tailwind
   snippet: w-8 / gap-2 / h-[3px], 225deg + -45deg rotations, 12px translates. */
.site-header .burger {
  display: none; flex-direction: column; justify-content: space-between;
  width: 32px; height: 24px;
  background: none; border: 0; padding: 0; color: var(--spc-fg); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Luma paints button:hover/:focus/:active a light grey (reads as a white box on
   the dark bar) and a white focus outline. Kill both — higher specificity than
   Luma's button:focus. Keep an accessible orange outline for keyboard only. */
.site-header .burger:hover,
.site-header .burger:focus,
.site-header .burger:focus-visible,
.site-header .burger:active { background: none; box-shadow: none; outline: none; }
.site-header .burger .burger-bar {
  height: 2px; background: currentColor;   /* square corners */
  transition: transform .5s ease, width .5s ease, background-color .3s ease;
}
.site-header .burger .burger-bar:nth-child(1) { width: 50%; transform-origin: right; }
.site-header .burger .burger-bar:nth-child(2) { width: 100%; }
.site-header .burger .burger-bar:nth-child(3) { width: 50%; align-self: flex-end; transform-origin: left; }
/* Active (menu open): bars turn theme orange and morph into an arrow. */
body.nav-open .site-header .burger { color: var(--spc-accent); }
body.nav-open .site-header .burger .burger-bar:nth-child(1) { transform: translate(-12px, -1px) rotate(225deg); }
body.nav-open .site-header .burger .burger-bar:nth-child(2) { transform: rotate(-45deg); }
body.nav-open .site-header .burger .burger-bar:nth-child(3) { transform: translate(12px, 1px) rotate(225deg); }

/* ---------- 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) {
  /* Full-screen mobile menu — fills the viewport below the 74px navbar. Shown
     via body.nav-open; the items are staggered in with GSAP (home.ts). */
  .site-header .main-nav {
    position: fixed; inset: 74px 0 0 0; z-index: 90; margin: 0;
    flex-direction: column; justify-content: flex-start; gap: 0;
    background: var(--spc-bg-2); overflow-y: auto;
    visibility: hidden; pointer-events: none;
  }
  body.nav-open .site-header .main-nav { visibility: visible; pointer-events: auto; }
  .site-header .main-nav a {
    position: relative; z-index: 1;
    padding: 2.2rem 16px; border-top: 1px solid var(--spc-line);
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 32px; font-weight: 400; letter-spacing: 4px; text-align: center;
    color: #fff;
  }
  .site-header .main-nav a.sp-nav-support { border-top: 0; }
  .site-header .main-nav > a:last-of-type { border-bottom: 1px solid var(--spc-line); }
  /* Footer pinned to the bottom of the full-screen menu; the links above start
     at the top of the panel (this block is taken out of flow). */
  .site-header .sp-nav-footer {
    display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
    position: absolute; left: 0; right: 0; bottom: 30px; z-index: 1;
  }
  .site-header .main-nav a.sp-nav-support {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: 0; border: 0;
    font-family: 'Barlow', system-ui, sans-serif; text-transform: uppercase;
    font-size: 15px; font-weight: 600; letter-spacing: .18em; color: var(--spc-fg);
  }
  .site-header .sp-nav-support-ico { display: inline-flex; line-height: 0; }
  .site-header .sp-nav-support-ico svg { width: 24px; height: 24px; display: block; }
  .site-header .sp-nav-copyright {
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 12px; font-weight: 300; letter-spacing: .04em; color: var(--spc-muted);
  }
  .site-header .burger { display: flex; }
  /* Full-bleed navbar with a flush 16px edge inset on mobile (desktop keeps the
     wider --spc-gutter). */
  .site-header .header-inner { padding: 0 var(--spc-gutter); }
}

/* ---------- Handheld navbar layout (≤448px) ----------
   Menu button on the left, brand logo centred, search / cart / Sign In on the
   right. The burger normally lives inside .header-actions (right cluster); here
   it and the logo are taken out of flow and pinned, leaving .header-actions as
   the only in-flow child so it keeps its right alignment (margin-left:auto). */
@media (max-width: 448px) {
  .site-header .header-inner { position: relative; }
  .site-header .burger {
    position: absolute; left: var(--spc-gutter); top: 50%; transform: translateY(-50%); margin: 0;
  }
  .site-header .sp-logo {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  }
  /* Sign In → user icon */
  .site-header .nav-signin-text { display: none; }
  .site-header .nav-signin-ico { display: inline-flex; }
}