.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--nav-height);
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--duration-base) var(--ease-out),
              backdrop-filter var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.navbar .navbar-brand {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--color-black);
}

.navbar .navbar-brand span {
  color: var(--color-gold);
}

.navbar .nav-link {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-black);
  margin: 0 0.6rem;
  transition: color var(--duration-fast) var(--ease-out);
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
  color: var(--color-gold-dim);
}

.navbar .navbar-toggler {
  border: none;
  padding: 0.25rem 0.4rem;
}

.navbar .navbar-toggler:focus {
  box-shadow: none;
}

.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(11,11,12,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Hero pages: navbar overlays the hero, starts fully transparent.
   left:0 + right:0 alone already pin it edge-to-edge for a fixed element,
   so the explicit width:100% was redundant — removed for clarity. */
body.has-hero .navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}

body.has-hero {
  padding-top: 0;
}

/* State B: scrolled, still within hero — transparent + blur (glass) */
body.has-hero .navbar.is-scrolled {
  background-color: rgba(11, 11, 12, 0.45);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* State C: past hero — solid white */
body.has-hero .navbar.is-past-hero {
  background-color: var(--color-white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--color-border);
  box-shadow: 0 8px 24px -12px rgba(11, 11, 12, 0.12);
}

/* Contrast: light text/logo while over the hero, dark once past it */
body.has-hero .navbar:not(.is-past-hero) .navbar-brand {
  color: var(--color-white);
}

body.has-hero .navbar:not(.is-past-hero) .nav-link {
  color: rgba(255, 255, 255, 0.92);
}

body.has-hero .navbar:not(.is-past-hero) .nav-link.active,
body.has-hero .navbar:not(.is-past-hero) .nav-link:hover {
  color: var(--color-gold);
}

body.has-hero .navbar:not(.is-past-hero) .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

body.has-hero .navbar.is-past-hero .navbar-brand {
  color: var(--color-black);
}

body.has-hero .navbar.is-past-hero .nav-link {
  color: var(--color-black);
}

body.has-hero .navbar.is-past-hero .nav-link.active,
body.has-hero .navbar.is-past-hero .nav-link:hover {
  color: var(--color-gold-dim);
}

/* Mobile dropdown: always legible regardless of hero state */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: var(--color-white);
    margin-top: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lift);
  }

  body.has-hero .navbar:not(.is-past-hero) .navbar-collapse .nav-link {
    color: var(--color-black);
  }

  body.has-hero .navbar:not(.is-past-hero) .navbar-collapse .nav-link.active,
  body.has-hero .navbar:not(.is-past-hero) .navbar-collapse .nav-link:hover {
    color: var(--color-gold-dim);
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.has-hero .navbar.is-scrolled {
    background-color: var(--color-black);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}