/**
 * Miller Menu – Basis-Styling.
 * Alle Werte über CSS-Custom-Properties im Child-Theme überschreibbar,
 * z. B. #mm-1-12 { --mm-col-width: 260px; }
 *
 * Farben pro Top-Level-Punkt stammen aus den CSS-Klassen, die dem
 * jeweiligen Menüpunkt im WP-Backend zugewiesen wurden – das Plugin
 * reicht diese Klassen 1:1 an <li> durch.
 */

.mm-miller-menu {
	--mm-col-width: 280px;
	--mm-border-color: #e2e2e2;
	--mm-divider-color: #f0f0f0; /* dezente Trennlinie zwischen Panel-Menüpunkten */
	--mm-bg: #ffffff;
	--mm-bg-hover: #f5f5f5;
	--mm-bg-alt: #fafafa;
	--mm-bg-active: #ececec;
	--mm-bg-highlight: #ededee; /* helle Hinterlegung bei aktivem Panel-Menüpunkt */
	--mm-bg-item-hover: #eceded; /* Hintergrund beim Hovern eines Panel-Menüpunkts */
	--mm-bg-empty: #f9f9f9; /* Hintergrund der (noch) ungenutzten Panel-Spalten */
	--mm-text: #1a1a1a;
	--mm-text-muted: #6b6b6b;
	--mm-hover-line: #575e62; /* Farbe des Unterstrichs bei Hover/aktiv in der horizontalen Leiste */
	--mm-accent: #2563eb; /* im Child-Theme z. B. auf die Marken-Akzentfarbe setzen */
	--mm-hamburger-bg: #1a1a1a;
	--mm-hamburger-text: #ffffff;

	/* Feste Innenabstände für Leiste und Panel-Menüpunkte – bewusst nicht
	   viewport-abhängig (clamp/vw/vh), sondern einfache feste Werte, im
	   Child-Theme leicht überschreibbar. */
	--mm-top-pad-y: 15px;
	--mm-top-pad-x: 16px;
	--mm-item-pad-y: 17px;
	--mm-item-pad-x: 26px;

	position: relative;
	font-family: inherit;
}

.mm-miller-menu * {
	box-sizing: border-box;
}

/* Setzt Theme-Resets wie "li { margin: .5rem 0 0 2rem; }" zurück –
   Abstände steuert das Plugin komplett selbst über .mm-item/.mm-column. */
.mm-miller-menu li {
	margin: 0;
	line-height: 1.3;
}

/* ==================================================================== *
 * Ebene 0 als horizontale Leiste (Modus "horizontal")
 * ==================================================================== */

.mm-toplevel-wrap {
	width: 100%;
}

.mm-toplevel {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mm-top-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: var(--mm-top-pad-y) var(--mm-top-pad-x);
	text-decoration: none;
	color: var(--mm-text);
	background: transparent;
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	white-space: nowrap;
	cursor: pointer;
	border-bottom: 3px solid transparent;
	transition: border-color .15s ease, color .15s ease;
}

.mm-top-item:hover,
.mm-top-item:focus-visible {
	border-bottom-color: var(--mm-hover-line);
	outline: none;
}

.mm-top-item.is-open {
	border-bottom-color: var(--mm-hover-line);
}

/* Sprachumschalter (Polylang, Klasse "pll-parent-menu-item"): Weltkugel-
   Icon statt Text/Dropdown-Pfeil. Theme-Vorgaben für die klassische
   "DE"/"EN"-Textdarstellung sowie Polylangs eigene Pfeil-Pseudoelemente
   werden hier zurückgesetzt. */
