/* ## 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{
			text-transform: uppercase;
			letter-spacing: -1px;
			.level-1{
				display: flex;
				flex-direction: column;
				> .menu-item{
					padding: 6px 0 6px 0;
				}
			}
			.level-2{
				.menu-item{
						padding: 4px 0 4px 10px;
					a{
						font-size: 14px;
						color: gray;
					}
				} 
			}
			.icon--ui{
				display: none;
			}
		}
	}


/* ## Hamburger Button
************************************************* */
	#menuToggle{
		color: white;
		cursor: pointer;
		position: relative;
		z-index: 101;
		width: 30px;
		padding: 10px;
		background-color: black;
		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{
		color: red;
		#menuMainHidden {
			visibility: hidden;
			position: fixed;
			display: grid;
			place-content: center;
			inset: 0;
			background-color: var(--gray60);
			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;
				background-color: orange;
				> .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);
		}
	}