/*
 * KW Biohof – Navigations-Widget.
 * Tokenbasiert (Farben aus DesignCss, Struktur aus tokens.css). Mobile First.
 * Ohne JS: einfache, sichtbare vertikale Liste. Mit JS (@media scripting): Off-Canvas
 * (mobil) bzw. Sidebar (Desktop ab 60em). Dark Mode kommt automatisch über Tokens.
 * Bewegung folgt --biohof-duration (0ms bei prefers-reduced-motion).
 */

.biohof-nav {
	--biohof-nav-gap: var(--biohof-space-md);
	position: relative;
	font-family: var(--biohof-font-body);
}

/* ── Marke ─────────────────────────────────────────────────────────────── */
.biohof-nav__brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--biohof-color-text-strong);
}
.biohof-nav__logo {
	display: block;
	max-block-size: 3rem; /* kompakt: mobile Leiste */
	inline-size: auto;
	height: auto;
}
/* Großes, auffälliges Logo im Panel-Kopf (Desktop + Schublade) – breitenbasiert. */
.biohof-nav .biohof-nav__brand--panel .biohof-nav__logo {
	inline-size: min(15rem, 100%);
	max-block-size: none;
	margin-inline: auto;
}
.biohof-nav__wordmark {
	font-family: var(--biohof-font-heading);
	font-weight: var(--biohof-weight-semibold);
	font-size: var(--biohof-fs-500);
}

/* ── Mobile-Leiste + Schließen (per Default aus; JS schaltet sie zu) ─────── */
.biohof-nav__bar { display: none; }
.biohof-nav__scrim { display: none; }
.biohof-nav__close { display: none; }

.biohof-nav__toggle,
.biohof-nav__close {
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--biohof-color-text-strong);
	cursor: pointer;
	border-radius: var(--biohof-radius-sm);
}

/* ── Panel + Zonen (Default: einfache vertikale Liste) ──────────────────── */
.biohof-nav__panel {
	display: flex;
	flex-direction: column;
	gap: var(--biohof-nav-gap);
	padding: var(--biohof-space-md);
	background-color: var(--biohof-color-surface-soft);
	background-image: linear-gradient(168deg, color-mix(in srgb, var(--biohof-color-bg) 38%, var(--biohof-color-surface-soft)) 0%, var(--biohof-color-surface-soft) 60%);
}
.biohof-nav__panel-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--biohof-space-sm);
	padding-block-end: var(--biohof-space-lg); /* mehr Luft zwischen Logo und Menü */
}
.biohof-nav__brand--panel {
	display: flex;
	inline-size: 100%;
	flex-direction: column;
	align-items: center;
	gap: var(--biohof-space-2xs);
	text-align: center;
}
.biohof-nav__main {
	display: flex;
	flex-direction: column;
	gap: var(--biohof-nav-gap);
	flex: 1 1 auto; /* füllt die Mitte → Fuß bleibt unten, kein Springen beim Auf-/Zuklappen */
}
.biohof-nav__foot {
	display: flex;
	flex-direction: column;
	gap: var(--biohof-space-sm);
}

/* Zier-Divider (Biohof-Blattmotiv) zwischen Menü und Fuß-Bereich. */
.biohof-nav__divider {
	display: flex;
	justify-content: center;
	color: var(--biohof-color-primary);
	margin-block: var(--biohof-space-xs);
}
.biohof-nav__divider svg { inline-size: 7rem; block-size: auto; }

/* ── Menü ──────────────────────────────────────────────────────────────── */
.biohof-nav__menu,
.biohof-nav__submenu-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.biohof-nav__menu { display: flex; flex-direction: column; gap: 2px; }

