/* ============================================================
   Main Navigation
   HTML: <nav id="main-nav"> > ul > li > a [+ .sub-toggle + ul]
   Toggle: #nav-toggle lives inside #brand (rendered by Header.php)

   Mobile:  burger → vertical accordion, submenus slide inline
   Desktop: horizontal bar, submenus as absolute dropdowns on hover

   States (toggled by JS via classes):
   - #main-nav.open → mobile menu visible
   - li.open        → submenu expanded (mobile only)

   Tier-specific decoration (hover styles, dropdown background/border/shadow)
   lives in tier/{default|basic|pro}/header.css — this file only holds layout.

   ------------------------------------------------------------
   UMSCHALTPUNKT Burger <-> horizontale Leiste — oeffentlicher Kontrakt
   ------------------------------------------------------------
   Die Bedingung steht an EINER Stelle, hier: `--nav-mode` auf #site-header.
   Sie wird unten in der Media-Query auf `horizontal` gesetzt, sonst gilt `burger`.

   header.js liest den berechneten Wert und spiegelt ihn als Klasse auf den
   Header: `#site-header.nav-horizontal` bzw. `.nav-burger` (wie .scrolled /
   .compact / .hidden). Tier- und Projekt-CSS koennen den Zustand damit
   ANSPRECHEN, statt die Media-Query wortwoertlich nachbauen zu muessen:

       #site-header.nav-horizontal #main-nav { ... }   /* eigenes Grid-Layout */
       #site-header.nav-burger    #main-nav { ... }    /* gestapelt */

   OHNE JS geht es auch: `--nav-mode` ist per Style Query direkt abfragbar —

       @container style(--nav-mode: horizontal) { #main-nav { ... } }

   Kein `container-type` noetig (jedes Element ist Style-Container, --nav-mode vererbt
   sich vom Header). ⚠ Support geprueft 10.09.2026: Chrome/Edge 111, Safari 18, aber
   FIREFOX erst 151 (19.05.2026), global ~92 %, Firefox ESR absehbar nicht. Ohne
   Unterstuetzung greift die Regel ERSATZLOS nicht — fuer tragendes Layout deshalb die
   Klasse nehmen, fuer Kosmetik ist die Style Query in Ordnung.

   Wer den Umschaltpunkt VERSCHIEBEN will, setzt `--nav-mode` in einer eigenen
   Media-Query um — die Klasse folgt dann von selbst:

       @media (min-width: 45rem) and (max-width: 79.499rem) and (orientation: landscape) {
         #site-header { --nav-mode: burger; }
       }

   ACHTUNG: Das aendert den ZUSTAND, nicht die Layout-Regeln unten — die haengen
   weiterhin an der Media-Query. Fuer den haeufigsten Fall (Querformat-Arm ganz
   abschalten) gibt es dafuer den vom Kernel gepflegten Rueckbau-Block am Ende
   dieser Datei: `nav_landscape_early = false` in html/config/app.php.
   ============================================================ */

/* Voreinstellung des Zustands. Steht auf #site-header (nicht :root), damit ein
   Tier ihn pro Header umsetzen kann. */
#site-header {
  --nav-mode: burger;
}

#main-nav {
  background: var(--color-bg);
  position: relative;
  z-index: 10;
}

/* ========================
   Burger toggle (rendered inside #brand)
   ======================== */

#nav-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.25rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

.btn_nav_toggle {
  height: 2.25rem;
  width: 2.25rem;
  margin: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
}

.btn_nav_toggle .status {
  position: absolute;
  top: 1rem;
  left: 0;
}

.btn_nav_toggle .status,
.btn_nav_toggle .status:before,
.btn_nav_toggle .status:after {
  content: '';
  display: block;
  background: var(--color-text);
  height: 1px;
  width: 2rem;
  transition: all var(--transition-med);
}

.btn_nav_toggle .status:before { transform: translateY(-8px); }
.btn_nav_toggle .status:after  { transform: translateY(8px); }

/* Active state: morph burger into an X */
.btn_nav_toggle .status.active          { transform: rotate(45deg); }
.btn_nav_toggle .status.active:before   { opacity: 0; }
.btn_nav_toggle .status.active:after    { transform: translateY(-2px) rotate(-90deg); }

