/*
 * Slide-in Menu – Frontend-Styles
 * Verwendet CSS-Custom-Properties, die das Plugin serverseitig aus den
 * Einstellungen (Design → Slide-in Menü) befüllt.
 *
 * Navigation zwischen den Ebenen (Hauptmenü + jedes Untermenü) läuft als
 * "Screens"-Stack: Das JS löst jedes Untermenü einmalig aus der
 * verschachtelten WordPress-Struktur heraus und hängt es als eigenständigen,
 * gleich großen Screen direkt in #wpsim-screens ein. Der Versatz selbst wird
 * vom JS als Pixel-Wert inline gesetzt (überschreibt die CSS-Werte hier).
 *
 * Alle Inhalts-Selektoren sind mit #wpsim-panel vorangestellt, damit sie
 * zuverlässig über generische Theme-Styles (ul/li/a-Regeln des Themes)
 * gewinnen – ohne diese ID-Bindung kann ein Theme mit spezifischeren
 * Selektoren (z. B. Aufzählungspunkte, Linkfarben) durchschlagen.
 *
 * WICHTIG – "classless" CSS-Frameworks (z. B. Pico.css): Diese Themes
 * stylen nackte HTML-Elemente wie nav/ul/button direkt, u. a. mit
 * `nav, nav ul { display: flex }` oder breiten :focus-Regeln
 * (box-shadow/outline). Eine ID-Bindung allein reicht dagegen NICHT aus,
 * wenn unsere eigenen Regeln für eine Eigenschaft (z. B. display) gar
 * keinen Wert setzen – dann gewinnt das Theme mangels Gegenkandidat, ganz
 * ohne Spezifitätskonflikt. Deshalb werden strukturell wichtige
 * Eigenschaften (display, box-shadow, outline) unten bewusst immer
 * explizit deklariert, auch wenn der Browser-Default eigentlich schon
 * passen würde.
 */

.wpsim-slideinmenu {
	position: fixed;
	inset: 0;
	z-index: 100000;
	pointer-events: none;
	visibility: hidden;
}

body.wpsim-open .wpsim-slideinmenu {
	pointer-events: auto;
	visibility: visible;
}

.wpsim-overlay {
	position: absolute;
	inset: 0;
	background: var( --wpsim-overlay, #000 );
	opacity: 0;
	transition: opacity var( --wpsim-speed, 300ms ) ease;
}

body.wpsim-open .wpsim-overlay {
	opacity: var( --wpsim-overlay-opacity, 0.6 );
}

.wpsim-panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: min( var( --wpsim-width, 320px ), 90vw );
	max-width: 90vw;
	background: var( --wpsim-bg, #1d1d1f );
	color: var( --wpsim-text, #fff );
	overflow: hidden;
	box-sizing: border-box;
	transition: transform var( --wpsim-speed, 300ms ) ease;
	box-shadow: 0 0 40px rgba( 0, 0, 0, 0.35 );
	/* Screens-Bereich + optionaler Footer als Flex-Spalte: der Footer
	   (flex:0 0 auto) behält seine natürliche Höhe, die Screens
	   (flex:1 1 auto) füllen den verbleibenden Platz – so liegt der
	   Footer immer sichtbar unterhalb des jeweils aktiven Screens,
	   unabhängig davon, wie hoch dessen Inhalt ist. */
	display: flex;
	flex-direction: column;
}

.wpsim-position-right .wpsim-panel {
	right: 0;
	transform: translateX( 100% );
}

.wpsim-position-left .wpsim-panel {
	left: 0;
	transform: translateX( -100% );
}

body.wpsim-open .wpsim-position-right .wpsim-panel,
body.wpsim-open .wpsim-position-left .wpsim-panel {
	transform: translateX( 0 );
}

#wpsim-panel .wpsim-close {
	position: absolute;
	top: 0.75rem;
	right: 1rem;
	z-index: 10;
	background: transparent;
	border: 0;
	box-shadow: none !important;
	outline: none;
	color: var( --wpsim-text, #fff );
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.5rem;
}

#wpsim-panel .wpsim-close:hover,
#wpsim-panel .wpsim-close:focus-visible {
	color: var( --wpsim-accent, #4f9eff );
}

#wpsim-panel .wpsim-close:focus-visible {
	outline: 2px solid var( --wpsim-accent, #4f9eff );
	outline-offset: 2px;
}

/* Container für alle Screens (Hauptmenü + jedes ausgelagerte Untermenü).
   Das ist der EINE Bezugsrahmen für die absolute Positionierung aller
   Screens – jeder Screen liegt hier flach als direktes Kind, unabhängig
   davon, wie tief er ursprünglich im WordPress-Menü verschachtelt war. */
#wpsim-panel .wpsim-screens {
	position: relative;
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
}

#wpsim-panel .wpsim-screen {
	display: block !important;
	position: absolute !important;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	list-style: none !important;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var( --wpsim-bg, #1d1d1f );
	padding: 0 1.5rem 2rem;
	box-sizing: border-box;
	transform: translateX( 100% );
	transition: transform var( --wpsim-speed, 300ms ) ease;
	visibility: hidden;
	z-index: 1;
}

/* Hauptmenü hat keine Zurück-Kopfzeile, braucht also eigenen Abstand
   nach oben, damit nichts unter dem Schließen-Button verschwindet. Dieser
   Wert (5.5rem) muss exakt mit der min-height von .wpsim-level-header
   weiter unten übereinstimmen, sonst beginnt der erste Untermenüpunkt
   nicht mehr auf derselben Höhe wie der erste Hauptmenüpunkt. */
#wpsim-panel .wpsim-screens > .wpsim-menu {
	padding-top: 5.5rem;
}

