/* ---------- Eigene Werte ---------- */

.unyer-header {
	--unyer-focus-width: 0.1875rem;
	--unyer-focus-offset: 0.25rem;
	--unyer-focus-color: var(--wp--preset--color--primary-text);
	--unyer-icon: 1.5rem;
	--unyer-underline: 0.25em;
}

/* ---------- Stehender Kopf ---------- */

:root {
	--unyer-kopfhoehe: 7rem;
	scroll-padding-block-start: calc(var(--unyer-kopfhoehe) + var(--wp--preset--spacing--40));
}

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	inset-block-start: var(--wp-admin--admin-bar--height, 0rem);
	z-index: 50;
	box-shadow: var(--wp--preset--shadow--lifted);
}

@keyframes unyer-kopf-schatten {
	from {
		box-shadow: none;
	}

	to {
		box-shadow: var(--wp--preset--shadow--lifted);
	}
}

@supports (animation-timeline: scroll()) {
	.wp-site-blocks > header.wp-block-template-part {
		animation: unyer-kopf-schatten linear both;
		animation-timeline: scroll();
		animation-range: 0 4rem;
	}
}

/* ---------- Band ---------- */

.unyer-header {
	padding-block: var(--wp--preset--spacing--50);
	padding-inline: var(--unyer-kante);
}

.unyer-header__bar {
	inline-size: 100%;
	max-inline-size: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* ---------- Logo ---------- */

.unyer-header__logo {
	flex: 0 0 auto;
	margin-block: 0;
}

.unyer-header__logo a {
	display: block;
	border-radius: var(--wp--custom--radius--small);
}

.unyer-header__logo img {
	display: block;
	inline-size: clamp(8rem, 13vw, 12.5rem);
	block-size: auto;
	aspect-ratio: 296 / 91;
	object-fit: contain;
	object-position: left center;
}

/* ---------- Hauptnavigation ---------- */

.unyer-header__nav {
	font-weight: 500;
	line-height: 1.167;
}

nav.unyer-header__nav {
	flex: 0 1 auto;
	min-inline-size: 0;
	margin-inline-start: auto;
}

@media (width >= 68rem) {
	.unyer-header__nav .wp-block-navigation__container {
		flex-wrap: nowrap;
		justify-content: flex-end;
		gap: var(--wp--preset--spacing--70);
	}
}

.unyer-header__nav .wp-block-navigation-item__content {
	display: inline-block;
	padding-block: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color var(--wp--custom--duration--fast) var(--wp--custom--easing--base);
}

.unyer-header__nav .wp-block-navigation__responsive-container-open,
.unyer-header__nav .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	min-inline-size: var(--wp--custom--target--min);
	min-block-size: var(--wp--custom--target--min);
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--contrast);
}

.unyer-header__nav .wp-block-navigation__responsive-container-close {
	display: flex;
}

.unyer-header__nav .wp-block-navigation__responsive-container-open svg,
.unyer-header__nav .wp-block-navigation__responsive-container-close svg {
	inline-size: var(--unyer-icon);
	block-size: var(--unyer-icon);
	fill: currentColor;
}

/* ---------- Suche ---------- */

.unyer-header__search {
	position: relative;
	flex: 0 0 auto;
	inline-size: var(--wp--custom--target--min);
	block-size: var(--wp--custom--target--min);
	margin-block: 0;
}

.unyer-header__search .wp-block-search__inside-wrapper {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	z-index: 2;
	inline-size: auto;
	max-inline-size: none;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	border: 0;
	padding: 0;
	background-color: var(--wp--preset--color--base);
}

.unyer-header__search .wp-block-search__input {
	flex: 1 1 auto;
	inline-size: auto;
	min-inline-size: 0;
	min-block-size: var(--wp--custom--target--min);
	padding-inline: var(--wp--preset--spacing--30);
	border: 0;
	border-block-end: 0.125rem solid var(--wp--preset--color--primary-text);
	border-radius: var(--wp--custom--radius--small) var(--wp--custom--radius--small) 0 0;
	background-color: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 300;
}

.unyer-header__search .wp-block-search__button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--wp--custom--target--min);
	min-block-size: var(--wp--custom--target--min);
	margin: 0;
	padding: calc((var(--wp--custom--target--min) - var(--unyer-icon)) / 2);
	border: 0;
	border-radius: var(--wp--custom--radius--small);
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	transition: color var(--wp--custom--duration--fast) var(--wp--custom--easing--base);
}

