header nav ul {
	list-style: none;
	/*remove browser defaults*/
	margin:     0;
	padding:    0;
	border:     0;
}

header nav ul {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(5em, 1fr));
	justify-items:         center;
	align-items:           center;
}

header nav ul li {
	width:           100%;
	height:          100%;
	/*li element covers full grid cell, so when hovering the figcaption will light as soon as a spot on the cell has been hovered over*/
	display:         flex;
	align-items:     center;
	justify-content: center;
}

header nav ul li:first-child {
	justify-content: start;
}

header nav ul li:last-child {
	justify-content: end;
}

header nav ul li figure figcaption {
	opacity: 0;
}

header nav ul li:hover * {
	opacity: 1;
}

header figure {
	/*remove browser defaults*/
	margin:  0;
	padding: 0 0 0 1rem;
	border:  0;
}

header nav ul li a {
	color:           var(--main-color_hex);
	text-decoration: none;
}

header nav ul li a:visited {
	color: var(--main-color_hex);
}

header nav ul li:hover {
	background-color: rgba(var(--green_rgb), .5);
	transition:       opacity 0.5s ease, background-color .5s ease;
}

header nav ul li a figure img {
	height: 100%;
}

/*flags and logout*/
header nav ul li:last-child {
	justify-content: end;
}

/*log out button*/
header nav ul li:last-child form {
	align-self: start;
}


/*show the lang selected*/
html:lang(nl) a[href*="/nl/"],
html:lang(en) a[href*="/en/"],
html:lang(de) a[href*="/de/"] {
	font-weight:     bold;
	text-decoration: underline;
}

html:lang(nl) a[href*="/nl/"] img,
html:lang(en) a[href*="/en/"] img,
html:lang(de) a[href*="/de/"] img {
	box-shadow:    0 0 .1rem .05rem var(--p-light-blue_hex);
	/*border:        .1rem solid var(--emphasis-color);*/
	border-radius: .2rem;
}

/* Let the flag for the active document language flutter gently. */
html:lang(nl) header [data-language-link][href*="/nl/"] img,
html:lang(en) header [data-language-link][href*="/en/"] img,
html:lang(de) header [data-language-link][href*="/de/"] img {
	transform-origin: left center;
	animation:        flag-flutter 5s ease-in-out infinite;
}

@keyframes flag-flutter {
	0%, 100% {
		transform: perspective(3rem) rotateY(0deg) skewY(0deg) scaleX(1);
	}
	25% {
		transform: perspective(3rem) rotateY(-18deg) skewY(3deg) scaleX(.94);
	}
	35% {
		transform: perspective(3rem) rotateY(5deg) skewY(3deg) scaleX(1);
	}
	55% {
		transform: perspective(3rem) rotateY(14deg) skewY(-2deg) scaleX(1.04);
	}
	78% {
		transform: perspective(3rem) rotateY(-7deg) skewY(1deg) scaleX(.98);
	}
}

@media (prefers-reduced-motion: reduce) {
	html:lang(nl) header [data-language-link][href*="/nl/"] img,
	html:lang(en) header [data-language-link][href*="/en/"] img,
	html:lang(de) header [data-language-link][href*="/de/"] img {
		animation: none;
	}
}

@media (max-width: 40rem) {
	/*verticaal menu, overschrijft de settings van het normale menu*/
	header button {
		display: block; /*het menu wordt een block*/
		border:  0;
		padding: 0;
		margin:  0;
	}

	header button:after {
		/*three stripes hamburger menu symbol set in virtual element with after pseudo element*/
		content: "\2630";
	}

	header nav {
		display:          block;
		max-height:       0; /*take nav from document flow*/
		opacity:          0;
		background-color: var(--header-background_hex);
		transform:        scale3d(0, 0, 0);
	}

	header:hover nav {
		max-height: 100vh; /*put nav from document flow*/
		opacity:    1;
		transform:  scale3d(1, 1, 1);
		transition: transform .2s ease, opacity .2s ease, max-height .8s ease;
	}

	header nav ul {
		/*vertical menu*/
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		justify-items:         start;
		align-items:           start;
		gap:                   .5rem;
	}

	header nav ul li {
		justify-content: start;
	}

	header nav ul li:last-child {
		justify-content: start;
	}

	header nav ul li figure figcaption {
		display: inline;
	}

	header nav ul li figure figcaption {
		opacity: 1;
	}

	/*styling*/
	header button {
		flex-grow:   1;
		font-size:   1.5rem;
		line-height: 1;
		border:      0;
	}

}