/* HEADER */

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

.HEADER .b-frame {
	padding-top: 0;
	padding-bottom: 0;
	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 .logo {
	text-indent: -9999rem;
	flex: 0 0 auto;
	width: 165rem;
	height: var(--s5);
	background: url(../images/docbosss.svg) no-repeat center / 100% auto;
}

.HEADER nav {
	display: flex;
	flex: 0 0 var(--col-9);
}

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

.HEADER nav .a,
.HEADER nav a:not(.b-button) {
	color: var(--dark-blue-400);
	font-weight: 600;
	font-size: var(--s3);
	letter-spacing: 0.16px;
	text-transform: uppercase;
	cursor: pointer;
}

.HEADER nav li:active > .a,
.HEADER nav li:focus-within > .a {
	color: var(--med-blue-400);
}

.HEADER nav > ul > li.menu-active > a,
.HEADER nav > ul > li.menu-active > .a {
	color: var(--med-blue-400);
}

.HEADER nav li.menu-active  ul ul > li a,
.HEADER nav li.menu-active ul ul > li .a {
	color: var(--white);
}

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

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

.HEADER nav li:nth-last-child(2) {margin-left: auto; margin-right: 27rem;}

.HEADER .b-button::after {background: var(--light-blue-300);}

.HEADER nav a:not(.b-button) {color: var(--dark-blue-400); text-decoration: none;}
.HEADER nav a:not(.b-button):hover {color: var(--med-blue-400);}

.HEADER nav > ul {
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.HEADER nav > ul > li {
	flex: 0 0 auto;
	position: relative;
	margin: 0 0 0 var(--s4);
	font-size: 18rem;
	line-height: var(--s6);
}

/* dropdown */

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

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

.HEADER .dropdown > ul {
	width: max-content;
	min-width: var(--col-2);
	max-width: var(--col-7);
	background: var(--med-blue-400);
	transform: translate(0, var(--ns6));
	opacity: 0;
	transition: transform 0.25s, opacity 0.25s;
}

.HEADER .dropdown > ul > li {
	padding: 4rem var(--s4);
	font-size: 16rem;
	line-height: 1.25;
	margin: 0;
}

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

.HEADER .dropdown > ul ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	align-items: center;
	padding: 0 var(--s6) 0 var(--s1);
}

.HEADER .dropdown > ul ul li {
	position: relative;
	margin: 0 0 0 var(--s3);
	font-size: 18rem;
	line-height: var(--s5);
}

.HEADER .dropdown > ul > li a,
.HEADER .dropdown > ul ul li a {color: var(--white);}
.HEADER .dropdown > ul > li a:hover, 
.HEADER .dropdown > ul ul li a:hover {color: var(--lightest-blue-400);}

.HEADER .dropdown > ul > li:first-child {padding-top: var(--s4); padding-bottom: var(--s4);}
.HEADER .dropdown > ul > li:last-child {padding-bottom: var(--s4);}

/* 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: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-blue-300);
	box-shadow: 224rem -128rem 0 128rem var(--light-blue-300), -224rem -128rem 0 128rem var(--light-blue-300);
	transform: translate(0, var(--ns5));
	opacity: 0;
	transition: transform 0.25s, opacity 0.25s;
}

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

/* slide down */

.b-page[data-scroll] .HEADER {background: var(--light-blue-300);}

/* nav open */

#toggle-nav:checked ~ .b-page .HEADER {background: var(--light-blue-300);}
#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 .nav-trigger {display: block;}
	.HEADER nav {display: none;}
}