/* HEADER */

.HEADER {
	height: auto;
	transition: background 0.25s;
}

.HEADER .topbar {
	background: var(--indigo);
	color: var(--white);
	position: relative;
	z-index: 32;
}

.HEADER .topbar .b-frame {
	padding-top: var(--s2);
	padding-bottom: var(--s2);
}

.HEADER .topbar .container {
	display: flex;
    justify-content: space-between;
    align-items: center;
}

.HEADER .topbar .b-button {
	padding: 0;
	color: var(--white);
}

.HEADER .topbar .b-button:hover {
	color: var(--mint);
}

.HEADER .topbar a {text-decoration: none;}

.HEADER .topbar li {
	list-style: none;
}

.HEADER .b-frame {
	padding-top: var(--s3);
    padding-bottom: var(--s3);
    height: 100%;
}

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

.HEADER .a,
.HEADER a {
	position: relative;
	z-index: 1;
}

.HEADER .a, .HEADER a:not(.b-button) {
	font-size: 16rem;
	font-weight: 700;
	line-height: 1.2;

}

.HEADER .logo {
	text-indent: -9999rem;
	flex: 0 0 auto;
	width: var(--s10);
	height: var(--s5);
	background:  url(../../assets/images/headversity.svg) no-repeat center / 100% auto;
}

.b-page.sport .HEADER .logo {
	text-indent: -9999rem;
	flex: 0 0 auto;
	width: var(--s10);
	height: var(--s5);
	background:  url(../../assets/images/headversity-sport.svg) no-repeat center / 100% auto;
}


.HEADER .nav-trigger {
	display: none;
	flex: 0 0 auto;
	width: 51rem;
	height: 51rem;
	background: no-repeat center url(../images/ui-nav-trigger.svg);
	text-indent: -9999rem;
	cursor: pointer;
}

.HEADER nav .a {
	color: var(--white);
	cursor: pointer;
}

.HEADER nav .a::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: var(--s3);
	height: var(--s2);
	background: no-repeat center url(../images/ui-dropdown.svg);
	margin: -1rem 0 0 var(--s2);
}

.HEADER nav li:active > .a::after,
/* .HEADER nav li:hover > .a::after, */
.HEADER nav li:focus-within > .a::after {
	transform: scaleY(-1);
	background: no-repeat center url(../images/ui-dropdown-open.svg);
}

.HEADER .b-button {padding: var(--s3);}
.HEADER .b-button.alt-secondary {margin-left: var(--s2);}
.HEADER .wrapper .b-button svg {display: none;}

.HEADER nav a:not(.b-button) {color: var(--white); text-decoration: none;}
/* .HEADER nav a:not(.b-button):hover {color: var(--mint);} */

.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 var(--s5);
	font-size: 18rem;
	line-height: var(--s6);
}

/* dropdown */

.HEADER .b-nav-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 15, 116, 0.5);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 5;
	transition: opacity 0.25s, visibility 0.25s;
}

.HEADER.dropdown-focus .b-nav-overlay {
	opacity: 1;
	visibility: visible;
	pointer-events: none;
}

[data-scroll="up"] .HEADER.dropdown-focus .b-nav-overlay {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	position: fixed;
}

.HEADER .dropdown {
	position: absolute;
	top: 100%;
	left: 22%;
	pointer-events: none;
	overflow: hidden;
}

.HEADER li:active .dropdown,
/* .HEADER li:hover .dropdown, */
.HEADER li:focus-within .dropdown {
	pointer-events: auto;
}

.HEADER .dropdown > ul {
	width: max-content;
	min-width: var(--col-6);
	max-width: var(--col-7);
	background: var(--white);
	transform: translate(0, var(--ns6));
	opacity: 0;
	padding: var(--s4);
    border-radius: var(--s2);
	transition: transform 0.25s, opacity 0.25s;
}

