.igem-navbar{
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  background: var(--igem-bg);
  border-bottom: 1px solid var(--igem-stroke);
  box-shadow: var(--igem-shadow);
  padding-top: .25rem;
  padding-bottom: .25rem;
  padding-left: .35rem;
  padding-right: .35rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Evitar overflow horizontal del menú y de los dropdowns */
.navbar,
.igem-navbar,
.navbar .navbar-collapse{
  max-width: 100vw;
  overflow-x: clip;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  padding-left: .65rem;
  padding-right: .65rem;
}

.navbar-brand{ 
  color: var(--igem-text); 
  font-weight: 600; 
  transition: color .6s ease;
  font-size: .95rem; /* más compacto */
}
.navbar-brand:hover{ color: var(--igem-text); }

.igem-brand-badge{
  width: 20px; height: 20px; border-radius: 999px;
  background: radial-gradient(120% 120% at 30% 30%, var(--igem-accent), #0b7f75 60%, var(--igem-accent-2) 100%);
  box-shadow: 0 0 0 3px var(--igem-accent-weak);
}

/* Links */
.navbar .nav-link{
  color: var(--igem-text);
  opacity: .95;
  font-weight: 600;
  font-size: .82rem; /* más chico */
  transition: color .6s ease, background-color .25s ease, opacity .25s ease, transform .18s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem .58rem; /* más compacto */
  line-height: 1.1;
  min-height: 2.25rem;
  border-radius: .65rem;
  text-align: center;
}
.navbar .nav-link .bi, 
.navbar .nav-link .ti{ 
  margin-right: 0; 
  vertical-align: -.125em; 
  font-size: .9rem; 
  opacity: .95; 
  transition: transform .18s ease, color .18s ease, opacity .18s ease; 
}
.dropdown-item .bi, 
.dropdown-item .ti{ 
  margin-right: .5rem; 
  vertical-align: -.125em; 
  font-size: .95rem; 
  opacity: .95; 
  transition: transform .18s ease, color .18s ease, opacity .18s ease; 
}

.navbar .nav-link:hover,
.navbar .nav-link:focus{
  opacity: 1;
  background: var(--igem-accent-weak);
  outline: none;
}
.navbar .nav-link:hover .ti, .navbar .nav-link:hover .bi,
.navbar .nav-link:focus .ti, .navbar .nav-link:focus .bi{
  transform: translateY(-1px) scale(1.08);
  color: var(--igem-accent);
  opacity: 1;
}
.navbar .nav-link.active{
  background: var(--igem-accent-weak);
  box-shadow: inset 0 0 0 1.5px var(--igem-accent);
}
.navbar .nav-link.active .ti, .navbar .nav-link.active .bi{
  color: var(--igem-accent);
}

/* Underline animado */
.navbar .nav-link:not(.dropdown-toggle)::before{
  content: "";
  position: absolute; left: .65rem; right: .65rem; bottom: .2rem;
  height: 2px; border-radius: 2px;
  background: var(--igem-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .18s ease;
}
.navbar .nav-link:not(.dropdown-toggle):hover::before,
.navbar .nav-link:not(.dropdown-toggle):focus::before,
.navbar .nav-link:not(.dropdown-toggle).active::before{
  transform: scaleX(1);
}

/* Pulse click */
@keyframes navPulse{
  0%{ box-shadow: 0 0 0 0 var(--igem-accent-weak); }
  100%{ box-shadow: 0 0 0 8px rgba(0,0,0,0); }
}
.navbar .nav-link:active{
  transform: translateY(.25px);
  animation: navPulse .4s ease-out;
}

/* Gap compacto y fluido en todas las resoluciones */
.navbar .navbar-nav{
  gap: clamp(.25rem, .8vw, .6rem);
}

/* Evitar overflow horizontal del menú y de los dropdowns */
@media (min-width: 992px){
  .navbar .navbar-nav{
    flex-wrap: wrap;
  }
}

/* Evitar overflow horizontal del menú y de los dropdowns */
@media (min-width: 992px){
  .navbar .navbar-collapse{
    flex-grow: 0;
  }
}

/* Logo más compacto */
.navbar .brand-logo{
  height: 28px;
  width: auto;
  display: block;
}

/* Submenus */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-toggle::after {
  content: "";
  margin-left: .35em;
  vertical-align: .15em;
  border-top: .3em solid transparent;
  border-bottom: .3em solid transparent;
  border-left: .3em solid currentColor;
  opacity: .6;
  transition: opacity .2s ease;
}
.dropdown-submenu > .dropdown-toggle:hover::after { opacity: 1; }

@media (min-width: 992px){
  .dropdown-submenu > .dropdown-menu {
    top: -.25rem;
    left: 100%;
    margin-left: .15rem;
    border-radius: .7rem;
    border: 1px solid var(--igem-stroke);
    background: rgba(255,255,255,.95);
    box-shadow: var(--igem-shadow);
  }
  .dropdown-submenu:hover > .dropdown-menu { display: block; }
  .dropdown-menu.dropdown-menu-end .dropdown-submenu > .dropdown-menu{
    left: auto; right: 100%; margin-right: .15rem;
  }
  .dropdown-submenu.open-left > .dropdown-menu{
    left: auto; right: 100%; margin-right: .15rem;
  }
}

/* Mobile: submenus dentro */
@media (max-width: 991.98px){
  .dropdown-submenu > .dropdown-menu {
    position: static;
    margin: .2rem 0 .2rem .5rem;
    border-radius: .65rem;
    border: 1px solid var(--igem-stroke);
    background: rgba(255,255,255,.95);
  }
}

/* Estado home/hero */
.home-landing:not(.nav-visible) .navbar .nav-link,
.home-landing:not(.nav-visible) .navbar-brand,
.team-landing:not(.nav-visible) .navbar .nav-link,
.team-landing:not(.nav-visible) .navbar-brand{
  color: #ffffff;
}
.home-landing:not(.nav-visible) .navbar .nav-link:hover,
.team-landing:not(.nav-visible) .navbar .nav-link:hover{
  background: rgba(255,255,255,.14);
}

/* Dropdown items */
.dropdown-menu .dropdown-item {
  border-radius: .4rem;
  padding: .45rem .65rem;
  font-size: .85rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  position: relative;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.dropdown-menu .dropdown-item .ti,
.dropdown-menu .dropdown-item .bi {
  transition: transform .18s ease, color .18s ease, opacity .18s ease;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: var(--igem-accent-weak);
  color: var(--igem-text);
}

.dropdown-menu .dropdown-item:hover .ti,
.dropdown-menu .dropdown-item:hover .bi,
.dropdown-menu .dropdown-item:focus .ti,
.dropdown-menu .dropdown-item:focus .bi {
  transform: translateY(-1px) scale(1.08);
  color: var(--igem-accent);
  opacity: 1;
}

/* Subrayado items */
.dropdown-menu .dropdown-item:not(.dropdown-toggle)::before {
  content: "";
  position: absolute;
  left: .65rem;
  right: .65rem;
  bottom: .25rem;
  height: 2px;
  border-radius: 2px;
  background: var(--igem-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .18s ease;
}
.dropdown-menu .dropdown-item:not(.dropdown-toggle):hover::before,
.dropdown-menu .dropdown-item:not(.dropdown-toggle):focus::before {
  transform: scaleX(1);
}

/* Limitar ancho de dropdown para que no se salga */
.dropdown-menu{
  max-width: calc(100vw - 1rem);
}

/* Subrayado items */
.dropdown-menu .dropdown-item{
  position: relative;
}
.dropdown-menu .dropdown-item:not(.dropdown-toggle)::before{
  content: "";
  position: absolute; left: .65rem; right: .65rem; bottom: .25rem;
  height: 2px; border-radius: 2px; background: var(--igem-accent);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .18s ease;
}
.dropdown-menu .dropdown-item:not(.dropdown-toggle):hover::before,
.dropdown-menu .dropdown-item:not(.dropdown-toggle):focus::before{
  transform: scaleX(1);
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .navbar .nav-link::before,
  .dropdown-menu .dropdown-item::before{ transition: none; }
  .navbar .nav-link:active{ animation: none; }
}
@media (prefers-reduced-motion: reduce){
  .navbar .nav-link .ti, .navbar .nav-link .bi,
  .dropdown-item .ti, .dropdown-item .bi{
    transition: none;
  }
}

/* --- Unificar animaciones de TODOS los items de dropdown --- */
.dropdown-menu {
  overflow: visible; /* asegura que el pseudo-elemento no se recorte */
}

.dropdown-menu .dropdown-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .65rem;
  font-size: .85rem;
  border-radius: .4rem;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
  will-change: transform;
}

.dropdown-menu .dropdown-item .ti,
.dropdown-menu .dropdown-item .bi {
  transition: transform .18s ease, color .18s ease, opacity .18s ease;
}

/* hover/active (misma sensación que los top-level) */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: var(--igem-accent-weak);
  color: var(--igem-text);
  transform: translateY(-1px); /* pequeño “lift” */
}

.dropdown-menu .dropdown-item:hover .ti,
.dropdown-menu .dropdown-item:hover .bi,
.dropdown-menu .dropdown-item:focus .ti,
.dropdown-menu .dropdown-item:focus .bi {
  transform: translateY(-1px) scale(1.08);
  color: var(--igem-accent);
  opacity: 1;
}

/* subrayado animado */
.dropdown-menu .dropdown-item:not(.dropdown-toggle)::before {
  content: "";
  position: absolute;
  left: .65rem;
  right: .65rem;
  bottom: .25rem;
  height: 2px;
  border-radius: 2px;
  background: var(--igem-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .18s ease;
  z-index: 1;
}
.dropdown-menu .dropdown-item:not(.dropdown-toggle):hover::before,
.dropdown-menu .dropdown-item:not(.dropdown-toggle):focus::before {
  transform: scaleX(1);
}

/* --- Safety net: si algo los estaba excluyendo, forzamos estas dos entradas --- */
.dropdown-menu .dropdown-item[href*="fundraising-acknowledgements"],
.dropdown-menu .dropdown-item[href*="sponsors"] {
  position: relative;
}
.dropdown-menu .dropdown-item[href*="fundraising-acknowledgements"]:hover,
.dropdown-menu .dropdown-item[href*="fundraising-acknowledgements"]:focus,
.dropdown-menu .dropdown-item[href*="sponsors"]:hover,
.dropdown-menu .dropdown-item[href*="sponsors"]:focus {
  background: var(--igem-accent-weak);
  color: var(--igem-text);
  transform: translateY(-1px);
}
.dropdown-menu .dropdown-item[href*="fundraising-acknowledgements"]:hover::before,
.dropdown-menu .dropdown-item[href*="fundraising-acknowledgements"]:focus::before,
.dropdown-menu .dropdown-item[href*="sponsors"]:hover::before,
.dropdown-menu .dropdown-item[href*="sponsors"]:focus::before {
  transform: scaleX(1);
}
.dropdown-menu .dropdown-item[href*="fundraising-acknowledgements"] .ti,
.dropdown-menu .dropdown-item[href*="fundraising-acknowledgements"] .bi,
.dropdown-menu .dropdown-item[href*="sponsors"] .ti,
.dropdown-menu .dropdown-item[href*="sponsors"] .bi {
  transition: transform .18s ease, color .18s ease, opacity .18s ease;
}
.dropdown-menu .dropdown-item[href*="fundraising-acknowledgements"]:hover .ti,
.dropdown-menu .dropdown-item[href*="fundraising-acknowledgements"]:hover .bi,
.dropdown-menu .dropdown-item[href*="fundraising-acknowledgements"]:focus .ti,
.dropdown-menu .dropdown-item[href*="fundraising-acknowledgements"]:focus .bi,
.dropdown-menu .dropdown-item[href*="sponsors"]:hover .ti,
.dropdown-menu .dropdown-item[href*="sponsors"]:hover .bi,
.dropdown-menu .dropdown-item[href*="sponsors"]:focus .ti,
.dropdown-menu .dropdown-item[href*="sponsors"]:focus .bi {
  transform: translateY(-1px) scale(1.08);
  color: var(--igem-accent);
  opacity: 1;
}

/* --- Fix hover not firing on dropdown items after the 2nd element ---
   Root cause is almost always stacking/overlap: some sibling overlay sits above
   the lower portion of the dropdown, so :hover never triggers there.
   Raise the dropdown's stacking order and make sure it can receive pointer events. */
.navbar .dropdown-menu{
  z-index: 1200;            /* above navbar (Bootstrap nav ~1000-1040) */
  overflow: visible;        /* keep pseudo-underline visible */
  pointer-events: auto;     /* ensure the menu itself can receive hover/clicks */
}

/* Ensure each dropdown item creates its own small stacking context on hover,
   so nothing transparent above can swallow the hover for deeper items. */
.navbar .dropdown-menu .dropdown-item{
  position: relative;
  z-index: 1;
}
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus{
  z-index: 2;
}

/* Safety: remove any pseudo/overlay that some themes add after the menu
   that could cover the bottom items. */
.navbar .dropdown-menu::after{
  content: none !important;
}

/* Optional: quick visual debugger. Uncomment to see if something overlays items. */
/*
.navbar .dropdown-menu,
.navbar .dropdown-menu .dropdown-item { outline: 1px dashed rgba(0,0,0,.15); }
*/

/* --- Fix: dropdowns por encima de cualquier overlay --- */
.igem-navbar.fixed-top,
.navbar.fixed-top{
  z-index: 5000;               /* por encima de héroes/headers */
  overflow: visible;           /* deja “respirar” al dropdown */
}
.navbar .dropdown-menu{
  z-index: 6000;               /* por encima del propio navbar */
  pointer-events: auto;        /* recibe hover/clicks */
}

/* Cada item crea su propio mini stack (evita que algo transparente lo tape) */
.navbar .dropdown-menu .dropdown-item{ position: relative; z-index: 1; }
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus{ z-index: 2; }

/* --- Fix: overlays decorativos no bloquean el puntero --- */
/* Si usas pseudo-elementos o capas “glass/overlay” en el header/hero,
   desactiva sus eventos: */
.pg-header::before,
.pg-header::after,
.hero::before,
.hero::after,
.hero-overlay,
.section-overlay,
.glass-overlay{
  pointer-events: none !important;
}

/* Por si algún contenedor estaba recortando el dropdown */
.navbar,
.igem-navbar,
.navbar .navbar-collapse{
  overflow-x: clip;
  overflow-y: visible;
}