/**
 * @file
 * Navbar-Styling für Nordseenest
 */

/* ==========================================================================
   Kombinierte Navbar
   ========================================================================== */

#navbar-combined,
#navbar-main,
#navbar-top {
  background-color: var(--nn-secondary-light) !important;
  padding: var(--nn-space-md) 0;
  box-shadow: var(--nn-shadow);
  border-bottom: 1px solid var(--nn-secondary-dark);
}

/* Anmelde-Link links - dezent abgehoben */
.navbar-secondary-menu {
  margin-right: auto;
  padding-right: var(--nn-space-lg);
  border-right: 1px solid var(--nn-secondary-dark);
}

.navbar-secondary-menu .nav-link,
#navbar-top .nav-link {
  color: var(--nn-text-muted);
  font-size: var(--nn-font-size-lg);
  font-weight: var(--nn-font-weight-normal);
  padding: var(--nn-space-sm) var(--nn-space-md);
  transition: color var(--nn-transition-fast);
}

.navbar-secondary-menu .nav-link:hover,
.navbar-secondary-menu .nav-link:focus,
#navbar-top .nav-link:hover,
#navbar-top .nav-link:focus {
  color: var(--nn-primary);
  text-decoration: none;
}

#navbar-combined .navbar-nav,
#navbar-main .navbar-nav {
  gap: var(--nn-space-xs);
}

#navbar-combined .navbar-nav .nav-link,
#navbar-main .navbar-nav .nav-link {
  color: var(--nn-primary);
  font-size: var(--nn-font-size-lg);
  font-weight: var(--nn-font-weight-medium);
  padding: var(--nn-space-sm) var(--nn-space-md);
  border-radius: var(--nn-radius-sm);
  transition: all var(--nn-transition-fast);
  position: relative;
}

#navbar-combined .navbar-nav .nav-link:hover,
#navbar-combined .navbar-nav .nav-link:focus,
#navbar-main .navbar-nav .nav-link:hover,
#navbar-main .navbar-nav .nav-link:focus {
  color: var(--nn-white);
  background-color: var(--nn-primary);
  text-decoration: none;
}

#navbar-combined .navbar-nav .nav-link.is-active,
#navbar-combined .navbar-nav .nav-item.active .nav-link,
#navbar-main .navbar-nav .nav-link.is-active,
#navbar-main .navbar-nav .nav-item.active .nav-link {
  background-color: var(--nn-primary);
  color: var(--nn-white);
}

/* Unterstrich-Effekt komplett deaktiviert */
#navbar-combined .navbar-nav .nav-link::after,
#navbar-main .navbar-nav .nav-link::after {
  display: none !important;
  content: none !important;
}

/* Kein Unterstrich für Anmelde-Link */
.navbar-secondary-menu .nav-link::after {
  display: none;
}

/* ==========================================================================
   Mobile Navbar Toggler
   ========================================================================== */

#navbar-combined .navbar-toggler,
#navbar-main .navbar-toggler {
  border-color: var(--nn-primary);
  padding: var(--nn-space-sm);
}

#navbar-combined .navbar-toggler:focus,
#navbar-main .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(29, 132, 195, 0.25);
}

#navbar-combined .navbar-toggler-icon,
#navbar-main .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='%231d84c3' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.breadcrumb {
  background-color: transparent;
  padding: var(--nn-space-sm) 0;
  margin-bottom: var(--nn-space-md);
  font-size: var(--nn-font-size-sm);
}

.breadcrumb-item a {
  color: var(--nn-text-muted);
}

.breadcrumb-item a:hover {
  color: var(--nn-primary);
}

.breadcrumb-item.active {
  color: var(--nn-text);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--nn-gray-medium);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991.98px) {
  #navbar-combined .navbar-collapse,
  #navbar-main .navbar-collapse {
    background-color: var(--nn-primary);
    padding: var(--nn-space-md);
    margin-top: var(--nn-space-sm);
    border-radius: var(--nn-radius);
    box-shadow: var(--nn-shadow);
  }
  
  #navbar-combined .navbar-nav,
  #navbar-main .navbar-nav {
    gap: 0;
  }
  
  #navbar-combined .navbar-nav .nav-link,
  #navbar-main .navbar-nav .nav-link {
    color: var(--nn-white) !important;
    padding: var(--nn-space-md) var(--nn-space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0;
    transition: background-color var(--nn-transition-fast), padding-left var(--nn-transition-fast);
  }
  
  #navbar-combined .navbar-nav .nav-item:last-child .nav-link,
  #navbar-main .navbar-nav .nav-item:last-child .nav-link {
    border-bottom: none;
  }
  
  /* Hover-Effekt */
  #navbar-combined .navbar-nav .nav-link:hover,
  #navbar-main .navbar-nav .nav-link:hover {
    background-color: var(--nn-primary-light) !important;
    padding-left: var(--nn-space-xl);
  }
  
  /* Aktiver Menüpunkt */
  #navbar-combined .navbar-nav .nav-link.is-active,
  #navbar-main .navbar-nav .nav-link.is-active {
    background-color: var(--nn-primary-light) !important;
    font-weight: var(--nn-font-weight-semibold);
  }
  
  #navbar-combined .navbar-nav .nav-link::after,
  #navbar-main .navbar-nav .nav-link::after {
    display: none;
  }
  
  /* Anmelde-Link auf mobil */
  .navbar-secondary-menu {
    border-right: none;
    padding-right: 0;
  }
}