/* ============================================================================
   Navigation & Submenu
   Geladen von: layout/header.htm, layout/header_public.htm
   Markup:      layout/navigation_work.htm, layout/navigation_public.htm
   ============================================================================ */

/* --- Top-Navigation Container -------------------------------------------- */

.top-navigation {
  /* WICHTIG: Der Blur liegt auf ::before, NICHT auf dem Header selbst.
     backdrop-filter auf dem Header würde einen "backdrop root" für seinen Teilbaum
     aufspannen. Die .submenu-Flyouts klappen aber per position:absolute; top:100%
     UNTERHALB der Header-Box aus — dort gibt es innerhalb dieses Roots nichts zu
     blurren → die Flyouts blieben durchsichtig (Header geblurrt, Submenü nicht).
     Liegt der Blur stattdessen auf ::before (ein Blatt-Element), ist der Header KEIN
     backdrop root mehr, und die Submenüs blurren wieder selbst gegen die Seite. */
  background-color: transparent;
  /* Navi ist halbtransparent → der Body-Gradient scheint durch. Floating-Labels
     (z. B. globale Suche) reproduzieren daher denselben Gradient (--surface-overlay aus
     :root geerbt, nicht none), damit die Label-Kerbe sich mit dem Hintergrund deckt. */
  border-bottom: 1px solid var(--border-primary);
  position: relative;
  width: 100%;
  z-index: 100;
}

.top-navigation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* hinter den Header-Inhalt, aber innerhalb des Header-Stacking-Contexts (über der Seite) */
  background-color: color-mix(in srgb, var(--background-primary) 70%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Fallback ohne backdrop-filter (alte/abgeschaltete Engines): undurchsichtiger
   Hintergrund statt 70%-transparent, damit der Body-Gradient nicht durchscheint. */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .top-navigation::before {
    background-color: var(--background-primary);
  }
}

.top-navigation .container {
  align-items: center;
  background-color: transparent;
  display: flex;
  flex-flow: row wrap;
  gap: 2rem;
}

.top-navigation .top-navigation-wrap {
  align-items: center;
  display: flex;
  flex: 1 1;
  height: var(--top-nav-height);
  justify-content: space-between;
}

@media screen and (min-width: 769px) {
  .top-navigation .container {
    background-color: transparent;
  }

  .top-navigation .top-navigation-wrap {
    flex: 0 1;
  }
}

/* --- Top-Navigation Main (Wrapper um Nav + Theme-Switch) ----------------- */

.top-navigation-main {
  display: none;
  justify-content: space-between;
  padding: 0;
  width: 100%;
}

.top-navigation-main .main-nav {
  order: 2;
}

.show-nav .top-navigation-main {
  display: flex;
  flex-direction: column;
}

/* Mobile: geöffnetes Menü als eigener Scroll-Container. Ohne das wächst der
   sticky Header über den Viewport hinaus; auf vertikal kleinen Displays scrollt
   dann die Seite dahinter statt das Menü, und die unteren Punkte sind nicht
   erreichbar. Höhe = Viewport minus Navi-Leiste (--top-nav-height) minus dem
   2rem row-gap der .container-Zeile. overscroll-behavior: contain unterbindet
   das Weiterscrollen auf die Seite, sobald das Menüende erreicht ist. */