.HEADER .dropdown > ul > li {
	font-size: 16rem;
	color: var(--deep-indigo);
	line-height: 1.25;
	margin: 0;
}

.HEADER li.wpml .a {
	text-transform: uppercase;
}

.HEADER li.wpml .a::after {
	content: "";
    display: inline-block;
    vertical-align: middle;
    width: var(--s3);
    height: var(--s2);
    background: no-repeat center url(../images/ui-dropdown.svg);
    margin: -1rem 0 0 var(--s2);
}

/* .HEADER li.wpml:hover > .a::after, */
.HEADER li.wpml:focus-within > .a::after {
	transform: scaleY(-1);
	background: no-repeat center url(../images/ui-dropdown-open.svg);
}


.HEADER li.wpml .dropdown  > ul {
	min-width: var(--col-1);
	max-width: var(--col-1);
}

.HEADER li.wpml .dropdown {
	top: 80%;
	left: 90%;
}

.HEADER li.wpml .dropdown li:not(:last-child) {
	margin-bottom: var(--s3);
}

.HEADER .dropdown > ul li {
	margin: var(--ns1) 0;
}

.HEADER .dropdown .image.default {
	max-width: 200rem;
	margin-left: auto;
}


.HEADER li:active .dropdown > ul,
/* .HEADER li:hover .dropdown > ul, */
.HEADER li:focus-within .dropdown > ul {
	transform: translate(0, 0);
	opacity: 1;
}

.HEADER .dropdown > ul li a {
	color: var(--deep-indigo);
}

.HEADER .dropdown .description {
	font-weight: 400;
	line-height: 1.4;
}


.HEADER .dropdown > ul li a:hover {
	color: var(--indigo);
} 

/* megamenu */

.HEADER li[data-megamenu] {
	position: static;
}

.HEADER .megamenu {
	position: absolute;
	top: var(--page-head-height);
	left: 0;
	width: 100%;
	pointer-events: none;
	line-height: 1.25;
}

.HEADER li:active .megamenu,
/* .HEADER li:hover .megamenu, */
.HEADER li:focus-within .megamenu {
	pointer-events: auto;
}

.HEADER .megamenu-frame {
	position: relative;
	margin: 0 auto;
	max-width: var(--frame-width);
	padding: 0 0 var(--s7) 0;
	background: var(--light-grey);
	box-shadow: 224rem -128rem 0 128rem var(--light-grey), -224rem -128rem 0 128rem var(--light-grey);
	transform: translate(0, var(--ns5));
	opacity: 0;
	transition: transform 0.25s, opacity 0.25s;
}

.HEADER li:active .megamenu-frame,
/* .HEADER li:hover .megamenu-frame, */
.HEADER li:focus-within .megamenu-frame {
	transform: translate(0, 0);
	opacity: 1;
}

/* slide down */

.b-page[data-scroll] .HEADER {background: var(--deep-indigo);}
.b-page.alt-front-page[data-scroll] .HEADER {background: var(--white);}

/* nav open */

#toggle-nav:checked ~ .b-page .HEADER {background: var(--deep-indigo);}
#toggle-nav:checked ~ .b-page .HEADER .nav-trigger {background: no-repeat center url(../images/ui-nav-close.svg);}

/* 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: 1280px) {
	.HEADER li:last-child .dropdown {left: auto; right: 0;}
}

@media screen and (max-width: 960px) {
	.HEADER .topbar {display: none;}
	.HEADER .nav-trigger {display: block;}
	.HEADER nav {display: none;}
}


/* WPML */ 

.HEADER .bottom {
	opacity: 0;
	bottom: var(--s8);
	left: 0;
	height: 65rem;
}


.HEADER .bottom .b-button {
    width: 100%;
    margin-top: 12rem
}


.HEADER .languages {
    bottom: 100%;
    right: 0;
}

