/*
Theme Name:     SoulKitchen Child
Template:       soulkitchen
Version:        1.03
Text Domain:    soulkitchenchild
*/
/* ==========================================================
   MESNERHAUS – SOULKITCHEN NATIVE NAVIGATION
   Desktop + 3-Level Dropdown + Responsive Menu

   Breakpoint entspricht:
   Customizer → Responsive Header Display = 1180px
   ========================================================== */

:root {
	--mh-nav-text: #272A39;
	--mh-nav-gold: #B1A470;
	--mh-nav-bg: #FFFFFF;
	--mh-nav-divider: rgba(39, 42, 57, 0.10);
	--mh-nav-shadow: 0 14px 34px rgba(39, 42, 57, 0.12);
	--mh-nav-dropdown-width: 220px;
}


/* ==========================================================
   DESKTOP / LAPTOP
   ========================================================== */

@media (min-width: 1181px) {

	/* Hauptnavigation immer in einer Zeile halten */
	#header-regular.header4 .main-navigation > ul,
	#header-regular.header4 .main-navigation > div > ul {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}

	#header-regular.header4 .main-navigation > ul > li > a,
	#header-regular.header4 .main-navigation > div > ul > li > a {
		white-space: nowrap;
		color: var(--mh-nav-text);
		transition: color 180ms ease;
	}


	/* ------------------------------------------------------
	   TOP LEVEL – Hover / Current / Keyboard Focus
	   ------------------------------------------------------ */

	#header-regular .main-navigation > ul > li:hover > a,
	#header-regular .main-navigation > ul > li:focus-within > a,
	#header-regular .main-navigation > ul > li.current-menu-item > a,
	#header-regular .main-navigation > ul > li.current-menu-ancestor > a,

	#header-regular .main-navigation > div > ul > li:hover > a,
	#header-regular .main-navigation > div > ul > li:focus-within > a,
	#header-regular .main-navigation > div > ul > li.current-menu-item > a,
	#header-regular .main-navigation > div > ul > li.current-menu-ancestor > a {
		color: var(--mh-nav-gold);
	}


	/* ------------------------------------------------------
	   KLEINER DOWN-ARROW BEI TOP-LEVEL-ITEMS
	   ------------------------------------------------------ */

	#header-regular .main-navigation > ul > li.menu-item-has-children > a::after,
	#header-regular .main-navigation > div > ul > li.menu-item-has-children > a::after {
		content: "";
		display: inline-block;

		width: 6px;
		height: 6px;

		margin-left: 9px;
		vertical-align: 3px;

		border-right: 1px solid currentColor;
		border-bottom: 1px solid currentColor;

		transform: rotate(45deg);
	}


	/* ------------------------------------------------------
	   EBENE 2 + EBENE 3 – PANEL
	   Wichtig:
	   Wir ändern NICHT display / visibility / left / top.
	   SoulKitchen behält seine eigene Menülogik.
	   ------------------------------------------------------ */

	#header-regular .main-navigation ul.sub-menu,
	#header-regular .main-navigation ul.children {
		box-sizing: border-box;

		width: var(--mh-nav-dropdown-width);
		min-width: var(--mh-nav-dropdown-width);
		max-width: var(--mh-nav-dropdown-width);

		padding: 8px 0;

		background: var(--mh-nav-bg);

		border-top: 1px solid var(--mh-nav-gold);

		box-shadow: var(--mh-nav-shadow);
	}


	/* Menüzeilen */

	#header-regular .main-navigation ul.sub-menu > li,
	#header-regular .main-navigation ul.children > li {
		box-sizing: border-box;

		width: 100%;

		margin: 0;
		padding: 0;

		border-bottom: 1px solid var(--mh-nav-divider);
	}

	#header-regular .main-navigation ul.sub-menu > li:last-child,
	#header-regular .main-navigation ul.children > li:last-child {
		border-bottom: 0;
	}


	/* Links Ebene 2 + 3 */

	#header-regular .main-navigation ul.sub-menu li > a,
	#header-regular .main-navigation ul.children li > a {
		box-sizing: border-box;

		display: flex;
		align-items: center;
		justify-content: space-between;

		width: 100%;
		min-height: 44px;

		padding: 11px 18px;

		color: var(--mh-nav-text);

		font-weight: 500;
		line-height: 1.35;

		text-decoration: none;
		white-space: normal;

		transition:
			color 180ms ease,
			background-color 180ms ease;
	}


	/* Hover / Current / Focus in Dropdowns */

	#header-regular .main-navigation ul.sub-menu li:hover > a,
	#header-regular .main-navigation ul.sub-menu li:focus-within > a,
	#header-regular .main-navigation ul.sub-menu li.current-menu-item > a,
	#header-regular .main-navigation ul.sub-menu li.current-menu-ancestor > a,

	#header-regular .main-navigation ul.children li:hover > a,
	#header-regular .main-navigation ul.children li:focus-within > a {
		color: var(--mh-nav-gold);
		background: var(--mh-nav-bg);
	}


	/* ------------------------------------------------------
	   EBENE 3 – Pfeil nach rechts
	   ------------------------------------------------------ */

	#header-regular .main-navigation ul.sub-menu > li.menu-item-has-children > a::after {
		content: "";

		flex: 0 0 auto;

		width: 6px;
		height: 6px;

		margin-left: 14px;

		border-right: 1px solid var(--mh-nav-gold);
		border-bottom: 1px solid var(--mh-nav-gold);

		transform: rotate(-45deg);
	}


	/* ------------------------------------------------------
	   TASTATURFOKUS
	   ------------------------------------------------------ */

	#header-regular .main-navigation a:focus-visible {
		outline: 2px solid var(--mh-nav-gold);
		outline-offset: 3px;
	}
}


