/* components/02-components/07-navigation/01-site-navigation/site-navigation.scss */
/* BEGIN navigation.scss */
#header button.navbar-toggler:focus {
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

#sidebar .dropdown-menu {
	padding: 0px;
}

.mobile-screen .navbar-brand {
	max-width: 200px !important;
}

.mobile-screen #header .navbar-brand {
	display: inline-block;
}

.mobile-nav-btns .action-btn {
	background-color: $orange-a11y;
	color: $white !important;
	display: block;
}

#header .mobile-nav-btns>.action-btn {
	margin-bottom: 12px;
}

.mobile-nav-btns {
	padding-top: 20px !important;
}

#header button.navbar-toggler:focus {
	outline: none;
}

// .top-navigation{
// -webkit-box-shadow: 1px 2px 38px -16px grey;
// box-shadow: 1px 2px 38px -16px grey;
// }

.sticky-header.active {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 999;
	-webkit-animation: heightanimate;
	animation: heightanimate;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}

#main-header {
	background-color: var(--bs-body-bg);

	.navbar-brand college-logo.img {
		width: 265px !important;
		height: 25px !important;
		max-width: 265px;
	}

	.navbar-nav .nav-link {
		color: $blue;
		font-weight: 600;
		padding-top: 0px;
		padding-bottom: 0px;
	}

	.navbar-nav .nav-link::after {
		color: $orange-a11y;
		position: relative;
		top: 2px;
		left: 4px;
		font-size: 1rem;
	}

	.navbar-nav>.nav-item {
		padding: 0px 7px;
		height: 73px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		position: relative;

		&:nth-last-child(2) .dropdown-menu>.dropdown-item {
			white-space: normal;
		}
	}

	.navbar-stacked .navbar-nav>.nav-item {
		height: 58px;
	}

	.navbar-nav .nav-link:hover {
		color: $orange-a11y;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		background-color: transparent;
	}

	.navbar-nav .nav-link:active,
	.navbar-nav .nav-link:focus {
		background-color: $grey;
	}

	.navbar {
		padding: 0px;
		flex-direction: row;

		&-stacked {
			flex-direction: column;
			align-items: flex-start;
		}
	}

	.navbar .navbar-brand {
		padding: 0px;

		&-stacked {
			align-self: flex-start;
			padding: 18px 5px 5px 15px;
		}
	}

	.navbar-nav>.nav-item:hover {
		background-color: $white-b;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.navbar-nav>.nav-item .dropdown-menu {
		background-color: $white-b;
		margin: 0px !important;
		border: none !important;
		border-radius: 0px !important;
	}

	.navbar-nav>.nav-item .dropdown-menu .dropdown-item {
		color: $blue;
		font-size: .75rem;
		border-bottom: 1px solid $orange-a11y;
	}

	.navbar-nav>.nav-item .dropdown-menu .dropdown-item:last-child {
		border: none;
	}

	.navbar-nav>.nav-item .dropdown-menu {
		background-color: $white-b;
		margin: 0px !important;
		border: none !important;
		border-radius: 0px !important;
		padding-top: 13px;
		padding-left: 15px;
		padding-right: 15px;
	}

	.navbar-nav>.nav-item .dropdown-menu>.dropdown-item {
		padding-left: 11px;
		padding-right: 11px;
	}


	.navbar-nav>.nav-item .dropdown-menu>.dropdown-item:hover,
	.navbar-nav>.nav-item .dropdown-menu>.dropdown-item:focus {
		background-color: transparent;
		color: $orange-a11y;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.nav-item.show {
		background-color: $white-b;
	}

	.navbar {
		width: 100%;
		margin: 0 auto;
		padding: 0px 15px;
	}

	#header {
		position: relative;
	}

	.select2 {
		width: 100% !important;
	}
}

@include color-mode(dark) {
	.campus-wide.alert-danger {
		color: $white;
	}

	#header .top-navigation {
		background-color: $grey-e;
	}

	.main-header #main-header .navbar-nav>.nav-item .nav-link {
		color: $white;

		&:hover,
		&:active,
		&:focus {
			color: $blue;
		}
	}

	.main-header #main-header .navbar-nav>.nav-item:hover .nav-link {
		color: $blue;
	}

	#main-header {
		.navbar-nav>.nav-item {

			&:hover,
			&:active,
			&:focus {
				background-color: $grey;
			}
		}

		.navbar-nav>.nav-item .dropdown-menu {
			background-color: $grey;
		}

		a.navbar-brand {
			filter: grayscale(1) brightness(10) contrast(1);

			&:hover,
			&:focus,
			&:active {
				filter: grayscale(0) brightness(100%) contrast(100%);
			}
		}
	}
}

