/**
 * eigengrund Kontext – Frontend-Styles
 */

/* ── NAV-HIGHLIGHT ─────────────────────────────────────────── */
/* Setzt voraus, dass der Menüpunkt eine 'bereich-{slug}'-CSS-Klasse hat
   (in wp-admin unter Design → Menüs → Bildschirmoptionen gesetzt) und dass
   eg_kontext_nav_aktiv_klasse() bei Übereinstimmung 'aktiv' ergänzt hat. */
.menu-item.aktiv > a,
.menu-item.aktiv > .drawer-nav-drop-wrap > a {
	color: var(--eg-accent);
	font-weight: 500;
	padding-bottom: 4px;
}
/* Kadence liefert für den Desktop-Menüpunkt eine eigene, höher
   spezifische Farb-Regel (aus dem Customizer-Inline-CSS):
   .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a
   { color:#1e1b14; } – Spezifität (0,4,3), schlägt unsere (0,2,1)
   unabhängig von der Ladereihenfolge. #primary-menu (echte ID des
   Desktop-Menüs) hebt uns in die ID-Stufe, die IMMER gewinnt, ganz
   ohne !important. */
#primary-menu li.menu-item.aktiv > a {
	color: var(--eg-accent);
}

/* Punkt vor den drei Bereichs-Menüpunkten: gefüllt+Amber wenn aktiv,
   umrandet+gedimmt sonst. Kein Verbindungsstrich, unabhängig von der
   Unterstreichung oben. */
.menu-item.bereich-erkennen > a::before,
.menu-item.bereich-erkennen > .drawer-nav-drop-wrap > a::before,
.menu-item.bereich-erfahren > a::before,
.menu-item.bereich-erfahren > .drawer-nav-drop-wrap > a::before,
.menu-item.bereich-verkoerpern > a::before,
.menu-item.bereich-verkoerpern > .drawer-nav-drop-wrap > a::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var(--eg-muted);
	background: transparent;
}
.menu-item.bereich-erkennen:hover > a::before,
.menu-item.bereich-erkennen:hover > .drawer-nav-drop-wrap > a::before,
.menu-item.bereich-erfahren:hover > a::before,
.menu-item.bereich-erfahren:hover > .drawer-nav-drop-wrap > a::before,
.menu-item.bereich-verkoerpern:hover > a::before,
.menu-item.bereich-verkoerpern:hover > .drawer-nav-drop-wrap > a::before {
	border-color: var(--eg-amber);
	background: var(--eg-amber);
}
/* <a> selbst zum Flex-Container: hält den Punkt links neben dem Text,
   auch wenn der Linktext (wie bei "Erkennen") in einem
   .nav-drop-title-wrap-Span mit display:block steckt (Kadence-Dropdown-
   Pfeil-Wrapper) – ein Block-Kind in einem inline <a> würde den Punkt
   sonst in eine eigene Zeile darüber zwingen. */
.menu-item.bereich-erkennen > a,
.menu-item.bereich-erkennen > .drawer-nav-drop-wrap > a,
.menu-item.bereich-erfahren > a,
.menu-item.bereich-erfahren > .drawer-nav-drop-wrap > a,
.menu-item.bereich-verkoerpern > a,
.menu-item.bereich-verkoerpern > .drawer-nav-drop-wrap > a {
	display: inline-flex;
	align-items: center;
}
/* Verifiziert in kadence/assets/css/header.min.css:
   .header-navigation li.menu-item>a{display:block;...} – Spezifität
   (0,2,2), schlägt unsere (0,2,1) unabhängig von der Ladereihenfolge.
   Das war die tatsächliche Ursache für den Punkt oberhalb des Texts bei
   "Erkennen" (dessen .nav-drop-title-wrap-Span display:block hat und
   damit im inline/block-fließenden <a> in eine eigene Zeile ausbricht,
   sobald Kadence unser inline-flex zurück auf block dreht). Wieder
   #primary-menu für die ID-Stufe. Die unscoped Basis-Regel oben bleibt
   bestehen, weil sie im Mobile-Drawer (#mobile-menu) weiterhin nötig
   ist – dort existiert Kadences konkurrierende Regel nicht. */
#primary-menu li.menu-item.bereich-erkennen > a,
#primary-menu li.menu-item.bereich-erfahren > a,
#primary-menu li.menu-item.bereich-verkoerpern > a {
	display: inline-flex;
	align-items: center;
}
.menu-item.aktiv > a::before,
.menu-item.aktiv > .drawer-nav-drop-wrap > a::before {
	border-color: var(--eg-amber);
	background: var(--eg-amber);
}

/* ── BREADCRUMB ────────────────────────────────────────────── */
/* Kein Rahmen/Box – die "Thema"-Pille (.eg-tag, Theme-Definition) gibt bereits
   genug visuelle Abgrenzung, zusätzliche Trennlinien wären zu viel. */
.eg-breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.5rem;
}
.eg-breadcrumb a {
	color: var(--eg-accent);
	text-decoration: none;
}
.eg-breadcrumb a:hover {
	text-decoration: underline;
}
/* Höhere Spezifität als ".eg-breadcrumb a" nötig, sonst überschreibt dessen
   color:var(--eg-accent) die Theme-eigene Tag-Farbe der "Thema"-Pille. */
.eg-breadcrumb a.eg-tag {
	color: var(--eg-tag-c);
}
.eg-breadcrumb__thema {
	font-family: var(--eg-font-serif);
	font-style: italic;
	font-size: 16px;
	color: var(--eg-accent);
	text-decoration: none;
}