.biohof-nav__item--parent {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.biohof-nav__item--parent > .biohof-nav__link:not(.biohof-nav__link--toggle) { flex: 1 1 auto; }

.biohof-nav__link {
	position: relative;
	display: block;
	padding: var(--biohof-space-xs) var(--biohof-space-sm);
	padding-inline-start: var(--biohof-space-md);
	color: var(--biohof-color-text);
	text-decoration: none;
	font: inherit;
	font-weight: var(--biohof-weight-medium);
	line-height: var(--biohof-line-snug);
	border: 0;
	background: transparent;
	border-radius: var(--biohof-radius-sm);
	cursor: pointer;
	transition:
		background var(--biohof-duration) var(--biohof-ease),
		color var(--biohof-duration) var(--biohof-ease),
		transform var(--biohof-duration) var(--biohof-ease);
}
/* Voll-Zeilen-Auslöser (Oberpunkt ohne echtes Ziel): Text links, Pfeil rechts. */
.biohof-nav__link--toggle {
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--biohof-space-xs);
	text-align: start;
}
/* Aktiv-/Hover-Indikator: linker Akzent-Balken, der einwächst. */
.biohof-nav__link::before {
	content: "";
	position: absolute;
	inset-block: 0.4rem;
	inset-inline-start: 0.25rem;
	inline-size: 3px;
	border-radius: var(--biohof-radius-pill);
	background: var(--biohof-color-primary);
	transform: scaleY(0);
	transition: transform var(--biohof-duration) var(--biohof-ease);
}
.biohof-nav__item.is-current > .biohof-nav__link {
	background: color-mix(in srgb, var(--biohof-color-primary) 12%, transparent);
	color: var(--biohof-color-primary-hover);
	font-weight: var(--biohof-weight-semibold);
}
.biohof-nav__item.is-current > .biohof-nav__link::before { transform: scaleY(1); }

.biohof-nav__caret { display: inline-flex; flex: none; }
.biohof-nav__subtoggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-inline-size: 44px;
	min-block-size: 44px;
	border: 0;
	background: transparent;
	color: var(--biohof-color-text);
	cursor: pointer;
	border-radius: var(--biohof-radius-sm);
}
[data-biohof-subtoggle] svg { transition: transform var(--biohof-duration) var(--biohof-ease); }
[data-biohof-subtoggle][aria-expanded='true'] svg { transform: rotate(180deg); }

/* Untermenü: Auf-/Zuklappen rein in CSS über aria-expanded des Auslösers. */
.biohof-nav__submenu {
	flex: 1 1 100%;
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition:
		grid-template-rows var(--biohof-duration) var(--biohof-ease),
		visibility var(--biohof-duration);
}
[data-biohof-subtoggle][aria-expanded='true'] ~ .biohof-nav__submenu {
	grid-template-rows: 1fr;
	visibility: visible;
}
.biohof-nav__submenu-list {
	overflow: hidden;
	min-block-size: 0;
	padding-inline-start: var(--biohof-space-md);
}
.biohof-nav__submenu-list .biohof-nav__link {
	font-weight: var(--biohof-weight-regular);
	font-size: var(--biohof-fs-300);
	color: var(--biohof-color-text); /* nicht -muted: WCAG-AA auf der hellen Fläche */
}
.biohof-nav__submenu-list .biohof-nav__item.is-current > .biohof-nav__link { color: var(--biohof-color-primary-hover); }

/* ── Suche (Lupe klappt das Feld auf) ───────────────────────────────────── */
.biohof-nav__search { display: flex; flex-wrap: wrap; gap: var(--biohof-space-2xs); }
.biohof-nav__search-toggle {
	display: none; /* Enhancement: erst mit JS sichtbar (kein toter Button, kein FOUC). */
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--biohof-color-text-strong);
	cursor: pointer;
	border-radius: var(--biohof-radius-sm);
}
@media (scripting: enabled) {
	.biohof-nav__search-toggle { display: inline-flex; }
}
.biohof-nav__search-ico { display: inline-flex; }
.biohof-nav__search-ico--close { display: none; }
.biohof-nav__search-toggle[aria-expanded='true'] .biohof-nav__search-ico--open { display: none; }
.biohof-nav__search-toggle[aria-expanded='true'] .biohof-nav__search-ico--close { display: inline-flex; }

.biohof-nav__search-form { display: flex; flex: 1 1 100%; gap: var(--biohof-space-2xs); }
.biohof-nav__search-form[hidden] { display: none; }
.biohof-nav__search-input {
	flex: 1 1 auto;
	min-inline-size: 0;
	min-block-size: 44px;
	padding-inline: var(--biohof-space-sm);
	border: 1px solid var(--biohof-color-border);
	border-radius: var(--biohof-radius-sm);
	background: var(--biohof-color-bg);
	color: var(--biohof-color-text-strong);
	font: inherit;
}
.biohof-nav__search-submit {
	flex: none;
	border: 1px solid var(--biohof-color-border);
	border-radius: var(--biohof-radius-sm);
	background: transparent;
	color: var(--biohof-color-text-strong);
	cursor: pointer;
}

