/* HEADER */

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

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

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

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

.HEADER .logo {
	flex: 1 0 auto;
}

.HEADER .logo a {
	display: block;
	width: 138rem;
	height: 33rem;
	background: url('../images/cwan-dark.svg') no-repeat center / 100%;
	text-indent: -9999rem;
	transition: background 0.25s;
}

.HEADER .topbar {
	position: absolute;
	top: 46rem;
	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 nav {
	position: relative;
	margin-right: var(--s3);
	background: var(--white);
	border-radius: 9999rem;
}

.HEADER nav .a {
	color: 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;
	left: 0;
	width: 100%;
	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 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 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 {
	columns: 2;
	column-gap: 0;
}

.HEADER .megamenu li {
	break-inside: avoid;
}

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

.HEADER .callout {
	position: relative;
	background: var(--blue-50);
	border-radius: var(--s3);
	padding: var(--s5);
	width: calc(50% - var(--s5));
	box-sizing: border-box;
	align-self: flex-start;
}

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

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

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

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

.HEADER .callout a:hover {
	color: var(--blue-700) !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;
}

/* platform */

.HEADER [data-id="4625"] .megamenu-frame {display: flex; justify-content: space-between;}
.HEADER [data-id="4625"] .megamenu-frame > ul {columns: auto; width: 50%;}

/* products */

.HEADER [data-id="4626"] .megamenu-frame > ul {display: flex; flex-wrap: wrap; columns: auto;}
.HEADER [data-id="4626"] .megamenu-frame > ul > li:nth-child(1) {width: 100%; padding-bottom: var(--s5);}
.HEADER [data-id="4626"] .megamenu-frame > ul > li:nth-child(2) {width: 100%;}
.HEADER [data-id="4626"] .megamenu-frame > ul > li ul {columns: 2; column-gap: 0;}

/* industries */

.HEADER [data-id="4627"] .megamenu-frame > ul {display: flex; flex-wrap: wrap; columns: auto;}
.HEADER [data-id="4627"] .megamenu-frame > ul > li:nth-child(1) {width:50%;}
.HEADER [data-id="4627"] .megamenu-frame > ul > li:nth-child(2) {width: 50%;}

/* nav open */

#toggle-nav:checked ~ .b-page .HEADER .logo a {background-image: url('../images/cwan-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;}

/* 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/cwan-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 nav + div .b-button:hover {color: var(--black); background-color: var(--white);}

@media screen and (max-width: 1440px) {
	.HEADER nav > ul > li {margin-left: var(--s5);}
	.HEADER nav > ul {margin-right: var(--s5);}
	.HEADER .topbar {top: 32rem;}

	.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: 104rem; height: 25rem;}

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