/* Header styles */
.navbar-brand {
  font-weight: bold;
  font-size: 1.5rem;
  color: white;
}

/* Fixed header - Light text on dark/transparent background (for pages with dark hero) */
#mainNav.navbar-dark {
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  box-shadow: none;
}

#mainNav.navbar-dark .navbar-brand,
#mainNav.navbar-dark .nav-link {
  color: rgba(255, 255, 255, 0.65) !important;
}

#mainNav.navbar-dark .nav-link:hover {
  color: rgba(255, 255, 255, 1) !important;
}

#mainNav.navbar-dark .nav-link.active {
  color: rgba(255, 255, 255, 1) !important;
}

/* Fixed header - Dark text on light/transparent background (for pages with light backgrounds) */
#mainNav.navbar-light {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  box-shadow: none;
}

#mainNav.navbar-light .navbar-brand,
#mainNav.navbar-light .nav-link {
  color: rgba(0, 0, 0, 0.65) !important;
}

#mainNav.navbar-light .nav-link:hover {
  color: rgba(0, 0, 0, 0.9) !important;
}

#mainNav.navbar-light .nav-link.active {
  color: rgba(0, 0, 0, 0.9) !important;
}

/* Header when scrolled - always switches to solid dark with light text */
#mainNav.scrolled {
  background-color: rgba(0, 0, 0, 0.98) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#mainNav.scrolled .navbar-brand,
#mainNav.scrolled .nav-link {
  color: rgba(255, 255, 255, 0.75) !important;
}

#mainNav.scrolled .nav-link:hover {
  color: rgba(255, 255, 255, 0.9) !important;
}

#mainNav.scrolled .nav-link.active {
  color: white !important;
}

/* Optional: Make navbar items change on scroll too */
#mainNav.scrolled .navbar-brand {
  color: white;
}

/* Navbar toggler icon - make sure it's visible */
#mainNav.navbar-dark .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%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#mainNav.scrolled .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%280, 0, 0, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}