/* ── Kontakt (Icon im runden Tint-Kreis) ────────────────────────────────── */
.biohof-nav__contact { display: grid; gap: var(--biohof-space-2xs); list-style: none; margin: 0; padding: 0; }
.biohof-nav__contact-link {
	display: flex;
	align-items: center;
	gap: var(--biohof-space-sm);
	min-block-size: 44px;
	padding: var(--biohof-space-2xs) var(--biohof-space-xs);
	color: var(--biohof-color-text);
	text-decoration: none;
	border-radius: var(--biohof-radius-sm);
	transition: background var(--biohof-duration) var(--biohof-ease), color var(--biohof-duration) var(--biohof-ease);
}
.biohof-nav__contact-ico {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border-radius: var(--biohof-radius-pill);
	background: color-mix(in srgb, var(--biohof-color-primary) 14%, transparent);
	color: var(--biohof-color-primary);
}
.biohof-nav__contact-ico svg { inline-size: 1.1rem; block-size: 1.1rem; }
.biohof-nav__contact-text { font-size: var(--biohof-fs-300); overflow-wrap: anywhere; }
.biohof-nav__contact-line { display: block; line-height: var(--biohof-line-snug); }
/* Mehrzeilige Adresse: Icon oben bündig statt mittig. */
.biohof-nav__contact-link--address { align-items: flex-start; }
.biohof-nav__contact-link--address .biohof-nav__contact-text { padding-block-start: 0.4rem; }
/* Statische Zeile (z.B. Adresse ohne Link): kein Klick-Anschein. */
.biohof-nav__contact-link--static { cursor: default; }

/* ── Verbinden: Social + Aktionen in einer Zeile, durch Strich getrennt ──── */
.biohof-nav__connect { display: flex; flex-direction: column; gap: var(--biohof-space-xs); }
.biohof-nav__connect-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--biohof-space-sm); }
.biohof-nav__connect-sep {
	align-self: stretch;
	inline-size: 1px;
	min-block-size: 1.75rem;
	background: var(--biohof-color-primary);
}

/* Optionale kleine Überschrift mit Seitenstrichen */
.biohof-nav__connect-title {
	display: flex;
	align-items: center;
	gap: var(--biohof-space-sm);
	margin: 0;
	font-size: var(--biohof-fs-300);
	color: var(--biohof-color-text);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.biohof-nav__connect-title::before,
.biohof-nav__connect-title::after {
	content: "";
	flex: 1;
	block-size: 1px;
	background: var(--biohof-color-border);
}

/* ── Social (zentriert, runde Hover-Füllung) ────────────────────────────── */
.biohof-nav__social { display: flex; justify-content: center; gap: var(--biohof-space-sm); list-style: none; margin: 0; padding: 0; }
.biohof-nav__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	color: var(--biohof-color-primary);
	background: color-mix(in srgb, var(--biohof-color-primary) 10%, transparent);
	border-radius: var(--biohof-radius-pill);
	transition: background var(--biohof-duration) var(--biohof-ease), color var(--biohof-duration) var(--biohof-ease);
}
.biohof-nav__social-link svg { inline-size: 1.35rem; block-size: 1.35rem; }

/* ── Aktionen: Anfahrt & Bewertung (rechts vom Trennstrich) ─────────────── */
.biohof-nav__actions { display: flex; justify-content: center; gap: var(--biohof-space-sm); list-style: none; margin: 0; padding: 0; }
.biohof-nav__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	color: var(--biohof-color-primary);
	background: var(--biohof-color-surface-soft);
	border: 1px solid var(--biohof-color-border);
	border-radius: var(--biohof-radius-pill);
	transition:
		background var(--biohof-duration) var(--biohof-ease),
		color var(--biohof-duration) var(--biohof-ease),
		border-color var(--biohof-duration) var(--biohof-ease);
}
.biohof-nav__action svg { inline-size: 1.3rem; block-size: 1.3rem; }

/* ── Zertifikate (kleines, gerahmtes Badge) ─────────────────────────────────
   .biohof-nav-Prefix hebt die Spezifität über Elementors `.elementor img`
   (max-width:100%), das sonst unseren Breiten-Deckel überschreiben würde. */
.biohof-nav__certs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--biohof-space-sm); align-items: center; list-style: none; margin: 0; padding: 0; }
.biohof-nav .biohof-nav__cert-img {
	display: block;
	max-inline-size: 5.5rem;
	block-size: auto;
	height: auto;
	border-radius: var(--biohof-radius-sm);
}