#wpsim-panel .wpsim-screen.wpsim-level-active {
	visibility: visible;
	z-index: 2;
}

/* "classless" Frameworks setzen auf nackten <li>-Elementen teils
   display:inline-block (z. B. für horizontale Nav-Leisten) – ohne
   eigene, explizite Deklaration hier würde das unsere vertikale Liste
   in eine Reihe verwandeln, genau wie das display:flex auf dem
   .wpsim-screen-<ul> selbst weiter oben. */
#wpsim-panel .wpsim-screen li {
	display: block !important;
	list-style: none !important;
}

#wpsim-panel .wpsim-screen li:not( .wpsim-level-header ):not( .wpsim-footer-row ) {
	border-bottom: 1px solid rgba( 255, 255, 255, 0.12 );
}

#wpsim-panel .wpsim-screen a,
#wpsim-panel .wpsim-screen .wpsim-menu-row-trigger {
	display: block;
	width: 100%;
	padding: 0.9rem 2.5rem 0.9rem 0.25rem;
	color: var( --wpsim-text, #fff ) !important;
	text-decoration: none !important;
	font-size: 1.05rem;
}

/* Der Trigger ist jetzt ein <button> statt eines <a> (er navigiert
   nirgendwohin, sondern öffnet nur das Untermenü) – Browser-Vorgaben für
   Buttons zurücksetzen, damit er optisch nicht von einem echten Link zu
   unterscheiden ist. */
#wpsim-panel .wpsim-screen .wpsim-menu-row-trigger {
	background: transparent;
	border: 0;
	box-shadow: none !important;
	outline: none;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
}

#wpsim-panel .wpsim-screen a:hover,
#wpsim-panel .wpsim-screen a:focus-visible,
#wpsim-panel .wpsim-screen .wpsim-menu-row-trigger:hover,
#wpsim-panel .wpsim-screen .wpsim-menu-row-trigger:focus-visible,
#wpsim-panel .wpsim-screen .current-menu-item > a,
#wpsim-panel .wpsim-screen .current_page_item > a {
	color: var( --wpsim-accent, #4f9eff ) !important;
}

#wpsim-panel .wpsim-screen a:focus-visible,
#wpsim-panel .wpsim-screen .wpsim-menu-row-trigger:focus-visible {
	outline: 2px solid var( --wpsim-accent, #4f9eff );
	outline-offset: -2px;
}

/* Eigene Seite des Eltern-Menüpunkts (an oberster Stelle jedes
   Untermenüs, siehe wpsim-parent-link in slideinmenu.js): wird als kleine
   Überschrift über den eigentlichen Unterpunkten dargestellt – fett,
   etwas größer und mit mehr Abstand nach oben, statt wie ein normaler,
   gleichrangiger Unterpunkt auszusehen. */
#wpsim-panel .wpsim-screen.sub-menu > li.wpsim-parent-link > a {
	padding-top: 1.75rem;
	font-size: 1.15rem;
	font-weight: 600;
}

/* Die eigentlichen Unterpunkte darunter werden eingerückt dargestellt,
   damit optisch klar wird, dass sie der Überschrift darüber untergeordnet
   sind. Gilt nur innerhalb von Untermenüs (nicht im Hauptmenü), und nicht
   für die Kopfzeile/Überschrift/den Footer selbst. */
#wpsim-panel .wpsim-screen.sub-menu > li:not( .wpsim-level-header ):not( .wpsim-parent-link ):not( .wpsim-footer-row ) > a,
#wpsim-panel .wpsim-screen.sub-menu > li:not( .wpsim-level-header ):not( .wpsim-parent-link ):not( .wpsim-footer-row ) > .wpsim-menu-row > .wpsim-menu-row-trigger {
	padding-left: 1.5rem;
}

/* Wrapper um Link + Pfeil-Button in einer Zeile; ist der einzige Zweck von
   position:relative hier (Bezugsrahmen nur für den Button dieser einen
   Zeile, NICHT für den ganzen Screen). */
