/**
 * 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.
 */

#main-nav {
  background-color: var(--color-2);
}

.menu-col.col-menu-1 {
  --menu-width: 39%;
  background-color: var(--ast-global-color-1);
}

.menu-hauptmenu-container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}

.current-menu-item {
  position: relative;
  text-decoration: none;
  z-index: 1;
  display: inline-block;
}

.current-menu-item .imp-nav-target-txt {
  color: var(--ast-global-color-4);
}

#menu-hauptmenu .current-menu-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("/wp-content/themes/astra-impuls-child/img/nav-item-bg.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  z-index: -1;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

@media (min-width: 1025px) {
  #menu-hauptmenu > .menu-item {
    max-height: 100vh;
    display: flex;
    justify-content: center;
  }

  #menu-wrapper ul.sub-menu {
    max-height: 0;
    transition: all 0.6s ease-in-out 0s;
    overflow: hidden;
    transition-delay: 0.5s, 0.5s;
    transition-property: transform, max-height;
    position: absolute;
    left: var(--menu-width);
    top: 50%;
    transform: translateY(-50%);
  }

  #menu-wrapper .imp-sub-active ul.sub-menu {
    max-height: 100%;
    transition-property: transform, max-height;
  }
}

@media (max-width: 1024px) {
  #nav-wrapper {
    bottom: 0;
    top: 0;
    background-color: var(--color-2);
  }

  #main-nav {
    height: 100dvh;
  }

  .menu-col.col-menu-1 {
    --menu-width: 100%;
  }

  .menu-col.col-menu-1 {
    flex-direction: column;
  }

  #menu-hauptmenu {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

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

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

  #menu-hauptmenu.menu-child-sub-active > .menu-item:not(.imp-sub-active) {
    max-height: 0;
    transform: translateX(-100%);
    transition-delay: 0s;
  }

  #menu-hauptmenu > .menu-item {
    max-height: 100vw;
    transition: all 0.5s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
    transition-delay: 0.6s;
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  #menu-hauptmenu > .menu-item > a {
    /* font-size: 1.94rem; */
  }

  #menu-wrapper .imp-sub-active .sub-menu {
    max-height: 100vh;
    transition-delay: 0.6s;
    overflow: hidden;
  }

  #menu-hauptmenu > .menu-item.menu-item-has-children > a::after {
    transition: all 0.5s ease 0s;
  }

  #menu-hauptmenu
    > .menu-item.menu-item-has-children.imp-sub-active
    > a::after {
    rotate: 90deg;
  }

  #menu-hauptmenu.menu-child-sub-active > .menu-item:not(.imp-sub-active) {
    max-height: 0;
  }

  #menu-wrapper ul.sub-menu {
    position: absolute;
    width: 100%;
    transition: all 0.5s cubic-bezier(0.46, 0.03, 0.52, 0.96);
    height: 100%;
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;
  }
}