/*
 * ============================================================
 *  CLEAR IMPACT SYSTEMS - Header Component
 *  Matches screenshot: dark navy, gold ticker, centered nav,
 *  gold-bordered CTA right.
 * ============================================================
 */

/* ── MAIN HEADER ──────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--cis-black);    /* #080C13 */
  border-bottom: 1px solid var(--cis-navy-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 110px;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--space-8);
  gap: var(--space-8);
}

/* ── LOGO ─────────────────────────────────────────────────── */

.site-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
  padding-block: var(--space-2);
  padding-right: var(--space-4);
}

/* Bulletproof logo sizing: fixed height + width:auto always preserves the
   image's intrinsic ratio. No aspect-ratio / object-fit / presentational
   width|height attributes that could force a wrong ratio and "smush" it. */
.site-header__logo img {
  display: block;
  height: 70px;
  width: auto;
  max-width: none;
  transition: opacity var(--transition-fast);
}

.site-header__logo:hover img { opacity: 0.85; }

@media (max-width: 640px) {
  .site-header__inner { height: 90px; }
  .site-header__logo img { height: 56px; }
}

/* ── PRIMARY NAV ──────────────────────────────────────────── */

.site-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__item {
  position: relative;
}

.site-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--cis-silver);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--cis-gold);
}

.site-nav__link[aria-current="page"] {
  background: var(--cis-gold-glow);
}

/* Dropdown chevron */
.site-nav__link .chevron {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform var(--transition-fast);
}

.site-nav__item:hover .chevron,
.site-nav__item:focus-within .chevron {
  transform: rotate(180deg);
}

/* ── DROPDOWN MENUS ───────────────────────────────────────── */

.site-nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--cis-navy);
  border: 1px solid var(--cis-navy-border);
  border-top: 2px solid var(--cis-gold);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility var(--transition-base);
  /* Grace period: when the cursor leaves, wait before closing so the menu
     does not vanish while the cursor crosses the gap or moves diagonally
     toward a wider item. Opening (the :hover rule below) overrides this to 0. */
  transition-delay: 0.35s;
  z-index: var(--z-dropdown);
}

.site-nav__item:hover .site-nav__dropdown,
.site-nav__item:focus-within .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;   /* open immediately on hover */
}

/* The grace period is only for mousing off the nav entirely. While the cursor
   is anywhere on the nav bar row (including the gaps between items) but no
   longer on the menu's own item, start closing immediately. Leaving downward
   is unaffected: the item's dropdown and hover bridge keep it :hover, and
   below/outside the bar the grace period still applies. */
.site-nav__list:hover .site-nav__item:not(:hover) .site-nav__dropdown,
.site-nav__list:has(.site-nav__item:focus-within) .site-nav__item:not(:focus-within) .site-nav__dropdown {
  transition-delay: 0s;
}

/* Invisible hover bridge: spans the gap between the nav link and its dropdown
   so :hover is never lost while the cursor travels to an item. It is widened
   past the trigger on both sides so a diagonal move toward the wider dropdown
   stays inside a hoverable region. Without this, the items are unclickable. */
.site-nav__item::after {
  content: "";
  position: absolute;
  left: -40px;
  right: -40px;
  top: 100%;
  height: 18px;
}

/* The bridge must not steal hover from a neighbour when this item is idle;
   only keep it active while this item (or its menu) is actually engaged. */
.site-nav__item:not(:hover):not(:focus-within)::after {
  pointer-events: none;
}

/* The hover bridge only matters for desktop hover menus; disable it in the
   mobile accordion so it cannot intercept taps on adjacent items. */
@media (max-width: 1024px) {
  .site-nav__item::after { display: none; }
}

.site-nav__dropdown a {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--cis-silver);
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast), padding-left var(--transition-fast);
}

.site-nav__dropdown a:hover {
  color: var(--cis-gold);
  background: var(--cis-gold-glow);
  padding-left: var(--space-6);
}

/* ── HEADER CTA ───────────────────────────────────────────── */

.site-header__cta {
  flex-shrink: 0;
}

.site-header__cta .btn--outline-gold {
  font-size: 10px;
  padding: var(--space-2) var(--space-5);
}

/* ── MOBILE MENU TOGGLE ───────────────────────────────────── */

.site-header__menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  cursor: pointer;
  background: none;
  border: none;
}

.site-header__menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cis-silver);
  transition: all var(--transition-base);
  border-radius: 2px;
}

/* Toggle animation when open */
.site-header__menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header__menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.site-header__menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── SCROLL-AWARE HEADER ──────────────────────────────────── */

/* Slightly more opaque shadow when scrolled */
.site-header.is-scrolled {
  background-color: rgba(8, 12, 19, 0.97);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── RESPONSIVE ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .site-header__menu-toggle {
    display: flex;
    /* Sit above the full-screen nav overlay so the X stays tappable to close. */
    position: relative;
    z-index: calc(var(--z-overlay) + 1);
  }

  /* Keep the logo visible (and above the overlay) while the menu is open. */
  .site-header__logo {
    position: relative;
    z-index: calc(var(--z-overlay) + 1);
  }

  /* backdrop-filter makes this header a containing block for position:fixed
     descendants, which collapses the fixed nav overlay onto the header box
     once scrolled. Drop the blur on mobile so the overlay always covers the
     viewport (the near-opaque background below keeps the bar legible). */
  .site-header.is-scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--cis-black);
    flex-direction: column;
    /* Anchor items to the top (below the header) and scroll if they overflow,
       so expanding a submenu never shifts the whole menu up. */
    justify-content: flex-start;
    padding: calc(110px + 1.5rem) var(--space-6) var(--space-10);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform var(--duration-slow) var(--ease-out);
    z-index: var(--z-overlay);
  }

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

  .site-nav__list {
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    /* A centered column of uniform-width items: stretch overrides the desktop
       align-items:center so every item (and its dropdown) spans the same
       width instead of shrink-wrapping its own content. */
    align-items: stretch;
    max-width: 400px;
    margin-inline: auto;
  }

  .site-nav__link {
    font-size: var(--text-md);
    letter-spacing: var(--tracking-wide);
    /* Left padding mirrors the dropdown text inset (2px gold border +
       dropdown padding + item padding) so titles sit directly above the
       first character of their submenu items. */
    padding: var(--space-4) 0 var(--space-4) calc(2px + var(--space-4) + var(--space-5));
    border-bottom: 1px solid var(--cis-navy-border);
    border-radius: 0;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .site-nav__dropdown {
    position: static;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: var(--cis-navy-surface);
    border: none;
    border-left: 2px solid var(--cis-gold);
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-2) 0 var(--space-2) var(--space-4);
    margin-top: var(--space-2);
    display: none;
  }

  .site-nav__item.is-expanded .site-nav__dropdown {
    display: block;
  }

  /* On mobile the accordion state, not hover/focus, owns the chevron: a
     tapped link keeps focus after its menu closes, which would leave the
     arrow stuck pointing up. */
  .site-nav__item:hover .chevron,
  .site-nav__item:focus-within .chevron {
    transform: none;
  }

  .site-nav__item.is-expanded .chevron {
    transform: rotate(180deg);
  }

  .site-header__cta {
    display: none;
  }
}