/*
 * Synapsenbrenner - Mega-Menue (17.09.2026). Beschreibung und Rueckbau in block.php.
 * Gilt nur fuer Hauptpunkte mit Klasse sb-mega (Menue-Einstellung "CSS-Klassen").
 * Theme-Umfeld (gemessen): 1rem = 10px, Menue-Umbruch bei 1200 px, Links Source Sans 3,
 * Hauptpunkte mit Unterstrich ueber ::before, :focus ohne Umriss.
 */

@media (min-width: 1200px) {
	/* Panel: alle Spalten in einer Reihe, auf die Inhaltsbreite der Seiten (1240 px) gezogen */
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu {
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		column-gap: 3.2rem;
		padding: 4rem max(2.4rem, calc((100% - 124rem) / 2)) 4.8rem;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu:before {
		background-color: var(--sb-petrol-800, #06302f);
		box-shadow: 0 40px 60px rgba(2, 28, 30, 0.35);
	}
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		padding: 0 !important;
	}

	/* Spaltenkopf: Rausch, Kontinent, Land */
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li > a {
		display: flex;
		align-items: baseline;
		gap: 0.8rem;
		margin: 0 0 1.2rem;
		padding: 0 0 1.2rem;
		border-bottom: 2px solid rgba(255, 255, 255, 0.16);
		background: none;
		font-family: var(--sb-schrift-titel, 'Montserrat', sans-serif);
		font-size: 1.7rem;
		font-weight: 700;
		line-height: 1.3;
		color: var(--sb-gelb, #e5de00);
		white-space: normal;
		transition: color 0.2s ease, border-color 0.2s ease;
	}
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li:not(.sb-mega-cta) > a::after {
		content: '\2192';
		font-family: var(--sb-schrift-text, 'Source Sans 3', sans-serif);
		font-weight: 400;
		transition: transform 0.2s ease;
	}
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li > a:hover,
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li > a:focus-visible {
		background: none;
		color: var(--sb-weiss, #fff);
		border-bottom-color: var(--sb-gelb, #e5de00);
	}
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li > a:hover::after,
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li > a:focus-visible::after {
		transform: translateX(4px);
	}

	/* Dritte Ebene: Erlebnisse, Laender, Orte */
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu .dropdown-menu {
		float: none;
		min-width: 0;
		margin: 0;
		padding: 0;
	}
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu .dropdown-menu > li > a {
		display: block;
		padding: 0.5rem 0;
		background: none;
		font-size: 1.6rem;
		line-height: 1.35;
		color: rgba(255, 255, 255, 0.82);
		white-space: normal;
		text-decoration: none;
		transition: color 0.15s ease;
	}
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu .dropdown-menu > li > a:hover,
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu .dropdown-menu > li > a:focus-visible {
		background: none;
		color: var(--sb-weiss, #fff);
		text-decoration: underline;
		text-decoration-color: var(--sb-gelb, #e5de00);
		text-underline-offset: 4px;
	}

	/* "Mehr" und "Weniger" aus dem Theme-Skript */
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu .dropdown-menu > li.menu-toggle-item > a {
		margin-top: 0.4rem;
		font-size: 1.5rem;
		font-weight: 700;
		color: var(--sb-gelb, #e5de00);
	}
	header .navbar-nav > li.sb-mega .menu-toggle-more::after {
		content: ' \2193';
	}
	header .navbar-nav > li.sb-mega .menu-toggle-less::after {
		content: ' \2191';
	}

	/* Karte am Ende eines Mega-Menues (Klasse sb-mega-cta) */
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li.sb-mega-cta {
		flex: 0 0 22rem;
	}
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li.sb-mega-cta > a {
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		min-height: 15rem;
		margin: 0;
		padding: 2.4rem;
		border: 0;
		border-radius: var(--sb-radius, 20px);
		background: var(--sb-gelb, #e5de00);
		font-size: 1.9rem;
		line-height: 1.25;
		color: var(--sb-petrol-900, #021c1e);
		transition: background-color 0.2s ease, transform 0.2s ease;
	}
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li.sb-mega-cta > a::after {
		content: '\2192';
		margin-top: 1.6rem;
		font-size: 2.8rem;
		line-height: 1;
	}
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li.sb-mega-cta > a:hover,
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li.sb-mega-cta > a:focus-visible {
		background: var(--sb-weiss, #fff);
		color: var(--sb-petrol-900, #021c1e);
		transform: translateY(-2px);
	}

	/* Hauptpunkte: sichtbarer Tastatur-Fokus (das Theme nimmt den Umriss weg) */
	header .navbar-nav > li.sb-mega > a:focus-visible,
	header .navbar-nav > li.sb-menue-matcher > a:focus-visible {
		box-shadow: 0 0 0 2px var(--sb-gelb, #e5de00);
		border-radius: 8px;
	}
	header .navbar-nav li.sb-mega .dropdown-menu a:focus-visible {
		box-shadow: none;
	}

	/* Erlebnis-Matcher als gelber Knopf neben "Meine Bucket List" */
	header .navbar-nav > li.sb-menue-matcher {
		margin: 6px 0.8rem 0 0.4rem;
	}
	header .navbar-nav > li.sb-merk-menue {
		margin-top: 6px;
	}
	header .navbar-nav > li.sb-menue-matcher > a {
		padding: 8px 16px;
		border: 1px solid var(--sb-gelb, #e5de00);
		border-radius: 999px;
		background: var(--sb-gelb, #e5de00);
		font-weight: 600;
		color: var(--sb-petrol-900, #021c1e) !important;
		transition: background-color 0.2s ease;
	}
	header .navbar-nav > li.sb-menue-matcher > a::before,
	header .navbar-nav > li.sb-menue-matcher > a::after {
		content: none !important;
	}
	header .navbar-nav > li.sb-menue-matcher > a:hover,
	header .navbar-nav > li.sb-menue-matcher > a:focus-visible {
		background: var(--sb-weiss, #fff);
		border-color: var(--sb-weiss, #fff);
	}
	header .navbar-nav li.sb-mega-alle {
		display: none;
	}
}

@media (max-width: 1199px) {
	/* Handy: Karten und Matcher als gelbe Links, "... ansehen" leicht hervorgehoben */
	header .navbar-nav > li.sb-mega.hasMegaMenu.menu-item-has-children > .dropdown-menu > li.sb-mega-cta > a,
	header .navbar-nav > li.sb-menue-matcher > a {
		font-weight: 700;
		color: var(--sb-gelb, #e5de00) !important;
	}
	header .navbar-nav li.sb-mega-alle > a {
		font-weight: 700;
	}
	header .navbar-nav li.sb-mega-alle > a::after {
		content: ' \2192';
	}
}