/* ======================================================================
   ITX-Navigation  -  itx-nav-desktop.css
   Loaded via <link media="only screen and (min-width: {breakpoint}px)">.
   NO @media wrapper here - the breakpoint comes from the plugin setting
   (class-itx-nav-render.php).
   ====================================================================== */

.itx_nav_burger    { display: none; }
.itx_nav_offcanvas { display: none; }
.itx_nav_overlay   { display: none; }

/* --- Nav container --- */

.itx_nav_nav {
  position:    relative;
  display:     flex;
  align-items: center;
}

/* --- Top-level list (horizontal) --- */

.itx_nav_desktop-wrap .itx_nav_menu.itx_nav_level-1 {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
}

/* --- Items: flex container so link + indicator sit SIDE BY SIDE --- */

.itx_nav_desktop-wrap .itx_nav_item {
  position:    relative;
  display:     flex;
  align-items: center;
  column-gap:  var(--itx-nav-indicator-gap, 0.25rem);
}

/* In submenus the link fills the width, indicator moves to the right */
.itx_nav_desktop-wrap .itx_nav_submenu .itx_nav_link {
  flex: 1;
}

/* --- Links --- */

.itx_nav_desktop-wrap .itx_nav_link {
  display:     flex;
  align-items: center;
  padding:     var(--itx-nav-link-pad-y, 0.5rem) var(--itx-nav-link-pad-x, 0.75rem);
  color:       var(--itx-nav-link-color, #1a1a1a);
  font-size:   var(--itx-nav-font-size, 1rem);
  font-weight: var(--itx-nav-font-weight, 400);
  white-space: nowrap;
  transition:  color 0.15s ease;
}

.itx_nav_desktop-wrap .itx_nav_link:hover,
.itx_nav_desktop-wrap .itx_nav_link:focus-visible {
  color: var(--itx-nav-link-color-hover, #0055cc);
}

.itx_nav_desktop-wrap .itx_nav_item--current          > .itx_nav_link,
.itx_nav_desktop-wrap .itx_nav_item--current-parent   > .itx_nav_link,
.itx_nav_desktop-wrap .itx_nav_item--current-ancestor > .itx_nav_link {
  color:       var(--itx-nav-link-color-active, #0055cc);
  font-weight: var(--itx-nav-font-weight-bold, 600);
}

/* --- Toggle button (indicator) --- */

.itx_nav_desktop-wrap .itx_nav_toggle {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--itx-nav-link-pad-y, 0.5rem) 0;
  color:           var(--itx-nav-indicator-color, currentColor);
}

/* Hinweis: Auf Desktop dreht sich der Indikator bewusst NICHT. */

/* --- Level-1: einheitlicher Indikator-Slot ---
   Auf der obersten Ebene reservieren wir den Platz fuer den Submenu-
   Indikator auf ALLEN Items - auch bei jenen ohne Untermenu. Der Toggle
   wird absolut in diesen Slot positioniert und beeinflusst die Item-
   Breite nicht. Dadurch ist der linke/rechte Abstand bei allen Punkten
   gleich, unabhaengig davon, ob ein Indikator vorhanden ist. */

.itx_nav_desktop-wrap .itx_nav_menu.itx_nav_level-1 > .itx_nav_item > .itx_nav_link {
  padding-right: calc( var(--itx-nav-link-pad-x, 0.75rem)
                       + var(--itx-nav-indicator-size, 0.75rem)
                       + var(--itx-nav-indicator-gap, 0.25rem) );
}

.itx_nav_desktop-wrap .itx_nav_menu.itx_nav_level-1 > .itx_nav_item > .itx_nav_toggle {
  position:  absolute;
  right:     var(--itx-nav-link-pad-x, 0.75rem);
  top:       50%;
  transform: translateY(-50%);
  padding:   0;
}

/* --- Submenu wrapper ---
   display:contents makes the wrapper layout-neutral, so the inner <ul>
   behaves as a direct child of the <li>. */

.itx_nav_desktop-wrap .itx_nav_submenu-wrap {
  display: contents;
}

/* --- Submenu (flyout) --- */

.itx_nav_desktop-wrap .itx_nav_submenu {
  position:      absolute;
  top:           100%;
  left:          0;
  z-index:       1000;
  min-width:     var(--itx-nav-sub-min-width, 220px);
  background:    var(--itx-nav-sub-bg, #ffffff);
  box-shadow:    var(--itx-nav-sub-shadow, 0 8px 24px rgba(0 0 0 / .12));
  border-radius: var(--itx-nav-sub-radius, 6px);
  padding:       var(--itx-nav-sub-pad, 0.375rem);

  opacity:        0;
  transform:      translateY( var(--itx-nav-sub-anim-offset, 10px) );
  pointer-events: none;
  transition:
    opacity   var(--itx-nav-sub-anim-duration, 0.22s) var(--itx-nav-sub-anim-ease, ease),
    transform var(--itx-nav-sub-anim-duration, 0.22s) var(--itx-nav-sub-anim-ease, ease);

  /* Sichtbarer Abstand zwischen Top-Level-Nav und Submenu. */
  margin-top: var(--itx-nav-sub-gap, 0px);
}

/* Hover-Bruecke: unsichtbares ::before fuellt den Gap und haelt den
   Hover-Pfad lueckenlos, damit das Submenu beim Wandern der Maus
   nicht abreisst. Vertikale Variante fuer das erste Submenu (oeffnet
   nach unten). */
.itx_nav_desktop-wrap .itx_nav_submenu::before {
  content:  "";
  position: absolute;
  left:     0;
  right:    0;
  top:      calc(-1 * var(--itx-nav-sub-gap, 0px));
  height:   var(--itx-nav-sub-gap, 0px);
}

/* Flyover: submenu opens on hover or keyboard focus */
.itx_nav_desktop-wrap .itx_nav_item:hover        > .itx_nav_submenu-wrap > .itx_nav_submenu,
.itx_nav_desktop-wrap .itx_nav_item:focus-within > .itx_nav_submenu-wrap > .itx_nav_submenu {
  opacity:        1;
  transform:      translateY(0);
  pointer-events: auto;
}

/* L2+: submenu opens to the right of its parent */
.itx_nav_desktop-wrap .itx_nav_level-2 .itx_nav_submenu,
.itx_nav_desktop-wrap .itx_nav_level-3 .itx_nav_submenu {
  top:         var(--itx-nav-sub-nested-offset, -0.375rem);
  left:        100%;
  margin-top:  0;
  margin-left: var(--itx-nav-sub-gap, 0px);
}

/* Hover-Bruecke fuer Nested-Submenus: horizontal links statt oben. */
.itx_nav_desktop-wrap .itx_nav_level-2 .itx_nav_submenu::before,
.itx_nav_desktop-wrap .itx_nav_level-3 .itx_nav_submenu::before {
  top:    0;
  bottom: 0;
  height: auto;
  left:   calc(-1 * var(--itx-nav-sub-gap, 0px));
  right:  auto;
  width:  var(--itx-nav-sub-gap, 0px);
}

/* Submenu links */
.itx_nav_desktop-wrap .itx_nav_submenu .itx_nav_link {
  padding:       var(--itx-nav-sub-link-pad-y, 0.45rem) var(--itx-nav-sub-link-pad-x, 1rem);
  color:         var(--itx-nav-sub-link-color, #1a1a1a);
  border-radius: calc( var(--itx-nav-sub-radius, 6px) - 2px );
  white-space:   nowrap;
}

.itx_nav_desktop-wrap .itx_nav_submenu .itx_nav_link:hover,
.itx_nav_desktop-wrap .itx_nav_submenu .itx_nav_link:focus-visible {
  color:      var(--itx-nav-sub-link-color-hover, #0055cc);
  background: var(--itx-nav-sub-link-bg-hover, #f0f4ff);
}

.itx_nav_desktop-wrap .itx_nav_submenu .itx_nav_item--current          > .itx_nav_link,
.itx_nav_desktop-wrap .itx_nav_submenu .itx_nav_item--current-parent   > .itx_nav_link,
.itx_nav_desktop-wrap .itx_nav_submenu .itx_nav_item--current-ancestor > .itx_nav_link {
  color:       var(--itx-nav-sub-link-color-active, var(--itx-nav-sub-link-color-hover, #0055cc));
  background:  var(--itx-nav-sub-link-bg-active,    var(--itx-nav-sub-link-bg-hover, transparent));
  font-weight: var(--itx-nav-font-weight-bold, 600);
}


/* ======================================================================
   UNTERGEORDNETE UNTERMENUS
   Einstellung "Untermenus ab Ebene" -> data-inline-from am <nav>.
   Ab der gewaehlten Ebene stehen die Eintraege eingerueckt im Panel der
   uebergeordneten Ebene, statt seitlich als eigenes Flyout aufzuklappen.
   ====================================================================== */

/* Submenu-Items duerfen umbrechen, damit ein statisch positioniertes
   Untermenu UNTER dem Link landet und nicht als Flex-Item daneben.
   Im Flyout-Modus wirkungslos, da das Untermenu dort absolut positioniert
   und damit aus dem Flex-Fluss genommen ist. */
.itx_nav_desktop-wrap .itx_nav_submenu .itx_nav_item {
  flex-wrap: wrap;
}

/* Statisch statt Flyout - gilt auch fuer alle Ebenen innerhalb von .itx-mega */
.itx_nav_nav[data-inline-from="3"] .itx_nav_desktop-wrap .itx_nav_submenu.itx_nav_level-3,
.itx_nav_nav[data-inline-from="3"] .itx_nav_desktop-wrap .itx_nav_submenu.itx_nav_level-4,
.itx_nav_nav[data-inline-from="3"] .itx_nav_desktop-wrap .itx_nav_submenu.itx_nav_level-5,
.itx_nav_nav[data-inline-from="4"] .itx_nav_desktop-wrap .itx_nav_submenu.itx_nav_level-4,
.itx_nav_nav[data-inline-from="4"] .itx_nav_desktop-wrap .itx_nav_submenu.itx_nav_level-5,
.itx_nav_nav[data-inline-from="5"] .itx_nav_desktop-wrap .itx_nav_submenu.itx_nav_level-5,
.itx_nav_desktop-wrap .itx-mega .itx_nav_submenu .itx_nav_submenu {
  position:       static;
  z-index:        auto;
  flex-basis:     100%;
  min-width:      0;
  background:     none;
  box-shadow:     none;
  border-radius:  0;
  padding:        0;
  margin:         0;

  opacity:        1;
  transform:      none;
  pointer-events: auto;
  transition:     none;
}

/* Hover-Bruecke entfaellt - es gibt nichts mehr zu ueberbruecken. */
.itx_nav_nav[data-inline-from="3"] .itx_nav_desktop-wrap .itx_nav_submenu.itx_nav_level-3::before,
.itx_nav_nav[data-inline-from="3"] .itx_nav_desktop-wrap .itx_nav_submenu.itx_nav_level-4::before,
.itx_nav_nav[data-inline-from="3"] .itx_nav_desktop-wrap .itx_nav_submenu.itx_nav_level-5::before,
.itx_nav_nav[data-inline-from="4"] .itx_nav_desktop-wrap .itx_nav_submenu.itx_nav_level-4::before,
.itx_nav_nav[data-inline-from="4"] .itx_nav_desktop-wrap .itx_nav_submenu.itx_nav_level-5::before,
.itx_nav_nav[data-inline-from="5"] .itx_nav_desktop-wrap .itx_nav_submenu.itx_nav_level-5::before,
.itx_nav_desktop-wrap .itx-mega .itx_nav_submenu .itx_nav_submenu::before {
  content: none;
}

/* Einrueckung nur im Inline-Modus - im Mega-Menu bilden die Eintraege
   Bloecke und sollen buendig unter ihrem Titel stehen. */
.itx_nav_nav[data-inline-from="3"] .itx_nav_desktop-wrap .itx_nav_submenu.itx_nav_level-3,
.itx_nav_nav[data-inline-from="3"] .itx_nav_desktop-wrap .itx_nav_submenu.itx_nav_level-4,
.itx_nav_nav[data-inline-from="3"] .itx_nav_desktop-wrap .itx_nav_submenu.itx_nav_level-5,
.itx_nav_nav[data-inline-from="4"] .itx_nav_desktop-wrap .itx_nav_submenu.itx_nav_level-4,
.itx_nav_nav[data-inline-from="4"] .itx_nav_desktop-wrap .itx_nav_submenu.itx_nav_level-5,
.itx_nav_nav[data-inline-from="5"] .itx_nav_desktop-wrap .itx_nav_submenu.itx_nav_level-5 {
  padding-left: var(--itx-nav-sub-indent, 0.75rem);
}

/* Indikator ausblenden: sichtbare Kinder brauchen keinen Aufklapp-Hinweis.
   Betroffen ist jeweils die Ebene OBERHALB der eingerueckten Liste. */
.itx_nav_nav[data-inline-from="3"] .itx_nav_desktop-wrap .itx_nav_item.itx_nav_level-2 > .itx_nav_toggle,
.itx_nav_nav[data-inline-from="3"] .itx_nav_desktop-wrap .itx_nav_item.itx_nav_level-3 > .itx_nav_toggle,
.itx_nav_nav[data-inline-from="3"] .itx_nav_desktop-wrap .itx_nav_item.itx_nav_level-4 > .itx_nav_toggle,
.itx_nav_nav[data-inline-from="4"] .itx_nav_desktop-wrap .itx_nav_item.itx_nav_level-3 > .itx_nav_toggle,
.itx_nav_nav[data-inline-from="4"] .itx_nav_desktop-wrap .itx_nav_item.itx_nav_level-4 > .itx_nav_toggle,
.itx_nav_nav[data-inline-from="5"] .itx_nav_desktop-wrap .itx_nav_item.itx_nav_level-4 > .itx_nav_toggle,
.itx_nav_desktop-wrap .itx-mega .itx_nav_submenu .itx_nav_toggle {
  display: none;
}


/* ======================================================================
   MEGA-MENU (Blockaufbau)
   Aktivierung pro Menupunkt: im WordPress-Menu-Editor die CSS-Klasse
   "itx-mega" auf den Level-1-Eintrag setzen (Ansicht anpassen ->
   CSS-Klassen). Die Level-2-Eintraege werden dann zu Blocktiteln, ihre
   Level-3-Eintraege zur Liste darunter. Zusaetzlich "itx-mega-horizontal"
   laesst die Eintraege innerhalb eines Blocks nebeneinander fliessen.
   ====================================================================== */

/* Panel an der Navigation verankern statt am Menupunkt: verhindert, dass
   ein breites Blockpanel bei weit rechts stehenden Punkten aus dem
   sichtbaren Bereich laeuft. .itx_nav_nav ist bereits position:relative. */
.itx_nav_desktop-wrap .itx_nav_item.itx-mega {
  position: static;
}

.itx_nav_desktop-wrap .itx-mega > .itx_nav_submenu-wrap > .itx_nav_submenu {
  left:  0;
  right: 0;

  display:               grid;
  grid-template-columns: var(--itx-nav-mega-columns,
                             repeat(auto-fit, minmax(var(--itx-nav-mega-col-min, 180px), 1fr)));
  align-items:           start;
  gap:                   var(--itx-nav-mega-row-gap, 1rem)
                         var(--itx-nav-mega-col-gap, 1.5rem);
  padding:               var(--itx-nav-mega-pad, 1.25rem);
}

/* Bloecke: Titel oben, Liste darunter - kein Flex-Nebeneinander. */
.itx_nav_desktop-wrap .itx-mega .itx_nav_submenu .itx_nav_item {
  display: block;
}

/* Blocktitel (Level-2-Eintrag) */
.itx_nav_desktop-wrap .itx-mega > .itx_nav_submenu-wrap > .itx_nav_submenu > .itx_nav_item > .itx_nav_link {
  color:         var(--itx-nav-mega-title-color, var(--itx-nav-sub-link-color, #1a1a1a));
  font-weight:   var(--itx-nav-mega-title-weight, 600);
  border-bottom: var(--itx-nav-mega-title-border, none);
  margin-bottom: var(--itx-nav-mega-title-gap, 0.25rem);
}

/* Variante: Eintraege innerhalb eines Blocks nebeneinander */
.itx_nav_desktop-wrap .itx-mega-horizontal .itx_nav_submenu .itx_nav_submenu {
  display:    flex;
  flex-wrap:  wrap;
  column-gap: var(--itx-nav-mega-col-gap, 1.5rem);
}