/* ======================================================================
   ITX-Navigation  -  itx-nav-mobile.css
   Loaded via <link media="only screen and (max-width: {breakpoint-0.5}px)">.
   NO @media wrapper here - the breakpoint comes from the plugin setting
   (class-itx-nav-render.php). The upper mobile bound uses the comma-value
   system (e.g. 1023.4999px) to avoid overlaps at fractional pixel widths
   or browser zoom.
   ====================================================================== */

.itx_nav_desktop-wrap { display: none; }

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

.itx_nav_nav {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
}

/* --- Burger button (menu icon as SVG mask) --- */

.itx_nav_burger {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           var(--itx-nav-burger-size, 44px);
  height:          var(--itx-nav-burger-size, 44px);
  color:           var(--itx-nav-burger-color, #1a1a1a);
}

.itx_nav_burger-icon {
  display:          block;
  width:            var(--itx-nav-burger-icon-size, var(--itx-nav-menu-icon-size, 24px));
  height:           var(--itx-nav-burger-icon-size, var(--itx-nav-menu-icon-size, 24px));
  background-color: currentColor;
  -webkit-mask:     var(--itx-nav-menu-icon) center / contain no-repeat;
          mask:     var(--itx-nav-menu-icon) center / contain no-repeat;
}

/* --- Off-canvas panel --- */

.itx_nav_offcanvas {
  position:            fixed;
  top:                 0;
  bottom:              0;
  z-index:             1100;
  width:               var(--itx-nav-oc-width, 320px);
  background:          var(--itx-nav-oc-bg, #ffffff);
  display:             block;
  overflow-y:          auto;
  overflow-x:          hidden;
  overscroll-behavior: contain;   /* nur der OSC scrollt, nicht die Seite */
  padding:             var(--itx-nav-oc-pad-y, 1rem) var(--itx-nav-oc-pad-x, 1.5rem);
  transition:          transform var(--itx-nav-oc-duration, 0.3s) var(--itx-nav-oc-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.itx_nav_offcanvas--left  { left:  0; transform: translateX(-100%); }
.itx_nav_offcanvas--right { right: 0; transform: translateX(100%);  }

.itx_nav_offcanvas--open  { transform: translateX(0); }

/* --- Close button: absolut, obere Ecke ---
   Liegt auf gleicher Hoehe wie der erste Inhalt (z. B. Logo via
   itx_nav_offcanvas_top) und ist Teil des einen, scrollenden Blocks. */

.itx_nav_offcanvas-close {
  position:        absolute;
  top:             var(--itx-nav-oc-pad-y, 1rem);
  right:           var(--itx-nav-oc-pad-x, 1.5rem);
  z-index:         1;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           var(--itx-nav-close-size, var(--itx-nav-oc-close-size, 40px));
  height:          var(--itx-nav-close-size, var(--itx-nav-oc-close-size, 40px));
  color:           var(--itx-nav-oc-close-color, currentColor);
}

/* Close icon as SVG mask */
.itx_nav_offcanvas-close-icon {
  display:          block;
  width:            var(--itx-nav-close-icon-size, 18px);
  height:           var(--itx-nav-close-icon-size, 18px);
  background-color: currentColor;
  -webkit-mask:     var(--itx-nav-close-icon) center / contain no-repeat;
          mask:     var(--itx-nav-close-icon) center / contain no-repeat;
}

/* --- Mobile menu - top-level list ---
   Keine eigene Innenabstand-Angabe noetig; der Panel-Padding deckt das ab. */

/* --- Mobile items --- */

.itx_nav_offcanvas .itx_nav_item {
  border-bottom: var(--itx-nav-mob-item-border, 1px solid #e8e8e8);
}
.itx_nav_offcanvas .itx_nav_item:last-child { border-bottom: none; }

.itx_nav_offcanvas .itx_nav_item--has-children {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  column-gap:  var(--itx-nav-indicator-gap, 0.25rem);
}
.itx_nav_offcanvas .itx_nav_item--has-children > .itx_nav_link   { flex: 1; }
.itx_nav_offcanvas .itx_nav_item--has-children > .itx_nav_toggle { flex-shrink: 0; }

/* --- Mobile links --- */

.itx_nav_offcanvas .itx_nav_link {
  display:     flex;
  align-items: center;
  padding:     var(--itx-nav-oc-pad-y, 1rem) 0;
  color:       var(--itx-nav-mob-link-color, #1a1a1a);
  font-size:   var(--itx-nav-font-size, 1rem);
  font-weight: var(--itx-nav-font-weight, 400);
  transition:  color 0.15s ease;
}

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

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

/* --- Mobile toggle button (indicator) ---
   Farbe ueber eigene Mobile-Variablen, mit Fallback auf die allgemeine
   Indikatorfarbe bzw. die Textfarbe. Das Icon nutzt background-color:
   currentColor, daher faerbt 'color' den Indikator. */

.itx_nav_offcanvas .itx_nav_toggle {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  color:           var(--itx-nav-mob-indicator-color, var(--itx-nav-indicator-color, currentColor));
}

/* Mobile: indicator rotates when the item is open (JS toggles --open) */
.itx_nav_offcanvas .itx_nav_item--open > .itx_nav_toggle {
  color: var(--itx-nav-mob-indicator-color-open, var(--itx-nav-mob-indicator-color, var(--itx-nav-indicator-color, currentColor)));
}
.itx_nav_offcanvas .itx_nav_item--open > .itx_nav_toggle .itx_nav_toggle-icon {
  transform: rotate( var(--itx-nav-indicator-rotate-open, 180deg) );
}

/* --- Submenu wrapper: CSS accordion animation ---
   grid-template-rows: 0fr -> 1fr animates the height without JS.
   The direct child <ul> gets overflow:hidden. */

/* Geschlossen zusaetzlich visibility:hidden. Zwei Gruende:
   1. Die Hoehe 0fr schneidet nur den Inhalt ab - Padding oder Rahmen an
      der Liste (z. B. aus Projekt-CSS) bleiben stehen und legen sonst den
      ersten Eintrag frei.
   2. Ohne visibility waeren die Links im zugeklappten Zustand weiter per
      Tab erreichbar, aber unsichtbar.
   Beim Schliessen wird visibility erst nach der Animation umgeschaltet,
   beim Oeffnen sofort - sonst waere die Animation nicht zu sehen. */
.itx_nav_offcanvas .itx_nav_submenu-wrap {
  width:              100%;
  display:            grid;
  grid-template-rows: 0fr;
  visibility:         hidden;
  transition:
    grid-template-rows var(--itx-nav-mob-sub-duration, 0.28s) var(--itx-nav-mob-sub-ease, ease),
    visibility 0s linear var(--itx-nav-mob-sub-duration, 0.28s);
}
.itx_nav_offcanvas .itx_nav_item--open > .itx_nav_submenu-wrap {
  grid-template-rows: 1fr;
  visibility:         visible;
  transition:
    grid-template-rows var(--itx-nav-mob-sub-duration, 0.28s) var(--itx-nav-mob-sub-ease, ease),
    visibility 0s linear 0s;
}
.itx_nav_offcanvas .itx_nav_submenu-wrap > .itx_nav_submenu {
  overflow: hidden;
}

/* --- Mobile sub-items - indent per level --- */

.itx_nav_offcanvas .itx_nav_submenu {
  padding-left: var(--itx-nav-mob-sub-indent, 1rem);
}
.itx_nav_offcanvas .itx_nav_submenu .itx_nav_submenu {
  padding-left: var(--itx-nav-mob-sub-indent, 1rem);
}