.primary-menu-container {
  @apply mx-auto  
	bg-primary 
	text-white
	relative
	h-fit
	py-0
	lg:py-8
	px-8
	2xl:px-20
 	my-0;

  .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 
		items-center 
		justify-around
		lg:justify-between;

    ul {
      @apply lg:flex 
			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 > 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;
      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 .page_icon {
        transform: scale(1.2);
      }
    }
    li.menu-item.menu-item-has-children:hover {
      @screen lg {
        .menu-item-submenu-toggle:after {
          transform: rotate(180deg);
        }
        .sub-menu {
          display: block;
        }
      }
    }
    /* submenus */
    li .sub-menu {
      @apply bg-primary 
			p-6
			mx-auto
			lg:mx-0
			static
			lg:absolute;
      z-index: 999;
      display: none;

      &.sub-menu-open {
        display: block;
      }

      li {
        @apply py-2 lg:text-left;
      }

      > 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-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 */;
    }
  }
}