/* HEADER */

.HEADER {
	position: relative;
	height: 100%;
}

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

.HEADER .wrapper {
	position: relative;
	padding-top: var(--s5);
}

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

.HEADER .logo {
	margin: var(--s4) 0;
}

.HEADER .logo a {
	display: block;
	width: 237rem;
	height: 40rem;
	background: url('../images/clearwater-dark.svg') no-repeat center / 100%;
	text-indent: -9999rem;
	transition: background 0.25s;
	transform: translate(0, var(--s1));
}

.HEADER .topbar {
	position: absolute;
	top: 66rem;
	right: 0;
	font-size: 16rem;
	display: flex;
}

.HEADER .topbar a {
	color: var(--black);
	text-decoration: none;
	margin-left: var(--s6);
}

.HEADER .topbar a:hover {
	text-decoration: underline;
}

.HEADER .nav-trigger {
	display: none;
	flex: 0 0 auto;
	width: var(--s5);
	height: var(--s5);
	background: url('../images/ui-menu-dark.svg') no-repeat center / 100%;
	text-indent: -9999rem;
	cursor: pointer;
	transition: background 0.25s;
}

.HEADER .search {
	width: var(--s5);
	height: var(--s5);
	position: relative;
	margin-right: -40rem;
	z-index: 1;
}

.HEADER .search form {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--s5);
	height: var(--s5);
	border-radius: var(--s3);
	background: var(--white);
	overflow: hidden;
	box-shadow: inset 0 0 0 1px transparent;
	transition: width 0.25s, box-shadow 0.25s;
}

.HEADER .search input {
	position: absolute;
	top: 0;
	right: 0;
	color: var(--black);
	font-family: inherit;
	font-size: 14rem;
	width: 100%;
	box-sizing: border-box;
	height: var(--s5);
	line-height: var(--s5);
	background: transparent;
	border: none;
	margin: 0;
	padding: 0 var(--s5) 0 var(--s3);
	z-index: 1;
	outline: none !important;
}

.HEADER .search button {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--s5);
	height: var(--s5);
	border-radius: 0;
	text-indent: -999rem;
	overflow: hidden;
	background: transparent url('../images/ui-search.svg') no-repeat center / 16rem;
	border: none;
	margin: 0;
	padding: 0;
	cursor: pointer;
	outline: none !important;
}

.HEADER .search form:focus-within {
	width: 320rem;
	box-shadow: inset 0 0 0 1px var(--grey-300);
}

.HEADER .topbar .search {margin: -4rem 0 0 0;}
.HEADER .topbar .search form {
	background-color: transparent;
	box-shadow: none !important;
	transition: background-color 0.25s, width 0.25s;
}

.HEADER .topbar .search form:focus-within {background: var(--white);}
.HEADER .topbar .search form:focus-within button {filter: brightness(0) !important;}

.HEADER nav + div {
	position: absolute;
	bottom: 0;
	right: 0;
}

.HEADER nav {
	position: relative;
	background: var(--white);
	border-radius: 9999rem;
	width: fit-content;
	margin: 0 230rem 0 auto;
}

.HEADER nav .a {
	display: inline;
	appearance: none;
	overflow: hidden;
	padding: 0;
	margin: 0;
	background: transparent;
	border: none;
	font: inherit;
	color: var(--black);
	cursor: pointer;
	transition: color 0.25s;
}

.HEADER nav .a svg {
	display: inline-block;
	vertical-align: top;
	margin: 21rem 0 0 2rem;
	fill: currentColor;
}

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

.HEADER nav > ul {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-right: var(--s6);
}

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

/* megamenu */

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

.HEADER .megamenu {
	position: absolute;
	top: 0;
	right: -230rem;
	width: var(--col-8);
	pointer-events: none;
	line-height: 1.25;
}

.HEADER .megamenu-frame {
	border-radius: var(--s4);
	position: relative;
	margin: 0 auto;
	padding: 68rem 36rem 36rem;
	background: var(--white);
	box-shadow: 0 0 0 8rem var(--white),
	            0 4rem 16rem rgba(0,0,0,0.1);
	/*transform: translate(0, var(--ns6));*/
	opacity: 0;
	transition: transform 0.25s, opacity 0.25s;
}

.HEADER .megamenu .heading {
	display: block;
	padding: 4rem var(--s2);
	font-size: 14rem;
	text-transform: uppercase;
	color: var(--blue-700);
	font-weight: 500;
}

.HEADER .megamenu .heading:empty {
	display: none;
}

.HEADER .megamenu a:not(.b-button) {
	display: block;
	padding: var(--s2);
	border-radius: var(--s1);
	transition: background-color 0.25s;
}

.HEADER .megamenu a:not(.b-button):hover {
	background-color: var(--blue-50);
}

.HEADER .megamenu-frame > ul {
	display: flex;
}

.HEADER .megamenu-frame > ul > li {
	flex: 0 0 auto;
	width: 350rem;
}

.HEADER .megamenu-frame > ul > li:not(.featured, :last-child) {
	border-right: 1px solid #ccc;
	padding-right: 20rem;
	margin-right: 20rem;
}

.HEADER .megamenu p > span,
.HEADER .megamenu a > span {
	display: block;
	margin-top: 4rem;
	font-size: 14rem;
	opacity: 0.8;
}

.HEADER li[data-id="17947"] .megamenu-frame > ul > li {
    width: 340rem;
}



/* featured */

