/* Navbar styling (nuke brand recolor on scroll in ALL states) */
:root{
  --accent: var(--bs-primary, #64A19d);
  --underline-thickness: 1px;
}

.navbar { overflow: visible; }

/* Safe default navbar text color */
#mainNav{ --bs-navbar-color: rgba(255,255,255,.75); }

/* Keep same translucent bar always */
#mainNav{
  background-color: rgba(28,36,40,.82) !important;
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.05);
  box-shadow: 0 1px 0 rgba(0,0,0,.22);
}

/* Some builds add these on scroll; ensure same look + NO filters */
#mainNav.navbar-shrink,
#mainNav.navbar-scrolled{
  background-color: rgba(28,36,40,.82) !important;
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.05);
  box-shadow: 0 1px 0 rgba(0,0,0,.22);
}

/* 🔒 Kill ANY filter/recolor the theme may apply to the brand or children */
#mainNav,
#mainNav *{ filter:none !important; -webkit-filter:none !important; mix-blend-mode:normal !important; }

/* The Grayscale theme sometimes targets these exact selectors; override them */
#mainNav .navbar-brand img,
#mainNav .navbar-brand svg,
#mainNav.navbar-shrink .navbar-brand img,
#mainNav.navbar-shrink .navbar-brand svg,
#mainNav.navbar-scrolled .navbar-brand img,
#mainNav.navbar-scrolled .navbar-brand svg{
  filter:none !important; -webkit-filter:none !important;
}

/* Lock the inline SVG paints so `currentColor` tricks can't override */
#mainNav .logo-mark{ width:22px; height:22px; display:inline-block; opacity:.95; }
#mainNav .logo-mark *,
#mainNav.navbar-shrink .logo-mark *,
#mainNav.navbar-scrolled .logo-mark *{
  fill:#64A19d !important;
  stroke:#64A19d !important;
}

/* Brand text color */
#mainNav .navbar-brand{ color: rgba(255,255,255,.86) !important; }

/* Links */
#mainNav .navbar-nav .nav-link{ color: rgba(255,255,255,.75); }
#mainNav .navbar-nav .nav-link:hover{ color: rgba(255,255,255,.92); }

/* Active underline */
#mainNav .navbar-nav .nav-link.active{
  color: var(--accent) !important;
  box-shadow: inset 0 calc(-1 * var(--underline-thickness)) 0 0 var(--accent);
}
#mainNav .nav-link.active::after{ content: none; }

/* Language code in navbar: force lowercase only */
#mainNav .navbar-nav a#langMenu { text-transform: lowercase; }

/* Language dropdown active */
.dropdown-menu-dark .dropdown-item.active,
.dropdown-menu-dark .dropdown-item.active:focus,
.dropdown-menu-dark .dropdown-item.active:hover{
  background-color: var(--accent);
  color:#fff;
}

/* Bullet for current language */
.lang-mark{ margin-left:.25rem; opacity:.9; }

/* Brand logo fixes moved from inline <style> (CSP-friendly) */
#mainNav .navbar-brand::before { content: none !important; }

#mainNav .brand-logo{
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
}

/* Keep navbar & dropdown tappable on top of hero */
#mainNav { z-index: 1030; }
#navbarResponsive { overflow: visible; }
#mainNav .dropdown-menu { z-index: 2000; pointer-events: auto; }

/* === Language dropdown: force teal, never Bootstrap blue === */

/* Variables for the dropdown in the navbar (dark menu) */
.navbar .dropdown-menu,
.navbar .dropdown-menu-dark{
  --bs-dropdown-link-hover-bg: rgba(100,161,157,.20) !important;
  --bs-dropdown-link-active-bg: #64a19d !important;
}

/* Hover/focus states (teal) */
.navbar .dropdown-menu-dark .dropdown-item:hover,
.navbar .dropdown-menu-dark .dropdown-item:focus{
  background-color: rgba(100,161,157,.20) !important;
  color: #fff !important;
}

/* Active/pressed state (solid teal) */
.navbar .dropdown-menu-dark .dropdown-item.active,
.navbar .dropdown-menu-dark .dropdown-item:active{
  background-color: #64a19d !important;
  color: #fff !important;
}

/* === Language toggle: never turn green on click/hover/open === */
/* Scope to your navbar id for higher specificity */
#mainNav .nav-item.dropdown .nav-link.dropdown-toggle,
#mainNav .nav-item.dropdown .nav-link.dropdown-toggle:hover,
#mainNav .nav-item.dropdown .nav-link.dropdown-toggle:focus,
#mainNav .nav-item.dropdown .nav-link.dropdown-toggle:active,
#mainNav .nav-item.dropdown.show .nav-link.dropdown-toggle,
#mainNav .nav-item.dropdown .nav-link.dropdown-toggle[aria-expanded="true"],
#mainNav .nav-item.dropdown .nav-link.dropdown-toggle.show{
  color: var(--bs-navbar-color) !important; /* keep default navbar color always */
}

/* === Hide focus ring/outline for language toggle and dropdown items (navbar only) === */
/* NOTE: this removes the visible focus indicator; accessibility trade-off accepted per request. */

#mainNav .nav-link.dropdown-toggle:focus,
#mainNav .nav-link.dropdown-toggle:focus-visible,
#mainNav .nav-link.dropdown-toggle:active,
#mainNav .dropdown-menu .dropdown-item:focus,
#mainNav .dropdown-menu .dropdown-item:focus-visible,
#mainNav .dropdown-menu .dropdown-item:active,
#mainNav .dropdown-menu-dark .dropdown-item:focus,
#mainNav .dropdown-menu-dark .dropdown-item:focus-visible,
#mainNav .dropdown-menu-dark .dropdown-item:active{
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* iOS/WebKit: remove tap highlight */
#mainNav .nav-link.dropdown-toggle,
#mainNav .dropdown-menu .dropdown-item,
#mainNav .dropdown-menu-dark .dropdown-item{
  -webkit-tap-highlight-color: transparent;
}