/* 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: 17px;
	}
	
	.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-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;
	}
	
	.navbar .navbar-brand {
		padding: 0px;
	}
	
	.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: 13px;
		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;
		}
		img.college-logo {
			filter: grayscale(1) brightness(10) contrast(1);
			&:hover {
				filter: grayscale(0) brightness(100%) contrast(100%);
			}
		}
	}
}
 
.admissions {
	#orange-bg-header {
		width: 60%!important;
		padding-left: 2.5rem;
	}
}

#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: 16px;
		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: 16px;
	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: 105px;
		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: 17px;
		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;
	}
	#header button.navbar-toggler .navbar-toggler-icon {
		font-size: 25px !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: 35px;
		top: 22px !important;
	}
	#header .navbar-nav>.nav-item .dropdown-menu {
		position: initial;
		width: 100%;
		background-color: transparent;
		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: 17px;
		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: 25px !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(sm) {
	#main-header {
		img.college-logo {
			max-width: 225px;
		}
		.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 */