.HEADER .featured {
	position: relative;
	background: var(--blue-50);
	border-radius: var(--s3);
	padding: var(--s4);
	box-sizing: border-box;
	width: 322rem;
	margin-right: 20rem;
}

.HEADER .featured .b-img {
	margin-bottom: var(--s3);
	border-radius: var(--s1);
	overflow: hidden;
}

.HEADER .featured .b-img img {
	pointer-events: none;
}

.HEADER .featured .b-button {
	display: inline-flex;
	vertical-align: top;
	margin-top: var(--s3);
	font-size: 16rem;
	opacity: 1;
}

.HEADER .featured a {
	padding: 0 !important;
	position: static;
}

.HEADER .featured a::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.HEADER .featured a:hover .b-button {
	background: var(--blue-900) !important;
	color: var(--white) !important;
}


.HEADER li[data-id="17926"] .featured {
    width: 740rem;
    display: flex;
    align-items: flex-start;
}

.HEADER li[data-id="17926"] .featured .b-img {
    margin: 0 24rem 0 0;
    flex: 0 0 auto;
    width: 302rem !important;
}



/* tag */

.HEADER .tag {
	margin: 0 0 var(--s2) var(--s2);
}

.HEADER .tag a {
	padding: 0 !important;
	color: var(--blue-700) !important;
	font-size: 14rem;

}

.HEADER .tag a:hover {color: var(--blue-900) !important; background: none !important;}
.HEADER .tag a span {display: none !important;}



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

.HEADER nav li:active > .a svg,
.HEADER nav li:focus-within > .a svg {
	margin-top: 20rem;
	transform: scaleY(-1);
}

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

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



/* featured post */

.HEADER .featured-post {
	position: absolute;
	bottom: 36rem;
	right: var(--s5);
	width: 720rem;
	height: 107rem;
}

.HEADER .featured-post::after {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 100%;
	height: var(--s5);
	background: var(--white);
	pointer-events: none;
}

.HEADER .featured-post a {
	padding: var(--s4) 80rem !important;
	background: var(--grey-100) url('../images/featured-post-icon.svg') no-repeat var(--s3) var(--s3) / 48rem !important;
	border-radius: var(--s3) !important;
	height: 100%;
	box-sizing: border-box;
	position: relative;
}

.HEADER .featured-post a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: var(--s4);
	width: 20rem;
	height: 13rem;
	background: url('../images/ui-arrow-blue.svg') center / 100%;
	transform: translate(0, -50%);
}

.HEADER .featured-post a:hover {
	background-color: var(--blue-50) !important;
}



/* nav open */

#toggle-nav:checked ~ .b-page .HEADER .logo a {background-image: url('../images/clearwater-light.svg');}
#toggle-nav:checked ~ .b-page .HEADER .nav-trigger {background-image: url('../images/ui-close-light.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;}
#toggle-nav:checked ~ .b-page .HEADER .b-button {display: none;}
#toggle-nav:checked ~ .b-page .HEADER .topbar {display: none;}

/* framed */

.b-page-head[data-framed] .HEADER::before {
	content: '';
	position: absolute;
	top: var(--s5);
	right: var(--s5);
	bottom: var(--s5);
	left: var(--s5);
	border-radius: var(--s4);
	background: var(--blue-500);
	transition: opacity 0.25s;
	transition-delay: 0s;
}

#toggle-nav:checked ~ .b-page .b-page-head[data-framed] .HEADER::before {
	opacity: 0;
	transition-delay: 0.1s;
}

.b-page-head[data-framed="diagonal-blue-gradient"] .HEADER::before {background: var(--diagonal-blue-gradient);}
.b-page-head[data-framed="diagonal-blue-pink-gradient"] .HEADER::before {background: var(--diagonal-blue-pink-gradient);}

/* inverted */

.b-page-head[data-inverted] .HEADER .logo a {background-image: url('../images/clearwater-light.svg');}
.b-page-head[data-inverted] .HEADER .nav-trigger {background-image: url('../images/ui-menu-light.svg');}
.b-page-head[data-inverted] .HEADER .topbar a {color: var(--white);}
.b-page-head[data-inverted] .HEADER .topbar .search button {filter: brightness(100);}
.b-page-head[data-inverted] .HEADER nav + div .b-button:hover {color: var(--black); background-color: var(--white);}

@media screen and (max-width: 1440px) {
	.HEADER .wrapper {padding-top: var(--s1);}
	.HEADER nav {margin-right: 194rem;}
	.HEADER nav > ul > li {margin-left: var(--s5);}
	.HEADER nav > ul {margin-right: var(--s5);}
	.HEADER .search {margin-right: -24rem;}
	.HEADER .search form:focus-within {width: 284rem;}
	.HEADER .topbar {top: 42rem;}
	.HEADER .megamenu {width: 1164rem; right: -194rem;}
	.HEADER .featured-post {width: 714rem;}

	.b-page-head[data-framed] .HEADER::before {top: var(--s1); right: var(--s1); bottom: var(--s1); left: var(--s1);}
}

@media screen and (max-width: 960px) {
	.HEADER .nav-trigger {display: block;}
	.HEADER nav {display: none;}
	.HEADER .topbar {display: none;}
	.HEADER .b-button {display: none;}
	.HEADER .logo a {width: 195rem; height: 33rem; transform: none;}

	.b-page-head[data-framed] .HEADER::before {border-radius: 0; top: 0; right: 0; bottom: 0; left: 0;}
}