/* Site header. Consumes theme.css tokens only — no :root, no hex literals. */

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition-base), border-color var(--transition-base),
              box-shadow var(--transition-base), backdrop-filter var(--transition-base);
}

.nav-shell {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 46px; width: auto; transition: filter var(--transition-base); }
.logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--fg);
  -webkit-text-fill-color: currentColor;
}

nav#nav-menu { display: flex; align-items: center; gap: 28px; }

nav#nav-menu a {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--fg);
  transition: color var(--transition-fast);
  padding: 10px;
}

nav#nav-menu a:hover { color: var(--accent); }

.nav-placeholder { opacity: 0.5; cursor: default; }

/* --- CTA --------------------------------------------------------------- */
.nav-cta {
  padding: 11px var(--space-5);
  background: var(--accent);
  color: var(--accent-contrast) !important;
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-cta:hover { background: var(--accent-strong); color: var(--accent-contrast) !important; }

/* --- icon buttons ------------------------------------------------------ */
.nav-actions { display: inline-flex; align-items: center; gap: var(--space-3); }

.search-toggle,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg);
  font-size: 16px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.search-toggle:hover,
.theme-toggle:hover { background: var(--surface); color: var(--accent); }

/* --- dropdowns (extrapolated — the source design has no dropdowns) ------ */
.nav-dropdown { position: relative; }

.nav-dropdown-menu,
.nav-sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast),
              visibility var(--transition-fast);
}

.nav-dropdown:hover > .nav-dropdown-menu,
.nav-dropdown:focus-within > .nav-dropdown-menu,
.nav-sub-dropdown:hover > .nav-sub-menu,
.nav-sub-dropdown:focus-within > .nav-sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu a,
.nav-sub-menu a {
  padding: 10px var(--space-3);
  border-radius: var(--radius-sm);
  font-weight: 600;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover,
.nav-sub-menu a:hover { background: var(--surface); color: var(--accent); }

.nav-sub-dropdown { position: relative; }
.nav-sub-dropdown > a { display: flex; align-items: center; }
.nav-sub-menu { top: 0; left: 100%; }
.sub-arrow { margin-left: auto; padding-left: var(--space-3); }

/* --- mobile toggle ----------------------------------------------------- */
.mobile-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  font-size: 22px;
  color: var(--fg);
  cursor: pointer;
  transition: color var(--transition-fast);
}
body.has-light-hero header:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
}

/* --- dark-hero variant: transparent until scrolled --------------------- */
body.has-dark-hero header:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
}
body.has-dark-hero header:not(.is-scrolled) .logo img { filter: brightness(0) invert(1); }
body.has-dark-hero header:not(.is-scrolled) .logo-text,
body.has-dark-hero header:not(.is-scrolled) nav#nav-menu a,
body.has-dark-hero header:not(.is-scrolled) .search-toggle,
body.has-dark-hero header:not(.is-scrolled) .theme-toggle,
body.has-dark-hero header:not(.is-scrolled) .mobile-toggle { color: var(--on-dark); }
/* The hero panel behind this header is a fixed dark surface in both modes
   (see theme.css --on-dark comment), so the pill and its label are pinned
   with --on-dark / --on-dark-strong rather than the mode-dependent
   --bg-elevated / --accent-strong — otherwise the pill goes dark-on-dark
   in dark mode. */
body.has-dark-hero header:not(.is-scrolled) .nav-cta {
  background: var(--on-dark);
  color: var(--on-dark-strong) !important;
}

/* The subnav has to merge with the header, not just sit under it. It is the
   header's next sibling in the markup, so it can follow the same
   :not(.is-scrolled) state. Previously it stayed an opaque light bar even
   while the header above it went transparent, which read as a stray strip
   wedged between the header and the hero — most obvious on Case Studies,
   whose hero is a full-bleed blue. Links are re-tinted to --on-dark for the
   same reason the header's are: the surface behind is a fixed dark/brand
   hero in both colour modes. */
