/**
 * Navigation Component
 *
 * Enthält:
 * - Main Navigation (allgemein, nicht header-spezifisch)
 * - Navigation Links
 * - Mobile Toggle
 * - Responsive Styles
 *
 * Dependencies:
 * - base.css (CSS Variables)
 *
 * Extrahiert aus ui-elements.css: Zeilen 92-214
 * Datei-Größe: ~122 Zeilen
 *
 * @package SLV_Transporte
 * @version 1.0.0
 */

/* ============================================
   NAVIGATION
   ============================================ */

/**
 * Main Navigation Container
 */
.nav {
  display: flex;
  align-items: center;
  gap: var(--slv-space-m);
}

.nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--slv-space-m);
}

.nav__item {
  margin: 0;
}

.nav__link {
  color: var(--slv-text-dark);
  text-decoration: none;
  font-weight: 500;
  padding: var(--slv-space-xs) var(--slv-space-s);
  border-radius: var(--slv-radius-s);
  transition: all var(--slv-transition-fast);
  display: block;
}

.nav__link:hover,
.nav__link:focus,
.nav__link--active {
  color: var(--slv-primary-blue);
  background-color: var(--slv-bg-light);
}

/**
 * Mobile Navigation Toggle
 */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--slv-space-xs);
}

.nav-toggle__icon {
  width: 24px;
  height: 2px;
  background-color: var(--slv-text-dark);
  display: block;
  position: relative;
  transition: background-color var(--slv-transition-fast);
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  width: 24px;
  height: 2px;
  background-color: var(--slv-text-dark);
  position: absolute;
  left: 0;
  transition: all var(--slv-transition-base);
}

.nav-toggle__icon::before {
  top: -8px;
}

.nav-toggle__icon::after {
  bottom: -8px;
}

/**
 * Mobile Navigation - Toggle Active State
 */
.nav-toggle.is-active .nav-toggle__icon {
  background-color: transparent;
}

.nav-toggle.is-active .nav-toggle__icon::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle.is-active .nav-toggle__icon::after {
  bottom: 0;
  transform: rotate(-45deg);
}

/**
 * Mobile Navigation Responsive
 */
@media (max-width: 767px) {
  .nav-toggle {
    display: block;
  }

  .nav__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--slv-bg-white);
    flex-direction: column;
    padding: var(--slv-space-m);
    box-shadow: var(--slv-shadow-lg);
    gap: var(--slv-space-xs);
  }

  .nav__list.is-active {
    display: flex;
  }
}