/* =====================================================
   HEADER & MEGA MENU
   Ehemals im Customizer ("Zusätzliches CSS"), jetzt als
   eigenes File. Enthält:
   1. Header/Navbar (Desktop ≥961px)
   2. Mega Menü (Desktop ≥961px) – Grid-Layout
   3. Legacy-Regeln für das mobile Menü ≤960px
      (müssen NACH mobile-menu-style.css laden,
      Enqueue deshalb mit Abhängigkeit 'sd-mobile-menu')
   ===================================================== */

header#masthead {
	margin-bottom: -4px;
}

body.op-navbar-fixed .page-container {
	padding-top: 80px;
}

.op-navbar {
	border: none;
}

/* =====================================================
   1. HEADER / NAVBAR – Desktop
   ===================================================== */
@media (min-width: 961px) {

	body {
		overflow-x: hidden;
	}

	.navbar-nav > li:not(:last-child) {
		display: inline-flex;
		height: 60px;
		align-items: center;
	}

	.navbar {
		padding-inline: 20px !important;
	}

	.op-navbar .navbar-nav > .menu-item > a {
		color: #fff !important;
		font-size: 17px !important;
		text-transform: none;
		white-space: nowrap;
	}

	nav.op-navbar.navbar.navbar-default.op-navbar-fixed.op-navbar-fixed-header-style-full.header-style-full {
		border-bottom-left-radius: 32px;
		border-bottom-right-radius: 32px;
	}

	.op-navbar {
		height: 80px;
	}

	.navbar-header {
		flex: 0 0 80px;
	}

	div#navbar {
		flex: 1 1 500px;
		min-width: 0;
		padding-right: 220px;
	}

	/* Fix: Navigation darf nicht in eine zweite Zeile umbrechen
	   (wurde vorher bei <1400px umgebrochen und abgeschnitten) */
	.op-navbar .navbar-nav {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		text-align: center;
	}


	/* CTA Button */
	li.nav-cta {
		position: absolute;
		right: 36px;
		top: 20px;
		background: #FA862C;
		border-radius: 8px;
		margin-top: 0px;
	}

	li.nav-cta a {
		line-height: 32px !important;
		font-weight: 600 !important;
	}

	nav.fixed li.nav-cta {
		top: 13px;
	}


	/* =====================================================
	   2. MEGA MENU – Panel
	   Grid statt CSS-Columns: Spalte 1 = alles bis
	   einschließlich li.cl-break-after, Spalte 2 = Rest.
	   Dadurch kann kein Inhalt mehr zwischen den Spalten
	   "wandern", egal wie klein der Viewport ist. Wird der
	   Inhalt höher als das Panel, wird gescrollt.
	   ===================================================== */

	.mega-menu > .sub-menu {
		position: fixed;
		left: 0;
		top: 64px;
		width: 100vw;
		/* feste Höhe = Panel deckt wie bisher den ganzen Viewport ab;
		   Grid bricht dadurch (anders als columns) nicht um,
		   zu hoher Inhalt wird stattdessen gescrollt */
		height: calc(100vh - 64px);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-bottom-color: #dd8e18;
		/* minmax(0,…): Spalten dürfen schmaler werden als das längste
		   Wort, sonst läuft das Grid bei ~1024px rechts aus dem Viewport */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		/* max-content nötig: mit auto-Zeilen berechnet Chromium die erste
		   Zeile sonst nach min-height der .top-Items statt nach Inhalt
		   (Items überlappen dann) */
		grid-auto-rows: max-content;
		grid-auto-flow: row dense;
		align-items: start;
		column-gap: 40px;
		padding-inline: max(32px, calc(50vw - 640px));
		padding-top: 64px;
		padding-bottom: 48px;
		backdrop-filter: blur(10px);
		background-color: #ffffffdd;
		/* Trennlinie zwischen den Spalten */
		background-image: url(/wp-content/uploads/2024/03/mega-bg-trenner_2-1.svg);
		background-repeat: repeat-y;
		background-position: center top;
		background-size: 4px;
		background-attachment: local;
	}

	/* Sichtbar-Zustand: Theme setzt display:block über
	   :hover (nicht-Touch), .menu-item--hover und .sub-menu--active –
	   hier jeweils auf grid heben (Selektoren müssen spezifischer
	   sein als die Theme-Regeln in all.css) */
	.op-not-touch-device .navbar-menu .mega-menu.menu-item:hover > .sub-menu,
	.navbar-menu .mega-menu.menu-item--hover > .sub-menu,
	.navbar-menu .mega-menu.sub-menu--active > .sub-menu {
		display: grid;
	}

	/* Spaltenzuordnung */
	.mega-menu > .sub-menu > li {
		grid-column: 1;
	}

	/* Beide .top-Einträge auf volle Zeilenhöhe strecken, damit ihre
	   Trennlinien in beiden Spalten auf gleicher Höhe liegen –
	   unabhängig von der Textlänge */
	.mega-menu > .sub-menu > li.top {
		align-self: stretch;
	}

	.mega-menu > .sub-menu > li.cl-break-after ~ li {
		grid-column: 2;
	}

	/* Schließen-x: fixiert oben rechts, kollidiert nicht mehr
	   mit dem Inhalt (vorher right:80px mitten im Text) */
	.mega-menu > .sub-menu::after {
		content: "x";
		position: fixed;
		right: 20px;
		top: 76px;
		width: 44px;
		height: 44px;
		background: #eee;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30px;
		cursor: pointer;
	}

	/* Toggle über JS (mega-menu.js) */
	body.hide-mega .mega-menu > .sub-menu {
		display: none !important;
	}

	nav.fixed .mega-menu > .sub-menu {
		top: 58px;
		height: calc(100vh - 58px);
	}


	/* ----- Inhalte / Typografie ----- */

	.mega-menu .sub-menu li.menu-item strong {
		display: block;
		margin-bottom: 16px;
		font-size: 22px !important;
	}

	.mega-menu .sub-menu li a {
		font-size: 18px !important;
		line-height: 1.3em !important;
		color: #192B32 !important;
		/* lange Begriffe (z.B. Dienstunfähigkeitsversicherung) dürfen
		   bei schmalen Spalten umbrechen */
		hyphens: auto;
		overflow-wrap: break-word;
	}

	.mega-menu .sub-menu .top {
		border-bottom: 2px solid #d6d6d6 !important;
		padding-bottom: 24px !important;
		min-height: 80px !important;
		margin-bottom: 24px !important;
	}

	.op-navbar .navbar-nav li .sub-menu a:hover {
		background-color: transparent !important;
	}

	.op-navbar .navbar-nav li .sub-menu li:hover > a {
		background-color: transparent !important;
	}

	/* Icons: Einzug für Icon-Fläche */
	.op-navbar .navbar-nav li .sub-menu a {
		padding: 24px 24px 24px 136px;
	}

	/* Unterpunkt-Pfeil */
	.mega-menu .menu-item {
		background-image: url(/wp-content/uploads/2024/03/arrow-right-long-solid.svg);
		background-repeat: no-repeat;
		background-size: 40px;
		background-position: 72px 16px;
	}

	/* Top-Punkt: Tafel-Icon als Default */
	.mega-menu .menu-item.top {
		background-image: url(/wp-content/uploads/2024/03/chalkboard-user-solid.svg);
		background-repeat: no-repeat;
		background-size: 56px;
		background-position: 32px 32px;
	}

	/* Tafel */
	li#menu-item-2460 {
		background-image: url(/wp-content/uploads/2024/03/chalkboard-user-solid.svg);
	}

	/* Buch */
	li#menu-item-3218 {
		background-image: url(/wp-content/uploads/2024/03/book-solid.svg);
	}

	/* User */
	li#menu-item-2492, li#menu-item-783 {
		background-image: url(/wp-content/uploads/2024/03/user-solid.svg);
		background-size: 40px;
	}

	/* Spacer (aktuell keine im Menü, Regel als Absicherung) */
	.mega-menu .menu-item.spacer {
		opacity: 0 !important;
	}

}

