/*
 * Off-Canvas-Menü und mobile Kopfzeile.
 *
 * Das Plugin aweos-offcanvas-menu liefert ein reinschwarzes Panel mit weißem
 * Rand und Menüpunkten in Arial. Hier wird es an die Seite angepasst.
 * Zusätzlich fährt die Kopfzeile in der Burger-Ansicht mit, Divi fixiert sie
 * von sich aus nur ab 981 px.
 *
 * Die --cl-*-Variablen sind nicht auf jeder Seite definiert (Impressum und
 * Datenschutz laden landing.css nicht), deshalb überall ein Rückfallwert.
 */

/* ------------------------------------------------------------------ *
 * 1. Kopfzeile in der Burger-Ansicht mitscrollen
 * ------------------------------------------------------------------ */
@media (max-width: 980px) {
	.et_fixed_nav #main-header,
	#main-header {
		position: fixed !important;
		top: 0 !important;
		/* backdrop-filter ist schon gesetzt, der Kopf bleibt also durchscheinend */
	}

	/* Beim geöffneten Menü nicht mitscrollen lassen */
	body.offcanvas-open {
		overflow: hidden;
	}
}

/* ------------------------------------------------------------------ *
 * 2. Panel
 * ------------------------------------------------------------------ */
#offcanvas_container {
	/* Breite als Variable, weil das Plugin den geschlossenen Zustand mit
	   left: -240px festverdrahtet. Beide Werte müssen zusammenpassen, sonst
	   ragt das Panel im geschlossenen Zustand ins Bild. */
	--cl-oc-breite: min(86vw, 320px);
	width: var(--cl-oc-breite) !important;
	left: calc(-1 * var(--cl-oc-breite)) !important;
	background: var(--cl-white, #FFFFFF) !important;
	border-right: none !important;
	box-shadow: 0 0 60px rgba(0, 0, 0, 0.18);
	display: flex;
	flex-direction: column;
}

.offcanvas-menu-background {
	background: rgba(28, 28, 26, 0.42) !important;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

/* ------------------------------------------------------------------ *
 * 3. Kopfzeile des Panels mit Schließen-Knopf
 * ------------------------------------------------------------------ */
#offcanvas_container .close-sidebar-inner {
	background: transparent !important;
	min-height: 80px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 22px !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
	cursor: pointer;
}

#offcanvas_container .close-sidebar-inner > span:first-child {
	font-family: var(--cl-font-body, 'Inter', sans-serif) !important;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cl-warm-grey, #9C9B92) !important;
	background: none !important;
}

/* Kreuz als CSS-Zeichnung statt als Schriftzeichen */
#offcanvas_container .close-sidebar-inner .fa {
	position: relative;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.04);
	font-size: 0 !important;
	flex-shrink: 0;
	transition: background 0.25s var(--cl-ease, cubic-bezier(.4, 0, .2, 1));
}

#offcanvas_container .close-sidebar-inner .fa::before,
#offcanvas_container .close-sidebar-inner .fa::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 1.5px;
	border-radius: 2px;
	background: var(--cl-dark-grey, #484848);
	transition: background 0.25s var(--cl-ease, cubic-bezier(.4, 0, .2, 1));
}

#offcanvas_container .close-sidebar-inner .fa::before { transform: translate(-50%, -50%) rotate(45deg); }
#offcanvas_container .close-sidebar-inner .fa::after  { transform: translate(-50%, -50%) rotate(-45deg); }

#offcanvas_container .close-sidebar-inner:hover .fa { background: var(--cl-ocker-bg, rgba(191, 167, 98, 0.10)); }
#offcanvas_container .close-sidebar-inner:hover .fa::before,
#offcanvas_container .close-sidebar-inner:hover .fa::after { background: var(--cl-ocker, #BFA762); }

/* ------------------------------------------------------------------ *
 * 4. Menüpunkte
 * ------------------------------------------------------------------ */
#offcanvas_container #offcanvas_menu_inner {
	padding: 6px 0 !important;
	margin: 0 !important;
	list-style: none !important;
	overflow-y: auto;
}

#offcanvas_container #offcanvas_menu_inner li.menu-item > a {
	display: block;
	font-family: var(--cl-font-heading, 'Montserrat', sans-serif) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	color: var(--cl-dark-grey, #484848) !important;
	padding: 16px 22px !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
	transition: color 0.2s var(--cl-ease, cubic-bezier(.4, 0, .2, 1)),
	            background 0.2s var(--cl-ease, cubic-bezier(.4, 0, .2, 1));
}

#offcanvas_container #offcanvas_menu_inner > li.menu-item:last-child > a {
	border-bottom: none !important;
}

#offcanvas_container #offcanvas_menu_inner li.menu-item > a:hover,
#offcanvas_container #offcanvas_menu_inner li.menu-item.current-menu-item > a {
	color: var(--cl-ocker, #BFA762) !important;
	background: var(--cl-ocker-bg, rgba(191, 167, 98, 0.10)) !important;
}