.mm-toplevel li.pll-parent-menu-item {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.mm-toplevel li.pll-parent-menu-item::before,
.mm-toplevel li.pll-parent-menu-item::after {
	content: none !important;
	display: none !important;
	border: none !important;
}

.mm-top-item--lang::before,
.mm-top-item--lang::after {
	border: none !important;
	content: none !important;
}

/* Verhält sich wie jeder andere Hauptmenüpunkt: derselbe (zunächst
   transparente) Unterstrich, dieselbe Hover-/Open-Logik. */
.mm-top-item--lang {
	border-bottom: 3px solid transparent;
}

.mm-top-item--lang:hover,
.mm-top-item--lang:focus-visible,
.mm-top-item--lang.is-open {
	border-bottom-color: var(--mm-hover-line);
}

.mm-top-item--lang {
	padding-left: var(--mm-top-pad-x);
	padding-right: var(--mm-top-pad-x);
}

.mm-top-item--lang svg {
	display: block;
}

/* Standard "nur für Screenreader"-Muster: visuell unsichtbar, aber
   weiterhin von assistiven Technologien vorlesbar. */
.mm-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==================================================================== *
 * Mega-Panel (Modus "horizontal")
 * ==================================================================== */

.mm-panel {
	position: fixed;
	left: 0;
	right: 0;
	top: 0; /* wird per JS auf die Unterkante der Leiste gesetzt */
	z-index: 1000;
	/* Grauer "leer"-Hintergrund; befüllte Spalten setzen ihren eigenen
	   weißen Hintergrund darüber (siehe .mm-panel .mm-column). */
	background: var(--mm-bg-empty);
	border-top: 1px solid var(--mm-border-color);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
	overflow-y: auto; /* Sicherheitsnetz für sehr niedrige Viewports */
}

/* Unterbindet Hover-Auslösung durch Content-Verschiebung beim Scrollen
   ohne Mausbewegung (z. B. per Pfeiltasten). */
.mm-panel.mm-scrolling {
	pointer-events: none;
}

/* Faded nur beim tatsächlichen Erst-Öffnen von oben ein (Klasse wird
   per JS gezielt gesetzt, siehe MillerMenu.renderHorizontal). */
.mm-panel--enter {
	animation: mm-panel-in .18s ease;
}

@keyframes mm-panel-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.mm-panel-header {
	border-bottom: 1px solid var(--mm-border-color);
	padding: 10px 20px;
}

/* ==================================================================== *
 * Breadcrumb (beide Modi)
 * ==================================================================== */

.mm-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	padding: 8px 4px;
	font-size: 0.85rem;
}

.mm-breadcrumb-item {
	background: none;
	border: none;
	padding: 4px 8px;
	cursor: pointer;
	color: var(--mm-text-muted);
	font: inherit;
	border-radius: 4px;
	white-space: nowrap;
}

.mm-breadcrumb-item:hover,
.mm-breadcrumb-item:focus-visible {
	color: var(--mm-accent);
	outline: none;
}

.mm-breadcrumb-home {
	font-weight: 600;
	color: var(--mm-text);
}

.mm-breadcrumb-sep {
	color: var(--mm-text-muted);
}

/* ==================================================================== *
 * Spalten (beide Modi)
 * ==================================================================== */

.mm-columns {
	display: grid;
	grid-template-columns: repeat( var( --mm-visible-columns, 1 ), minmax( 0, 1fr ) );
	background: var(--mm-bg);
	width: 100%;
}

/* Jede Spalte im Mega-Panel ist immer exakt 1/max-columns breit,
   unabhängig davon, wie viele Spalten gerade sichtbar sind – die
   Breite bleibt beim Durchklicken der Ebenen stabil. Der Grid-Wrapper
   bekommt den grauen "leer"-Hintergrund, jede befüllte .mm-column
   setzt darüber wieder Weiß (siehe weiter unten). */
.mm-panel .mm-columns {
	background: var(--mm-bg-empty);
	grid-template-columns: repeat( var( --mm-track-columns, 3 ), minmax( 0, 1fr ) );
}

/* Nur im vertical-Modus (Legacy) braucht der Spalten-Block einen
   eigenen Rahmen, da dort kein .mm-panel drumherum liegt. */
.mm-miller-menu[data-mode="vertical"] .mm-columns {
	border: 1px solid var(--mm-border-color);
	max-width: calc(var(--mm-col-width) * 4);
}

.mm-column {
	border-right: 1px solid var(--mm-border-color);
}

.mm-panel .mm-column {
	background: var(--mm-bg);
}

/* Nur die neu hinzukommende Spalte faded von links ein (Klasse wird
   per JS gezielt gesetzt, siehe MillerMenu.renderPanel). */
.mm-column--enter {
	animation: mm-column-in .2s ease;
}