/* ==========================================================
   TABLET / MOBILE
   SoulKitchen übernimmt weiterhin Öffnen/Schließen.
   Wir verändern nur Darstellung und Hierarchie.
   ========================================================== */

@media (max-width: 1180px) {

	.navi-wrap-responsive {
		background: var(--mh-nav-bg);
		color: var(--mh-nav-text);
	}


	/* Theme-Abstände vereinheitlichen */

	.navi-wrap-responsive .menu-item,
	.navi-wrap-responsive .page_item,
	.navi-wrap-responsive.navi-wrap-sidemenu .sub-menu .menu-item,
	.navi-wrap-responsive.navi-wrap-sidemenu .sub-menu .page_item {
		margin-top: 0;
		padding-top: 0;
	}


	/* SoulKitchen gibt Submenu-LIs standardmäßig 24px padding-left.
	   Die Einrückung steuern wir gezielter über die Links. */

	.navi-wrap-responsive .sub-menu .menu-item,
	.navi-wrap-responsive .sub-menu .page_item,
	.navi-wrap-responsive .children .menu-item,
	.navi-wrap-responsive .children .page_item {
		padding-left: 0;
	}


	/* Grundstil aller mobilen Links */

	.navi-wrap-responsive a {
		box-sizing: border-box;

		display: block;

		min-height: 44px;

		padding: 13px 52px 13px 0;

		color: var(--mh-nav-text);

		font-family: inherit;
		font-weight: 500;
		line-height: 1.35;

		text-decoration: none;

		transition: color 180ms ease;
	}


	/* ------------------------------------------------------
	   EBENE 1
	   ------------------------------------------------------ */

	.navi-wrap-responsive ul.responsive-menu > li > a {
		font-size: 15px;
		font-weight: 600;
		letter-spacing: 1.5px;
		text-transform: uppercase;
	}


	/* ------------------------------------------------------
	   EBENE 2
	   ------------------------------------------------------ */

	.navi-wrap-responsive
	ul.responsive-menu
	> li
	> ul.sub-menu
	> li
	> a {

		padding-left: 20px;

		font-size: 14px;
		font-weight: 500;
		letter-spacing: 1.2px;
		text-transform: uppercase;
	}


	/* ------------------------------------------------------
	   EBENE 3

	   Zusätzliche goldene Orientierungslinie.
	   ------------------------------------------------------ */

	.navi-wrap-responsive
	ul.responsive-menu
	> li
	> ul.sub-menu
	> li
	> ul.sub-menu {

		margin-left: 20px;
		padding-left: 14px;

		border-left: 1px solid rgba(177, 164, 112, 0.60);
	}

	.navi-wrap-responsive
	ul.responsive-menu
	> li
	> ul.sub-menu
	> li
	> ul.sub-menu
	> li
	> a {

		padding-left: 0;

		font-size: 13px;
		font-weight: 500;
		letter-spacing: 1px;
		text-transform: uppercase;
	}


	/* ------------------------------------------------------
	   HOVER / CURRENT / OFFENE SEKTION
	   ------------------------------------------------------ */

	.navi-wrap-responsive a:hover,
	.navi-wrap-responsive a:focus-visible,
	.navi-wrap-responsive .current-menu-item > a,
	.navi-wrap-responsive .current-menu-ancestor > a,
	.navi-wrap-responsive .menu-item-has-children.open > a {
		color: var(--mh-nav-gold);
	}


	/* Native SoulKitchen Plus-/Toggle-Symbole */

	.navi-wrap-responsive
	.menu-item.menu-item-has-children::after {

		color: var(--mh-nav-gold);

		-webkit-animation: none;
		animation: none;

		opacity: 0.70;
	}


	/* Tastatur */

	.navi-wrap-responsive a:focus-visible {
		outline: 2px solid var(--mh-nav-gold);
		outline-offset: 2px;
	}
}