/* ==========================================================================
   Navigation Styles – audi100-online.de
   ==========================================================================
   Enthält Desktop- und Mobile-Navigation, sowie Hover-/Submenu-Fix.
   Letzte Änderung: 2025-11-06
   ========================================================================== */

/* Grundlayout -------------------------------------------------------------- */

.primary-nav {
  background: #111;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  position: relative;
  z-index: 1000;
}

.primary-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav a,
.primary-nav button {
  color: #f5f5f5;
  text-decoration: none;
  display: block;
  padding: 12px 16px;
  background: transparent;
  border: none;
  font: inherit;
  cursor: pointer;
}

.primary-nav a:hover,
.primary-nav button:hover,
.primary-nav a:focus,
.primary-nav button:focus {
  color: #ffe600;
  outline: none;
}

/* Root-Level Menü ---------------------------------------------------------- */

.primary-nav .menu.root {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
}

.primary-nav .menu.root > li {
  position: relative;
}

/* Submenus ---------------------------------------------------------------- */

.primary-nav .submenu {
  position: absolute;
  left: 0;
  top: 100%;
  background: #1a1a1a;
  min-width: 220px;
  display: none;
  flex-direction: column;
  border: 1px solid #333;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6);
  z-index: 999;
}

.primary-nav .submenu li a {
  padding: 10px 14px;
  font-size: 15px;
}

.primary-nav .submenu li a:hover {
  background: #222;
}

/* Mehrstufige Submenus ---------------------------------------------------- */

.primary-nav .submenu .has-submenu {
  position: relative;
}

.primary-nav .submenu .has-submenu > .submenu {
  left: 100%;
  top: 0;
  margin-left: 1px;
}

/* Mobile Styles ----------------------------------------------------------- */

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid #444;
  padding: 10px 14px;
  color: #fff;
  font-size: 15px;
}

@media (max-width: 900px) {
  .nav-toggle {
    display: block;
  }

  .primary-nav .menu.root {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  .primary-nav .menu.root[data-collapsed="false"] {
    display: flex;
  }

  .primary-nav .submenu {
    position: static;
    display: none;
    border: none;
    box-shadow: none;
    background: #1a1a1a;
  }

  .primary-nav .submenu[data-open="true"] {
    display: flex;
  }
}

/* ==========================================================================
   Desktop Hover Patch – verhindert Schließen bei Bewegung über Lücke
   ========================================================================== */

@media (hover:hover) and (pointer:fine) {
  .primary-nav .has-submenu {
    position: relative;
  }

  .primary-nav .has-submenu > .submenu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    margin-top: 0 !important;
    top: 100%;
    pointer-events: none; /* deaktiviert Klicks, solange versteckt */
  }

  /* unsichtbare Hover-Brücke */
  .primary-nav .has-submenu > .submenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 14px;
    background: transparent;
    pointer-events: auto;
  }

  /* Anzeigen bei Hover oder Fokus */
  .primary-nav .has-submenu:hover > .submenu,
  .primary-nav .has-submenu:focus-within > .submenu,
  .primary-nav .has-submenu > .submenu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Optische Details */
  .primary-nav .submenu {
    background: #1a1a1a;
    border: 1px solid #333;
  }
}

/* === Restore: zentrierte Pill-Buttons im Root-Menü === */
@media (min-width: 901px) {
  /* Root horizontal mittig */
  .primary-nav .menu.root {
    justify-content: center;          /* statt flex-start */
    gap: 0.25rem;                      /* kleine Lücke zwischen Buttons */
  }

  /* Button-Style für Top-Level Links/Buttons */
  .primary-nav .menu.root > li > a,
  .primary-nav .menu.root > li > button.submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 14px;
    margin: 6px 6px;                   /* sorgt für „freistehende“ Pills */
    border: 1px solid #2c2c2c;
    border-radius: 9999px;             /* Pill-Form */
    background: linear-gradient(#1b1b1b, #141414);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 1px 2px rgba(0,0,0,.35);
    color: #f3f3f3;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .03s ease;
  }

  .primary-nav .menu.root > li > a:hover,
  .primary-nav .menu.root > li > button.submenu-toggle:hover,
  .primary-nav .menu.root > li > a:focus,
  .primary-nav .menu.root > li > button.submenu-toggle:focus {
    background: linear-gradient(#232323, #171717);
    border-color: #3a3a3a;
    color: #ffe600;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,.45);
  }

  /* „gedrückt“-Gefühl bei :active */
  .primary-nav .menu.root > li > a:active,
  .primary-nav .menu.root > li > button.submenu-toggle:active {
    transform: translateY(1px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 4px 10px rgba(0,0,0,.6);
  }

  /* Pfeilchen optional: nach rechts ein kleines Caret für Buttons mit Submenu */
  .primary-nav .has-submenu > button.submenu-toggle::after {
    content: "▾";
    font-size: 0.8em;
    margin-left: .35rem;
    opacity: .85;
  }
}

/* === Feinschliff: Dropdown darf die Pill-Buttons nicht verdrängen === */
@media (hover:hover) and (pointer:fine) {
  .primary-nav .has-submenu { position: relative; }

  .primary-nav .has-submenu > .submenu {
    margin-top: 0 !important;
    top: calc(100% + 6px);             /* 6px optischer Abstand, aber mit Hover-Brücke abgefangen */
  }

  .primary-nav .has-submenu > .submenu::before {
    top: -12px;                         /* Hover-Brücke überdeckt die 6px Lücke + Rand */
    height: 14px;
  }
}

/* ==========================================================================
   Aktive Seite im Menü hervorheben
   ========================================================================== */

/* Basisfarbe für aktiven Menüpunkt */
.primary-nav .menu a.active,
.primary-nav .menu button.active {
  background: linear-gradient(#ffe600, #ffcc00);
  color: #111;
  border-color: #ffcc00;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25);
  font-weight: 600;
}

/* Für Submenüs dezenter, aber sichtbar */
.primary-nav .submenu a.active {
  background: #332b00;
  color: #ffe600;
  border-left: 3px solid #ffe600;
}

/* Optional: Hover-Effekt bleibt, aber wird nicht zu hell */
.primary-nav .menu a.active:hover,
.primary-nav .menu button.active:hover {
  background: linear-gradient(#fff04d, #ffd633);
  color: #000;
}

/* ==========================================================================
   Ende nav.css
   ========================================================================== */