/* ── Editor-Hinweis ─────────────────────────────────────────────────────── */
.biohof-nav__placeholder {
	display: grid;
	gap: var(--biohof-space-2xs);
	padding: var(--biohof-space-md);
	border: 1px dashed var(--biohof-color-border);
	border-radius: var(--biohof-radius-md);
	background: var(--biohof-color-surface-soft);
	color: var(--biohof-color-text);
}
.biohof-nav__placeholder-title { font-family: var(--biohof-font-heading); color: var(--biohof-color-text-strong); }

/* ── Mobile (< 60em): mit JS = Off-Canvas-Schublade ─────────────────────── */
@media (scripting: enabled) and (max-width: 59.99em) {
	.biohof-nav__bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--biohof-nav-gap);
		padding: var(--biohof-space-sm) var(--biohof-space-md);
		background: var(--biohof-color-surface-soft);
		border-block-end: 1px solid var(--biohof-color-border);
	}

	.biohof-nav__scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		background: color-mix(in srgb, var(--biohof-color-text-strong) 55%, transparent);
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--biohof-duration) var(--biohof-ease);
	}
	.biohof-nav.is-open .biohof-nav__scrim { opacity: 1; pointer-events: auto; }

	.biohof-nav__panel {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		z-index: 1001;
		inline-size: min(var(--biohof-nav-width), 86vw);
		visibility: hidden;
		transform: translateX(-100%);
		transition: transform var(--biohof-duration) var(--biohof-ease), visibility var(--biohof-duration);
		box-shadow: var(--biohof-shadow-lg);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.biohof-nav.is-open .biohof-nav__panel { visibility: visible; transform: translateX(0); }

	.biohof-nav__brand--panel { display: none; }
	.biohof-nav__close { display: inline-flex; }
	.biohof-nav__panel-head { justify-content: flex-end; }
}

/* Scroll-Sperre des Dokuments bei offener Schublade */
:root.biohof-nav-locked { overflow: hidden; }

/* ── Desktop (≥ 60em): Sidebar ──────────────────────────────────────────────
   Greift OHNE JS bereits beim ersten Paint → kein Layout-Sprung. Inhalt verteilt
   sich über die volle Höhe (space-between): Kopf oben, Menü mittig, Fuß unten. */
@media (min-width: 60em) {
	.biohof-nav__bar { display: none; }
	.biohof-nav__scrim { display: none; }
	.biohof-nav__panel {
		inline-size: 100%;
		min-block-size: 100dvh;
	}
	/* Untermenüs klappen wie gewohnt inline auf. Reicht der Platz dann nicht
	   (großes Logo + viel Fuß), scrollt die Sidebar als EIN Bereich – der Fuß
	   (Kontakt/Social) klebt dabei unten fest, statt nach unten aus dem Bild zu
	   wandern. So springt der Fuß nicht. Eigener Hintergrund + weiche Oberkante,
	   damit der durchscrollende Menü-Inhalt sauber dahinter verschwindet. */
	.biohof-nav__foot {
		position: sticky;
		inset-block-end: 0;
		margin-block-start: auto;
		padding-block-start: var(--biohof-space-sm);
		background-color: var(--biohof-color-surface-soft);
	}
	/* Sanfter Verlauf-Hinweis direkt über dem angehefteten Fuß: blendet
	   durchscrollenden Menü-Inhalt weich aus → zeigt „hier geht es noch weiter".
	   Selbst-anpassend: liegt nichts dahinter (kein Überlauf), verschmilzt der Verlauf
	   mit dem gleichfarbigen Hintergrund und ist unsichtbar. pointer-events:none, damit
	   Klicks aufs Menü dahinter durchgehen. */
	.biohof-nav__foot::before {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-end: 100%;
		block-size: var(--biohof-space-lg);
		background: linear-gradient(to top, var(--biohof-color-surface-soft), transparent);
		pointer-events: none;
	}
	.biohof-nav__brand--panel { display: flex; }
	.biohof-nav__close { display: none; }
	.biohof-nav__panel-head { justify-content: center; }
}

/* ── Seiten-Layout: Header wird zur fixen linken Sidebar ─────────────────────
   Greift für ZWEI Träger: den Pro-Theme-Builder-Header (.elementor-location-header)
   UND die plugin-eigene Auto-Ausgabe (.biohof-site-header, via wp_body_open). Reicht
   bewusst über das Widget hinaus an #content/Footer – nur wenn die Nav auf der Seite
   ist (:has). Beide Träger sind KEIN .e-con → kein transform, `fixed` ist viewport-
   relativ (V4-Gotcha trifft hier nicht zu). Zarter Grün-Verlauf + weiche Kante = Tiefe. */
