/* ===========================
   Header Styles (merged)
   =========================== */

header {
  background: var(--brand-blue, #1E4C8F); /* fallback if variable isn't ready */
}

/* Base header styling */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--brand-blue);
  color: var(--white);
  box-shadow: 0 2px 10px rgba(11,44,85,0.25);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Push the page content down so it doesn't hide under the fixed header */
body {
  padding-top: 68px; /* match header height */
}

/* Animation keyframes */
@keyframes slideDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Scrolled state (animates in and darkens background slightly) */
header.scrolled {
  animation: slideDown 0.4s ease forwards;
  background: var(--brand-blue-dark);
  box-shadow: 0 4px 12px rgba(11,44,85,0.35);
}

/* Navigation layout */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.brand {
  display: block;
}

.brand span {
  font-size: 18px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-weight: 500;
}

.nav-links a {
  opacity: 0.95;
}

.nav-links a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--brand-sky);
  color: var(--white);
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(79,163,209,0.35);
}

header .cta--outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.7);
  box-shadow: none;
}

.mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 24px;
}

/* Skeleton to avoid header flash before partial loads */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 68px; /* match header height */
  background: var(--brand-blue, #1E4C8F);
  box-shadow: 0 2px 10px rgba(11,44,85,0.25);
  z-index: 999;
  pointer-events: none; /* prevents clicks on the skeleton */
}

/* After the real header is injected */
#site-header.hydrated {
  position: static;
  height: 0;
  background: transparent;
  box-shadow: none;
  z-index: auto;
  pointer-events: auto; /* <-- re-enable clicks */
}

/* ==== Compact/Wider Nav Tweaks ==== */
/* Make the header container a touch wider */
header .container.nav {
  max-width: 1360px;              /* was ~1200 via --container */
  padding: 0 28px;                 /* a bit more breathing room */
}

/* Tighten link sizing & spacing */
.nav-links {
  gap: 16px;                       /* was var(--space-6) ~24px */
  font-size: 15px;                 /* was inherit (~16px) */
  letter-spacing: .1px;
}

/* Make the CTA match the tighter nav */
.nav .cta {
  padding: 10px 16px;              /* was 12px 18px */
  font-size: 15px;
}

/* Right-size the logo for the slimmer row */
.logo {
  display: block;
  height: 32px;
  max-height: 168px;
  filter: invert(1) brightness(2);
}

/* Responsive: collapse a bit sooner so titles don't crowd */
@media (max-width: 1240px) {
  .nav-links { gap: 17px; font-size: 15px; }
  .nav .cta { padding: 10px 14px; }
}

/* Responsive: switch to mobile menu earlier if needed */
@media (max-width: 1080px) {
  .nav-links { display: none; }    /* hide the row of links */
  .mobile-toggle { display: block; } /* show ☰ */
}