/* aufgeklappter Elternpunkt */
#offcanvas_container #offcanvas_menu_inner > li.menu-item.menu-item-has-children.visible > a {
	color: var(--cl-ocker, #BFA762) !important;
	background: var(--cl-ocker-bg, rgba(191, 167, 98, 0.10)) !important;
}

/* Pfeil des Elternpunkts */
#offcanvas_container #offcanvas_menu_inner li.menu-item-has-children > a::after {
	color: var(--cl-ocker, #BFA762) !important;
	right: 20px !important;
}

/* ------------------------------------------------------------------ *
 * 5. Untermenü
 * ------------------------------------------------------------------ */
#offcanvas_container #offcanvas_menu_inner .sub-menu {
	background: var(--cl-muted-bg, #FAFAF8) !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
}

#offcanvas_container #offcanvas_menu_inner .sub-menu li.menu-item > a {
	font-family: var(--cl-font-body, 'Inter', sans-serif) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	padding: 13px 22px 13px 38px !important;
	color: var(--cl-dark-grey, #484848) !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
	position: relative;
}

/* Punkt vor dem Untermenüeintrag, gezeichnet statt als Zeichen */
#offcanvas_container #offcanvas_menu_inner .sub-menu li.menu-item > a::before {
	content: '';
	position: absolute;
	left: 22px;
	top: 50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--cl-ocker, #BFA762);
	opacity: 0.5;
	transform: translateY(-50%);
}

#offcanvas_container #offcanvas_menu_inner .sub-menu li.menu-item:last-child > a {
	border-bottom: none !important;
}

/* ------------------------------------------------------------------ *
 * 6. Gegen das Inline-CSS des Plugins
 *
 * Das Plugin gibt sein CSS als <style> im wp_head aus, also NACH diesem
 * Stylesheet. Für die Kopfzeile benutzt es zusätzlich
 *   html body #offcanvas_container div.close-sidebar-inner { … !important }
 * Deshalb hier eine Stufe höhere Spezifität (zusätzliches div vor der id).
 * ------------------------------------------------------------------ */
html body div#offcanvas_container div.close-sidebar-inner,
html body div#offcanvas_container .close-sidebar-inner {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--cl-warm-grey, #9C9B92) !important;
}

/* Pfeil des Elternpunkts: das Plugin legt ihm einen schwarzen Kasten unter */
html body div#offcanvas_container #offcanvas_menu_inner li.menu-item-has-children > a::after,
html body div#offcanvas_container #offcanvas_menu_inner > li.menu-item-has-children > a::after,
html body div#offcanvas_container #offcanvas_menu_inner .sub-menu li.menu-item-has-children > a::after {
	background: none !important;
	background-color: transparent !important;
	color: var(--cl-ocker, #BFA762) !important;
	width: 24px !important;
	height: 24px !important;
	padding: 0 !important;
	margin: 0 !important;
	right: 18px !important;
	border-radius: 0 !important;
	text-shadow: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: none !important;
}

/* Rahmen rechts sicher weg, auch wenn das Plugin ihn setzt */
html body div#offcanvas_container {
	border-right: none !important;
}

/* ------------------------------------------------------------------ *
 * 7. Pfeil-Hintergrund: Spezifität des Inline-CSS überbieten
 *
 * Das Plugin setzt
 *   #offcanvas_container #offcanvas_menu_inner > li.menu-item.menu-item-has-children > a::after
 *   { background-color: #000 !important }
 * Das sind zwei Klassen. Eine Regel mit nur einer Klasse verliert trotz
 * !important, deshalb hier dieselben Klassen plus zusätzliche Elemente.
 * ------------------------------------------------------------------ */
html body div#offcanvas_container ul#offcanvas_menu_inner > li.menu-item.menu-item-has-children > a::after,
html body div#offcanvas_container ul#offcanvas_menu_inner > li.menu-item > ul.sub-menu li.menu-item.menu-item-has-children > a::after,
html body div#offcanvas_container ul#offcanvas_menu_inner ul.sub-menu li.menu-item.menu-item-has-children > a::after {
	background: none !important;
	background-color: transparent !important;
	color: var(--cl-ocker, #BFA762) !important;
	width: 24px !important;
	height: 24px !important;
	padding: 0 !important;
	margin: 0 !important;
	right: 16px !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	font-size: 18px !important;
}

/* die Variable, die app.css benutzt, gleich mit entschärfen */
#offcanvas_container,
#offcanvas_container #offcanvas_menu_inner {
	--arrow-background: transparent;
}

/* ------------------------------------------------------------------ *
 * 8. Geschlossener Zustand und Hintergrundfläche an die Breite koppeln
 * ------------------------------------------------------------------ */
body.offcanvas-open #offcanvas_container {
	left: 0 !important;
}

body.offcanvas-open #offcanvas_container + .offcanvas-menu-background {
	left: min(86vw, 320px) !important;
	width: 100% !important;
}