/*==================================
=            Touch Menu            =
==================================*/

.menu-wrap {
	display: block;
	background-color: rgb(from var(--dark-color) r g b / 0.5);
	backdrop-filter: blur(10px);
	width: 100vw;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	padding: 0;
	opacity: 0;
	overflow: scroll;
	transition: opacity .1s ease-in-out, background-color .3s ease-in-out, backdrop-filter .3s ease-in-out;
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}

	.nav-parent-underlay {
		display: none;
	}

	.nav-panel {
		background-color: var(--menu-express-bg);
		/* width: 100vw; */
		width: var(--nav-panel-phone-width);
		min-height: 100vh;
		padding-top: 100px;
		padding-bottom: 100px;
		transform: translateX(-100%);
		transition: all .3s ease-in-out;

		/* Tablet Styles */
		@media (width >= 768px) {
			width: var(--nav-panel-tablet-width);
		}

		/* Desktop Styles */
		@media (width >= 1024px) {
			width: var(--nav-panel-desktop-width);
			/* width: 50vw; */
		}

		.menu-is-open & {
			transform: translateX(0);
		}

		.menu-is-closed & {
			transform: translateX(-100%);
		}
	}

	.nav-extra-content {
		padding: 20px;
		position: relative;
		color: var(--menu-express-text-color);

		svg {
			path {
				fill: var(--menu-express-text-color);
			}
		}
	}

	/* Nav Social Buttons */
	.nav-social {
		.social-icons {
			list-style: none;
			margin: 0;
			display: flex;
			margin-bottom: 30px;

			.show-icon {
				margin-right: 16px;

				&:last-of-type {
					margin-right: 0;
				}

				a:hover {
					svg {
						path {
							fill: var(--secondary-color);
						}
					}
				}
			}

			svg {
				width: auto;
				height: 30px;

				path {
					fill: var(--light-color);
				}
			}
		}
	}

	/* Nav address */

	.menu-address-site-locations {
		.location-each {
			margin-bottom: 20px;

			a {
				display: flex;
				&:hover {
					color: var(--secondary-color);
					svg {
						path {
							fill: var(--secondary-color);
						}
					}
				}
			}

			.address-icon {
				margin-right: 10px;
			}

			.location-name {
				font-weight: var(--fw-bold);
			}
		}
	}

	.nav-close {
		position: absolute;
		top: 0;
		left: var(--nav-panel-phone-width);
		width: 50px;
		height: 50px;
		/* background-color: rgb(from var(--dark-color) r g b / 0.5); */
		background-color: var(--primary-alt);
		transform: translateX(-100%);
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;

		/* Tablet Styles */
		@media (width >= 768px) {
			left: var(--nav-panel-tablet-width);
		}

		/* Desktop Styles */
		@media (width >= 1024px) {
			left: var(--nav-panel-desktop-width);
		}

		svg {
			width: 20px;
			height: 20px;

			path {
				fill: var(--menu-express-text-color);
			}
		}
	}


	/* .main-menu is the ul that contains all the menu items */
	.main-menu {
		list-style: none;
		margin: 0;
		padding-bottom: 30px;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}

		/* Setting baseline styling */
		li {
			margin: 0;
			padding: 0;
			position: relative;

			&:before {
				display: none;
			}

			/* Desktop Styles */
			@media (width >= 1024px) {
				&:hover {
					>a {
						background-color: var(--menu-express-hover);
					}
				}
			}
		}

		/* Setting baseline styling */
		a {
			text-decoration: none;
			display: block;
			color: var(--menu-express-text-color);
			line-height: 1em;

			&:hover,
			&:active,
			&:focus {
				outline: none;
			}

			/* Top level menu items */

		}

		/* End "a" reset */

		/* Touch Menu Items */
		.menu-item {

			/* Top level menu items */
			>a {
				/* font-size: 26px; */
				font-size: var(--menu-express-font-size-parent);
				padding: 14px 20px;
			}

			.nav-dropdown-button {
				height: calc(var(--menu-express-font-size-parent) + calc(14px * 2));
			}

			&.menu-item-has-children {
				>a {
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
			}
		}

		/* General Sub-Menu Styling */
		.sub-menu {
			display: none;
			margin: 0;
			/* background-color: darken(orange, 5%); */
			background-color: var(--menu-express-bg-child);

			a {
				/* font-size: 20px; */
				font-size: var(--menu-express-font-size-child);
				padding: 13px 20px 13px 40px;
			}

			.nav-dropdown-button {
				height: calc(var(--menu-express-font-size-child) + calc(13px * 2));
			}

			/* Grandchild Styles */
			.sub-menu {
				/* background-color: darken(orange, 10%); */
				background-color: var(--menu-express-bg-grandchild);

				a {
					/* font-size: 16px; */
					font-size: var(--menu-express-font-size-grandchild);
					padding-left: 60px;
				}

				.nav-dropdown-button {
					height: calc(var(--menu-express-font-size-grandchild) + calc(13px * 2));
				}
			}
		}
	}

	.nav-dropdown-button {
		position: absolute;
		z-index: 25;
		width: 100%;
		height: 100%;
		right: 0;
		top: 0;
		padding-right: 20px;
		cursor: pointer;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
}

