/* Touch Menu */

/*
Variables and Color Options For the Navigation Menu
*/

:root {
	--nav-panel-phone-width: calc(100vw - 80px);
	--nav-panel-tablet-width: 50vw;
  --nav-panel-desktop-width: 500px;

  /* Hamburger Express Menu AND All Mobile Styles */

	--menu-express-font-size-parent: 26px;
	--menu-express-font-size-child: 20px;
	--menu-express-font-size-grandchild: 16px;

	--menu-express-text-color: var(--light-color);

  --menu-express-bg: var(--primary-color);
  --menu-express-bg-child: color-mix(in srgb, var(--primary-color), black 5%);
  --menu-express-bg-grandchild: color-mix(in srgb, var(--primary-color), black 8%);
  --menu-express-hover: var(--primary-alt);

  /* Hamburger Deluxe Menu Styles */

	--menu-deluxe-font-size-parent: 26px;
	--menu-deluxe-font-size-child: 26px;
	--menu-deluxe-font-size-grandchild: 22px;

  /* --menu-deluxe-bg-parent: var(--primary-color); */
  --menu-deluxe-bg-parent: green;
  --menu-deluxe-text-parent: lime;
  --menu-deluxe-bg-hover-parent: olive;
  --menu-deluxe-text-hover-parent: yellow;

  --menu-deluxe-bg-child: navy;
  --menu-deluxe-text-child:  aqua;
  /* --menu-deluxe-bg-hover-child: color-mix(in srgb, var(--secondary-color), black 5%); */
  --menu-deluxe-bg-hover-child: teal;
  --menu-deluxe-text-hover-child: fuchsia;

  --menu-deluxe-bg-grandchild: orange;
  --menu-deluxe-text-grandchild: maroon;
  --menu-deluxe-bg-hover-grandchild: red;
  --menu-deluxe-text-hover-grandchild: purple;

  /* Top Menu Styles */

	--menu-top-font-size-parent: 16px;
	--menu-top-font-size-child: 16px;
	--menu-top-font-size-grandchild: 16px;

	--mega-menu-font-size-child: 20px;
	--mega-menu-font-size-grandchild: 16px;

  --menu-top-bg-parent: navy;
  --menu-top-text-parent: silver;
  --menu-top-bg-hover-parent: silver;
  --menu-top-text-hover-parent: black;

  --menu-top-fixed-bg-parent: yellow;
  --menu-top-fixed-text-parent: maroon;
  --menu-top-fixed-bg-hover-parent: maroon;
  --menu-top-fixed-text-hover-parent: yellow;

  --menu-top-bg-child: green;
  --menu-top-text-child: lime;
  --menu-top-bg-hover-child: blue;
  --menu-top-text-hover-child: aqua;

  --menu-top-bg-grandchild: orange;
  --menu-top-text-grandchild: red;
  --menu-top-bg-hover-grandchild: purple;
  --menu-top-text-hover-grandchild: fuchsia;

}

/* .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;

		@media (min-width: 768px) {
			width: var(--nav-panel-tablet-width);
		}
		@media (min-width: 1060px) {
			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(--light-alt);
						}
					}
				}
			}
			svg {
				width: auto;
				height: 30px;
				path {
					fill: var(--light-color);
				}
			}
		}
	}

	/* Nav address */

	.menu-address-site-locations {
		.location-each {
			margin-bottom: 20px;
			a {
				display: flex;
			}
			.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);
		transform: translateX(-100%);
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		@media (min-width: 768px) {
			left: var(--nav-panel-tablet-width);
		}
		@media (min-width: 1060px) {
			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;
		}

		li { /* Set baseline "li" styling -- reset */
			margin: 0;
			padding: 0;
			position: relative;
			&:before {
				display: none;
			}
			@media (min-width: 1060px) {
				&:hover {
					> a {
						background-color: var(--menu-express-hover);
					}
				}
			}
		} /* End "li" reset */

		a { /* Set baseline "a" styling -- reset */
			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 { /* li */
			/* Top level menu items */
			> a {
				/* font-size: 26px;
				font-size: 1.625rem; */
				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: color-mix(in srgb, orange, black 5%); */
			background-color: var(--menu-express-bg-child);
			a {
				/* font-size: 20px;
				font-size: 1.25rem; */
				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: color-mix(in srgb, orange, black 10%); */
				background-color: var(--menu-express-bg-grandchild);
				a {
					/* font-size: 16px;
					font-size: 1rem; */
					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;
}

/* Hamburger Menu */

.nav-hamburger {
	width: 26px;
	height: 15px;
	position: relative;
	z-index: -1;
	/* transform: rotate(0deg); */
	/* transition: transform .5s ease-in-out; */
	cursor: pointer;
	margin-right: 5px;
	span {
		display: block;
		position: absolute;
		height: 3px;
		width: 100%;
		background: var(--primary-alt);
		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: 6px;
		}
		&:nth-child(4) {
			top: 12px;
		}
	}
	/*
	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);
				}
			}
		}
	}
}