#wpsim-panel .wpsim-menu-row {
	position: relative !important;
}

/* Zurück-Kopfzeile, erste Zeile jedes Untermenü-Screens, bleibt beim
   Scrollen oben stehen. Die Mindesthöhe von 5.5rem entspricht exakt dem
   padding-top des Hauptmenüs (siehe .wpsim-screens > .wpsim-menu weiter
   oben) – dadurch beginnt der erste Menüpunkt in jedem Untermenü auf
   genau derselben Höhe wie der erste Punkt im Hauptmenü, ohne
   Höhenversatz beim Wechsel zwischen den Ebenen. */
#wpsim-panel .wpsim-level-header {
	position: sticky;
	top: 0;
	min-height: 5.5rem;
	margin: 0 -1.5rem 0 !important;
	padding: 0.75rem 3.5rem 0.75rem 1.5rem;
	background: var( --wpsim-bg, #1d1d1f );
	border-bottom: 1px solid rgba( 255, 255, 255, 0.12 );
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	z-index: 3;
	flex-wrap: wrap;
}

#wpsim-panel .wpsim-back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: transparent;
	border: 0;
	box-shadow: none !important;
	outline: none;
	color: var( --wpsim-text, #fff );
	font-size: 1rem;
	cursor: pointer;
	padding: 0.4rem 0.5rem 0.4rem 0;
	flex-shrink: 0;
}

#wpsim-panel .wpsim-back::before {
	content: '';
	width: 8px;
	height: 8px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
}

#wpsim-panel .wpsim-back:hover,
#wpsim-panel .wpsim-back:focus-visible {
	color: var( --wpsim-accent, #4f9eff );
}

#wpsim-panel .wpsim-back:focus-visible {
	outline: 2px solid var( --wpsim-accent, #4f9eff );
	outline-offset: 2px;
}

/* Rein dekoratives Pfeil-Symbol – zeigt an, dass die ganze Zeile (der
   .wpsim-menu-row-trigger-Button) das Untermenü öffnet. Kein eigenes
   Klickziel mehr und daher auch nicht fokussierbar; Bezugsrahmen bleibt
   .wpsim-menu-row (eine Zeile), NICHT der ganze Screen. */
#wpsim-panel .wpsim-submenu-toggle {
	position: absolute !important;
	top: 0;
	right: 0;
	width: 2.75rem;
	height: 2.75rem;
	pointer-events: none;
	color: var( --wpsim-text, #fff );
	display: flex;
	align-items: center;
	justify-content: center;
}

#wpsim-panel .wpsim-submenu-toggle::before {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( -45deg );
}

#wpsim-panel .wpsim-menu-row-trigger:hover ~ .wpsim-submenu-toggle,
#wpsim-panel .wpsim-menu-row-trigger:focus-visible ~ .wpsim-submenu-toggle {
	color: var( --wpsim-accent, #4f9eff );
}

/* ---------------------------------------------------------------------
   Footer (optional): CTA-Button, Social-Icons, rechtliche Links. Wird
   von JS als letztes <li> in JEDEN Screen (Hauptmenü + jedes Untermenü)
   kopiert – ist also Teil von dessen normalem Listeninhalt und scrollt
   mit den Menüpunkten mit, statt dauerhaft am Panel-Rand zu kleben. Auf
   kleinen Displays bleibt dadurch mehr Platz für die Menüpunkte selbst;
   der Footer erscheint erst, wenn man bis ans Ende scrollt.
   ------------------------------------------------------------------- */
#wpsim-panel .wpsim-screen > li.wpsim-footer-row {
	margin-top: 0.5rem !important;
	padding: 1.25rem 0 calc( 0.5rem + env( safe-area-inset-bottom, 0px ) );
	/* Kein eigener border-top: der letzte "echte" Menüpunkt davor hat
	   bereits einen border-bottom (siehe oben) – mit einer zusätzlichen
	   Linie hier direkt darunter gäbe es sonst eine doppelte/verdickte
	   Trennlinie zwischen letztem Menüpunkt und Footer. */
	text-align: center;
}

#wpsim-panel .wpsim-footer-cta {
	margin-bottom: 1.25rem;
}

#wpsim-panel .wpsim-footer-cta-label {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	opacity: 0.85;
}

#wpsim-panel a.wpsim-footer-cta-button {
	display: inline-block;
	padding: 0.7rem 1.75rem;
	border-radius: 999px;
	background: var( --wpsim-footer-cta-bg, var( --wpsim-accent, #4f9eff ) ) !important;
	color: var( --wpsim-footer-cta-text, var( --wpsim-bg, #1d1d1f ) ) !important;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 0.95rem;
	transition: opacity var( --wpsim-speed, 300ms ) ease;
}

#wpsim-panel a.wpsim-footer-cta-button:hover,
#wpsim-panel a.wpsim-footer-cta-button:focus-visible {
	opacity: 0.85;
}

#wpsim-panel .wpsim-footer-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none !important;
}

#wpsim-panel .wpsim-footer-social li {
	border-bottom: 0;
	list-style: none !important;
}

