/**
 * Mobile Navigation Overlay
 * Hamburger-Icon (3 Balken) morpht per CSS zu einem X, das Panel klappt
 * als Dropdown unter dem fixed Header auf (nicht vollflächig).
 * Toggle-Logik & aria-label-Sync: assets/js/nav-overlay-toggle.js
 */

/* Fokus-Ring im Header-Nav in Primary Green statt Browser-Standard-Blau.
   :focus-visible statt :focus: sonst kann ein Tap auf Mobile den Ring
   auslösen, obwohl keine echte Tastaturnavigation stattfand.
   Nur auf Links/Buttons statt "*": WP legt den Fokus beim Öffnen des
   Dialogs teils auf den Container selbst (Fokus-Trap) - mit "*" malte
   das einen grünen Rahmen um das ganze Panel, der am oberen Rand als
   Balken über dem ersten Menüpunkt sichtbar wurde. */
.pyrum-header-nav a:focus,
.pyrum-header-nav button:focus {
	outline: none;
}

.pyrum-header-nav a:focus-visible,
.pyrum-header-nav button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.pyrum-header-nav .wp-block-navigation__responsive-container-open {
	width: 28px;
	height: 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.pyrum-header-nav .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.pyrum-nav-icon-line {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 999px;
	background: currentColor;
	transition: transform 0.25s ease, opacity 0.25s ease;
	/* Ohne das rendert mobile Safari beim Rotieren/Ausblenden manchmal
	   Sub-Pixel-Reste der Linien-Enden als kleine Punkte links/rechts vom X. */
	transform-origin: center;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

html.has-modal-open .pyrum-header-nav .wp-block-navigation__responsive-container-open .pyrum-nav-icon-line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

html.has-modal-open .pyrum-header-nav .wp-block-navigation__responsive-container-open .pyrum-nav-icon-line:nth-child(2) {
	opacity: 0;
}

html.has-modal-open .pyrum-header-nav .wp-block-navigation__responsive-container-open .pyrum-nav-icon-line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Der native Close-Button bleibt für den Toggle-Klick & Fokus-Trap funktional,
   wird aber nie angezeigt - das Header-Icon übernimmt visuell seine Rolle.
   "visually hidden" statt display:none: ein display:none-Element kann WPs
   eigener Fokus-Trap nicht fokussieren (Fokus landet stattdessen z.B. auf
   dem Dialog-Container) und .click() darauf verhält sich in Safari
   unzuverlässig - beides Ursache für den grünen Fokus-Balken bzw. das
   gelegentlich nicht schliessende Menü. */
.pyrum-header-nav .wp-block-navigation__responsive-container-close {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* WP-Core verschiebt den Dialog bei eingeloggtem Admin-Bar per margin-top
   (.admin-bar .is-menu-open .wp-block-navigation__responsive-dialog).
   Unser Panel positioniert sich bereits selbst per fixed inset, daher hier neutralisieren. */
.pyrum-header-nav .wp-block-navigation__responsive-dialog {
	margin-top: 0 !important;
}

/* Sprachumschalter: Desktop nutzt den WPML-Dropdown im Header (.desktop-language-switch),
   Mobile zwei Buttons unten im aufklappbaren Menü (.mobile-language-switch, als Block
   direkt in der wp_navigation "Hauptmenü" nach "Kontakt" eingefügt, damit es im
   Panel statt in der Header-Zeile landet). */
.desktop-language-switch {
	display: block;
}

/* WPMLs eigenes CSS setzt "[data-wpml=language-item]:first-of-type{margin-top:5px}"
   global ohne Media Query - erzeugt hier einen unschönen Versatz im Desktop-Dropdown. */
.desktop-language-switch [data-wpml="language-item"]:first-of-type {
	margin-top: 0 !important;
}

.mobile-language-switch {
	display: none;
}

@media (max-width: 782px) {
	.pyrum-header-nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.desktop-language-switch {
		display: none !important;
	}

	.mobile-language-switch {
		display: block;
		padding: calc(var(--wp--style--root--padding-left, 20px) * 0.75) var(--wp--style--root--padding-left, 20px);
	}

	/* WP-Core hat eine globale Regel ".wp-block-navigation__container .is-responsive
	   { display:none }" - trifft ungewollt WPMLs eigene "is-responsive"-Klasse am
	   Sprachumschalter, seit der jetzt innerhalb der Navigation liegt. Zurücksetzen. */
	.wp-block-navigation__container .mobile-language-switch .is-responsive {
		display: flex !important;
	}

	/* Unsere generische Regel unten (".wp-block-navigation-item { width:100% }")
	   trifft auch WPMLs intern gleichnamige <li>-Elemente im Umschalter und
	   sprengt sie auf 2x 100% Breite in einer Nowrap-Row (-> Rechts-Overflow
	   des Menüs). Für den Umschalter zurücksetzen. */
	.pyrum-header-nav .wpml-language-switcher-block .wp-block-navigation-item {
		width: auto !important;
		border-bottom: none !important;
	}

	.mobile-language-switch ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* Die Klasse "wp-block-navigation-item__content" der WPML-Links kollidiert mit
	   unserer generischen Menüpunkt-Regel oben (padding !important, box-sizing,
	   font-size 28px) - hier alles explizit und !important neu setzen, sonst
	   unterscheiden sich Höhe/Padding der beiden Buttons (div vs. a-Element). */
	.mobile-language-switch [data-wpml="current-language-item"] > div,
	.mobile-language-switch [data-wpml="language-item"] a {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		box-sizing: border-box !important;
		min-width: 44px;
		height: 32px;
		padding: 6px 16px !important;
		border: 1px solid var(--wp--preset--color--black);
		border-radius: 9999px;
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--black);
		text-decoration: none;
		text-transform: uppercase;
		font-size: var(--wp--preset--font-size--medium) !important;
		font-weight: 400;
		line-height: 1;
	}

	.mobile-language-switch [data-wpml="current-language-item"] > div {
		background: var(--wp--preset--color--primary-light);
	}

	/* WPMLs eigenes CSS setzt "[data-wpml=language-item]:first-of-type{margin-top:5px}"
	   global ohne Media Query - erzeugt hier einen unschönen Versatz beim ersten Button. */
	.mobile-language-switch [data-wpml="language-item"]:first-of-type {
		margin-top: 0 !important;
		margin-right: 0 !important;
	}

	/* WPMLs eigene Regel ".wpml-language-switcher-block ul.hasSpacing.isHorizontal
	   li:not(:last-child) { margin-right: var(--language-spacing) !important }" hat
	   höhere Spezifität als die Regel oben und gewinnt trotz !important - hier mit
	   identischem Selektor (+ .mobile-language-switch) explizit zurücksetzen. */
	.mobile-language-switch .wpml-language-switcher-block ul.hasSpacing.isHorizontal li:not(:last-child) {
		margin-right: 0 !important;
	}

	/* Gleiches Spezifitäts-Problem für margin-top: WPML setzt vermutlich
	   ".wpml-language-switcher-block ul.hasSpacing.isHorizontal li:first-of-type"
	   - höhere Spezifität als die einfache Regel oben, deshalb hier ebenso spiegeln. */
	.mobile-language-switch .wpml-language-switcher-block ul.hasSpacing.isHorizontal li:first-of-type {
		margin-top: 0 !important;
	}

	.pyrum-header-nav.wp-block-navigation .wp-block-navigation__responsive-container {
		display: block !important;
		position: fixed !important;
		inset: 66px 0 auto 0 !important;
		z-index: 9999;
		background-color: white !important;
		border-top: 1px solid black;
		box-sizing: border-box;
		max-height: calc(70vh - 2px);
		overflow-y: auto;
		overflow-x: hidden;
		clip-path: inset(0 0 100% 0);
		pointer-events: none;
		transition: clip-path 0.18s ease, visibility 0s linear 0.18s;
	}

	.pyrum-header-nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		padding: 0 !important;
	}

	.pyrum-header-nav .wp-block-navigation__responsive-container.is-menu-open {
		clip-path: inset(0 0 0 0);
		animation: none !important;
		pointer-events: auto;
		visibility: visible;
		transition: clip-path 0.3s ease;
	}

	.pyrum-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		visibility: hidden;
	}

	.pyrum-header-nav .wp-block-navigation__responsive-close {
		max-width: none !important;
		margin: 0 !important;
	}

	.pyrum-header-nav .wp-block-navigation__responsive-container-content {
		padding-top: 0 !important;
	}

	.pyrum-header-nav .wp-block-navigation__responsive-container-content,
	.pyrum-header-nav .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start !important;
		width: 100% !important;
		gap: 0 !important;
	}

	.pyrum-header-nav .wp-block-navigation-item {
		width: 100% !important;
		border-bottom: 1px solid black;
	}

	.pyrum-header-nav .wp-block-navigation-item__label {
		line-height: 1;
	}

	.pyrum-header-nav .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: calc(var(--wp--style--root--padding-left, 20px) * 0.75) var(--wp--style--root--padding-left, 20px) !important;
		font-size: 28px;
		text-transform: uppercase;
		font-weight: 300;
		line-height: 1;
	}
}

@media (min-width: 783px) {
	.pyrum-header-nav .wp-block-navigation__responsive-container-open {
		display: none !important;
	}

	/* "Home" ist nur ein Zusatzpunkt fürs Mobile-Overlay - im Desktop-Menü
	   übernimmt das Logo bereits die Home-Verlinkung. */
	.pyrum-header-nav .pyrum-nav-home-mobile {
		display: none !important;
	}

	.pyrum-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: block;
		position: relative;
		width: 100%;
	}
}