/* ================================================
   Premium Desktop Header — Pegasi Defense
   assets/css/header.css

   Load order: after per-page CSS, before media.css
   ================================================ */

/* ── Design tokens ─────────────────────────────── */
:root {
  --hdr-height:         72px;
  --hdr-height-sm:      56px;
  --hdr-logo-h:         36px;
  --hdr-logo-h-sm:      28px;
  --hdr-speed:          0.32s;
  --hdr-ease:           cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Shared motion system ───────────────────── */
  --ease:               cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:           120ms;
  --dur:                180ms;
  --dur-slow:           260ms;
}

/* ── Scrolled: deeper glass + stronger shadow ───── */
.header.scrolled {
  background: rgba(10, 12, 20, 0.97) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 4px 28px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
}

/* ── 3-column desktop grid ──────────────────────
   Logo [col 1]  |  Nav [col 2]  |  CTA [col 3]
   ─────────────────────────────────────────────── */
.header-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  height: var(--hdr-height);
  transition: height var(--hdr-speed) var(--hdr-ease);
}

.header.scrolled .header-container {
  height: var(--hdr-height-sm);
}

/* ── Logo ───────────────────────────────────────── */
.header-logo {
  justify-self: start;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  border-radius: 6px;
  transition: opacity var(--hdr-speed) var(--hdr-ease);
}

.header-logo:hover { opacity: 0.82; }

.header-logo:focus-visible {
  outline: 2px solid var(--gold-color, #b8860b);
  outline-offset: 4px;
}

.header-logo__img {
  height: var(--hdr-logo-h);
  width: auto;
  display: block;
  transition: height var(--hdr-speed) var(--hdr-ease);
}

.header.scrolled .header-logo__img {
  height: var(--hdr-logo-h-sm);
}

/* ── Nav link tweaks ─────────────────────────────
   Slightly larger than the 14px in minified CSS.
   ─────────────────────────────────────────────── */
.nav-link { font-size: 0.9375rem; }

/* Active page: always-on gold underline */
.nav-link.is-active       { color: #ffffff; }
.nav-link.is-active::after { width: 100%; }

/* Focus rings for keyboard users */
.nav-link:focus-visible {
  outline: 2px solid var(--gold-color, #b8860b);
  outline-offset: 4px;
  border-radius: 4px;
}

.dropdown-link:focus-visible {
  outline: 2px solid var(--gold-color, #b8860b);
  outline-offset: -2px;
  border-radius: 4px;
}

/* ── Contact CTA — column 3, right-aligned ──────── */
.header-cta { justify-self: end; }

/* ── Reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .header-container,
  .header-logo,
  .header-logo__img { transition: none !important; }
}

/* ── Mobile overrides (≤768px) ──────────────────── */
@media (max-width: 768px) {
  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    gap: 0;
  }

  .header-logo__img { height: var(--hdr-logo-h-sm); }

  /* Desktop CTA lives in the drawer on mobile */
  .header-cta { display: none !important; }

  /* Reset scrolled shrink — too subtle on small screens */
  .header.scrolled .header-container { height: 60px; }
  .header.scrolled .header-logo__img { height: var(--hdr-logo-h-sm); }
}

@media (max-width: 480px) {
  .header-container { height: 56px; }
}