.HEADER .languages .selected, .HEADER .languages select {
    display: block;
    width: 23rem;
    height: 51rem;
    position: absolute;
    bottom: 7px;
    right: 56rem;
    border: none;
    border-radius: var(--s3);
    outline: none;
    background: 0 0;
}

.HEADER .languages select:focus,.HEADER .languages select:focus-within,.HEADER .languages select:focus-visible,.HEADER .languages select:active {
    border: none;
    outline: none
}

.HEADER .languages .selected {
    text-transform: uppercase;
    font-weight: 700;
    background: var(--deep-indigo);
    border: 1px solid var(--white);
    z-index: 1;
    pointer-events: none;
    color: var(--white);
    padding-left: var(--s3);
    padding-right: var(--s3);
    line-height: 3.2;
}

.HEADER .languages .selected img {
    width: auto;
    height: 24rem;
    margin: 0 15rem 0 auto
}

.HEADER .selected:after {
    /* content: ""; */
    position: absolute;
    top: 6px;
    right: 13px;
    width: 6rem;
    height: 6rem;
    border: 1rem solid currentColor;
    border-width: 0 1.5rem 1.5rem 0;
    transform: rotate(45deg)
}

@media screen and (min-width: 961px) {
	.HEADER .bottom {display: none;}
}

@media screen and (max-width: 960px) {
	.HEADER .bottom {opacity: 1;}
	.HEADER li.wpml .dropdown {left: auto; right: 0;}
	.b-page[data-scroll="up"] .HEADER .languages .selected, .b-page[data-scroll='up'] .HEADER .languages select {bottom: 7rem;}
	#toggle-nav:checked ~ .b-page[data-scroll="up"] .HEADER .languages .selected, #toggle-nav:checked ~ .b-page[data-scroll="up"] .HEADER .languages select {bottom: 7rem;}
}


/* SPORT NAVIGATIONS */ 

.b-page.sport .HEADER {
	background: var(--deep-indigo);
}

.b-page.sport .HEADER nav a:not(.b-button):hover {color: var(--yellow);}
.b-page.sport .HEADER nav .dropdown a:not(.b-button):hover {color: var(--indigo);}

.b-page.sport .HEADER .nav-trigger {
	background: no-repeat center url(../images/ui-nav-trigger-sport.svg)
}

#toggle-nav:checked ~ .b-page.sport .HEADER .nav-trigger {
	background: no-repeat center url(../images/ui-nav-close-sport.svg)
}

.b-page.sport .HEADER nav li:active > .a::after,
/* .b-page.sport .HEADER nav li:hover > .a::after, */
.b-page.sport .HEADER nav li:focus-within > .a::after {
	transform: scaleY(1);
	background: no-repeat center url(../images/ui-dropdown-open-sport.svg);
}


/* LANDING PAGE NAVIGATION */ 

.b-page.alt-front-page .HEADER .logo {
	background: url(../../assets/images/headversity-dark.svg) no-repeat center / 100% auto;
}

.b-page.alt-front-page .HEADER .b-frame {
	padding-top: var(--s4);
	padding-bottom: var(--s4);
}

.b-page.alt-front-page .HEADER li {
	list-style: none;
}

.b-page.alt-front-page .HEADER li.wpml .a::after {
	background: no-repeat center url(../images/ui-dropdown-dark.svg);
}

.b-page.alt-front-page .HEADER a {text-decoration: none;}

.b-page.alt-front-page .HEADER nav, 
.b-page.alt-front-page .HEADER .topbar, 
.b-page.alt-front-page .HEADER .bottom, 
.b-page.alt-front-page .HEADER .nav-trigger,
.b-page.alt-front-page .HEADER .toggle-nav {
	display: none;
}

.b-page.alt-front-page .HEADER .languages select,
.b-page.alt-front-page .HEADER .languages .selected {right: 0;}

@media screen and (max-width: 960px) {
	.b-page.alt-front-page .HEADER li.wpml .a {display: none;}
	.b-page.alt-front-page .HEADER .bottom {display: block;}

}