#admissions-navigation {

	/*Navigation Fixes*/
	#main-header .navbar-nav>.nav-item .dropdown-menu {
		width: auto !important;
	}

	@media only screen and (min-width: 992px) {
		.navbar {
			flex-direction: column;
		}

		.navbar .navbar-brand {
			margin: 1rem auto 0 1rem;
			width: 300px;
		}

		.navbar-expand-md .navbar-collapse {
			margin-right: auto;

		}

		.sticky-header.is-sticky .navbar .navbar-brand {
			display: none;
		}

		#main-header .navbar-nav>.nav-item {
			height: 60px;
		}
	}

	.sticky-header.is-sticky {
		animation: heightanimate;
		animation-duration: 1s;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 999
	}

	.mobile-only {
		display: none !important;
	}


}

#orange-bg-header {
	z-index: 9;
	padding: 3px 0px;
	position: relative;
	height: 100%;
	min-width: 30%;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;

	--notchSize: 2.8rem;
	padding-left: 1.5rem;
	background-color: $orange-a11y;
	height: 45px;
	background-size: cover;
	clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--notchSize)) 100%);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--notchSize)) 100%);

	.orange-header-list {
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		list-style: none;
		padding-left: 0px;
	}

	.orange-header-list>.nav-item>.nav-link {
		color: $white;
		background: $orange-a11y;
		font-size: .875rem;
		padding-left: 14px;
		padding-right: 14px;
		font-weight: 600;
		padding-top: 8px;
		padding-bottom: 8px;

		&:hover,
		&:focus {
			background-color: $blue;
		}
	}
}

/* Mobile Navigation sample css */
#main-header .navbar-nav>.nav-item.show>a::after {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

.action-btn.bg-darkorange:hover {
	background-color: $blue !important;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

/* End Mobile Navigation sample css */

/* Main Header */
.navbar .navbar-brand {
	width: auto;
	margin-right: 0px;
}

.main-header #main-header .navbar-nav>.nav-item .nav-link {
	font-size: .875rem;
	font-weight: 600;
}

.bottom-absolute-header {
	position: absolute;
	z-index: 999;
	width: 100%;
}

/* Main Header */
@include media-breakpoint-down(md) {
	// .main-header #main-header .navbar-nav>.nav-item .nav-link.show::after {
	// 	-webkit-transform: rotate(180deg);
	// 	    -ms-transform: rotate(180deg);
	// 	        transform: rotate(180deg);
	// 	top: 14px !important;
	// }

	#main-header>.container {
		padding: 0px;
	}

	header #main-header .navbar {
		padding-left: 25px !important;
		padding-right: 25px !important;
	}

}