/* Kompaktere Navigation, bevor es eng wird
   (verhindert Abschneiden bei 961–1440px) */
@media (min-width: 961px) and (max-width: 1440px) {
	.op-navbar .navbar-nav > .menu-item > a {
		font-size: 15px !important;
		padding-left: 12px;
		padding-right: 12px;
	}

	div#navbar {
		padding-right: 200px;
	}
}

/* Mega-Menü-Panel bei schmalen Desktops kompakter:
   etwas kleinere Schrift + reduzierter Icon-Einzug, damit lange
   Begriffe (Dienstunfähigkeitsversicherung …) einzeilig bleiben */
@media (min-width: 961px) and (max-width: 1280px) {
	.mega-menu .sub-menu li.menu-item strong {
		font-size: 19px !important;
	}

	.mega-menu .sub-menu li a {
		font-size: 16px !important;
	}

	.op-navbar .navbar-nav li .sub-menu a {
		padding: 20px 24px 20px 104px;
	}

	/* Pfeile und Icons entsprechend nachziehen */
	.mega-menu .menu-item {
		background-size: 36px;
		background-position: 48px 14px;
	}

	.mega-menu .menu-item.top {
		background-size: 44px;
		background-position: 28px 28px;
	}

	li#menu-item-2492, li#menu-item-783 {
		background-size: 36px;
	}
}