@media (min-width: 79.5rem),
       (min-width: 45rem) and (orientation: landscape) {
  #nav-toggle {
    display: none;
  }
}

/* ========================
   Mobile (default)
   ======================== */

/* Main menu: hidden until burger opens it */
#main-nav > ul {
  display: none;
  flex-direction: column;
}

/* Mobile-Open: Menu schwebt als Overlay unterhalb der Header-Zeile, damit der
   Page-Content nicht nach unten gedrückt wird. #main-nav (position: relative)
   ist der Ankerpunkt — top:100% positioniert die Liste direkt darunter.
   Solid-Glass-Optik passend zum Desktop-Dropdown. */
#main-nav.open > ul {
  display: flex;
  position: absolute;
  top: 100%;
  inset-inline: 0;
  z-index: 100;
  background: var(--glass-solid);
  backdrop-filter: blur(1rem) saturate(180%);
  border: 0.0625rem solid var(--color-border);
  box-shadow: var(--shadow-lg), inset 0 0.0625rem 0 hsl(0 0% 100% / 0.2);
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Each top-level item: link + chevron in one row, submenu below */
#main-nav > ul > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-inline-start: var(--space-4);
  border-bottom: 0.0625rem solid var(--color-border);
}

#main-nav > ul > li > a {
  flex: 1;
  /* padding-inline-start: var(--space-4) → matched brand first-child margin
     (Logo links). So sind Menü-Text und Logo links bündig. */
  padding-block: var(--space-3);
  padding-inline-start: var(--space-4);
  padding-inline-end: var(--space-2);
  font-family: var(--font-nav), sans-serif;
  font-size: var(--text-sm);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking);
  color: var(--color-text);
  transition: color var(--transition);
}

/* Hover color is defined per tier in tier/{default,basic,pro}/header.css.
   Only the text-decoration reset stays global. */
#main-nav > ul > li > a:hover {
  text-decoration: none;
}

/* --- Chevron toggle button --- */

#main-nav .sub-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Width + margin-inline-end matchen den #nav-toggle (Burger/X-Button) im
     #brand-Bereich: width 3.5rem + margin-end space-4. Dadurch liegen
     nav-toggle (X oben) und sub-toggle-Pfeile (▾ in jedem Menü-Item)
     vertikal exakt untereinander. */
  width: 3.5rem;
  height: 3rem;
  margin: 0;
  margin-inline-end: var(--space-4);
  padding: 0;
  border: none;
  border-left: 0.0625rem solid var(--color-border);
  background: none;
  color: var(--color-text);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

#main-nav .sub-toggle:hover,
#main-nav .sub-toggle[aria-expanded="true"] {
  color: var(--color-text);
  background: var(--color-bg-alt);
}

#main-nav .sub-toggle svg {
  display: block;
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  transition: transform var(--transition-med);
}

#main-nav li.open > .sub-toggle svg {
  transform: rotate(180deg);
}

/* --- Submenu: slides inline between items (animated) --- */

#main-nav ul ul {
  width: 100%;
  position: static;
  overflow: hidden;
  max-height: 0;
  padding-inline-start: var(--space-4);
  background: var(--color-bg-alt);
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: max-height var(--transition-slow), padding var(--transition-slow);
}

#main-nav li.open > ul {
  max-height: 30rem;
  padding-block: var(--space-2);
}

#main-nav ul ul a {
  display: block;
  padding: var(--space-2);
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

#main-nav ul ul a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* ========================
   Desktop (>= 79.5rem) + Tablet-Landscape (>= 45rem + landscape)
   ======================== */

