/**
 * IF.DIGITAL Mega-Menü – Frontend-Styles
 */

.wp-block-ifdigital-mega-menu {
	position: relative;
}

/* --- Toggle --- */
.wp-block-ifdigital-mega-menu__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-decoration: none;
	cursor: pointer;
}

.wp-block-ifdigital-mega-menu__label {
	display: inline-block;
}

.wp-block-ifdigital-mega-menu__chevron {
	/* inline-block, sonst ignoriert ein inline-<span> width/height und der
	   Pfeil kollabiert zu einem senkrechten Strich. */
	display: inline-block;
	flex: none;
	box-sizing: border-box;
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-0.12em);
	transition: transform 0.2s ease;
}

.wp-block-ifdigital-mega-menu.is-open .wp-block-ifdigital-mega-menu__chevron {
	transform: rotate(-135deg) translateY(0.05em);
}

/* Zurück-Button: nur im mobilen Vollbild-Overlay sichtbar. */
.wp-block-ifdigital-mega-menu__back {
	display: none;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 1rem;
	padding: 0.5rem 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.wp-block-ifdigital-mega-menu__back::before {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

/* --- Overlay: Desktop – fixiert unterhalb des Navigationspunkts. --- */
.wp-block-ifdigital-mega-menu__overlay {
	position: fixed;
	/* Position per JS (viewport-basiert): top = Unterkante des Punkts,
	   left = ausgerichtet + am Viewport geklemmt. */
	top: var(--ifdigital-mega-menu-top, 5rem);
	left: var(--ifdigital-mega-menu-left, 16px);
	right: auto;
	z-index: 100000;
	box-sizing: border-box;
	/* HARTE Regel: rechte Kante bleibt immer 1rem vom Viewport-Rand –
	   unabhängig von JS-Timing/Inhalt kann das Overlay nie überlaufen. */
	max-width: calc(100vw - var(--ifdigital-mega-menu-left, 16px) - 1rem);
	/* Saubere Höhe: nie höher als der sichtbare Bereich, sonst scrollen. */
	max-height: min(80vh, calc(100vh - 6rem));
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
	pointer-events: none;
}

.wp-block-ifdigital-mega-menu.is-open .wp-block-ifdigital-mega-menu__overlay {
	visibility: visible;
	pointer-events: auto;
}

.wp-block-ifdigital-mega-menu__overlay-inner {
	display: block;
	box-sizing: border-box;
	opacity: 0;
	transform: translateY(-8px);
	transition:
		opacity 0.18s ease,
		transform 0.18s ease;
}

.wp-block-ifdigital-mega-menu.is-open .wp-block-ifdigital-mega-menu__overlay-inner {
	opacity: 1;
	/*
	 * "none" und nicht "translateY(0)": Jeder Transform-Wert ausser none macht
	 * das Element zum umschliessenden Block und zieht einen eigenen
	 * Composite-Layer auf. Alles darin sieht als Hintergrund dann nur noch
	 * diesen Layer - backdrop-filter (z. B. der Blockstil "Glas") hat damit
	 * nichts mehr zum Weichzeichnen und bleibt wirkungslos.
	 *
	 * translateY(0) rechnet zu matrix(1,0,0,1,0,0) und zaehlt als Transform;
	 * none nicht. Die Einblend-Bewegung laeuft trotzdem, der Uebergang von
	 * translateY(-8px) nach none wird interpoliert.
	 */
	transform: none;
}

.wp-block-ifdigital-mega-menu__overlay,
.wp-block-ifdigital-mega-menu__overlay *,
.wp-block-ifdigital-mega-menu__overlay *::before,
.wp-block-ifdigital-mega-menu__overlay *::after {
	box-sizing: border-box;
}

/* --- Breiten (max-width = Sicherheitsnetz, siehe oben) --- */
.wp-block-ifdigital-mega-menu.is-width-content .wp-block-ifdigital-mega-menu__overlay {
	width: max-content;
	min-width: min(22rem, calc(100vw - 32px));
	max-width: calc(100vw - var(--ifdigital-mega-menu-left, 16px) - 1rem);
}

.wp-block-ifdigital-mega-menu.is-width-full .wp-block-ifdigital-mega-menu__overlay {
	width: var(--ifdigital-mega-menu-width, calc(100vw - 32px));
	max-width: calc(100vw - var(--ifdigital-mega-menu-left, 16px) - 1rem);
}

/* Ausrichtung (start/center/end) wird auf Desktop von JS berechnet und über
   --ifdigital-mega-menu-left gesetzt; hier ist nichts weiter nötig. */

/* WordPress-Layout-Klassen im Mega-Dropdown dürfen nicht voll ausbrechen.
   „Volle Breite"/„Weit" (alignfull/alignwide) nutzen sonst negative Ränder und
   sprengen das Overlay auf volle Viewport-Breite – hier auf Overlay-Breite
   begrenzt, damit die Breiten-/Ausrichtungs-Einstellung des Blocks greift. */
.wp-block-ifdigital-mega-menu__overlay .alignfull,
.wp-block-ifdigital-mega-menu__overlay .alignwide {
	width: auto !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Medien nie breiter als das Overlay – hält beliebige Inhalte responsiv. */
.wp-block-ifdigital-mega-menu__overlay :where( img, video, iframe, svg ) {
	max-width: 100%;
	height: auto;
}

.wp-block-ifdigital-mega-menu__overlay .has-global-padding {
	padding-right: min(
		var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal, 1.5rem)),
		2rem
	);
	padding-left: min(
		var(--wp--style--root--padding-left, var(--wp--custom--gap--horizontal, 1.5rem)),
		2rem
	);
}

/* --- Mobile: 2. Ebene blendet als Vollbild-Overlay ein --- */
@media (max-width: 600px) {
	.wp-block-ifdigital-mega-menu {
		position: static;
	}

	.wp-block-ifdigital-mega-menu__overlay {
		position: fixed;
		inset: 0;
		z-index: 100001;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 100%;
		max-height: none;
		margin: 0;
		padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
			max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
		background: var(--wp--preset--color--background, #fff);
		box-shadow: none;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		/* Von rechts einblenden. */
		transform: translateX(100%);
		visibility: hidden;
		pointer-events: none;
		transition:
			transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s linear 0.3s;
	}

	.wp-block-ifdigital-mega-menu.is-open .wp-block-ifdigital-mega-menu__overlay {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
		transition:
			transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s;
	}

	.wp-block-ifdigital-mega-menu__overlay-inner {
		opacity: 1;
		transform: none;
		box-shadow: none;
	}

	.wp-block-ifdigital-mega-menu__back {
		display: inline-flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-ifdigital-mega-menu__overlay,
	.wp-block-ifdigital-mega-menu__overlay-inner,
	.wp-block-ifdigital-mega-menu__chevron {
		transition: none;
	}
}