@include media-breakpoint-down(lg) {
	// .sticky-header.active #main-header #collapsibleNavbar4 {
	// 	top: 70px;
	// }

	#header.main-header .navbar-nav {
		position: relative;
		z-index: 0;
	}

	#header #main-header>.container {
		padding-left: 0px;
		padding-right: 0px;
	}

	#header .search-text {
		display: none;
	}

	#header button.navbar-toggler {
		height: 35px;
		display: inline-block;
	}

	#header #main-header {
		position: relative;
	}

	#header.main-header .navbar-collapse {
		position: fixed;
		top: 125px;
		bottom: 0px;
		width: 100%;
		left: 100%;
		right: 0;
		background-color: $white;
		z-index: 999;
		-webkit-box-align: start !important;
		-ms-flex-align: start !important;
		align-items: start !important;
		display: block !important;
		height: 100vh;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		overflow: scroll;
		padding-bottom: 150px;
	}

	#header .navbar-collapse.show {
		left: 0 !important;
	}

	#header .navbar-collapse>.navbar-nav {
		background-color: $white;
	}

	#header .navbar-nav {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		width: 100%;
	}

	#header #orange-bg-header {
		display: none;
	}

	#header #collapsibleNavbar {
		-webkit-box-pack: start !important;
		-ms-flex-pack: start !important;
		justify-content: flex-start !important;
	}

	#header .navbar-nav>.nav-item {
		width: 100%;
		height: auto;
	}

	#header .navbar-nav>.nav-item .nav-link {
		display: block;
		width: 100%;
		font-size: 1rem;
		padding-bottom: 15px;
		border-top: 1px solid $orange-a11y;
		padding-top: 15px;
		font-weight: 600;
	}

	#header .navbar-nav>.nav-item:first-child .nav-link {
		border: none;
	}

	#header .navbar-nav>.nav-item:nth-last-child(2) .nav-link {
		border-bottom: 1px solid $orange-a11y;
	}

	#header .nav-item.show>.dropdown-toggle {
		border: none !important;
	}

	#header .nav-item.show+.nav-item>.nav-link {
		border: none !important;
	}

	#header.main-header .navbar-nav {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		width: 100%;
		padding-left: 30px;
		padding-right: 30px;
		padding-top: 10px;
		padding-bottom: 30px;
	}

	#header .navbar {
		padding-top: 15px;
		padding-bottom: 15px;
		padding-left: 35px;
		padding-right: 35px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		flex-direction: row;
	}

	#header button.navbar-toggler .navbar-toggler-icon {
		font-size: 1.25rem !important;
		font-weight: 200 !important;
		//unset bootstrap 5.2 default
		background-image: unset;
	}

	#header button.navbar-toggler.toggle-active .navbar-toggler-icon {
		display: none;
	}

	#header button.navbar-toggler.toggle-active .navbar-toggler-close-icon {
		display: block !important;
	}

	#header .navbar-nav>.nav-item:hover {
		background-color: transparent;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	#header+#orange-bg-header {
		display: none;
	}

	#main-header .navbar-nav>.nav-item.show>a::after {
		-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	#header .navbar-nav>.nav-item .nav-link::after {
		right: 19px !important;
		position: absolute;
		width: 20px;
		height: 20px;
		margin-left: auto;
		font-size: 2rem;
		top: 22px !important;
	}

	#header .navbar-nav>.nav-item .dropdown-menu {
		position: initial;
		width: 100%;
		background-color: $white;
		padding-top: 0px;
		padding-bottom: 20px;
	}

	#header .navbar-nav>.nav-item {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	#header .nav-item.show {
		background-color: transparent;
	}

	#header .navbar-nav>.nav-item.show .nav-link::after {
		top: 11px !important;
	}

	#header .navbar-nav>.nav-item .dropdown-menu .dropdown-item {
		font-size: 1rem;
		font-weight: 300;
		padding-bottom: 10px;
		padding-top: 10px;
	}

	#header .nav-item.show::before {
		background-color: $grey;
		content: '';
		position: absolute;
		left: -30px;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: -1;
		width: calc(100% + 60px);
	}

	#header button.navbar-toggler>.navbar-toggler-close-icon {
		font-size: 1.25rem !important;
	}

	#header .mobile-nav-btns {
		display: block !important;
	}

	.action-btn.bg-orange:hover,
	.action-btn.bg-orange:focus {
		background-color: $blue !important;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	body .mobile-show {
		display: block !important;
	}

	// mobile menu

	@include color-mode(dark) {
		.main-header #main-header .navbar-nav>.nav-item .nav-link {
			color: $grey;

			&:hover,
			&:active,
			&:focus {
				color: $white;
				background-color: $blue;
			}
		}

		#header .navbar-collapse>.navbar-nav {
			background-color: $grey-e;
		}

		#main-header {
			.navbar-nav>.nav-item .dropdown-menu {
				background-color: $grey-e;
				color: $grey;

				.dropdown-item {
					color: $white;
				}
			}
		}

		#main-header {
			.navbar-nav>.nav-item {

				&:hover,
				&:active,
				&:focus {
					background-color: $grey-e;
					color: $grey;
				}

				.dropdown-item {
					&:hover {
						background-color: $grey;
						color: $grey-e;
					}
				}
			}
		}

	}
}

@include media-breakpoint-up(xl) {
	.action-btn {
		min-width: 238px;
	}

	.toc-banner-space {
		padding-left: 300px;
	}

	.card-tiles-wrapper #main-header .navbar-nav .nav-link {
		white-space: nowrap;
	}
}

@include media-breakpoint-up(lg) {
	.main-header #main-header .navbar {
		padding: 0px;
	}

	#header #main-header .mobile-nav-btns {
		display: none;
	}
}

@include media-breakpoint-down(md) {
	#main-header {
		img.college-logo {
			max-width: 415px;
		}
	}
}

@include media-breakpoint-down(sm) {
	#main-header {
		img.college-logo {
			max-width: 225px;
			height: 35px;
			margin-bottom: 8px;
		}

		.navbar {
			min-height: 65px;

			.navbar-brand {
				max-width: 75% !important;
			}
		}
	}
}

@include media-breakpoint-down(xs) {
	#main-header {
		img.college-logo {
			max-width: 200px;
		}

		.navbar {
			min-height: 65px;

			.navbar-brand {
				max-width: 70% !important;
			}
		}
	}
}

/* END navigation.scss */