/*
  Hauptnavigation (ersetzt boxmenu.css + die Inline-Toggle-Logik in inc-main-java.php).
  Farben entsprechen den bisherigen PHP-Variablen $dunkelblau / $hellblau in index.php.
*/
:root {
  /* Design-Redesign "Warehouse Signal" (2026-07-31): Navy vertieft, dazu ein
     Signal-Orange-Akzent fuer interaktive Elemente (siehe --nav-accent, wird
     u.a. fuer den Hover-Rahmen der Hauptmenuepunkte verwendet). */
  --nav-dark: #1B2E44;
  --nav-light: #CDD8EC;
  --nav-text-on-dark: #FFFFFF;
  --nav-text-on-light: #1B2E44;
  --nav-accent: #E8821E;
}

.site-nav {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
  z-index: 30;
}

/* Der dunkelblaue Balken soll ueber die volle Seitenbreite gehen, auch wenn
   ".pagewrap" (der Elternbereich) auf eine feste Breite begrenzt ist und
   zentriert wird - klassischer "Full-Bleed"-Trick: per Breite/Negativ-Margin
   bis zum Viewport-Rand ausbrechen, dann per Padding den Inhalt wieder an die
   urspruengliche Position zurueckholen. Die Menuepunkte selbst bleiben dadurch
   unveraendert an ihrer Position stehen. */
.site-nav__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  margin: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 8px calc(50vw - 50% + 8px);
  box-sizing: border-box;
  background-color: var(--nav-dark);
}

.site-nav__item {
  position: relative;
}

.site-nav__toplink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 120px;
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background-color: var(--nav-light);
  color: var(--nav-text-on-light);
  font-family: inherit;
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

a.site-nav__toplink {
  display: inline-flex;
}

.site-nav__toplink-svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.site-nav__toplink:hover,
.site-nav__toplink:focus-visible,
.site-nav__item.is-open > .site-nav__toplink {
  background-color: var(--nav-dark);
  color: var(--nav-text-on-dark);
  outline: 2px solid var(--nav-accent);
  outline-offset: -2px;
}

.site-nav__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  max-width: 90vw;
  background-color: var(--nav-light);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  padding: 10px;
}

.site-nav__item.is-open > .site-nav__panel {
  display: block;
}

.site-nav__list,
.site-nav__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Feste "Pfeil-Spalte" links (2026-08-11): JEDER Eintrag - auch die ohne eigenen
   Pfeil/Untermenue - bekommt denselben linken Abstand, damit der Text immer an
   exakt derselben Stelle beginnt. Der Pfeil selbst wird bei Eintraegen, die
   einen haben, absolut IN dieser Spalte positioniert statt den Text zu
   verschieben - so haengt die Ausrichtung nie von der Textlaenge ab. */
.site-nav__list a,
.site-nav__sublink {
  display: block;
  width: 100%;
  padding: 6px 8px 6px 26px;
  border: 0;
  background: none;
  color: var(--nav-text-on-light);
  font-family: inherit;
  font-size: 0.95em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible,
.site-nav__sublink:hover,
.site-nav__sublink:focus-visible {
  color: var(--nav-accent);
  font-weight: bold;
  text-decoration: underline;
}

.site-nav__sublink {
  position: relative;
}

/* Pfeil VOR dem Text statt danach (2026-08-11): absolut in der Pfeil-Spalte
   positioniert, nicht per Margin neben den Text gesetzt - dadurch bleibt der
   Text bei JEDEM Eintrag an derselben Stelle, unabhaengig von der Textlaenge. */
.site-nav__sublink::before {
  content: "\25BE";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.15s ease;
}

button[aria-expanded="true"].site-nav__sublink::before {
  transform: translateY(-50%) rotate(180deg);
}

.site-nav__sublist {
  display: none;
  margin: 4px 0 4px 8px;
  padding-left: 14px;
  border-left: 2px solid var(--nav-dark);
}

.site-nav__has-children.is-open > .site-nav__sublist {
  display: block;
}

/* Mobiler Hamburger-Umschalter: wiederverwendet die vorhandenen menu_d.png/menu_w.png Icons */
.site-nav-toggle {
  display: none;
}

@media screen and (max-width: 700px) {
  .site-nav-toggle {
    display: inline-block;
  }

  .site-nav__bar {
    display: none;
    flex-direction: column;
  }

  .site-nav.is-mobile-open .site-nav__bar {
    display: flex;
  }

  .site-nav__panel {
    position: static;
    max-width: none;
    box-shadow: none;
    margin-left: 12px;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}