.primary-menu-container {
  @apply mx-auto  
	bg-primary 
	text-white
  min-w-full
	relative
	h-fit
	py-0
	lg:py-3
	px-8
	2xl:px-20
 	my-0
  !pb-5;

  .website_logo {
    @apply hidden lg:block;
  }

  .tools-container {
    @apply hidden lg:flex;
  }

  a {
    @apply text-white;
  }

  nav#primary-menu-nav {
    @apply max-w-screen-2xl  lg:w-full mx-auto;
  }
  .logo {
    @apply mr-12 
		w-[190px]
		xl:w-[222px];
  }
  #primary-menu {
    @apply flex 
		flex-col 
		lg:flex-row 
		lg:items-center 
		justify-around
		lg:justify-between;

    ul {
      @apply flex flex-col lg:flex-row 
			gap-x-2 
			lg:gap-x-4 
			xl:gap-x-8
			pr-0;
    }

    /* Highlight using list element */
    li.current-page-parent > a,
    li.current_page_item > a {
      @apply font-medium
		text-white
		decoration-secondary
		underline
				underline-offset-8;
    }

    li.menu-item {
      @apply font-medium 
			text-lg
			text-center;

      &:hover > button,
      &:hover > a,
      a:focus {
        @apply cursor-pointer
				underline
				underline-offset-8
				decoration-1
				text-white;
      }
      a:focus {
        text-decoration: none;
      }

      /* IF SUBMENU CHILD */
      .menu-item-submenu-toggle {
        &:hover,
        &:focus {
          @apply text-secondary;
        }
        @apply relative pr-4;
        &:after {
          @apply absolute right-0;
          content: '▼';
          position: absolute;
          display: inline-block;
          line-height: 0.5;
          height: 10px;
          top: calc(50% - 4px);
          width: 10px;
          margin-left: 20px;
          transform-origin: center;
          background-repeat: no-repeat;
          background-size: contain;
          transition: all 0.3s ease-out;
        }
      }
      .menu-item-submenu-toggle[aria-expanded='false']:after {
        transform: rotate(0deg);
      }
      .menu-item-submenu-toggle[aria-expanded='true']:after {
        transform: rotate(180deg);
      }
    }

    li.menu-item.has-page-icon {
      @apply gap-4 font-normal tracking-wide;
      button,
      a {
        @apply flex flex-row lg:flex-col items-center justify-start lg:justify-end gap-4 font-normal tracking-wide;
      }
      .page_icon {
        @apply w-7 h-7 object-contain object-center;
        transition: transform 0.3s ease-out;
      }

      &:hover > button > .page_icon,
      &:hover > a > .page_icon {
        transform: scale(1.2);
      }
    }
    li.menu-item.menu-item-has-children:hover {
      /* &:hover .page_icon {
        transform: none;
      } */
      @screen lg {
        .menu-item-submenu-toggle:after {
          transform: rotate(180deg);
        }
        /* .sub-menu {
          display: block;
        } */
      }
    }
    /* submenus */
    li .sub-menu {
      @apply bg-carhop-green-700 
			p-6
      px-6

			mx-auto
			lg:mx-0
			static
			w-full
      grid-cols-2
      lg:absolute;
      z-index: 999;
      display: none;
      left: 0;
      top: 100%;
      opacity: 0;
      translate: 0 -30px;
      transition:
        translate 0.3s ease-out,
        display 0.3s,
        opacity 0.3s;
      transition-behavior: allow-discrete;

      &.sub-menu-open {
        display: grid;
        opacity: 1;
        translate: 0 0;

        @starting-style {
          opacity: 0;
          translate: 0 -30px;
        }
      }
      li.current-menu-item {
        a {
          @apply no-underline;
          .menu-item__title {
            @apply !underline underline-offset-8 decoration-1 decoration-secondary;
          }
        }
      }

      li {
        @apply max-w-3xl w-full lg:text-left;
        border-bottom: 1px solid #fff;

        &:nth-last-child(-n + 2),
        &:last-child {
          border-bottom: none;
        }

        &:nth-child(odd) {
          @apply ml-auto;
        }

        .page_subtitle {
          @apply opacity-80 font-light mt-1;
        }

        &.menu-item.has-page-icon a {
          @apply flex gap-6 items-center justify-start flex-row p-6 py-8;
          .page_icon {
            @apply w-12 h-12;
          }
        }
        .menu-item__content-inner {
          transition: all 0.3s ease-out;
          span {
            @apply block;
          }
        }
        &:hover {
          @apply bg-black/10;
          a {
            @apply gap-12;
            .page_icon {
              transform: none !important;
            }
            @apply no-underline;
            .menu-item__content-inner {
              transform: translateX(4px);
            }
            .menu-item__title {
              @apply !underline;
            }
          }
        }
      }

      > a::after {
        transform: translateY(-2px) rotate(-90deg);
        content: '';
        display: inline-block;
        height: 10px;
        width: 10px;
        margin-left: 20px;
        background-image: url('../resources/img/arrow_down_white.svg');
        background-repeat: no-repeat;
        background-size: contain;
        transition: all 0.3s ease-out;
      }
    }
  }
}

/* RESPONSIVE */
@media (max-width: 960px) {
  .primary-menu-container {
    @apply w-fit mx-0;
    #primary-menu {
      @apply mt-0
			left-0
			z-40
			hidden;

      /* min-height: 100vh; */
      height: fit-content;
      top: 0;
      width: fit-content;

      > ul {
        @apply max-w-xs
				mx-auto;
        /* min-height: 96vh; */
        padding-top: 5vh;
      }
      li.menu-item {
        @apply mt-0
				text-center
				text-white
				font-medium
				py-8
				text-lg
        pb-2
				lg:pb-0;

        .sub-menu li {
          @apply text-sm;
        }
      }
    }
  }

  /* BURGER MENU */
  body:has(.nav-open) {
    @apply max-h-screen
		overflow-hidden;

    /* #content,
		footer,
		.wpml-ls-statics-footer {
			@apply !hidden;
		} */
  }

  .cta_plain_secondary,
  .switch_language {
    /* @apply self-end; */
  }
}

@media (max-width: 960px) and (hover: none) {
  /* ul {
		@apply w-max mx-auto;
	} */
  .primary-menu-container {
    li.menu-item {
      /* @apply mx-auto  */
      /* !text-left */
    }
  }
}

body:has(.primary-menu-container .sub-menu-open) {
  main {
    @apply relative;

    &:after {
      @apply absolute inset-0 bg-black/50 z-10;
      backdrop-filter: blur(4px);
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;

      transition: all 0.3s ease-out;
      @starting-style {
        backdrop-filter: blur(0px);
        background-color: transparent;
      }
    }
  }
}