.unyer-header__search .wp-block-search__button svg {
	inline-size: var(--unyer-icon);
	block-size: var(--unyer-icon);
	min-inline-size: var(--unyer-icon);
	min-block-size: var(--unyer-icon);
	fill: currentColor;
}

/* ---------- Suche geöffnet ---------- */

.unyer-header__search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
	inline-size: min(100vw - 2 * var(--unyer-kante), 34rem);
}

.unyer-header__search .wp-block-search__button {
	flex: none;
}

.unyer-header__nav {
	transition: opacity var(--wp--custom--duration--fast) var(--wp--custom--easing--base);
}

.unyer-header__bar:has(.unyer-header__search:not(.wp-block-search__searchfield-hidden)) .unyer-header__nav {
	opacity: 0;
	pointer-events: none;
}

.unyer-header__search .wp-block-search__input:focus-visible {
	outline: none;
	border-block-end-width: 0.1875rem;
	background-color: var(--wp--preset--color--surface);
}

.unyer-header__search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--contrast-soft);
	opacity: 1;
}

/* ---------- Zustände ---------- */

.unyer-header__nav .wp-block-navigation-item__content:hover,
.unyer-header__nav .wp-block-navigation-item__content:focus-visible,
.unyer-header__search .wp-block-search__button:hover,
.unyer-header__search .wp-block-search__button:focus-visible {
	color: var(--wp--preset--color--primary-text);
}

.unyer-header__nav .wp-block-navigation-item__content:hover,
.unyer-header__nav .wp-block-navigation-item__content:focus-visible {
	text-decoration: underline;
	text-underline-offset: var(--unyer-underline);
	text-decoration-thickness: 0.0625rem;
}

.unyer-header__nav :is(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content,
.unyer-header__nav .wp-block-navigation-item__content[aria-current] {
	color: var(--wp--preset--color--primary-text);
	text-decoration: underline;
	text-underline-offset: var(--unyer-underline);
	text-decoration-thickness: 0.125rem;
}

.unyer-header :is(a, button, input):focus-visible {
	outline: var(--unyer-focus-width) solid var(--unyer-focus-color);
	outline-offset: var(--unyer-focus-offset);
}

/* ---------- Schmale Ansichten ---------- */

@media (width < 68rem) {
	.unyer-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.unyer-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

@media (width < 30rem) {

}

@media (prefers-reduced-motion: reduce) {
	.unyer-header .wp-block-navigation-item__content,
	.unyer-header .wp-block-search__button,
	.unyer-header .wp-block-search__input,
	.unyer-header .wp-block-search__inside-wrapper {
		transition: none;
	}
}

/* ---------- Trefferflaechen ---------- */

.unyer-header__nav .wp-block-navigation-item__content,
.unyer-header__logo a {
	align-items: center;
	display: flex;
	min-block-size: var(--wp--custom--target--min);
}

@media (width < 30rem) {
	.unyer-header__bar {
		gap: var(--wp--preset--spacing--40);
	}
}

/* ---------- Mobiles Menü ---------- */

@media (width < 68rem) {
	.unyer-header nav.unyer-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--80);
		padding-inline: var(--unyer-kante);
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--contrast);
	}

	.unyer-header nav.unyer-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		inset-block-start: var(--wp--preset--spacing--50);
		inset-inline-end: var(--unyer-kante);
	}

	.unyer-header nav.unyer-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: stretch;
		padding-block-start: calc(var(--wp--custom--target--min) + var(--wp--preset--spacing--70));
	}

	.unyer-header nav.unyer-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: stretch;
		gap: 0;
		inline-size: 100%;
		border-block-start: 0.0625rem solid var(--wp--preset--color--outline);
	}

	.unyer-header nav.unyer-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		inline-size: 100%;
		border-block-end: 0.0625rem solid var(--wp--preset--color--outline);
	}

	.unyer-header nav.unyer-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		--unyer-menue-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
		justify-content: space-between;
		inline-size: 100%;
		padding-block: var(--wp--preset--spacing--40);
		font-size: var(--wp--preset--font-size--h-3);
		font-weight: 600;
	}

	.unyer-header nav.unyer-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
		content: "";
		flex: none;
		inline-size: 1.5rem;
		block-size: 1.5rem;
		background-color: var(--wp--preset--color--primary-text);
		mask: var(--unyer-menue-pfeil) center / contain no-repeat;
	}
}