@media screen and (max-width: 768px) {
  .show-nav .top-navigation-main {
    max-height: calc(100vh - var(--top-nav-height) - 2rem);
    max-height: calc(100dvh - var(--top-nav-height) - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media screen and (min-width: 769px) {
  .top-navigation-main {
    align-items: center;
    display: flex;
    flex: 1 1;
    flex-direction: row;
    gap: .5rem;
    left: inherit;
    padding: 0;
    position: static;
    top: inherit;
    z-index: inherit;
  }

  .show-nav .top-navigation-main {
    flex-direction: row;
  }

  .top-navigation-main .main-nav {
    margin-right: auto;
    order: 0;
    width: max-content;
  }
}

/* --- Top-Level-Einträge -------------------------------------------------- */

.top-navigation-main .top-level-entry {
  background: none;
  border-top: 1px solid var(--border-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  padding: 1rem .5rem;
  text-align: left;
  width: 100%;
}

.top-navigation-main .top-level-entry:link,
.top-navigation-main .top-level-entry:visited {
  color: var(--text-secondary);
}

.top-navigation-main .top-level-entry.menu-toggle {
  min-height: 53px;
  padding: .5rem;
}

.top-navigation-main .top-level-entry-container {
  font-size: var(--top-level-front-size);
  position: relative;
}

.top-navigation-main .top-level-entry-container .submenu {
  z-index: var(--z-index-nav-menu);
}

@media screen and (max-width: 769px) {
  .top-navigation-main .top-level-entry.button {
    --button-color: var(--text-secondary);
    --button-padding: 0;
    --button-radius: 0;
  }

  .top-navigation-main .top-level-entry.button .button-wrap {
    background: none;
    border: none;
    gap: .5rem;
    justify-content: flex-start;
    padding: 0;
    text-transform: none;
  }

  .top-navigation-main .top-level-entry.button:focus {
    --button-focus-effect: none;
  }
}

@media screen and (min-width: 769px) {
  .top-navigation-main .top-level-entry {
    border-radius: var(--elem-radius);
    border-top: none;
    padding: .5rem;
  }

  .top-navigation-main .top-level-entry:focus,
  .top-navigation-main .top-level-entry:hover {
    background-color: var(--category-color-background);
    color: var(--category-color);
    text-decoration: none;
  }

  .top-navigation-main .top-level-entry.button {
    padding: 0;
  }

  .top-navigation-main .button.action:hover {
    --button-bg: var(--border-secondary);
  }

  /* Hover-Bridge Teil 1: Container erweitert seine Hover-Fläche nach unten,
     damit der Mauszeiger beim Übergang Button->Submenü nicht in eine Lücke
     fällt und das :hover verliert. */
  .top-navigation-main .top-level-entry-container {
    padding-bottom: 12px;
  }
}

/* --- Menu-Toggle (Pfeil-Button) ----------------------------------------- */
/* Markup (aus update_navigation_cache.php): a.top-level-entry.menu-link (Ziel-Link)
   + button.top-level-entry.menu-toggle (reiner Icon-Button, kein Label-Text) als
   Geschwister. So bleiben auf Mobile Navigieren UND Untermenü-Aufklappen getrennt
   antippbar — vorher lag das Label NUR im Button, der Link war auf Mobile per
   CSS ausgeblendet und die Seite selbst dadurch nicht erreichbar. */

.top-navigation-main .menu-toggle {
  align-items: center;
  display: flex;
  justify-content: center;
  min-width: 53px;
  position: relative;
}

.top-navigation-main .menu-toggle::after {
  background-color: var(--icon-primary);
  content: "";
  height: var(--icon-size);
  -webkit-mask-image: url("/static/icon/arrow-down.svg");
  mask-image: url("/static/icon/arrow-down.svg");
  width: var(--icon-size);
}

.top-navigation-main .menu-toggle[aria-expanded=true]::after,
.top-navigation-main .menu-toggle.show-sub::after {
  transform: rotate(180deg);
}

@media screen and (max-width: 768px) {

  /* Anker + Toggle-Button nebeneinander in einer Reihe; das Submenü (3. Kind)
     bricht per flex-wrap in die volle Breite darunter um, sobald es sichtbar ist. */
  .top-navigation-main .top-level-entry-container.has-submenu {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
  }

  .top-navigation-main .top-level-entry-container.has-submenu>.top-level-entry {
    width: auto;
  }

  .top-navigation-main .top-level-entry-container.has-submenu>.menu-link {
    flex: 1 1 auto;
    min-width: 0;
  }

  .top-navigation-main .top-level-entry-container.has-submenu>.menu-toggle {
    flex: 0 0 auto;
  }

  .top-navigation-main .top-level-entry-container.has-submenu>.submenu {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media screen and (min-width: 769px) {

  /* Die JS-gesteuerten Toggle-Buttons sind nur auf Mobile aktiv — auf Desktop
     werden Submenüs per :hover / :focus-within gesteuert (siehe unten). */
  ul.main-menu .menu-toggle,
  ul.main-menu .submenu,
  ul.main-menu .submenu.show {
    display: none;
  }

  .button.main-menu-toggle {
    display: none;
  }
}

/* --- Main Menu (ul.main-menu) ------------------------------------------- */

ul.main-menu {
  box-sizing: border-box;
  gap: 1rem;
  list-style: none;
  margin-top: 1rem;
  padding: 0;
  width: 100%;
}

ul.main-menu.show {
  display: block;
}

@media screen and (min-width: 769px) {
  ul.main-menu {
    align-items: center;
    display: flex;
    justify-content: space-around;
    margin: 0 auto 0 0;
  }

  ul.main-menu li:last-child {
    flex-basis: inherit;
  }

  /* Submenü per Hover/Focus auf dem Container sichtbar machen. */
  ul.main-menu .top-level-entry-container:focus-within .submenu,
  ul.main-menu .top-level-entry-container:hover .submenu {
    display: block;
  }
}

/* --- Submenu ------------------------------------------------------------ */

.submenu {
  background-color: var(--background-primary);
  list-style: none;
  margin: 0;
  padding: 0;
}

.submenu li {
  width: 100%;
}

.submenu .submenu-item,
.submenu a {
  align-items: center;
  border: 1px solid transparent;
  color: var(--text-primary);
  display: flex;
  height: 100%;
  padding: .5rem;
  width: 100%;
}

.submenu .submenu-item:hover,
.submenu a:hover {
  background-color: var(--background-secondary);
  text-decoration: none;
  color: var(--accent-primary);
}

.main-menu .submenu .submenu-item:hover,
.main-menu .submenu a:hover {
  background-color: var(--background-secondary);
}

.submenu .submenu-item:focus,
.submenu a:focus {
  border: 1px solid var(--button-secondary-border-focus);
  box-shadow: var(--button-focus-effect);
}

.submenu .submenu-item .icon,
.submenu a .icon {
  margin-right: .5rem;
}

.submenu-item,
.submenu-item-heading {
  font-size: var(--type-smaller-font-size);
}

.submenu-header .submenu-item {
  padding: 0;
}

.submenu-header .submenu-item:hover {
  background: none;
}

.submenu .submenu-item-heading {
  font-size: var(--sub-level-front-size);
  font-weight: 400;
}

li:last-child .submenu .submenu-item:not(:focus),
li:last-child .submenu a:not(:focus) {
  border-bottom-color: transparent;
}

/* Mobile: Unterpunkte gegenüber dem Top-Level-Eintrag (sitzt bei .5rem) einrücken,
   damit die Hierarchie im aufgeklappten Menü sichtbar wird. Nur Navigation, denn
   .submenu wird auch außerhalb (calculation_edit, customer_edit …) verwendet. */
@media screen and (max-width: 768px) {

  .top-navigation-main .submenu .submenu-item,
  .top-navigation-main .submenu a {
    padding-left: 1.75rem;
  }
}

@media screen and (min-width: 769px) {

  /* Desktop-Flyout: gilt für alle Submenüs. Die ursprüngliche Trennung in
     .inline-submenu-lg und :not(.inline-submenu-lg) war identisch — alle
     Submenüs im Markup tragen inline-submenu-lg, die Regeln werden daher
     zusammengefasst. */
  .submenu {
    background-color: var(--background-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--elem-radius);
    box-shadow: var(--shadow-02);
    max-width: 25rem;
    padding: .5rem;
    position: absolute;
    top: 100%;
    width: max-content;
    z-index: var(--z-index-mid);
  }

  .main-menu .submenu {
    background-color: color-mix(in srgb, var(--background-primary) 70%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Fallback ohne backdrop-filter: opaker Hintergrund, sonst wäre das Flyout
     halbtransparent und der dahinterliegende Inhalt schimmert durch. */
  @supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .main-menu .submenu {
      background-color: var(--background-primary);
    }
  }

  /* Kein Clipping/Scroll-Container: ein overflow ≠ visible würde die seitlich
     austretenden Sub-Flyouts (.submenu-sub, 4. Ebene) und die Hover-Brücke
     (.submenu::before) abschneiden. Die Panels sind dank Gruppen + Aufklapp-
     Punkten kurz genug, dass sie nicht aus dem Viewport laufen. */
  .top-navigation-main .submenu {
    overflow: visible;
  }

  .submenu .submenu-item {
    border-radius: var(--elem-radius);
    padding: .75rem;
  }

  /* Hover-Bridge Teil 2: unsichtbare 12px-Brücke oberhalb des Submenüs,
     damit der Hover beim Übergang vom Top-Entry zum Submenü erhalten bleibt.
     Zusammen mit dem padding-bottom:12px am top-level-entry-container
     entsteht ein durchgehender Hover-Bereich ohne Lücke. */
  .submenu::before {
    content: "";
    display: block;
    height: 12px;
    left: -12px;
    position: absolute;
    right: -12px;
    top: -12px;
  }

  .submenu-header {
    border-bottom: 1px solid var(--border-primary);
  }

  .submenu-item-heading:not(:only-child),
  .submenu-item:not(:only-child) {
    font-weight: var(--font-body-strong-weight);
  }
}

/* --- Mega-Panel: Top-Level mit Untergruppen (3 Ebenen) ------------------- */
/* Markup (aus scripts/update_navigation_cache.php, sobald ein Top-Level-Kind
   selbst Kinder hat):
     div.submenu.submenu-mega
       > div.submenu-group
           > div.submenu-group-heading
           > ul.submenu-group-list > li > a.submenu-item
   Desktop: Gruppen als Spalten nebeneinander (ein Hover). Mobile: jede Gruppe
   ein aufklappbares Akkordeon (Toggle via .open, gesetzt im Template-JS). */

.submenu-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.submenu-group-heading {
  color: var(--text-secondary);
  font-size: var(--type-smaller-font-size);
  font-weight: var(--font-body-strong-weight);
  letter-spacing: .03em;
  text-transform: uppercase;
}

@media screen and (max-width: 768px) {

  /* Gruppen-Überschrift = Akkordeon-Toggle */
  .top-navigation-main .submenu-group-heading {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: .6rem 1.75rem;
  }

  .top-navigation-main .submenu-group-heading::after {
    background-color: var(--icon-primary);
    content: "";
    height: var(--icon-size);
    -webkit-mask-image: url("/static/icon/arrow-down.svg");
    mask-image: url("/static/icon/arrow-down.svg");
    transition: transform .15s ease;
    width: var(--icon-size);
  }

  .top-navigation-main .submenu-group.open>.submenu-group-heading::after {
    transform: rotate(180deg);
  }

  /* Gruppen-Inhalt standardmäßig eingeklappt, .open klappt auf */
  .top-navigation-main .submenu-group-list {
    display: none;
  }

  .top-navigation-main .submenu-group.open>.submenu-group-list {
    display: block;
  }

  /* Blattgruppe ohne Überschrift (einzelner Punkt direkt im Mega-Panel, s.
     update_navigation_cache.php) hat keinen Klick-Trigger zum Aufklappen —
     ohne diese Regel bliebe sie permanent unsichtbar/unerreichbar. */
  .top-navigation-main .submenu-group-flat>.submenu-group-list {
    display: block;
  }

  /* Blätter tiefer einrücken als die Gruppen-Überschrift */
  .top-navigation-main .submenu-mega .submenu-item {
    padding-left: 2.75rem;
  }
}

@media screen and (min-width: 769px) {

  /* Sichtbares Mega-Panel ist flex (Spalten) statt block. Gleiche Spezifität wie
     die :hover .submenu{display:block}-Regel weiter oben → diese steht später und
     gewinnt für .submenu-mega. */
  ul.main-menu .top-level-entry-container:focus-within .submenu-mega,
  ul.main-menu .top-level-entry-container:hover .submenu-mega {
    display: flex;
  }

  .submenu-mega {
    align-items: flex-start;
    gap: 1.5rem;
    /* mittig unter dem Top-Level-Punkt (statt rechtsbündig) */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: min(60rem, 96vw);
  }

  .submenu-mega .submenu-group {
    min-width: 11rem;
  }

  .submenu-mega .submenu-group-heading {
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: .35rem;
    padding: .25rem .75rem .4rem;
  }
}

/* --- Aufklappbare Sub-Punkte (4. Ebene) — Hover-Reveal, KEIN <details> ----- */
/* Markup: li.submenu-sub > (span.submenu-sub-summary + ul.submenu-sub-flyout).
   Bewusst kein <details>: dessen Inhalt bleibt ohne open-Attribut nativ unsichtbar
   (content-visibility / ::details-content), auch bei display:block am Kind.
   Stattdessen wie das Hauptpanel: Desktop = seitliches Hover-Flyout, Mobile =
   eingerückt dauerhaft sichtbar. */

.submenu-sub {
  list-style: none;
}

/* "Summary" ist ein <span> und sieht aus wie ein submenu-item, plus Pfeil rechts (▸). */
.submenu-sub-summary {
  justify-content: space-between;
}

.submenu-sub-summary::after {
  background-color: var(--icon-primary);
  content: "";
  flex: none;
  height: var(--icon-size);
  margin-left: .5rem;
  -webkit-mask-image: url("/static/icon/arrow-down.svg");
  mask-image: url("/static/icon/arrow-down.svg");
  transform: rotate(-90deg);
  /* ▸ zur Seite */
  width: var(--icon-size);
}

.submenu-sub-flyout {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 768px) {

  /* Mobile: Sub-Einträge eingerückt, dauerhaft sichtbar (kein Toggle nötig, JS-frei) */
  .top-navigation-main .submenu-sub-summary::after {
    display: none;
  }

  .top-navigation-main .submenu-sub-flyout .submenu-item {
    padding-left: 2.75rem;
  }

  .top-navigation-main .submenu-mega .submenu-sub-flyout .submenu-item {
    padding-left: 3.75rem;
  }
}

@media screen and (min-width: 769px) {

  /* Desktop: seitliches Sub-Flyout-Fenster, öffnet nach links per Hover (wie das
     Hauptpanel) und verschwindet bei Hover-Verlust. */
  .submenu-sub {
    position: relative;
  }

  .submenu-sub-flyout {
    background-color: var(--background-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--elem-radius);
    box-shadow: var(--shadow-02);
    display: none;
    max-height: calc(100dvh - 6rem);
    min-width: 13rem;
    overflow: hidden auto;
    padding: .5rem;
    position: absolute;
    right: 100%;
    top: 0;
    z-index: var(--z-index-mid);
  }

  .submenu-sub:hover>.submenu-sub-flyout,
  .submenu-sub:focus-within>.submenu-sub-flyout {
    display: block;
  }
}