.primary-menu-container {
	@apply mx-auto max-w-screen-xl px-8;
	/* Highlight using list element */
	/* li.current-page-parent,
	li.current-page-ancestor */
	li.current-page-parent > a,
	li.current_page_item > a {
		@apply font-bold
	text-secondary
	lg:text-primary;
	}

	li.menu-item {
		@apply font-medium text-sm uppercase;
		&:hover > a {
			@apply cursor-pointer
			text-secondary 
			lg:text-primary;
		}
	}
	/* submenus */
	li:has(.sub-menu) {
		.sub-menu {
			position: absolute;
			display: none;
		}
		> 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;
		}
	}
	li:has(.sub-menu):hover,
	li:has(.sub-menu):focus {
		> a::after {
			transform: translateY(-2px) rotate(0deg);
		}
		.sub-menu {
			display: block;
		}
	}
}
.close_btn {
	display: none;
}

/* RESPONSIVE */
@media (max-width: 960px) {
	.primary-menu-container {
		@apply my-0 max-h-screen;
		li:has(.sub-menu) {
			.sub-menu {
				@apply mx-auto;
				/* position: static !important; */
				position: static;
			}
		}
	}

	#primary-menu {
		@apply bg-primary
		mt-0
		left-0
		absolute;
		transition: all 0.3s ease-out;
		transform: translateY(-110vh);
		z-index: 800;
		height: fit-content;
		top: 0;
		width: 100vw;
		min-height: 100vh;

		> 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;
			display: block !important;
			padding-bottom: 0;
		}
		/* BURGER MENU */
		body:has(header.burger_menu_active) {
			@apply max-h-screen;
			overflow: hidden;
		}

		header.burger_menu_active {
			position: fixed;
			top: 0px;
			height: 100vh;
			overflow: scroll;
			padding: 0;
		}
	}
	.burger_menu_active {
		.close_btn {
			cursor: pointer;
			z-index: 999;
			width: 20px;
			right: 20px;
			top: 20px;
			display: block;
			position: fixed;
		}
		#primary-menu {
			transform: translateY(0);
		}
	}
}
@media (max-width: 960px) and (hover: none) {
	body {
		background-color: red !important;
	}
	/* ul {
		@apply w-max mx-auto;
	} */
	.primary-menu-container {
		li.menu-item {
			@apply mx-auto !text-left;
		}
		li:has(.sub-menu) {
			> a::after {
				display: none;
			}
			.sub-menu {
				@apply block pl-12;
				display: block;
			}
		}
	}
}