// ===========================
// Navigation
// ===========================

//Top row that appears at mobile sizes.
#mobilebarcon {visibility: visible; position: relative; background: $primary_color; width: 100%; height: 42px; overflow: hidden; z-index: 1; transition: all 0.5s; border: 0 solid rgb(255 255 255 / 0%); //Border color hack for actual visibility detection. No will-change here because it is not often expected for this transition to happen.
	a {font-size: rem(32px); @include link-colors(#fff, #aaa); text-decoration: underline;}
	.mobilerow {display: block;
		#mobileheadersearch {display: flex; align-items: center;
			input {width: 100%; color: #fff; font-size: rem(18px); padding-left: 10px; line-height: 42px; min-height: 42px; background: none; border: none; outline: none; box-shadow: none; border-radius: 0; -webkit-appearance: none;}
			input::-webkit-input-placeholder {font-weight: 300; color: rgb(255 255 255 / 90%);}
			input:-moz-placeholder {font-weight: 300; color: rgb(255 255 255 / 90%);}
			input::-moz-placeholder {font-weight: 300; color: rgb(255 255 255 / 90%);}
			input:-ms-input-placeholder {font-weight: 300; color: rgb(255 255 255 / 90%);}
			&::before {content: "\f002"; @include font-awesome(); color: #fff; font-size: rem(18px); padding-left: 15px;}
		}
	}
	a.offcanvasnavtrigger {position: relative; font-size: rem(24px); padding: 0 14px; height: 42px; line-height: 42px; text-align: center; text-decoration: none; color: #fff; @include background-color(#fff, 25%); z-index: 99999;
		&:hover,
		&:focus {color: #fff; @include background-color(#fff, 40%);}
		&.active {color: #fff; @include background-color(#fff, 0%);}
	}

	@include media("lg"){visibility: hidden; height: 0; border: 0 solid rgb(0 0 0 / 90%);} //Border color hack for actual visibility detection
}

//Includes Utility and Primary navigation rows (which also includes the logo)
#navigation-section {position: relative; z-index: 500;
	&.mp-above {padding-bottom: 20px;}
	//&.mp-over {} //Default
}

//Extend animated sub menu dropdowns for WordPress menus (Used with the utility nav and primary nav)
@mixin nebula-dropdown($font-size: 14px, $line-height: 21px){
	ul.sub-menu {position: absolute; display: block; top: 100%; transform: translate3d(0, 20%, 0); left: -9999px; right: auto; height: auto; margin: 0; padding: 5px 0; opacity: 0; text-align: left; transition: transform 0.35s easing(easeOutBack), opacity 0.25s; will-change: opacity, transform, left; @include background-color(#fff, 95%); backdrop-filter: blur(12px); box-shadow: 0 15px 50px 0 rgb(0 0 0 / 25%); z-index: 1001;
		.no-js & {width: 400px;}

		li.menu-item {display: block; margin: 0; padding: 0 5px;
			a {display: block; padding: 5px; margin: 0; font-size: rem($font-size); line-height: rem($line-height); @include link-colors($primary_color, #fff); white-space: nowrap;
				&:hover,
				&:focus {background: $primary_color;}
			}

			&.menu-item-has-children {position: relative;
				> a {padding-right: 35px;}
				&::after {content: "\f054"; position: absolute; top: 0; right: 12px; transform: translate3d(6px, 0, 0); height: 100%; display: flex; align-items: center; @include font-awesome("solid"); font-size: 8px; color: #aaa; transition: transform 0.25s easing(easeOutBack); will-change: transform; pointer-events: none;} //This is the "has children" arrow icon
			}

			ul.sub-menu {display: none;} //Hide all sub-menus at first
		}
	}

	&:hover,
	&:focus {
		@include nebula-submenus();
	}

	//No IE or Edge Support: https://caniuse.com/#feat=css-focus-within
	//Once all browsers support this, add to the comma separation above and remove nebula-submenus() mixin
	&:focus-within {
		@include nebula-submenus();
	}

	.no-js &:last-child:hover ul.sub-menu,
	.no-js &:last-child:focus ul.sub-menu {left: auto; right: 0;}
}

//First dropdown menu (secondary-level navigation)
@mixin nebula-submenus(){
	> a {background: $primary_color; color: readable-color($primary_color) !important;}

	//First dropdown
	ul.sub-menu {left: 0; right: auto; transform: translate3d(0, 0, 0); opacity: 1;
		&.overflowing {left: auto; right: 0;}
		li.menu-item {background: none;
			ul.sub-menu {display: none;}

			&:hover,
			&:focus {
				@include nebula-subsubmenus();
			}

			//Once all browsers support this, add to the comma separation above and remove nebula-subsubmenus() mixin
			&:focus-within {
				@include nebula-subsubmenus();
			}
		}
	}
}

//Second dropdown menu (third-level navigation)
@mixin nebula-subsubmenus(){
	&::after {transform: translate3d(0, 0, 0); color: readable-color($primary_color);} //The active "has children" arrow icon

	//Second "dropdown"
	> ul.sub-menu {display: block; left: 100%; right: auto; top: 0; opacity: 1;
		&.overflowing {left: auto; right: 100%; //Second "dropdown" is overflowing the viewport. Move it to the left.
			ul.sub-menu {left: auto; right: 100%;} //Also move all nested submenus to the left as well.
		}
	}
}

#utilitynavcon {max-height: 0; opacity: 0; background: rgb(0 0 0 / 50%); transition: all 0.5s;
	@include media("lg"){height: auto; max-height: 200px; opacity: 1;}

	#utility-nav {position: relative;
		ul {list-style: none; margin: 0; padding: 0; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: center; justify-content: flex-end;
			li.menu-item {position: relative;
				a {display: block; padding: 0 15px; font-size: rem(12px); line-height: rem(18px); color: #fff;}
				@include nebula-dropdown(12px, 14px);
			}
		}
	}
}

#primary-nav {position: relative; display: none; z-index: 1000;
	@include media("lg"){display: block;} //This is causing a tiny, tiny amount of CLS...

	ul {list-style: none; margin: 0; padding: 0; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-align: center; align-items: center;
		li.menu-item {position: relative;
			a {display: block; padding: 10px 20px; text-align: left; font-size: rem(16px); line-height: rem(21px); color: #fff;}
			@include nebula-dropdown(14px, 21px);
		}
	}
}

//Offcanvas Drawer
body::before {content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgb(0 0 0 / 0%); backdrop-filter: blur(0); transition: all 0.25s ease; pointer-events: none;} //Prep for the Bootstrap offcanvas background overlay to add animation transitions
	body.offcanvas-backdrop::before {background-color: rgb(0 0 0 / 75%); backdrop-filter: blur(3px); pointer-events: all;} //offcanvas-backdrop is not being added to the body class... maybe a bug because the backdrop itself is not appearing.

//Offcanvas Menu
.offcanvas-body nav {
	ul {list-style: none; padding-left: 0;
		li {margin-top: 10px;
			a {display: block; width: 100%; padding: 8px 15px; text-decoration: none; background: none;
				&:hover,
				&:focus {background: $primary_color; color: readable-color($primary_color) !important;}
			}

			ul.sub-menu {
				li {margin-top: 0; margin-left: 16px; border-left: 1px solid $primary_color;
					a {text-decoration: none;}
				}
			}
		}
	}

	nav#offcanvas-utility-nav {margin-top: 35px;
		ul li {margin-top: 0;
			a {padding: 3px 15px;}
		}
	}

	li.current-menu-item {font-weight: bold;
		ul li {font-weight: normal;}
	}
}