/**
 * StreamVerse — Header
 * Source of truth: layout-spec-header-hero.md v1.11, Part A.
 * Every rule below is annotated with the spec section it implements.
 */

/* ------------------------------------------------------------------
 * A1 — Layout structure / container
 * ------------------------------------------------------------------ */

.header {
  /* fixed, not sticky: sticky still reserves its own space in normal
     flow at scroll position 0, which pushes the Hero down to start
     exactly where the header ends — the two sit adjacent, not
     overlapping, so a transparent background only reveals the plain
     page background behind it (not the Hero), and the header still
     reads as a separate solid block at first paint. Removing it from
     flow with `fixed` lets Hero start at y:0 underneath it instead,
     which is what "floats above the Hero" actually requires — the
     header's own height/spacing/nav layout are completely unchanged,
     only the outer positioning mechanism is. */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  /* Default (top-of-page) state: genuinely transparent, not a tinted
     glass — the header should read as floating directly over the Hero
     artwork/carousel, the way Netflix/Apple TV+/Disney+ headers do,
     not as a translucent bar sitting on top of it. No blur here either:
     blurring nothing meaningful (transparent has nothing to soften)
     and would only cost paint performance for no visual benefit. */
  background: transparent;
  /* Slightly rounded bottom corners only — a soft, detached/floating
     feel without turning the full-width bar into an inset pill, which
     would require a layout change beyond the header's own styling. */
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  /* Barely-there separation, not a visible line — enough that the
     header's own edge is still perceptible against very light Hero
     artwork, without ever reading as a border/panel edge. No shadow at
     all in this state: a floating transparent bar has nothing under
     it to cast one. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: none;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* A9 — scroll state: once scrolled past the sentinel (~80px, see
   .header__sentinel below), pick up a real glass fill so nav text
   stays legible over whatever page content is now behind it — this is
   the one state where the header should read as a distinct surface,
   not the default. */
.header.is-scrolled {
  background: rgba(8, 10, 15, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.header__inner {
  max-width: var(--grid-max-width);
  margin-inline: auto;
  height: 56px; /* mobile, <768px */
  display: grid;
  /* A3/A6: three-track grid — the two outer 1fr tracks always absorb
     remaining space equally, which keeps the middle (nav) track's
     horizontal center pinned to the inner wrapper's exact center point
     regardless of how wide the logo or CTA render — this is the CSS
     Grid mechanism A3 requires instead of flexbox space-between, which
     would let the nav's position drift if either side's content width
     changes (e.g. a longer CTA label). */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: var(--space-5); /* <768px, matches .container rule */
}

@media (min-width: 768px) {
  .header__inner {
    height: 64px; /* >=768px per A1 */
    padding-inline: var(--space-6); /* 768–1023px */
  }
}

@media (min-width: 1024px) {
  .header__inner {
    padding-inline: var(--space-7); /* >=1024px */
  }
}

/* ------------------------------------------------------------------
 * A11 — Logo
 * ------------------------------------------------------------------ */

.header__logo {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.header__logo-mark {
  height: 28px; /* mobile per A11 */
  width: auto;
  color: var(--color-accent);
}

@media (min-width: 768px) {
  .header__logo-mark {
    height: 32px; /* desktop per A11 */
  }
}

.header__logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--color-text-primary);
}

.header__logo-text-accent {
  color: var(--color-accent);
}

/* ------------------------------------------------------------------
 * A3/A4 — Nav (desktop only, >=1024px)
 * ------------------------------------------------------------------ */

.header__nav {
  display: none;
  grid-column: 2;
}

@media (min-width: 1024px) {
  .header__nav {
    display: flex;
    align-items: center;
    gap: var(--space-6); /* A4: 32px between links */
  }
}

.header__nav-link {
  font-family: var(--font-body);
  font-size: var(--text-body-sm); /* A13 */
  font-weight: 400; /* A2 */
  color: #F8FAFC; /* explicit per request — brighter than the site's default
                      secondary-text token, specifically so nav links stay
                      legible over bright Hero artwork */
  /* Small, dark text-shadow purely for legibility over bright/busy Hero
     images — not a colored glow, and much lighter than the accent-glow
     treatment this used to have on hover. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition:
    color var(--duration-micro) var(--ease-standard),
    text-shadow var(--duration-micro) var(--ease-standard); /* 200ms, within the requested 200-300ms range */
}

.header__nav-link:hover {
  /* Per explicit request: the exact same hover color already used by
     the Footer's own links (.site-footer__link:hover) — the existing
     --color-accent-hover token, reused as-is rather than introducing a
     new color. Transition is unchanged (still the existing color
     transition above), and the legibility text-shadow is untouched. */
  color: var(--color-accent-hover);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* A9 — current-page indicator, the only accent color in the Header */
.header__nav-link[aria-current="page"] {
  color: var(--color-accent);
}

/* ------------------------------------------------------------------
 * A12 — CTA (desktop only, >=1024px)
 * ------------------------------------------------------------------ */

.header__cta,
.header__drawer .btn--secondary {
  /* Solid brand-purple fill with white text — a "clean" filled button,
     not the translucent glass/gradient treatment this used to have.
     Deliberately NO glow at rest or on hover (unlike .btn--primary,
     which the Hero's own "Subscription Now" CTA uses) — this button
     needs to read as clearly secondary to that one, not compete with
     it, while still being a real, noticeable purple CTA. */
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
  border: none;
  border-radius: var(--radius-sm); /* 8px — smaller than .btn's own default
                                       12px (--radius-md), per request */
  box-shadow: none;
}

.header__cta {
  grid-column: 3;
  justify-self: end;
  display: none;
}

@media (min-width: 1024px) {
  .header__cta {
    display: inline-flex;
  }
}

.header__cta:hover,
.header__drawer .btn--secondary:hover {
  /* Bright Violet (one step up from the base accent) + a very small
     lift — noticeably subtler than the Hero CTA's hover (no glow, half
     the translateY distance), so hovering this never reads as more
     prominent than the Hero's own primary action. */
  background-color: var(--color-accent-hover);
  color: var(--color-text-on-accent);
  transform: translateY(-1px);
}

/* A14: the visible 40px Small CTA does not grow to meet the 44px tap
   target — the .btn--hit-area-44 ::before (buttons.css) extends the
   invisible hit area by 2px on each edge instead. */

/* ------------------------------------------------------------------
 * A7/A8 — Mobile / tablet menu toggle (<1024px)
 * ------------------------------------------------------------------ */

.header__menu-toggle {
  grid-column: 3;
  justify-self: end;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

@media (min-width: 1024px) {
  .header__menu-toggle {
    display: none;
  }
}

/* 44x44 tap target via invisible hit-area extension, same technique as A14 */
.header__menu-toggle::before {
  content: "";
  position: absolute;
  inset: -2px;
}

.header__menu-toggle-icon {
  width: 24px;
  height: 24px;
  color: var(--color-text-primary);
}

/* ------------------------------------------------------------------
 * A7/A8/A9 — Drawer (tablet/mobile)
 * ------------------------------------------------------------------ */

.header__drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(320px, 85vw);
  background-color: var(--color-bg-base);
  border-left: 1px solid var(--color-border-subtle);
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transform: translateX(100%);
  transition: transform var(--duration-transition) var(--ease-standard); /* A10: 300ms */
  z-index: 101;
}

.header__drawer.is-open {
  transform: translateX(0);
}

@media (min-width: 1024px) {
  .header__drawer {
    display: none;
  }
}

.header__drawer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.header__drawer-link {
  font-family: var(--font-body);
  font-size: var(--text-body); /* larger than desktop nav — comfortable tap target in drawer */
  font-weight: 400;
  color: var(--color-text-secondary);
  padding-block: var(--space-2);
}

.header__drawer-link[aria-current="page"] {
  color: var(--color-accent);
}

/* The Secondary CTA is a full-width item inside the drawer, placed after
   the nav links in normal document order (Home/Pricing/24H Trial/FAQ/
   Contact, then Get Started) — no flex `order` override needed. */
.header__drawer .btn {
  width: 100%;
}

.header__scrim {
  position: fixed;
  inset: 0;
  background-color: rgba(8, 10, 15, 0.6); /* --color-bg-base (#080A0F) at 60% opacity */
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease; /* A10: 200ms scrim fade */
  z-index: 99;
}

.header__scrim.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ------------------------------------------------------------------
 * A9 — Scroll sentinel (IntersectionObserver target, not a scroll listener)
 * ------------------------------------------------------------------ */

.header__sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  /* 80px — the "scrolled" state (see .header.is-scrolled) now activates
     once the user has scrolled roughly this far, per the 50–100px
     request, instead of the previous ~1px (i.e. almost immediately).
     The IntersectionObserver in header.js toggles the class once this
     sentinel scrolls out of view — still not a scroll-event listener,
     just a taller target. */
  height: 80px;
  pointer-events: none;
}