/* ------------------ header ------------------ */

header {
	top: 0;
	z-index: 1;
	background-color: var(--header);
}

@media (max-width: 992px) {
	header:not(.toggle-open) {
		position: static;
	}
}

header:focus,
main:focus,
#content:focus,
#footer:focus,
footer:focus {
	border: none;
	box-shadow: none;
	outline: none;
}

header svg.navbar-nav {
	color: var(--text1);
	display: inline-block;
}

header #header {
	display: flex;
	padding: 0;
	flex-direction: row;
	align-items: center;
	background-color: var(--header);
	justify-content: space-between;
}

.header-graf {
	height: 70px;
}


/* BRANDING */
header #brand {
	padding: 0;
}

header #brand a {
	display: block;
}

header #brand a>* {
	transition: all ease-in-out 300ms;
}

header #brand svg {
	width: 100%;
	max-width: 20rem;
	height: auto;
	padding: 1rem;
}

header #brand svg path {
	fill: var(--black)
}

@media (max-width: 992px) {
	header #brand img {
		max-width: 30vw;
		width: auto;
	}
}

@media (max-width: 576px) {
	header #brand a {
		text-align: left;
	}

	header #brand svg {
		max-width: 50vw;
		width: auto;
	}
}


/* NAVS */
header #navs {
	display: flex;
	flex-grow: 1;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background: var(--navBkg);
	padding: 0;
	position: relative;
	/* z-index: -1; */
	/* overflow: hidden; */
}


/* MAIN NAVI */
#navs nav#nav {
	width: 100%;
	transition: top ease-in-out 250ms;
}

@media (max-width: 992px) {
	header #navs nav#nav {
		left: 0;
		z-index: 1;
		padding: 2rem 0 0;
		top: 0;
		height: 0;
		width: 100%;
		position: absolute;
		background: var(--navBkg);
		transition: top ease-in-out 250ms;
	}

	header.toggle-open #navs nav#nav {
		top: 3rem;
		height: auto;
	}
}



/* MENU SEARCH */
.menu-search {
	z-index: 4;
}

.menu-search a,
.menu-search a svg path {
	border-left: 1px solid var(--border3);
	background: var(--bkg6);
	fill: var(--menu1hov);
	display: inline-block;
	padding: .5rem;
	color: var(--white);
}

.menu-search a:hover,
.menu-search a:hover svg path {
	background: var(--navBkg);
	fill: var(--menu1hov);
	border-left: 1px solid var(--border4);
}






/* WCAG BUTTON */

button#wcag-link {
  display: inline-block;
  background-color: var(--bkg5);
  color: white;
  width: 4.225rem;
  height: 4.225rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}

button#wcag-link i {
  font-size: 1.625rem;
}





/* TOGGLE RESPO */
header #toggle {
	display: none;
}

@media (max-width: 992px) {
	header #toggle {
		display: block;
		z-index: 4;
	}

	header #toggle a,
	header #toggle a svg rect {
		background: var(--menuBtn);
		fill: var(--menu1);
		display: inline-block;
		padding: .5rem;
	}

	header #toggle a:hover,
	header #toggle a:hover svg rect {
		background: var(--menuBkg1Hover);
		fill: var(--menu1hov)
	}
}