@media (min-width: 60em) {
	body:has(.biohof-nav) .elementor-location-header,
	body:has(.biohof-nav) .biohof-site-header {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		inline-size: var(--biohof-nav-width);
		z-index: 100;
		overflow-y: auto;
		overscroll-behavior: contain;
		/* Bei Überlauf (aufgeklapptes Untermenü) scrollt die Sidebar – die Balkenleiste
		   wird aber ausgeblendet (Mausrad/Touch/Tastatur scrollen weiter). Der angeheftete
		   Fuß zeigt mit seiner weichen Oberkante, dass dahinter noch Inhalt liegt. */
		scrollbar-width: none;
		background-color: var(--biohof-color-surface-soft);
		border-inline-end: 1px solid var(--biohof-color-border);
		box-shadow: 6px 0 28px -6px color-mix(in srgb, var(--biohof-color-text-strong) 20%, transparent);
	}
	body:has(.biohof-nav) .elementor-location-header::-webkit-scrollbar,
	body:has(.biohof-nav) .biohof-site-header::-webkit-scrollbar {
		display: none; /* WebKit/Blink: dieselbe Balkenleiste ausblenden */
	}
	/* Boxed-Container im Pro-Header entkoppeln (entfällt bei der Auto-Ausgabe). */
	body:has(.biohof-nav) .elementor-location-header > .e-con,
	body:has(.biohof-nav) .elementor-location-header .e-con-inner {
		max-inline-size: none;
		inline-size: 100%;
		padding: 0;
	}
	/* Hauptinhalt + Footer (beide Träger) rücken rechts neben die Sidebar. */
	body:has(.biohof-nav) #content,
	body:has(.biohof-nav) .elementor-location-footer,
	body:has(.biohof-nav) .biohof-site-footer {
		margin-inline-start: var(--biohof-nav-width);
	}
}

/* ── Hover nur auf Zeigergeräten ─────────────────────────────────────────────
   Doppel-Klassen-Prefix (.biohof-nav.biohof-nav) hebt die Spezifität über die
   Link-/Button-Defense in elementor-defense.css (0,3,1) – sonst überschreibt diese
   unsere Hover-Farben (machte u.a. den Social-Hover unsichtbar). Hover-Text =
   primary-hover (dunkler, kontraststark). Kontraste gemessen: alle ≥ 4,5 (Icons ≥ 3). */
@media (hover: hover) {
	.biohof-nav.biohof-nav .biohof-nav__link:hover {
		background: color-mix(in srgb, var(--biohof-color-primary) 10%, transparent);
		color: var(--biohof-color-primary-hover);
		transform: translateX(3px);
	}
	.biohof-nav__link:hover::before { transform: scaleY(1); }
	/* Nur echte Links (a) hovern – die statische Adresse (span) bleibt neutral. */
	.biohof-nav.biohof-nav a.biohof-nav__contact-link:hover {
		background: color-mix(in srgb, var(--biohof-color-primary) 10%, transparent);
		color: var(--biohof-color-primary-hover);
	}
	.biohof-nav.biohof-nav .biohof-nav__subtoggle:hover,
	.biohof-nav.biohof-nav .biohof-nav__toggle:hover,
	.biohof-nav.biohof-nav .biohof-nav__close:hover,
	.biohof-nav.biohof-nav .biohof-nav__search-toggle:hover {
		background: color-mix(in srgb, var(--biohof-color-primary) 10%, transparent);
		color: var(--biohof-color-primary-hover);
	}
	.biohof-nav.biohof-nav .biohof-nav__social-link:hover,
	.biohof-nav.biohof-nav .biohof-nav__action:hover {
		background: var(--biohof-color-primary);
		color: var(--biohof-color-on-primary);
		border-color: var(--biohof-color-primary);
	}
	.biohof-nav.biohof-nav .biohof-nav__search-submit:hover { border-color: var(--biohof-color-primary); }
}

/* Bewegung zurücknehmen: Akzent-Verschiebung beim Hover deaktivieren. */
@media (prefers-reduced-motion: reduce) {
	.biohof-nav__link:hover { transform: none; }
}