body.has-dark-hero header:not(.is-scrolled) + .subnav {
  background: transparent;
  border-bottom-color: color-mix(in srgb, var(--on-dark) 22%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.has-dark-hero header:not(.is-scrolled) + .subnav a {
  color: color-mix(in srgb, var(--on-dark) 82%, transparent);
}
body.has-dark-hero header:not(.is-scrolled) + .subnav a:hover,
body.has-dark-hero header:not(.is-scrolled) + .subnav a:focus-visible,
body.has-dark-hero header:not(.is-scrolled) + .subnav a[aria-current="page"] {
  color: var(--on-dark);
  background: color-mix(in srgb, var(--on-dark) 16%, transparent);
}

header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom-color: var(--border);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--fg) 8%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

/* --- responsive -------------------------------------------------------- */
@media (max-width: 1180px) {
  .mobile-toggle { display: inline-flex; align-items: center; justify-content: center; }

  nav#nav-menu {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    display: none;
  }

  nav#nav-menu.open {
    display: flex;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }

  body.has-dark-hero header:not(.is-scrolled) nav#nav-menu.open a, body.has-dark-hero header:not(.is-scrolled) nav#nav-menu.open button { color: var(--fg); }

  nav#nav-menu > a,
  .nav-dropdown-toggle {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Mobile dropdowns are an accordion driven by site-header.js, which toggles
     .mobile-open on click. They must start COLLAPSED — if they are always
     visible, the JS still calls preventDefault() on the parent link and the
     user can never reach the parent page. */
  .nav-dropdown-menu,
  .nav-sub-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border: 0;
    padding-left: var(--space-4);
    opacity: 1;
    visibility: visible;
    display: none;
  }

  .nav-dropdown-menu.mobile-open,
  .nav-sub-menu.mobile-open { display: flex; }

  .nav-cta { text-align: center; }
}

/* Lock background scrolling while the mobile menu is open.
   site-header.js toggles body.nav-open alongside nav-menu.open. */
body.nav-open { overflow: hidden; }

/* --- Sub-navigation bar ------------------------------------------------ */
.subnav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: 40;                     /* below header (50), above page content */
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border-bottom: 1px solid var(--border);
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

/* Hidden when there is nothing contextual to show and nothing is hovered */
.subnav:not(.has-active) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.subnav-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--subnav-height);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--space-3) 0;
}
.subnav-inner::-webkit-scrollbar { display: none; }
/* Drag-to-scroll affordance (handler in site-header.js). Only shown when the
   strip actually overflows — a grab cursor on a fully visible subnav would
   promise an interaction that does nothing. */
.subnav-inner.is-overflowing { cursor: grab; }
.subnav-inner.is-dragging {
  cursor: grabbing;
  user-select: none;
}
/* global.css sets a custom cursor on `a` site-wide; these two need to outrank it
   so the grab/grabbing state is not lost the moment the pointer is over a link. */
.subnav-inner.is-overflowing a { cursor: grab; }
.subnav-inner.is-dragging a { cursor: grabbing; }

.subnav-group { display: none; gap: 6px; }
.subnav-group.is-active { display: flex; }

.subnav a {
  flex: 0 0 auto;
  padding: 10px 15px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
  color: var(--fg-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.subnav a:hover,
.subnav a:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.subnav a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* Above the breakpoint the bar replaces the floating dropdown panels. */
/*@media (min-width: 1181px) {
  .nav-dropdown-menu { display: none !important; }
}*/

@media (max-width: 1180px) {
  .subnav-inner { padding: var(--space-2) 0; min-height: 40px; }
  .subnav a { font-size: 11px; padding: 8px 12px; }
}

.nav-dropdown > a > i {
  font-size: 12px;
  margin-left: 0.33rem;
}

@media (min-width: 1181px) {
  .subnav {
    display: none;
  }
  .nav-dropdown-toggle {
    /* padding: 10px 12px; */
    border: 1px solid transparent;
    border-radius: var(--radius-md);
  }
  .nav-dropdown-menu {
    display: flex !important;
    top: calc(100% - 1px);
    background: var(--on-dark);
    border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
    border-top-color: white;
  }
  nav#nav-menu .nav-dropdown-menu a,
  body.has-dark-hero header:not(.is-scrolled)
    nav#nav-menu .nav-dropdown-menu a {
    color: var(--on-dark-strong);
  }
  nav#nav-menu .nav-dropdown:hover > .nav-dropdown-toggle,
  nav#nav-menu .nav-dropdown:focus-within > .nav-dropdown-toggle,
  body.has-dark-hero header:not(.is-scrolled)
    nav#nav-menu .nav-dropdown:hover > .nav-dropdown-toggle,
  body.has-dark-hero header:not(.is-scrolled)
    nav#nav-menu .nav-dropdown:focus-within > .nav-dropdown-toggle {
    background: var(--on-dark);
    border-color: var(--border);
    border-bottom-color: var(--on-dark);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    color: var(--on-dark-strong);
  }
  nav#nav-menu .nav-dropdown-menu a:hover,
  nav#nav-menu .nav-dropdown-menu a:focus-visible,
  body.has-dark-hero header:not(.is-scrolled)
    nav#nav-menu .nav-dropdown-menu a:hover,
  body.has-dark-hero header:not(.is-scrolled)
    nav#nav-menu .nav-dropdown-menu a:focus-visible {
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent) 12%, var(--on-dark));
  }
}