#wpsim-panel .wpsim-footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	color: var( --wpsim-text, #fff ) !important;
	text-decoration: none !important;
}

#wpsim-panel .wpsim-footer-social a:hover,
#wpsim-panel .wpsim-footer-social a:focus-visible {
	color: var( --wpsim-accent, #4f9eff ) !important;
}

#wpsim-panel .wpsim-footer-social svg {
	width: 20px;
	height: 20px;
}

#wpsim-panel .wpsim-footer-legal {
	padding-top: 1rem;
	border-top: 1px solid rgba( 255, 255, 255, 0.12 );
	font-size: 0.85rem;
	opacity: 0.75;
}

#wpsim-panel .wpsim-footer-legal-heading {
	margin: 0 0 0.5rem;
	font-weight: 600;
}

#wpsim-panel .wpsim-footer-legal-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem 0.75rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

#wpsim-panel .wpsim-footer-legal-menu li {
	list-style: none !important;
	border-bottom: 0 !important;
}

#wpsim-panel .wpsim-footer-legal-menu a {
	display: inline;
	padding: 0.15rem 0;
	color: var( --wpsim-text, #fff ) !important;
	text-decoration: underline !important;
	font-size: 0.85rem;
}

#wpsim-panel .wpsim-footer-legal-menu a:hover,
#wpsim-panel .wpsim-footer-legal-menu a:focus-visible {
	color: var( --wpsim-accent, #4f9eff ) !important;
}

/* Trigger / Burger-Button */
.wpsim-trigger {
	position: fixed;
	top: 1rem;
	z-index: 100001;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 6px;
	background: var( --wpsim-bg, #1d1d1f );
	box-shadow: none !important;
	outline: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
	padding: 0;
}

.wpsim-trigger:focus-visible {
	outline: 2px solid var( --wpsim-accent, #4f9eff );
	outline-offset: 2px;
}

/* Ist der Besucher eingeloggt und die WordPress-Admin-Leiste sichtbar
   (Body-Klassen "logged-in admin-bar"), liegt sie ganz oben fixiert und
   würde sich sonst mit dem Trigger-Button überschneiden – Button in dem
   Fall etwas weiter nach unten rücken. */
body.logged-in.admin-bar .wpsim-trigger {
	top: 59px !important;
}

/* Bei offenem Menü übernimmt ausschließlich der Schließen-Button im Panel
   (.wpsim-close, eigenes ×) die Schließen-Funktion. Der äußere Trigger
   verwandelt sich per CSS ebenfalls optisch in ein X (siehe die
   aria-expanded-Regeln unten) – normalerweise liegt er dabei fast genau
   auf dem Schließen-Button, sodass beide X praktisch deckungsgleich
   wirken. Ist aber z. B. wegen der Admin-Leiste ein vertikaler Versatz
   zwischen beiden vorhanden, sind plötzlich zwei getrennte X sichtbar.
   Der Trigger rutscht deshalb bei offenem Menü hinter Overlay/Panel
   (niedrigerer z-index als .wpsim-slideinmenu), wird dadurch vom
   Panel-Hintergrund verdeckt und ist auch nicht mehr klickbar – die
   eigentliche Schließen-Funktion bleibt vollständig über
   .wpsim-close/Overlay-Klick/Escape erreichbar. */
body.wpsim-open .wpsim-trigger {
	z-index: 1;
}

.wpsim-trigger.wpsim-position-right {
	right: 1rem;
}

.wpsim-trigger.wpsim-position-left {
	left: 1rem;
}

.wpsim-trigger__bar {
	width: 22px;
	height: 2px;
	background: var( --wpsim-text, #fff );
	transition: transform var( --wpsim-speed, 300ms ) ease, opacity var( --wpsim-speed, 300ms ) ease;
}

.wpsim-trigger[aria-expanded="true"] .wpsim-trigger__bar:nth-child( 1 ) {
	transform: translateY( 7px ) rotate( 45deg );
}

.wpsim-trigger[aria-expanded="true"] .wpsim-trigger__bar:nth-child( 2 ) {
	opacity: 0;
}

.wpsim-trigger[aria-expanded="true"] .wpsim-trigger__bar:nth-child( 3 ) {
	transform: translateY( -7px ) rotate( -45deg );
}

@media ( prefers-reduced-motion: reduce ) {
	.wpsim-overlay,
	.wpsim-panel,
	#wpsim-panel .wpsim-screen,
	.wpsim-trigger__bar {
		transition-duration: 0.01ms !important;
	}
}