@keyframes mm-column-in {
	from {
		opacity: 0;
		transform: translateX(-12px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Nur im vertical-Modus (Legacy) bekommt jede Spalte einzeln eine feste
   Höhe mit eigenem Scrollbalken – im horizontal-Modus (Mega-Panel) und im
   Mobile-Drawer soll die Spalte immer ihre volle Höhe zeigen. */
.mm-miller-menu[data-mode="vertical"] .mm-column {
	max-height: var(--mm-col-height, 420px);
	overflow-y: auto;
}

.mm-column:last-child {
	border-right: none;
}

.mm-column ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mm-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: var(--mm-item-pad-y) var(--mm-item-pad-x);
	text-decoration: none;
	color: var(--mm-text);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	word-spacing: 0.06em;
	line-height: 1.3;
	cursor: pointer;
	border-bottom: 1px solid var(--mm-divider-color);
	transition: background-color .15s ease;
}

.mm-column li:last-child .mm-item {
	border-bottom: none;
}

.mm-item:hover,
.mm-item:focus-visible {
	background: var(--mm-bg-item-hover);
	outline: none;
}

.mm-item.is-active {
	background: var(--mm-bg-highlight);
	font-weight: 600;
}

.mm-item-label {
	flex: 1 1 auto;
}

.mm-item-arrow {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-top: 2px solid var(--mm-text-muted);
	border-right: 2px solid var(--mm-text-muted);
	transform: rotate(45deg);
}

.mm-item:hover .mm-item-arrow,
.mm-item.is-active .mm-item-arrow {
	border-color: var(--mm-accent);
}

/* ==================================================================== *
 * Responsive: Tablet (nur noch relevant für mode="vertical")
 * ==================================================================== */

@media (max-width: 1024px) {
	.mm-miller-menu {
		--mm-col-width: 260px;
	}
	.mm-miller-menu[data-mode="vertical"] .mm-columns {
		max-width: calc(var(--mm-col-width) * 2);
	}
}

/* ==================================================================== *
 * Responsive: Mobile (nur noch relevant für mode="vertical")
 * ==================================================================== */

@media (max-width: 640px) {
	.mm-miller-menu {
		--mm-col-width: 100%;
	}
	.mm-miller-menu[data-mode="vertical"] .mm-columns {
		max-width: 100%;
	}
	.mm-miller-menu[data-mode="vertical"] .mm-column {
		max-height: none;
	}
	.mm-breadcrumb {
		font-size: 0.8rem;
	}
}

/* ==================================================================== *
 * Hamburger + Off-Canvas-Drawer
 * (mode="horizontal", automatisch unterhalb 1024px statt der Leiste)
 * ==================================================================== */

.mm-mobile-bar {
	display: flex;
	justify-content: flex-end;
	padding: 6px;
}

.mm-hamburger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: var(--mm-hamburger-bg);
	border: none;
	cursor: pointer;
	padding: 0;
}

.mm-hamburger-line {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--mm-hamburger-text);
}

.mm-mobile-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 998;
}

.mm-mobile-overlay--enter {
	animation: mm-fade-in .2s ease;
}

.mm-mobile-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 85%;
	max-width: 380px;
	background: var(--mm-bg);
	z-index: 999;
	overflow-y: auto;
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
}

.mm-mobile-drawer--enter {
	animation: mm-slide-in-right .22s ease;
}

@keyframes mm-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes mm-slide-in-right {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

.mm-mobile-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 12px;
	border-bottom: 1px solid var(--mm-border-color);
	position: sticky;
	top: 0;
	background: var(--mm-bg);
}

.mm-mobile-back {
	flex: 0 0 auto;
	background: none;
	border: none;
	font-size: 1.4rem;
	line-height: 1;
	padding: 4px 8px;
	cursor: pointer;
	color: var(--mm-text);
	border-radius: 4px;
}

.mm-mobile-back:hover,
.mm-mobile-back:focus-visible {
	background: var(--mm-bg-hover);
	outline: none;
}

.mm-mobile-title {
	flex: 1 1 auto;
	font-weight: 600;
	font-size: 1rem;
}

.mm-mobile-drawer .mm-column {
	max-height: none;
	border-right: none;
}

@media (min-width: 1024px) {
	.mm-mobile-bar,
	.mm-mobile-overlay,
	.mm-mobile-drawer {
		display: none;
	}
}

/* ==================================================================== *
 * Barrierefreiheit: reduzierte Bewegung respektieren
 * ==================================================================== */

@media (prefers-reduced-motion: reduce) {
	.mm-panel--enter,
	.mm-column--enter,
	.mm-mobile-overlay--enter,
	.mm-mobile-drawer--enter {
		animation: none;
	}
	.mm-top-item,
	.mm-item,
	.mm-item-arrow,
	.mm-hamburger-line {
		transition: none;
	}
}

/* ==================================================================== *
 * No-JS-Fallback
 * ==================================================================== */

.mm-fallback-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mm-fallback-menu ul {
	list-style: none;
	padding-left: 16px;
}