@media (min-width: 79.5rem),
       (min-width: 45rem) and (orientation: landscape) {

  /* Zustand fuer header.js + Tier-CSS (s. Kopf dieser Datei). Diese eine
     Deklaration ist die Quelle des Umschaltpunkts — sie steht bewusst in
     derselben Query wie die Layout-Regeln darunter, damit beides nicht
     auseinanderlaufen kann. */
  #site-header {
    --nav-mode: horizontal;
  }

  /* Hide chevrons (burger hidden via its own media query). Touch-User auf
     Tablet-Landscape öffnen Sub-Menüs per Tap auf den Top-Level-Link
     (siehe nav.js touch-first-tap-pattern), nicht über einen extra Toggle. */
  #main-nav .sub-toggle {
    display: none;
  }

  /* Menu always visible, horizontal */
  #main-nav > ul,
  #main-nav.open > ul {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  #main-nav > ul > li {
    position: relative;
    border-bottom: none;
    flex-wrap: nowrap;
    /* Mobile-Einrückung zurücksetzen, kleines Inline-Margin zwischen den
       Top-Level-Items (analog zum Sub-Menu-Pattern weiter unten). */
    padding-inline-start: 0;
    margin-inline: var(--space-1);
  }

  #main-nav > ul > li > a {
    /* Reduziertes Inline-Padding — Spacing zwischen Items kommt jetzt vom
       margin-inline auf <li>, nicht mehr vom Padding der <a>. */
    padding: var(--space-4) var(--space-3);
    font-size: var(--text-xs);
  }
  /* Hover indicator (underline, pill, dot, …) is defined per tier. */

  /* Dropdown: absolute overlay. Default versteckt, wird durch :hover (Maus)
     oder li.open (Touch-Tap, gesetzt von nav.js) sichtbar.
     Background / border / shadow sind per Tier definiert (glass vs. solid).
     Flex+gap (statt block) baut den vertikalen Abstand zwischen den Items
     auf, ohne dass jeder <a> selbst margin-top tragen muss. */
  #main-nav ul ul {
    display: none;
    flex-direction: column;
    gap: var(--space-1);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    width: auto;
    min-width: 14rem;
    max-height: none;
    overflow: visible;
    padding: var(--space-2) 0;
    border-radius: var(--radius);
    transition: none;
  }

  /* Hover-Open nur auf echten Hover-Geräten. Verhindert Sticky-Hover-Bug,
     bei dem das Sub-Menü beim Scrollen-Streifen aufgeht und offen bleibt. */
  @media (hover: hover) {
    #main-nav > ul > li:hover > ul {
      display: flex;
    }
  }

  /* Tap-Toggle (Touch-Geräte): nav.js setzt .open beim ersten Tap auf
     einen Top-Level-Link mit Sub-Menü. Zweiter Tap navigiert. */
  #main-nav > ul > li.open > ul {
    display: flex;
  }

  /* Last two top-level items: flip dropdown to the left (avoid viewport overflow) */
  #main-nav > ul > li:nth-last-child(-n+2) > ul {
    left: auto;
    right: 0;
  }

  /* Sub-Item: margin-inline rueckt das Item vom Dropdown-Rand ab (Insel-Look),
     reduziertes padding kompensiert die zusaetzliche Luft. border-radius
     macht den Hover-Background-Rand sauber innerhalb des margin-Bereichs. */
  #main-nav ul ul a {
    margin-inline: var(--space-2);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    border-radius: var(--radius);
    transition: padding-inline-start var(--transition), color var(--transition), background var(--transition);
  }

  /* Hover-Slide-In: Text rueckt beim Hover ein paar Pixel nach innen.
     Visueller Cue, dass das Item interaktiv ist. */
  #main-nav ul ul a:hover {
    padding-inline-start: var(--space-5);
  }

  /* Dropdown-item hover-Farben (Background, Text) sind per Tier definiert
     und matchen den Dropdown-Background. */
}

