/* HEADER */

.HEADER {
	height: 100%;
	transition: background 0.25s;
}

.HEADER .b-frame {
	padding-top: 20rem;
	padding-bottom: 20rem;
	height: 100%;
}

.HEADER .container {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	height: 100%;
}

.HEADER .logo {
	flex: 0 0 auto;
	height: 100%;
	aspect-ratio: 1;
	display: block;
	background: url(/_assets/d02bdf84ee2cc6cc/logo-usc-short-2.svg);
	background-repeat: no-repeat;
	background-size: calc(100% + 0.4rem);
}
.HEADER .logo::after {display: none;}

.HEADER .nav-trigger {
	display: none;
	flex: 0 0 auto;
	/* width: 40rem;
	height: 40rem; */
	/* background: #333; */
	text-indent: -9999rem;
}

.HEADER nav .a {
	color: black;
	cursor: default;
}

.HEADER nav .a::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 14rem;
	height: 14rem;
	background: #333;
	margin: -2rem 0 0 6rem;
}

.HEADER nav :is(a, .a):not(.b-button) {color: var(--white);}
.HEADER nav :is(a, .a):not(.b-button):hover {color: var(--bright-light-blue);}

.b-page:not([data-scroll]) .HEADER.dark-links nav > ul > li > :is(a, .a):not(.b-button) {color: var(--black); }
.b-page:not([data-scroll]) .HEADER.dark-links nav > ul > li > :is(a, .a):not(.b-button):hover {color: var(--light-blue);}
.b-page:not([data-scroll]) .HEADER.dark-links nav .social-icons a { color: var(--black); }
.b-page:not([data-scroll]) .HEADER.dark-links nav .social-icons a:hover { color: var(--light-blue); }

.HEADER nav :is(a, .a):not(.b-button) {font-size: 16rem; line-height: 1.625;}
.HEADER nav > ul > li > :is(a, .a):not(.b-button) {line-height: 40rem;}
.HEADER nav :is(a, .a):not(.b-button)::after {display: none;}

.HEADER nav > ul {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.HEADER nav > ul > li {
	flex: 0 0 auto;
	position: relative;
	margin: 0 0 0 40rem;
	font-size: 18rem;
	/* line-height: 40rem; */
}



/* submenu */

.HEADER nav > ul > li > ul {
	display: block !important;
	position: absolute;
	top: 100%;
	left: 0;
	opacity: 0;
	border-radius: 10rem;
	transform: translate(-16rem, 40rem);
	pointer-events: none;
	transition: opacity 0.25s, transform 0.25s;
}

.HEADER nav > ul > li:hover > .a::after,
.HEADER nav > ul > li:focus-within > .a::after {
	transform: scaleY(-1);
}

.HEADER nav > ul > li:hover > ul,
.HEADER nav > ul > li:focus-within > ul {
	opacity: 1;
	transform: translate(-16rem, 0);
	pointer-events: auto;
}



/* dropdown */

.HEADER .dropdown > ul {
	width: 200rem;
}

.HEADER .dropdown > ul > li {
	padding: 5rem 20rem;
	font-size: 16rem;
	line-height: 1.25;
}

.HEADER .dropdown > ul > li:first-child {padding-top: 20rem;}
.HEADER .dropdown > ul > li:last-child {padding-bottom: 20rem;}



/* megamenu */

.HEADER .megamenu {
	position: static;
}

.HEADER .megamenu ul {
	display: block;
	width: 100%;
	min-height: 240rem;
}

.HEADER .megamenu > ul::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	height: 40rem;
}

.HEADER .megamenu > ul > li {
	font-size: 16rem;
	line-height: 1.25;
}

.HEADER .megamenu .wrapper {
	padding: 20rem;
}



/* Hamburger */

.HEADER .nav-trigger {
	/* width: 31rem;
	height: 25rem; */
	display: none;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	/* transform: translate(0, -50%) rotate(0deg); */
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(0, 0);
	transition: .25s;
	cursor: pointer;
}

.HEADER .nav-trigger path {
	display: block;
	position: absolute;
	height: 3rem;
	width: 100%;
	transform-box: stroke-box;
	transform-origin: center center;
	background: var(--white);
	color: var(--white);
	/* border-radius: 2rem; */
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s;
	-moz-transition: .25s;
	-o-transition: .25s;
	transition: .25s;
}

.HEADER.dark-links .nav-trigger path { stroke: var(--black); color: var(--black); }
#toggle-nav:checked ~ .b-page .HEADER .nav-trigger path { stroke: var(--white); color: var(--white); }

.b-page[data-scroll] .HEADER.dark-links .nav-trigger path { stroke: var(--white); color: var(--white); }
/* #toggle-nav:checked ~ .b-page .b-page[data-scroll] .HEADER .nav-trigger path { stroke: var(--white); color: var(--white); } */


.HEADER .nav-trigger path:nth-child(1) {
	top: 0rem;
}
  
.HEADER .nav-trigger path:nth-child(2),
.HEADER .nav-trigger path:nth-child(3) {
	top: 11rem;
}
  
.HEADER .nav-trigger path:nth-child(4) {
	top: 23rem;
}

#toggle-nav:checked ~ .b-page .HEADER .nav-trigger path:nth-child(1),
#toggle-nav:checked ~ .b-page .HEADER .nav-trigger path:nth-child(4) {
	top: 11rem;
	width: 0%;
	left: 50%;
	/* opacity: 0; */
	transform: rotateY(90deg);
}
#toggle-nav:checked ~ .b-page .HEADER .nav-trigger path:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
#toggle-nav:checked ~ .b-page .HEADER .nav-trigger path:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}



/* slide down */

.b-page[data-scroll] .HEADER {background: var(--midnight-blue);}
.b-page[data-scroll] .HEADER .b-frame {padding-top: 10rem; padding-bottom: 10rem;}
.b-page[data-scroll] .HEADER .megamenu > ul::before {height:20rem;}
.b-page[data-scroll] .HEADER .container .nav-trigger {
	top: 50%;
	transform: translate(0, -50%);
}

/* nav open */

#toggle-nav:checked ~ .b-page .HEADER {background: transparent;}
#toggle-nav:checked ~ .b-page .HEADER .nav-trigger {background-image: url();}

/* fix to make sure the nav can always be closed */

#toggle-nav:checked ~ .b-page .HEADER .nav-trigger {display: block;}
#toggle-nav:checked ~ .b-page .HEADER nav {display: none;}

@media screen and (max-width: 960px) {
	.HEADER .b-frame { padding: 20rem;}
	.HEADER .nav-trigger {display: block;}
	.HEADER nav {display: none;}
    .HEADER .logo {height: 70px;}
}