/* ## Setup
================================= */
.menu-block-nav{
	a{
		text-decoration: none;
		display: flex;
	}
	&.is-orientation-horizontal{
		.level-1{
			display: flex;
			gap: 6px;
			.menu-item{
				position: relative;
				z-index: 99;
				a{
					display: block;
				}
				.level-2{
					display: none;
					position: absolute;
				}
				&:hover .level-2{
					display: block;
				}
			}
		}
	}
	&.is-orientation-vertical{
		.nav-menu{
			display: flex;
			flex-direction: column;
			.menu-item{
				.level-2{
					padding-left: 1rem;
				}
				&:hover .level-2{

				}
			}
		}
	}
}

/* ## Hamburger Button
************************************************* */
	#menuToggle{
		color: white;
		cursor: pointer;
		position: relative;
		z-index: 101;
		width: 30px;
		padding: 10px;
		background-color: #182918;
		display: grid;
		row-gap: 6px;
		grid-template-areas: "top" "middle" "bottom";
		.bar {
			height: 4px;
			width: 100%;
			background-color: white;
			transition: all 0.4s ease;
			margin-inline:auto
		}
		.bar1{grid-area:top}
		.bar2,.bar3{grid-area:middle}
		.bar4{grid-area:bottom}
		&.active{
			.bar1,.bar4{
				width:0;
			}
			.bar2{transform:rotate(45deg)}
			.bar3{transform:rotate(-45deg)}
		}
	}

/* ## Hidden Menu
**************************************************/
	#mobileMenu{
		#menuMainHidden {
			visibility: hidden;
			position: fixed;
			inset: 0;
			background-color: #265f2f;
			z-index: var(--z-mid);
			overflow-y: auto;
			overflow-x: hidden;
			transform: translateX(100vw);
			transition: all 0.4s ease-in-out;

			.nav-menu{
				border-radius: 12px;
				/* min-height: 80vh; */
				height: fit-content;
				width: 100vw;
				max-width: 400px;
				padding-block: 30px;
				transition: all 0.4s ease;
			}

			.icon--ui:hover{
				background-color: black;
			}

			/* Level 1*/
			.nav-menu.level-1{
				position: relative;
				> .menu-item {
					a {
						padding: 12px 50px;
						font-weight: 600;
						font-size: var(--txt-lg);
						color: white;
						text-decoration: none;
					}
					.back-button{
						cursor: pointer;
						padding: 10px 50px;
						color: white;
					}
				}
			}
			.nav-menu.level-1:has(.menu-item-has-children.active){
				transform: translateX(-30px);
			}
			.nav-menu.level-1:has(.level-2 .menu-item-has-children.active){
				transform: translateX(-60px);
			}

			/* Level 2 & 3 */
			nav.level-2 {
				background-color: orangered;
			}
			nav.level-3 {
				background-color: brown;
			}
			nav.level-2, nav.level-3 {
				position: absolute;
				inset: 0;
				transform: translateX(100%);
				opacity: 0;
				pointer-events: none;
			}
			.level-1 > .menu-item.active > nav.level-2,
			.level-2 > .menu-item.active > nav.level-3{
				visibility: visible;
				opacity: 1;
				transform: translateX(30px);
				box-shadow: -5px 0 5px rgba(0, 0, 0, 0.085);
				pointer-events: unset;
			}
		}
	}
	body.hidden-menu-active {
		overflow: hidden;
		#mobileMenu #menuMainHidden {
			visibility: visible;
			transform: translateX(0);
		}
	}



/* ## Header Menu */
	#siteHeader .menu-block-nav{
		/* Level 1 */
		nav.level-1 {
			display: flex;
			a {
				text-decoration: none;
			}
			> .menu-item {
				position: relative;
				> a{
					padding: 12px;
					border-radius: 4px;
				}
				&:hover{
					> a{
						background-color: black;
						color: white;
					}
				}
				&.current-menu-item > a{
					box-shadow: inset 0 0 0 1px black;
				}
				.icon--ui{
					width: unset;
					height: unset;
					font-size: var(--txt-sm);
					padding-left: 5px;
					position: relative;
					bottom: -1px;
				}
			}
		}
		/* Level 2 */
		nav.level-2 {
			position: absolute;
			z-index: 999;
			text-align: left;
			width: 230px;
			top: 100%;
			border-radius: 8px;
			overflow: hidden;
			padding-block: 12px;
			display: none;
			opacity: 0;
			.menu-item {
				background-color: rgb(222, 222, 222);
				overflow: clip;
				&:first-child{
					border-radius: 4px 4px 0 0;
					padding-top: 10px;
				}
				&:last-child{
					border-radius: 0 0 4px 4px;
					padding-bottom: 10px;
				}
				a{
					padding: 6px 12px;
					&:hover{
						background-color: rgb(148, 148, 148);
						color: white;
					}
				}
			}
		}
		/* Level 2 Animation*/
		nav.level-1 > .menu-item-has-children:hover{
			nav.level-2 {
				display: block;
				opacity: 1;
				transition: all 0.4s ease;
				.menu-item{
					transform: translateY(0);
					opacity: 1;
					transition: all 1s ease calc(0.01s * var(--index));
					@starting-style{
						transform: translateY(5px);
						opacity: 0;
					}
				}
			}
		}
		/* Level 3 */
		nav.level-3 {
			font-size: 90%;
			padding-left: 16px;
		}
	}