/* ======================================================================
   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-hover, #0055cc);
  font-weight: var(--itx-nav-font-weight-bold, 600);
}