/*
 * Copyright 2026 CodingMarkus
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */

header {
	display: contents;
}

header::after, header .site-logo::after {
	display: block;
	height: 0.125rem;
	content: "";
}

header .site-logo::after, header nav::after {
	background: linear-gradient(to right, transparent, #b8d0d2 20%,
		#b8d0d2 36%, #12a594 46%, #12a594 54%, #b8d0d2 64%,
		transparent);
}

header .site-logo {
	display: flex;
	position: relative;
	justify-content: center;
	margin-top: -1.5rem;
	padding: 0 1rem 0.5rem;
}

header .site-logo::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
}

header .site-logo picture {
	display: block;
	width: min(100%, 45rem);
}

header .site-logo img {
	display: block;
	width: 100%;
	height: auto;
}

header nav {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	justify-content: center;
	margin-right: -1rem;
	margin-left: -1rem;
	gap: clamp(0.25rem, 0.5vw, 0.5rem)
		clamp(1rem, 3vw, 2rem);
	padding: 0.75rem 1rem;
	font-weight: 600;
}

header nav::after {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 0.125rem;
	content: "";
}

header nav a {
	position: relative;
	padding: 0.25rem 0;
	color: #0b8275;
	text-decoration: none;
}

header nav a::before, header nav a::after {
	position: absolute;
	right: 0;
	left: 0;
	height: 0.125rem;
	content: "";
	background: linear-gradient(to right, transparent, currentColor 20%,
		currentColor 80%, transparent);
	opacity: 0;
	transform: scaleX(0.5);
}

header nav a::before {
	top: 0;
}

header nav a::after {
	bottom: 0;
}

header nav a:hover {
	color: #075f56;
	text-decoration: none;
}

header nav a:hover::before, header nav a:hover::after {
	opacity: 1;
	transform: scaleX(1);
}

@media (prefers-reduced-motion: no-preference) {
	header nav a::before, header nav a::after {
		transition: opacity 0.2s ease-out, transform 0.2s ease-out;
	}
}

header::after {
	height: 0.875rem;
}

html.site-navigation-desktop :target {
	scroll-margin-top: calc(var(--site-navigation-height, 3rem) + 1rem);
}

html.site-navigation-enabled.site-navigation-desktop header nav {
	position: sticky;
	top: 0;
	z-index: 1;
	background-color: #ffffff;
}

@media (max-width: 48rem) {
	body {
		padding-top: 2em;
	}

	header nav {
		margin-right: 0;
		margin-left: 0;
	}
}

@media (prefers-color-scheme: dark) {
	header .site-logo::after, header nav::after {
		background: linear-gradient(to right, transparent, #29484e 20%,
			#29484e 36%, #57e6d5 46%, #57e6d5 54%, #29484e 64%,
			transparent);
	}

	header nav a {
		color: #57e6d5;
	}

	header nav a:hover {
		color: #a9f0e5;
	}

	html.site-navigation-enabled.site-navigation-desktop header nav {
		background-color: #0d1b21;
	}
}

html.site-navigation-mobile header nav.site-navigation-floating {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
	padding-right: 1rem;
	padding-left: 1rem;
	background-color: #ffffff;
	box-shadow: 0 0.25rem 0.5rem rgb(24 50 63 /
		var(--site-navigation-shadow-opacity, 0%));
	transform: translateY(var(--site-navigation-offset, -100%));
	will-change: transform;
}

html.site-navigation-mobile header.site-navigation-placeholder::after {
	margin-top: var(--site-navigation-height);
}

@media (prefers-color-scheme: dark) {
	html.site-navigation-mobile header nav.site-navigation-floating {
		background-color: #0d1b21;
		box-shadow: 0 0.25rem 0.5rem rgb(0 0 0 /
			var(--site-navigation-shadow-opacity, 0%));
	}
}