/* Mega Menu — панель выравнивается по контейнеру, выглядит на переменных.
   Переменные приходят из Header Einstellungen (Mega-Menü). */

/* Trigger: the panel anchors to the header container (like the reference),
   not to the item — otherwise right-aligned items push it off-screen. */
#site-navigation .origin-has-mega {
	position: static;
}

#masthead .container {
	position: relative;
}
.origin-mega-menu__slot.origin-mega-menu__slot--item {
    display: flex;
}
/* Hover bridge: the panel sits below the menu item with a small gap
   (top: 124%). Moving the cursor across that gap drops :hover on the
   item and the panel closes. A translucent ::before reaching up through
   the gap keeps the cursor inside the panel subtree while transitioning. */
.origin-mega-menu {
	position: absolute;
	top: 124%;
	left: 20px;
	right: 20px;
	width: auto;
	max-width: none;
	background-color: var(--mega-menu-background, #ffffff);
	border-radius: var(--mega-menu-radius, 4px);
	box-shadow: 0 20px 50px rgb(0 0 0 / 0.15);
	opacity: 0;
	visibility: hidden;
	translate: 0 12px;
	transition:
		opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
		visibility 0.3s,
		translate 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	z-index: 90;
}

.origin-has-mega > .origin-mega-menu::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	transform: translateY(-100%);
	height: 36px;
}

/* Desktop: hover / keyboard focus in */
@media (hover: hover) and (pointer: fine) {
	.origin-has-mega:hover > .origin-mega-menu,
	.origin-has-mega:focus-within > .origin-mega-menu {
		opacity: 1;
		visibility: visible;
		translate: 0 0;
	}
}

/* Touch / JS fallback */
.origin-has-mega.is-open > .origin-mega-menu {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	border-top: 18px solid var(--origin-primary);
}

/* Accent bar on top of the panel — also for hover state (all skins) */
.origin-has-mega > .origin-mega-menu {
	border-top: 18px solid var(--origin-primary);
}
.origin-has-mega:hover > .origin-mega-menu {
	border-top: 18px solid var(--origin-primary);
}

.origin-mega-menu__inner {
	max-width: var(--container-width, 1600px);
	margin-inline: auto;
	padding: 2rem;
}

.origin-mega-menu__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

/* Featured slot present -> two columns (featured + links) */
.origin-mega-menu__grid:has(.origin-mega-menu__slot--item:not(:empty)) {
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
}

.origin-mega-menu__slot--start,
.origin-mega-menu__slot--end {
	border-radius: var(--border-radius-default, 8px);
}

.origin-mega-menu__slot:empty {
	display: none;
}

/* Side zones + links grid in one flex row (left | grid | right) */
.origin-mega-menu__middle {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
	justify-content: space-between;
}

.origin-mega-menu__middle > .origin-mega-menu__grid {
	flex: 1 1 auto;
	min-width: 0;
}

.origin-mega-menu__slot--left,
.origin-mega-menu__slot--right {
	flex: 0 0 auto;
	max-width: 280px;
}

.origin-mega-menu__zone-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--border-radius-default, 8px);
}

/* Children links as a fixed 3-column grid (items fill rows; no leftover
   empty column on the right like the old CSS multi-column) */
#site-navigation .origin-mega-menu__list {
	display: grid !important;
	grid-template-columns: repeat(var(--mega-menu-columns, 3), minmax(0, 1fr));
	align-items: start;
	align-content: start;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	white-space: normal;
}

#site-navigation .origin-mega-menu__list li {
	display: block;
	height: auto;
	margin: 0;
	list-style: none;
	line-height: 1.4;
	white-space: normal;
}

/* Link rows styled like the reference (flex row with hover highlight) */
#site-navigation .origin-mega-menu__list a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 10px 12px;
	border-radius: var(--border-radius-default, 12px);
	color: var(--origin-text-color-black);
	font-size: 1rem;
	line-height: 1.5;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

#site-navigation .origin-mega-menu__list a:hover {
	color: contrast-color(color-mix(in srgb, var(--origin-primary) 14%, var(--mega-menu-background, #ffffff)));
	background-color: color-mix(in srgb, var(--origin-primary) 14%, var(--mega-menu-background, #ffffff));
}

/* ---- Current page indicator ("you are here", hover-like highlight) ----
 * Highlights only the menu item matching the current page. First-level
 * (mega parent) items are intentionally NOT highlighted. */
#site-navigation .menu-item.current-menu-item > a,
#site-navigation .menu-item.current_page_item > a {
	color: contrast-color(color-mix(in srgb, var(--origin-primary) 14%, var(--mega-menu-background, #ffffff)));
	background-color: color-mix(in srgb, var(--origin-primary) 14%, var(--mega-menu-background, #ffffff));
	border-radius: var(--border-radius-default, 12px);
}

/* Neutralize the default sub-menu dropdown rules inside the panel */
#site-navigation .origin-mega-menu .sub-menu {
	position: static;
	left: auto;
	top: auto;
	width: auto;
	min-width: 0;
	box-shadow: none;
	background: transparent;
	border: 0;
	display: block;
}

/* Label without any caret */
.origin-mega-menu__label {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

/* Mobile: collapsible accordion inside the menu (JS toggles .is-open) */
@media (max-width: 767px) {
	.origin-has-mega {
		position: static;
	}

	.origin-mega-menu {
		position: static;
		transform: none;
		width: auto;
		max-width: none;
		opacity: 1;
		visibility: visible;
		translate: none;
		display: none;
		box-shadow: none;
		border-radius: 0;
	}

	.origin-has-mega.is-open > .origin-mega-menu {
		display: block;
	}

	.origin-mega-menu__inner {
		padding: 0.75rem 0 0.75rem 1rem;
	}

	#site-navigation .origin-mega-menu__list {
		grid-template-columns: 1fr;
	}

	.origin-mega-menu__middle {
		flex-direction: column;
	}

	.origin-mega-menu__slot--left,
	.origin-mega-menu__slot--right {
		max-width: none;
	}
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	.origin-mega-menu {
		transition: none;
	}
}

/* Elegant admin-managed zone content */
.origin-mega-menu__slot--start {
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--origin-border-color-light, #dedede);
	font-size: 0.95rem;
}

.origin-mega-menu__slot--end {
	padding-top: 0.75rem;
	border-top: 1px solid var(--origin-border-color-light, #dedede);
	font-size: 0.9rem;
	color: var(--origin-text-color-black-muted, #555);
}

.origin-mega-menu__zone-body {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--origin-text-color-black-muted, #515151);
}

.origin-mega-menu__zone-body :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 0.35em;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--origin-text-color-black, #131313);
}

.origin-mega-menu__zone-body h4 {
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.origin-mega-menu__zone-body p {
	margin: 0 0 0.6em;
}

.origin-mega-menu__zone-body > :last-child {
	margin-bottom: 0;
}

.origin-mega-menu__slot--left,
.origin-mega-menu__slot--right {
	padding-block: 0.15rem;
}

.origin-mega-menu__zone-body img,
.origin-mega-menu__slot--left img,
.origin-mega-menu__slot--right img {
	display: block;
	max-width: 100%;
	max-height: 220px;
	height: auto;
	width: auto;
	object-fit: cover;
	border-radius: var(--border-radius-default, 8px);
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.1);
}