@charset "UTF-8";

:root {
	--header-nav-link-color: #fff;
	--main-content-blue: #DB00B3;
	--main-content-magenta: #DB00B3;
	--header-footer-blue: #DB00B3;
	
	--header-height: 89px;
	--gutter-width: 50px;
}

@media only screen and (max-width:639px) {
	:root {
		--gutter-width: 20px;
	}
}


html {
	overflow: revert;
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);
}

body {
	background-color: #ffffff;
	color: #222222;
	position: relative;
}

#scroll-detector {
	position: absolute;
	top: 0;
	height: 1px;
}

header[role="banner"] {
	background-position: right bottom -1px;
	background-repeat: repeat-x;
	background-size: 100% auto;
	height: var(--header-height);
	margin-bottom: 0;
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 100;
}

body.scrolled header[role="banner"] {
	background-color: #222222;
	background-image: url('../img/xb100/xb100-hero-gradient.svg');
}

nav.main {
	font-weight: 700;
	padding-top: 6px;
}

div.logo-container,
div.logo-container div.left,
nav.main,
nav.main li.parent-menu-item a:hover + ul.sub-menu::before,
nav.main li.parent-menu-item.hover ul.sub-menu::before,
nav.main li.parent-menu-item.open ul.sub-menu::before,
html:is(.using-keyboard-navigation, .no-js) nav.main ul.sub-menu:focus-within::before {
	background-color: transparent;
}

div.logo-container,
nav.main,
nav.main ul > li > span > a {
	color: #ffffff;
	border-bottom: 3px solid transparent;
}

nav.main ul > li > span > a {
	padding-block: 3px;
}

nav.main ul.dropdown > li > span > a[href]:is(:hover, :focus-visible),
html:is(.using-keyboard-navigation, .no-js) nav.main ul.dropdown > li > span > a[href]:focus {
	color: #ffffff;
	border-bottom: 3px solid var(--main-content-magenta);
	text-decoration: none;
}

nav.main ul.sub-menu,
nav.main ul.sub-menu > li > span > a,
nav.main ul.sub-menu a[href]:hover,
html:is(.using-keyboard-navigation, .no-js) nav.main ul.sub-menu a[href]:focus {
	color: #222222;
}

nav.main ul.sub-menu a[href]:hover,
html:is(.using-keyboard-navigation, .no-js) nav.main ul.sub-menu a[href]:focus {
	border-bottom-color: #222222;
}

.c-hamburger {
	margin-top: 16px;
}
.c-hamburger > span,
.c-hamburger > span::before,
.c-hamburger > span::after {
	background-color: #ffffff; 
}

footer {
	background-color: #222222;
	background-image: url('../img/xb100/xb100-footer-gradient.svg');
	background-position: left top -1px;
	background-repeat: repeat-x;
	background-size: cover;
	color: #ffffff;
	display: grid;
	grid-template-columns: auto 1fr auto;
	padding: 0 var(--gutter-width);
	margin-top: 0;
}

@media only screen and (max-width:999px) {
	span.c-hamburger + ul.dropdown {
		max-width: 100%;
		width: 100%;
	}
	
	body.page-template-xb100 nav.main ul.dropdown > li.menu-item:not(.parent-menu-item).hover > span > a,
	body.page-template-xb100 nav.main ul.sub-menu > li.menu-item.hover > span > a,
	body.page-template-xb100 nav.main ul.dropdown > li.menu-item:not(.parent-menu-item).open > span > a,
	body.page-template-xb100 nav.main ul.dropdown > li.menu-item:not(.parent-menu-item):not(.no-hover-dropdown).hover > span > a:not([href]),
	body.page-template-xb100 nav.main ul.dropdown > li.menu-item:not(.parent-menu-item):not(.no-hover-dropdown).hover > span > a[href="#"],
	body.page-template-xb100 nav.main ul.dropdown > li.menu-item:not(.parent-menu-item):not(.no-hover-dropdown).hover > span > a[href=""],
	html:is(.using-keyboard-navigation, .no-js) body.page-template-xb100 nav.main ul.dropdown > li.menu-item:not(.parent-menu-item) > span > a:focus,
	html:is(.using-keyboard-navigation, .no-js) body.page-template-xb100 nav.main ul.sub-menu > li.menu-item > span > a:focus,
	html:is(.using-keyboard-navigation, .no-js) body.page-template-xb100 nav.main ul.dropdown > li.menu-item:not(.parent-menu-item):not(.no-hover-dropdown) > span > a:not([href]):focus,
	html:is(.using-keyboard-navigation, .no-js) body.page-template-xb100 nav.main ul.dropdown > li.menu-item:not(.parent-menu-item):not(.no-hover-dropdown) > span > a[href="#"]:focus,
	html:is(.using-keyboard-navigation, .no-js) body.page-template-xb100 nav.main ul.dropdown > li.menu-item:not(.parent-menu-item):not(.no-hover-dropdown) > span > a[href=""]:focus {
		color: #222222;
	}
	footer {
		grid-template-columns: 1fr;
	}
	footer section.menu {
		grid-area: 1 / 1 / 2 / 2;
	}
}

footer section {
	align-items: center;
	display: flex;
	float: none;
	justify-content: center;
	padding-block: 20px;
}

footer section ul.social {
	display: flex;
	gap: 20px;
	position: static;
}

footer section ul.social li {
	display: inline-block;
}

footer nav.footer {
	margin-left: 20px;
	margin-top: 0;
	min-width: 0;
}

footer section.menu nav.footer {
	margin-left: 0;
}

footer section.menu {
	background-color: transparent;
	display: flex;
	justify-content: center;
}

#cookiescript_injected {
	background-color: var(--main-content-blue) !important;
	color: #222222 !important;
}
#cookiescript_description,
#cookiescript_readmore,
#cookiescript_reportlink,
#cookiescript_cookiescriptlink,
#cookiescript_manage {
	color: #222222 !important;
}
#cookiescript_badge,
#cookiescript_reject,
#cookiescript_reject:hover {
	background-color: var(--main-content-blue) !important;
}
#cookiescript_badge,
#cookiescript_badgetext,
#cookiescript_save,
#cookiescript_accept {
	color: #222222 !important;
}