/* ═══════════════════════════════════════════════════════
   SAR Mega-Menü "Reiseziele" (Kontinent-Tabs oben,
   Länder des aktiven Kontinents in Spalten darunter)
   ═══════════════════════════════════════════════════════

   Positionierung nach dem Muster von Neves eigenem Mega-Menü-CSS
   (themes/neve/assets/css/mega-menu.css): li ohne eigene Position,
   Panel absolut zentriert zur Header-Row, Breite = var(--container).
   Aufklappen rein per CSS (:hover / :focus-within am li). */

/* Ohne diese Regel wuerde sich das absolute Panel am nav-Container
   ausrichten statt an der Header-Row (Neve setzt das nur, wenn ein
   eigenes Neve-Mega-Menü aktiv ist). */
.header--row .builder-item.has-nav {
	position: static;
}

/* Grundzustand: zu. Im Off-Canvas rendert der Server statt des Panels
   ein normales verschachteltes Untermenü (Neve-Markup, native Toggles). */
.sar-mega-panel {
	display: none;
}

/* ─── Off-Canvas: Button-Komponenten nebeneinander ───
   Neve stapelt Header-Builder-Komponenten im Sidebar-Menü untereinander
   (.builder-item ist block, .item--inner bekommt width: 100%). Die
   Button-Komponenten (Beratung, Merkliste) sollen nebeneinander stehen;
   der Sidebar-Container ist display: block, inline-block reicht daher. */
.header-menu-sidebar .builder-item:has( > .item--inner[class*="builder-item--button"] ) {
	display: inline-block;
	width: auto;
	vertical-align: top;
	margin-right: 8px;
}

.header-menu-sidebar .builder-item > .item--inner[class*="builder-item--button"] {
	width: auto;
}

@media (min-width: 960px) {

	/* !important, weil der Punkt jetzt zusätzlich menu-item-has-children
	   trägt und Neve solchen li position: relative für normale Dropdowns
	   gibt; das würde das Panel am li statt an der Header-Row ausrichten. */
	li.sar-mega,
	.header--row .nv-nav-wrap .primary-menu-ul li.sar-mega {
		position: unset !important;
	}

	li.sar-mega > .sar-mega-panel {
		display: none;
		position: absolute;
		left: 50%;
		right: unset;
		transform: translateX(-50%);
		top: auto;
		width: var(--container);
		max-width: 100%;
		background: #fff;
		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
		border-top: 3px solid #e87722;
		z-index: 300;
	}

	li.sar-mega:hover > .sar-mega-panel,
	li.sar-mega:focus-within > .sar-mega-panel {
		display: block;
	}

	.sar-mega-panel__inner {
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px 24px 24px;
	}

	/* ─── Kontinent-Tabs (Kacheln-Reihe oben) ─── */

	.sar-mega-panel__tabs {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding-bottom: 16px;
		margin-bottom: 16px;
		border-bottom: 1px solid #e3e8ee;
	}

	.sar-mega-panel__tab {
		display: inline-block;
		/* Neve gibt Links innerhalb von Menü-li width: 100%; im Flex-
		   Container landet dadurch jeder Tab auf einer eigenen Zeile.
		   Breite deshalb hart auf Inhaltsbreite zurücksetzen. */
		width: auto !important;
		flex: 0 0 auto;
		padding: 9px 18px;
		background: #f2f5f8;
		color: #1a3a5c;
		font-weight: 600;
		font-size: 15px;
		line-height: 1.2;
		text-decoration: none;
		cursor: pointer;
	}

	.sar-mega-panel__tab:hover,
	.sar-mega-panel__tab:focus,
	.sar-mega-panel__tab.is-active {
		background: #1a3a5c;
		color: #fff;
	}

	/* ─── Länderliste des aktiven Kontinents ─── */

	.sar-mega-panel__pane {
		display: none;
	}

	.sar-mega-panel__pane.is-active {
		display: block;
	}

	ul.sar-mega-panel__list {
		columns: 160px;
		column-gap: 28px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.sar-mega-panel__list li {
		break-inside: avoid;
		margin: 0;
	}

	.sar-mega-panel__list a {
		display: block;
		padding: 4px 0;
		color: #1a3a5c;
		font-size: 15px;
		line-height: 1.4;
		text-decoration: none;
	}

	.sar-mega-panel__list a:hover,
	.sar-mega-panel__list a:focus {
		color: #e87722;
		text-decoration: underline;
	}
}