/**
 * Drilldown-Mechanik des mobilen Offcanvas-Menüs.
 *
 * Hier steht NUR, was kein natives Bricks-Setting abbilden kann: das
 * Übereinanderlegen und Verschieben der Ebenen. Farben, Abstände und
 * Schriften liegen in den zsc-mobilnav__*-Global-Classes im Builder.
 *
 * Zusammenspiel: Bricks toggelt `.open` am Dropdown (data-toggle=click),
 * nav-drilldown.js spiegelt das als `.zsc-ebene-2` auf die Liste.
 */

/* Das Panel ist der Bildausschnitt — die Ebenen gleiten darin. */
.zsc-mobilnav__panel {
	overflow: hidden;
}

/* Die Navigation füllt das Panel, damit Ebene 2 die volle Höhe bekommt. */
.zsc-mobilnav__panel > .brxe-nav-nested {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-height: 0;
}

.zsc-mobilnav__list {
	position: relative;
	flex-grow: 1;
	transition: transform 0.35s ease;
}

/* Ebene 1 fährt nach links raus — der Extra-Abstand (--space-l) schiebt sie
   auch aus dem Panel-Innenabstand, sonst bliebe links ein sichtbarer Streifen. */
.zsc-mobilnav__list.zsc-ebene-2 {
	transform: translateX(calc(-100% - var(--space-l, 2rem)));
}

/* Bricks setzt .brxe-dropdown auf position:relative — die Unterliste soll
   sich aber an der LISTE ausrichten, nicht am einzelnen Menüpunkt. */
.zsc-mobilnav__dropdown {
	position: static;
}

/* Ebene 2 steht rechts neben Ebene 1 und wird mit ihr verschoben.
   display:flex überschreibt Bricks' display:none für statische Dropdowns —
   unsichtbar macht sie `visibility`, sonst gäbe es keine Gleit-Transition. */
.zsc-mobilnav__sublist {
	display: flex !important;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: calc(100% + var(--space-l, 2rem));
	width: 100%;
	min-height: 100%;
	margin: 0;
	visibility: hidden;
	/* Erst NACH dem Zurückgleiten ausblenden. */
	transition: visibility 0s 0.35s;
}

.zsc-mobilnav__dropdown.open > .zsc-mobilnav__sublist {
	visibility: visible;
	transition-delay: 0s;
}

/* Such-Kachel: Der Overlay-Knopf der Bricks-Suche ist ein nackter <button> —
   ohne Reset bringt er Browser-Grau und eigene Ränder in die Kachel. Farbe
   erbt von der Kachel-Klasse; für die Icon-Größe hat die Suche kein
   natives Setting (nur Höhe/Breite des Knopfes). */
.zsc-mobilnav__tile .brxe-search button.toggle {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font-size: 22px;
	cursor: pointer;
}

/* Angemeldet mit Admin-Leiste: die schwebt mit höchstem z-index über allem
   und verdeckte das X des Panels. Offcanvas beginnt darum unter der Leiste.
   WordPress liefert die Höhe als CSS-Variable mit. */
body.admin-bar .brxe-offcanvas {
	top: var(--wp-admin--admin-bar--height, 32px);
	height: calc(100% - var(--wp-admin--admin-bar--height, 32px));
}

/* Ohne diesen Riegel ist das fixe Offcanvas auf dem Handy verschiebbar:
   Sobald IRGENDEIN Element die Seite horizontal überlaufen lässt (gemessen:
   622px Layout-Viewport bei 390px Fenster durch eine fixe Breite im Hero),
   hängt position:fixed am breiteren Layout-Viewport — wischt man quer,
   wandert das Panel mit aus dem Bild. Die eigentlichen Übeltäter gehören
   trotzdem in ihren Klassen repariert (width -> max-width). */
@media (max-width: 991px) {
	html, body {
		overflow-x: clip;
	}
}