/* ============================================================
   Querformat-Arm abschalten — `nav_landscape_early = false`
   ============================================================
   Der Block oben schaltet die horizontale Leiste nicht nur ab 79.5rem ein,
   sondern im Querformat schon ab 45rem (720px). Fuenf Menuepunkte brauchen
   einzeilig aber rund 1072px — dazwischen bricht die Leiste um. Wer das nicht
   will, setzt in html/config/app.php:

       const nav_landscape_early = false;

   FrontendView setzt daraufhin `data-nav-landscape="off"` auf den #site-header,
   und dieser Block holt zwischen 45rem und 79.499rem im Querformat den Burger
   zurueck. Ab 79.5rem bleibt alles unveraendert.

   ⚠ Das ist die vollstaendige Differenz zum Burger-Block — sie muss mit dem
   Horizontal-Block oben synchron bleiben. `tools/check-nav-contract.php` prueft
   genau das: taucht dort ein Selektor oder eine Property auf, die hier fehlt,
   meldet es das. Zwei Faelle sind aus dem CSS allein NICHT ablesbar und deshalb
   hier ausgeschrieben:
     - `align-items`: der Horizontal-Block setzt `center` (auf einer Zeile die
       vertikale Mitte, harmlos). Auf der zurueckgeholten Spalte ist es die
       HORIZONTALE Mitte — die Menuepunkte stuenden zentriert. Der Burger-Block
       setzt die Property gar nicht, der Rueckbau ist also `stretch`.
     - `padding` auf `> li > a`: der Horizontal-Block nutzt den Shorthand und
       ueberschreibt damit auch den LINKEN Einzug (12px statt 16px). Der Text
       verschoebe sich gegen das Logo, das auf 16px ausgerichtet ist. Der
       Rueckbau nutzt die logischen Einzelwerte (RTL-sicher).
   ============================================================ */

@media (min-width: 45rem) and (max-width: 79.499rem) and (orientation: landscape) {

  /* Burger + Chevrons zurueck */
  #site-header[data-nav-landscape="off"] #nav-toggle,
  #site-header[data-nav-landscape="off"] #main-nav .sub-toggle {
    display: flex;
  }

  /* Liste wieder gestapelt und geschlossen */
  #site-header[data-nav-landscape="off"] #main-nav > ul {
    display: none;
    flex-direction: column;
    align-items: stretch;
  }

  /* Die Richtung/Ausrichtung gehoert hier WIEDERHOLT hin: der Horizontal-Block setzt
     sie ueber die Selektorliste `#main-nav > ul, #main-nav.open > ul` auch fuer den
     geoeffneten Zustand. Dass die Regel darueber dank hoeherer Spezifitaet ohnehin
     gewinnt, ist Arithmetik — die Absicht steht besser da, wo sie gilt. */
  #site-header[data-nav-landscape="off"] #main-nav.open > ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  #site-header[data-nav-landscape="off"] #main-nav > ul > li {
    position: static;
    border-bottom: 0.0625rem solid var(--color-border);
    flex-wrap: wrap;
    padding-inline-start: var(--space-4);
    margin-inline: 0;
  }

  #site-header[data-nav-landscape="off"] #main-nav > ul > li > a {
    padding-block: var(--space-3);
    padding-inline-start: var(--space-4);
    padding-inline-end: var(--space-2);
    font-size: var(--text-sm);
  }

  /* Untermenue wieder inline aufklappend statt absolutes Dropdown */
  #site-header[data-nav-landscape="off"] #main-nav ul ul {
    display: block;
    flex-direction: row;
    gap: 0;
    position: static;
    top: auto;
    left: auto;
    z-index: auto;
    width: 100%;
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    padding-inline-start: var(--space-4);
    border-radius: 0;
    transition: max-height var(--transition-slow), padding var(--transition-slow);
  }

  /* Kein Hover-Dropdown; geoeffnet wird ueber li.open (Chevron, nav.js) */
  #site-header[data-nav-landscape="off"] #main-nav > ul > li:hover > ul {
    display: block;
  }

  #site-header[data-nav-landscape="off"] #main-nav > ul > li.open > ul {
    display: block;
  }

  #site-header[data-nav-landscape="off"] #main-nav li.open > ul {
    max-height: 30rem;
    padding-block: var(--space-2);
  }

  /* Kein Links-Flip der letzten beiden Dropdowns */
  #site-header[data-nav-landscape="off"] #main-nav > ul > li:nth-last-child(-n+2) > ul {
    left: auto;
    right: auto;
  }

  #site-header[data-nav-landscape="off"] #main-nav ul ul a {
    display: block;
    margin-inline: 0;
    padding: var(--space-2);
    font-size: var(--text-sm);
    border-radius: 0;
    transition: color var(--transition);
  }

  #site-header[data-nav-landscape="off"] #main-nav ul ul a:hover {
    padding-inline-start: var(--space-2);
  }

  /* Zustand mitziehen: header.js spiegelt ihn als Klasse auf den Header. */
  #site-header[data-nav-landscape="off"] {
    --nav-mode: burger;
  }
}