/* Hero-aware navbar theme. Loaded last so shared and mobile styles agree. */
/* The old body slide animation creates a containing block for fixed headers. */
body.case-page { animation: none !important; transform: none !important; }

body .site-header.reference-header.hero-nav {
  --nav-bg: var(--nav-hero-bg, #000);
  --nav-ink: #fff;
  --nav-text-shadow: none;
  --nav-icon-shadow: none;
  --nav-logo-filter: brightness(0) invert(1);
  background: var(--nav-bg) !important;
  color: var(--nav-ink) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease !important;
}

/* Skills, e-commerce and design system use black navigation on light heroes. */
body .site-header.reference-header.hero-nav.on-light-hero {
  --nav-ink: #000;
  --nav-text-shadow: none;
  --nav-icon-shadow: none;
  --nav-logo-filter: brightness(0);
}

body .site-header.reference-header.hero-nav.is-scrolled {
  --nav-bg: #f5f5f5;
  --nav-ink: #000;
  --nav-text-shadow: none;
  --nav-icon-shadow: none;
  --nav-logo-filter: brightness(0);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .07) !important;
}

body .site-header.reference-header.hero-nav .reference-nav,
body .site-header.reference-header.hero-nav #main-nav {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body .site-header.reference-header.hero-nav #main-nav a,
body .site-header.reference-header.hero-nav #main-nav a:hover,
body .site-header.reference-header.hero-nav #main-nav a:focus-visible,
body .site-header.reference-header.hero-nav #main-nav a[aria-current="page"],
body .site-header.reference-header.hero-nav #main-nav a span,
body .site-header.reference-header.hero-nav .reference-brand,
body .site-header.reference-header.hero-nav .menu-toggle {
  color: var(--nav-ink) !important;
  text-shadow: var(--nav-text-shadow) !important;
  background-color: transparent !important;
  transition: color 300ms ease, text-shadow 300ms ease !important;
}

body .site-header.reference-header.hero-nav #main-nav a:hover,
body .site-header.reference-header.hero-nav #main-nav a:focus-visible {
  text-decoration: underline !important;
  text-underline-offset: 5px;
}

body .site-header.reference-header.hero-nav .reference-logo {
  filter: var(--nav-logo-filter) !important;
  transition: filter 300ms ease !important;
}

body .site-header.reference-header.hero-nav .hamburger-icon span {
  background-color: var(--nav-ink) !important;
  box-shadow: var(--nav-icon-shadow) !important;
  transition: background-color 300ms ease, box-shadow 300ms ease, transform 200ms ease, opacity 200ms ease !important;
}

body .site-header.reference-header.hero-nav .menu-toggle:focus-visible,
body .site-header.reference-header.hero-nav a:focus-visible {
  outline-color: var(--nav-ink) !important;
}

@media (max-width: 900px) {
  body .site-header.reference-header.hero-nav #main-nav {
    background-color: var(--nav-bg) !important;
    border-color: transparent !important;
    transition: background-color 300ms ease, color 300ms ease !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .site-header.reference-header.hero-nav,
  body .site-header.reference-header.hero-nav #main-nav,
  body .site-header.reference-header.hero-nav #main-nav a,
  body .site-header.reference-header.hero-nav #main-nav a:hover,
  body .site-header.reference-header.hero-nav #main-nav a:focus-visible,
  body .site-header.reference-header.hero-nav #main-nav a[aria-current="page"],
  body .site-header.reference-header.hero-nav #main-nav a span,
  body .site-header.reference-header.hero-nav .reference-brand,
  body .site-header.reference-header.hero-nav .menu-toggle,
  body .site-header.reference-header.hero-nav .reference-logo,
  body .site-header.reference-header.hero-nav .hamburger-icon span {
    transition: none !important;
  }
}