/* =====================================================================
 * Mega-Menü (Elementor Nav Menu) – siehe mega-menu.php
 * ===================================================================== */

:root {
	--br-mm-bg: #ffffff;
	--br-mm-card-hover: #f6f3ee;
	--br-mm-thumb-bg: #f3f1ed;
	--br-mm-border: #e7e3dc;
	--br-mm-title: #222222;
	--br-mm-text: #7a756d;
	--br-mm-price: #9a8f80;
	--br-mm-radius: 10px;
	--br-mm-col: 270px;
}

/* ---------- Gemeinsame Karten-Bausteine ---------- */
.br-mm-item > a {
	display: flex !important;
	align-items: center;
	gap: 14px;
	white-space: normal !important;
	text-align: left;
}

.br-mm-thumb {
	flex: 0 0 auto;
	display: block;
	overflow: hidden;
	background: var(--br-mm-thumb-bg);
	border-radius: 8px;
}

.br-mm-thumb img,
.br-mm-thumb .br-mm-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.br-mm-ph {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 600;
	color: var(--br-mm-price);
}

.br-mm-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.br-mm-title {
	font-weight: 600;
	line-height: 1.25;
}

.br-mm-price {
	font-weight: 400;
	font-size: .82em;
	color: var(--br-mm-price);
	white-space: nowrap;
}

.br-mm-desc {
	font-size: 13px;
	line-height: 1.4;
	color: var(--br-mm-text);
	font-weight: 400;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Desktop: Panel ---------- */
@media (min-width: 1025px) {

	.elementor-nav-menu--main > .elementor-nav-menu {
		position: relative;
	}

	/* Panel wird relativ zur gesamten Menüleiste zentriert, nicht zum Menüpunkt */
	.elementor-nav-menu--main .elementor-nav-menu > li.br-mm-parent {
		position: static;
	}

	.elementor-nav-menu--main .elementor-nav-menu > li.br-mm-parent > ul.sub-menu {
		left: 50% !important;
		right: auto !important;
		/* bündig mit der Unterkante der schwarzen Leiste statt mitten hinein */
		top: calc(100% + var(--br-mm-offset, 24px)) !important;
		margin: 0 !important;
		transform: translateX(-50%);
		width: max-content !important;
		min-width: 0 !important;
		max-width: min(1180px, calc(100vw - 32px)) !important;
		padding: 14px !important;
		background: var(--br-mm-bg) !important;
		border: 1px solid var(--br-mm-border);
		border-radius: var(--br-mm-radius);
		box-shadow: 0 18px 40px -12px rgba(30, 25, 15, .22);
		z-index: 9999;
	}

	/* Unsichtbare Brücke über den Abstand, damit das Panel beim Hinfahren offen bleibt */
	.elementor-nav-menu--main .elementor-nav-menu > li.br-mm-parent > ul.sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: calc(-1 * var(--br-mm-offset, 24px) - 2px);
		height: calc(var(--br-mm-offset, 24px) + 2px);
	}

	/* SmartMenus blendet per display:block ein – erst dann zum Grid machen */
	.elementor-nav-menu--main .elementor-nav-menu > li.br-mm-parent > ul.sub-menu[style*="display: block"] {
		display: grid !important;
		gap: 6px;
	}

	.elementor-nav-menu--main li.br-mm-cols-2 > ul.sub-menu { grid-template-columns: repeat(2, var(--br-mm-col)); }
	.elementor-nav-menu--main li.br-mm-cols-3 > ul.sub-menu { grid-template-columns: repeat(3, var(--br-mm-col)); }
	.elementor-nav-menu--main li.br-mm-cols-4 > ul.sub-menu { grid-template-columns: repeat(4, var(--br-mm-col)); }

	.elementor-nav-menu--main li.br-mm-parent > ul.sub-menu > li.br-mm-item {
		border: 0 !important;
	}

	.elementor-nav-menu--main li.br-mm-parent > ul.sub-menu > li.br-mm-item > a {
		height: 100%;
		padding: 10px !important;
		border-radius: 8px;
		background: transparent !important;
		color: var(--br-mm-title) !important;
		border: 0 !important;
		font-size: 15px;
	}

	.elementor-nav-menu--main li.br-mm-parent > ul.sub-menu > li.br-mm-item > a:hover,
	.elementor-nav-menu--main li.br-mm-parent > ul.sub-menu > li.br-mm-item > a:focus-visible,
	.elementor-nav-menu--main li.br-mm-parent > ul.sub-menu > li.br-mm-item.current-menu-item > a {
		background: var(--br-mm-card-hover) !important;
	}

	.elementor-nav-menu--main li.br-mm-item > a:hover .br-mm-thumb img {
		transform: scale(1.06);
	}

	.elementor-nav-menu--main li.br-mm-item .br-mm-thumb {
		width: 96px;
		height: 72px;
	}
}

/* ---------- Tablet-Burger / Dropdown-Variante: kompakte Liste ---------- */
nav.elementor-nav-menu--dropdown li.br-mm-item .br-mm-thumb {
	width: 44px;
	height: 44px;
	border-radius: 6px;
}

nav.elementor-nav-menu--dropdown li.br-mm-item .br-mm-desc,
nav.elementor-nav-menu--dropdown li.br-mm-item .br-mm-price {
	display: none;
}

@media (max-width: 1024px) {
	.elementor-nav-menu--main li.br-mm-item .br-mm-thumb {
		width: 44px;
		height: 44px;
	}
	.elementor-nav-menu--main li.br-mm-item .br-mm-desc {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.br-mm-thumb img { transition: none; }
}