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

/* ## Hidden Menu
**************************************************/
	section#offscreen-menu-wrap {
		position: fixed;
		inset: 20px;
		visibility: hidden;
		background-color: var(--gray80);
		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;
		section#offscreen-menu-wrap {
			visibility: visible;
			transform: translateX(0);
		}
	}

/* ## Main Level 1 */
#mainmenu-wrap{
	nav.level-1 {
		display: flex;
		> .menu-item {
			position: relative;
			> a{
				padding: 12px 8px;
			}
			.icon--ui{
				width: unset;
				height: unset;
				font-size: var(--txt-sm);
				padding-left: 5px;
				position: relative;
				bottom: -1px;
			}
		}
		a {
			text-decoration: none;
			color: white;
		}

	/* ## Main Level 2 */
		nav.level-2 {
			background-color: white;
			position: absolute;
			z-index: 999;
			text-align: left;
			width: 300px;
			top: 100%;
			padding-block: 18px;
			display: none;
			opacity: 0;
			box-shadow: 0 0 6px hsla(0, 0%, 0%, 0.2);
			.menu-item{
				position: relative;
				a{
					padding: 6px 12px;
					font-size: 14px;
					color: var(--swatch-01);
					&:hover{
						background-color: var(--swatch-01);
						color: white;
					}
				}
			}
		}
	}

	/* ## Main Level 3 */
		nav.level-3 {
			box-shadow: 0 0 6px hsla(0, 0%, 0%, 0.2);
			position: absolute;
			display: none;
			left: 100%;
			top: 0;
			background-color: white;
			width: 300px;
			padding-block: 18px;
			a{
				color: var(--swatch-01);
				font-size: 14px;
			}
		}
}

/* ## Hovers
**************************************************/
#mainmenu-wrap .level-1 > .menu-item-has-children:hover{
	nav.level-2 {
		display: block;
		opacity: 1;
		transition: all 0.4s ease;
		border-radius: 6px;
		@starting-style{
			top: 130%;
			opacity: 0;
		}
		.menu-item{
			transform: translate(0);
			opacity: 1;
			transition: all 1s ease calc(0.05s * var(--index));
			@starting-style{
				transform: translateY(10px);
				opacity: 0;
			}
			&:hover > .level-3{
				display: block;
				border-radius: 6px;
			}
		}
	}
}