/**
 * Theme Navigation Variant 1
 * 
 
 * This file contains styles for a specific navigation layout:
 * - Main menu appears on the left
 * - Submenu opens on the right with animation
 * 
 * Mobile behavior:
 * - Submenu slides in as a separate view
 * - The parent menu title appears as a heading
 * 
 * This variant builds on the base styles defined in `theme_nav.css`.
 * Only layout and animation-specific overrides or additions are included here.
 * 
 * If additional variants are needed, create separate files such as:
 * `theme_nav-variant-2.css`, `theme_nav-fade.css`, etc.
 */

/* =========================================================
   SUBMENU – right side, fade in (desktop ≥1025px)
   Trigger: JS adds .imp-sub-active on the parent <li>
   ========================================================= */

@media (min-width: 1025px) {

  /* the whole menu column = anchor for the absolute submenu */
  #menu-hauptmenu {
    position: relative;
  }

  #menu-hauptmenu>.menu-item {
    display: flex;
    justify-content: flex-start;
    max-height: 100vh;
  }

  #menu-wrapper ul.sub-menu .menu-item {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.46, 0.03, 0.52, 0.96);
    transition-delay: 0s;
  }

  #menu-wrapper .imp-sub-active ul.sub-menu .menu-item {
    max-height: 100vh;
    transition-delay: 0.4s;
  }

  #menu-wrapper ul.sub-menu {
    position: absolute;
    left: 100%;
    width: fit-content;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    margin-top: 5px;
    margin-left: var(--gap-m);

    transition: opacity 0.35s ease-in-out;
    transition-delay: 0s;
  }

  #menu-wrapper .imp-sub-active ul.sub-menu {
    opacity: 1;
    pointer-events: all;
    transition-delay: 0.35s;
  }

  #menu-hauptmenu>li.menu-item.menu-item-has-children>a>.imp-nav-target::after {
    content: "";
    display: block;
    flex-shrink: 0;
    width: clamp(140px, 12vw, 233px);
    aspect-ratio: 233 / 20;
    margin-left: var(--gap-m);
    background: url(/wp-content/themes/astra-impuls-child/img/icon-arrow-nav.svg) no-repeat left center / contain;

    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.4s ease-in-out;
    transition-delay: 0.4s;
  }

  #menu-hauptmenu>li.menu-item.menu-item-has-children.imp-sub-active>a>.imp-nav-target::after {
    clip-path: inset(0 0 0 0);
    transition-delay: 0s;
  }
}

.menu-link .imp-nav-target-txt {
  display: flex;
  white-space: nowrap;
  width: 100%;
  align-items: center;
}


#menu-wrapper ul.sub-menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

#menu-wrapper .imp-sub-active ul.sub-menu {
  max-height: 100vh;
  opacity: 1;
  pointer-events: all;
}

#menu-wrapper ul.sub-menu .menu-item {
  max-height: none;
}

#menu-hauptmenu>.menu-item:last-child ul.sub-menu {
  transform: translateY(calc(1.8em - 100%));
}