/* Closing .touch-menu */

.menu-is-open {
	.menu-wrap {
		z-index: 500;
		opacity: 1;
	}

	/* .banner {
		z-index: 99;
	} */
}

.menu-is-closed {
	.menu-wrap {
		transition-delay: .2s;
		height: .1px;
		transition: opacity .5s .1s ease-in-out, background-color .5s .3s ease-in-out, backdrop-filter .3s ease-in-out, height .3s .5s;
	}

	/* .banner {
		z-index: 101;
	} */
}

/* Menu Triggers */

.menu-trigger {
	cursor: pointer;
	&:hover {
		.nav-hamburger {
			span {
				background-color: var(--secondary-color);
			}
		}
		.menu-button-text {
			color: var(--secondary-color);
		}
	}
}

.menu-button-text {
	font-size: 18px;
	letter-spacing: 0.06em;
	font-weight: var(--fw-medium);
	color: var(--light-color);
	text-transform: uppercase;
	transition: all 0.3s;
}

/* Hamburger Menu */

.nav-hamburger {
	width: 22px;
	height: 17px;
	position: relative;
	z-index: -1;
	/* transform: rotate(0deg); */
	/* transition: transform .5s ease-in-out; */
	cursor: pointer;
	margin-right: 13px;
	color: var(--light-color);
	span {
		display: block;
		position: absolute;
		height: 1.5px;
		width: 100%;
		background: var(--light-color);
		border-radius: 1.5px;
		opacity: 1;
		left: 0;
		transform: rotate(0deg);
		transition: transform .25s ease-in-out;

		&:nth-child(1) {
			top: 0px;
		}

		&:nth-child(2),
		&:nth-child(3) {
			top: 7.5px;
		}

		&:nth-child(4) {
			top: 15.5px;
		}
	}

	/* open */
	/* &.open {
		span {
			&:nth-child(1) {
				top: 9px;
				width: 0%;
				left: 50%;
			}
			&:nth-child(2) {
				transform: rotate(45deg);
			}
			&:nth-child(3) {
				transform: rotate(-45deg);
			}
			&:nth-child(4) {
				top: 9px;
				width: 0%;
				left: 50%;
			}
		}
	} */
}

/* Nav Expander (Plus button) */

.nav-expander {
	width: 16px;
	height: 16px;
	position: relative;
	margin-left: 16px;
	/* transform: rotate(0deg); */
	/* transition: .5s ease-in-out; */
	cursor: pointer;

	span {
		display: block;
		position: absolute;
		height: 1px;
		width: 100%;
		background: var(--menu-express-text-color);
		opacity: 1;
		left: 0;
		transform: rotate(0deg);
		transition: transform .25s ease-in-out;

		&:nth-child(1) {
			top: 8px;
		}

		&:nth-child(2) {
			top: 8px;
			transform: rotate(90deg);
		}
	}
}

.sub-menu-parent-open {
	>a {
		background-color: var(--menu-express-hover);

		.nav-expander {
			span {
				&:nth-child(2) {
					transform: rotate(180deg);
				}
			}
		}
	}
}