/* ==========================================================================
   Immenverein – Hauptmenü (klassisches WordPress-Menü mit Dropdowns)
   Desktop: horizontale Leiste, Untermenüs klappen beim Überfahren auf.
   Mobil (< 920px): Burger-Button, Menü als Panel, Untermenüs eingerückt.
   ========================================================================== */

.iv-nav { display: flex; align-items: center; }

/* ---------- Menüliste (Desktop) ---------- */

.iv-menu, .iv-menu ul { list-style: none; margin: 0; padding: 0; }
.iv-menu { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.iv-menu li { position: relative; }
.iv-menu a {
	text-decoration: none; font-weight: 500; font-size: 15.5px;
	color: var(--wp--preset--color--ink-soft, #5C5247);
	display: block; padding: 6px 0; transition: color .15s;
}
.iv-menu a:hover { color: var(--wp--preset--color--ink, #241C15); }

/* Pfeil bei Einträgen mit Untermenü */
.iv-menu .menu-item-has-children > a::after {
	content: "▾"; font-size: 11px; margin-left: 6px;
	color: var(--wp--preset--color--honey-deep, #D97706);
}

/* ---------- Dropdown (1. und 2. Ebene) ---------- */

.iv-menu .sub-menu {
	position: absolute; top: 100%; left: -16px; z-index: 1500;
	min-width: 230px; padding: 10px;
	background: #fff; border-radius: 14px;
	box-shadow: 0 18px 44px -14px rgba(36, 28, 21, .3);
	border: 1px solid rgba(36, 28, 21, .06);
	display: none;
}
.iv-menu li:hover > .sub-menu,
.iv-menu li:focus-within > .sub-menu { display: block; }
.iv-menu .sub-menu li { position: relative; }
.iv-menu .sub-menu a {
	padding: 9px 14px; border-radius: 9px; font-size: 15px;
}
.iv-menu .sub-menu a:hover { background: var(--wp--preset--color--cream, #FBF6EC); }
.iv-menu .sub-menu .menu-item-has-children > a::after { content: "▸"; }

/* 2. Ebene klappt seitlich auf */
.iv-menu .sub-menu .sub-menu { top: -10px; left: 100%; }

/* ---------- Hervorgehobener Eintrag (CSS-Klasse "nav-cta" im Menü) ---------- */

.iv-menu > .nav-cta > a {
	background: var(--wp--preset--color--honey, #EFA00B);
	color: var(--wp--preset--color--ink, #241C15);
	padding: 10px 20px; border-radius: 999px; font-weight: 600;
	box-shadow: 0 6px 18px -8px rgba(239, 160, 11, .6);
}
.iv-menu > .nav-cta > a:hover { background: var(--wp--preset--color--honey-soft, #FBBF24); }

/* ---------- Burger-Button ---------- */

.iv-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px 6px; }
.iv-nav-toggle span {
	display: block; width: 24px; height: 2.5px; margin: 5px 0;
	background: var(--wp--preset--color--ink, #241C15); border-radius: 2px; transition: .2s;
}
.iv-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.iv-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.iv-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Mobil ---------- */

@media (max-width: 920px) {
	.iv-nav-toggle { display: block; }
	.iv-nav-panel {
		display: none;
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--wp--preset--color--cream, #FBF6EC);
		padding: 18px 24px 24px;
		border-bottom: 1px solid rgba(36, 28, 21, .08);
		box-shadow: 0 24px 40px -20px rgba(36, 28, 21, .3);
	}
	.iv-nav-panel.iv-offen { display: block; }
	.iv-menu { flex-direction: column; align-items: stretch; gap: 2px; }
	.iv-menu a { padding: 11px 6px; font-size: 16.5px; }
	.iv-menu .sub-menu, .iv-menu li:hover > .sub-menu {
		display: block; position: static; min-width: 0;
		box-shadow: none; border: none; background: none;
		padding: 0 0 4px 18px;
	}
	.iv-menu > .nav-cta > a { text-align: center; margin-top: 10px; }
}