/* ## Hamburger Button */
.module-hamburger{
	display: none;
	@media(max-width: 1024px){
		display: block;
	}
}

/* ## Hidden Menu
**************************************************/
	section#hidden-menu {
		position: fixed;
		inset: 20px;
		visibility: hidden;
		background-color: var(--grey_dark);
		z-index: var(--z-mid);
		padding: 20vh 50px 50px;
		overflow-y: auto;
		overflow-x: hidden;
		display: flex;
		flex-direction: column;
		transform: translateX(100%);
		transition: 0.4s;

		.menu-item {
			padding-block: 12px;
			font-weight: 600;
			font-size: var(--txt-lg);

			a {
				color: white;
				text-decoration: none;
			}

			nav.level-2 {
				visibility: hidden;
				background-color: var(--gray70);
				width: 100%;
				height: 100%;
				flex-direction: column;
				position: absolute;
				inset: 0 0 0 100vw;
				padding: 15vh 50px 50px;
				transition: all 0.4s ease;
				display: flex;
			}
			&.active nav.level-2{
				visibility: visible;
				inset: 0 0 0 12px;
			}

			.back-button{
				cursor: pointer;
				display: block;
				margin-bottom: 20px;
				width: 100%;
				text-align: left;
				padding-block: 10px;
				height: auto !important;
				color: white;
				&::before{
					display: block;
					width: 100%;
				}
			}
		}
	}
	body.hidden-menu-active {
		overflow: hidden;
		#hidden-menu {
			visibility: visible;
			transform: translateX(0);
		}
	}

/* ## Main Level 1 */
#menu-main-desktop.level-1 {
	> .menu-item {
		position: relative;
	}
	a {
		text-decoration: none;
		color: var(--swatch_01);
		font-weight: 600;
		&:hover{
			color: var(--swatch_05);
		}
	}

/* ## Main Level 2 */
	nav.level-2 {
		background-color: var(--swatch_02);
		position: absolute;
		z-index: 999;
		text-align: left;
		width: 250px;
		top: 95%;
		left: -100vw;
		border-radius: 0 8px 8px 8px;
		overflow: hidden;
		padding-block: 12px;
		.menu-item a{
			padding: 6px 12px;
			&:hover{
				background-color: rgba(0, 0, 0, 0.2);
			}
		}
	}
}

/* ## Submenu Animation
**************************************************/
#menu-main-desktop.level-1 > .menu-item-has-children{
	nav.level-2 {
		.menu-item{
			opacity: 0;
			transform: translate(30px, 0);
		}
	}
	&:hover{
		nav.level-2 {
			animation-name: fadeInUp;
			animation-duration: 0.4s;
			left: auto;
			.menu-item{
				opacity: 1;
				transform: translate(0);
				transition: all 1s ease calc(0.05s * var(--index));
			}
		}
	}
}