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

/* ## Hidden Menu
**************************************************/
	section#offscreen-menu-wrap {
		position: fixed;
		inset: 0;
		visibility: hidden;
		background-color: #051e3b;
		z-index: var(--z-mid);
		padding: 30vh 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: #051e3b;
				width: 100%;
				height: 100%;
				flex-direction: column;
				position: absolute;
				inset: 0 0 0 100vw;
				padding: 30vh 50px 50px;
				transition: all 0.4s ease;
				display: flex;
				overflow-y: scroll;
				.icon--ui{
					display: none;
				}
				.menu-item a{
					font-size: 15px;
					line-height: 1.2;
				}
			}
			&.active nav.level-2{
				visibility: visible;
				inset: 0 0 0 12px;
			}
			nav.level-3{
				padding-left: 15px;
				padding-top: 12px;
				.menu-item{
					padding-block: 6px;

				}
				.back-button{
					display: none;
				}
			}
			.back-button{
				cursor: pointer;
				display: block;
				width: 100%;
				text-align: left;
				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;
		gap: 16px;
		align-items: center;
		> .menu-item {
			position: relative;
			> a{
				padding: 12px 0;
				color: white;
				font-weight: 500;
				white-space: nowrap;
			}
			.icon--ui{
				width: unset;
				height: unset;
				font-size: var(--txt-sm);
				padding-left: 5px;
				position: relative;
				bottom: -1px;
			}
		}
		a {
			text-decoration: none;
		}

	/* ## Main Level 2 */
		nav.level-2 {
			background-color: white;
			position: absolute;
			z-index: 999;
			text-align: left;
			width: 300px;
			top: 100%;
			padding-block: 8px;
			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: -50px;
			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;
			}
		}
	}
}