/* ======================================================================
   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-menu-icon-size, 24px);
  height:           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-oc-close-size, 40px);
  height:          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-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. */

.itx_nav_offcanvas .itx_nav_submenu-wrap {
  width:              100%;
  display:            grid;
  grid-template-rows: 0fr;
  transition:         grid-template-rows var(--itx-nav-mob-sub-duration, 0.28s) var(--itx-nav-mob-sub-ease, ease);
}
.itx_nav_offcanvas .itx_nav_item--open > .itx_nav_submenu-wrap {
  grid-template-rows: 1fr;
}
.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);
}