/* Noch kompakter unter 1200px (Logo + CTA lassen wenig Platz) */
@media (min-width: 961px) and (max-width: 1200px) {
	.op-navbar .navbar-nav > .menu-item > a {
		font-size: 14px !important;
		padding-left: 8px;
		padding-right: 8px;
	}

	div#navbar {
		padding-right: 190px;
		padding-left: 16px;
	}
}

/* Engste Stufe bis 1100px: kleinere Schrift + minimale Abstände,
   sonst läuft "Über mich" in den CTA-Button */
@media (min-width: 961px) and (max-width: 1100px) {
	.op-navbar .navbar-nav > .menu-item > a {
		font-size: 13px !important;
		padding-left: 5px;
		padding-right: 5px;
	}

	div#navbar {
		padding-right: 170px;
		padding-left: 8px;
	}

	li.nav-cta {
		right: 24px;
	}
}

/* Schmales Band 961–1020px: Logo leicht verkleinern, damit die
   zentrierte Navigation nicht ins Logo läuft (unter 961px greift
   ohnehin das mobile Menü) */
@media (min-width: 961px) and (max-width: 1020px) {
	.op-navbar .navbar-brand img {
		width: 180px;
		height: auto;
	}
}

/* =====================================================
   MENÜ-SPLIT Desktop / Mobile
   Das Snippet "Mobile Menü (Location + Ausgabe)" rendert das
   Menü der Location "Mobile Menü" als ul.nav-mobile direkt
   hinter dem Desktop-Menü. Sichtbarkeit pro Breakpoint:
   ===================================================== */

/* Mobiles Menü auf Desktop ausblenden (samt WP-Container-DIV) */
@media (min-width: 961px) {
	ul.navbar-nav.nav-mobile,
	#navbar > div:has(> ul.nav-mobile) {
		display: none !important;
	}
}

/* Desktop-Menü auf Mobile ausblenden – aber nur, wenn ein
   mobiles Menü existiert (sonst bliebe das Off-Canvas-Menü
   leer, solange die Location nicht belegt ist).
   Wichtig: den ganzen WP-Container-DIV ausblenden, nicht nur
   die UL – der leere Container bekäme sonst die min-height aus
   mobile-menu-style.css und schöbe das mobile Menü aus dem Bild. */
@media (max-width: 960px) {
	#navbar:has(ul.nav-mobile) > div:has(> ul.navbar-nav:not(.nav-mobile)) {
		display: none !important;
	}
}


/* =====================================================
   3. LEGACY – Mobiles Menü ≤960px
   Unverändert aus dem Customizer übernommen. Muss NACH
   mobile-menu-style.css laden (überschreibt dort einzelne
   Werte, so wie es vorher durch die Reihenfolge
   Customizer-CSS > Datei-CSS der Fall war).
   ===================================================== */
@media (max-width: 960px) {

	nav.op-navbar.navbar.navbar-default.op-navbar-fixed.op-navbar-fixed-header-style-full.header-style-full {
		border-bottom-left-radius: 16px;
		border-bottom-right-radius: 16px;
	}

	.mega-menu {
		display: none !important;
	}

	.op-navbar .navbar-nav > li > a {
		border: none;
		font-size: 20px !important;
		font-weight: 600 !important;
	}

	.op-navbar .navbar-menu a {
		text-transform: none;
	}

	.sub-menu a {
		font-size: 16px !important;
		padding-left: 32px !important;
	}

	.sub-menu .sub-menu a {
		font-size: 12px !important;
		padding-left: 48px !important;
	}

	/* CTA Button (klassenbasiert, damit es auch im separaten
	   Mobile-Menü greift – Klasse "nav-cta" am Menüpunkt pflegen;
	   Spezifität muss die generischen li/a-Regeln schlagen) */
	.op-navbar .navbar-nav > li.nav-cta {
		background: #FA862C;
		border-radius: 8px;
		color: #fff !important;
		margin: 16px 24px 0px;
	}

	.op-navbar .navbar-nav > li.nav-cta > a {
		color: #fff !important;
		font-size: 16px !important;
		text-align: center;
	}

	/* Background Color */
	div#navbar {
		background: #f7f7f7 !important;
	}

}