/* =========================================================
   TRUENTO HEADER
   ========================================================= */


/* =========================================================
   HEADER-BREITE
   ========================================================= */

.header-main .container {
	width: 100%;
	max-width: var(--truento-content-width);

	margin-right: auto;
	margin-left: auto;
}


/* =========================================================
   TOPBAR
   ========================================================= */

#top-bar {
	background-color:
		var(--truento-anthrazit);
}

#top-bar,
#top-bar a,
#top-bar .nav > li > a {
	color:
		var(--truento-text-topbar);
}

#top-bar a:hover,
#top-bar .nav > li > a:hover {
	color:
		var(--truento-text-topbar-hover);
}


/* =========================================================
   DESKTOP – HAUPTNAVIGATION
   ========================================================= */

@media screen and (min-width: 850px) {

	/* Bezugspunkt für das exakt zentrierte Desktop-Logo. */
	body:not(.woocommerce-checkout)
	.header-main .header-inner {
		position: relative;

		display: flex;
		align-items: center;
	}

	/*
	 * Desktop-Reihenfolge:
	 * Navigation links, Logo geometrisch mittig,
	 * Konto und Warenkorb rechts.
	 * Der Checkout-Header bleibt davon unberührt.
	 */
	body:not(.woocommerce-checkout)
	.header-main .header-inner
	> .flex-left {
		align-self: center;
		align-items: center;

		order: 1;

		margin-right: auto;
	}

	body:not(.woocommerce-checkout)
	.header-main .header-inner
	> #logo {
		position: absolute;
		top: 50%;
		left: 50%;

		align-self: center;
		align-items: center;

		margin-right: 0;
		margin-left: 0;

		transform: translate(-50%, -50%);
	}

	body:not(.woocommerce-checkout)
	.header-main .header-inner
	> .flex-right {
		align-self: center;
		align-items: center;

		order: 3;

		margin-left: auto;
	}

	body:not(.woocommerce-checkout)
	.header-main .header-inner
	> #logo
	> a {
		display: flex;
		align-items: center;
		justify-content: center;

		height: 100%;
	}

	body:not(.woocommerce-checkout)
	.header-main .header-inner
	> #logo img {
		display: block;

		margin-top: 0;
		margin-bottom: 0;
	}


	/*
	 * Menü-UL mit normalen WordPress-Menüpunkten exakt
	 * horizontal in der Header-Mitte positionieren.
	 *
	 * ULs, die ausschließlich Konto oder Warenkorb
	 * enthalten, werden dadurch nicht erfasst.
	 */
	body:not(.woocommerce-checkout)
	.header-main
	.header-nav-main:has(
		> li.menu-item:not(.account-item):not(.cart-item)
	) {
		position: static;

		display: flex;
		align-items: center;
		justify-content: flex-start;
		column-gap: 36px;

		width: max-content;

		margin: 0;

		transform: none;
	}


	/*
	 * Flatsome-Abstände der einzelnen Menüpunkte aufheben.
	 * Der gleichmäßige Abstand wird zentral über column-gap
	 * am Menü gesteuert.
	 */
	.header-main
	.header-nav-main:has(
		> li.menu-item:not(.account-item):not(.cart-item)
	)
	> li.menu-item {
		margin-right: 0;
		margin-left: 0;
	}


	/* =====================================================
	   NORMALE MENÜLINKS
	   Flatsome-Geometrie und Typografie beibehalten
	   ===================================================== */

	.header-wrapper
	.header-nav-main
	> li.menu-item:not(.account-item):not(.cart-item)
	> a.nav-top-link {
		position: relative;

		color:
			var(--truento-anthrazit-dunkel);

		text-decoration: none;

		transition:
			color var(--truento-transition);
	}


	/* =====================================================
	   AKTIVE / HOVER-LINIE
	   ===================================================== */

	.header-wrapper
	.header-nav-main
	> li.menu-item:not(.account-item):not(.cart-item)
	> a.nav-top-link::after {
		position: absolute;

		right: 0;
		bottom: 6px;
		left: 0;

		height: 2px;

		content: "";

		background:
			var(--truento-rot);

		opacity: 0;

		transform:
			scaleX(.55);

		transform-origin:
			center;

		pointer-events: none;

		transition:
			opacity var(--truento-transition),
			transform var(--truento-transition);
	}


	/* Hover / Tastaturfokus */

	.header-wrapper
	.header-nav-main
	> li.menu-item:not(.account-item):not(.cart-item)
	> a.nav-top-link:hover,
	.header-wrapper
	.header-nav-main
	> li.menu-item:not(.account-item):not(.cart-item)
	> a.nav-top-link:focus-visible {
		color:
			var(--truento-rot);
	}

	.header-wrapper
	.header-nav-main
	> li.menu-item:not(.account-item):not(.cart-item)
	> a.nav-top-link:hover::after,
	.header-wrapper
	.header-nav-main
	> li.menu-item:not(.account-item):not(.cart-item)
	> a.nav-top-link:focus-visible::after {
		opacity: 1;

		transform:
			scaleX(1);
	}


	/* Aktueller Menüpunkt */

	.header-wrapper
	.header-nav-main
	> li.current-menu-item
	> a.nav-top-link,
	.header-wrapper
	.header-nav-main
	> li.current-menu-ancestor
	> a.nav-top-link,
	.header-wrapper
	.header-nav-main
	> li.current-product_cat-ancestor
	> a.nav-top-link {
		color:
			var(--truento-rot);
	}

	.header-wrapper
	.header-nav-main
	> li.current-menu-item
	> a.nav-top-link::after,
	.header-wrapper
	.header-nav-main
	> li.current-menu-ancestor
	> a.nav-top-link::after,
	.header-wrapper
	.header-nav-main
	> li.current-product_cat-ancestor
	> a.nav-top-link::after {
		opacity: 1;

		transform:
			scaleX(1);
	}


	/* =====================================================
	   KONTO UND WARENKORB
	   Keine Unterlinie, nur Farbwechsel
	   ===================================================== */

	.header-wrapper
	.account-item
	> a.nav-top-link,
	.header-wrapper
	.cart-item
	> a.nav-top-link {
		color:
			var(--truento-anthrazit-dunkel);

		transition:
			color var(--truento-transition);
	}

	.header-wrapper
	.account-item
	> a.nav-top-link:hover,
	.header-wrapper
	.account-item
	> a.nav-top-link:focus-visible,
	.header-wrapper
	.cart-item
	> a.nav-top-link:hover,
	.header-wrapper
	.cart-item
	> a.nav-top-link:focus-visible {
		color:
			var(--truento-rot);
	}

	/* Trenner zwischen Account und Warenkorb entfernen. */
	.header-wrapper
	.account-item
	+ .header-divider {
		display: none !important;
	}

	/* Nach dem entfernten Trenner einen ruhigen Icon-Abstand herstellen. */
	.header-wrapper
	.account-item
	+ .header-divider
	+ .cart-item {
		margin-left: 32px !important;
	}

	/* Flatsome-Pfeil am Account-Link und Account-Dropdown ausblenden. */
	.header-wrapper
	.account-item
	> a.nav-top-link::after,
	.header-wrapper
	.account-item
	> .nav-dropdown::before,
	.header-wrapper
	.account-item
	> .nav-dropdown::after,
	.header-wrapper
	.account-item
	.account-login-inner::before,
	.header-wrapper
	.account-item
	.account-login-inner::after {
		display: none !important;
		content: none !important;
		border: 0 !important;
	}

	/* Direkter Flatsome-Account-Link, unabhängig von der Elternstruktur. */
	.header-wrapper
	a.account-link::after,
	.header-wrapper
	a.account-login::after {
		display: none !important;
		content: none !important;
		width: 0 !important;
		height: 0 !important;
		border: 0 !important;
		opacity: 0 !important;
	}

	/* Das Dropdown folgt dem Account-Link als Geschwisterelement. */
	.header-wrapper
	a.account-link
	~ .nav-dropdown::before,
	.header-wrapper
	a.account-link
	~ .nav-dropdown::after,
	.header-wrapper
	a.account-link
	~ .sub-menu::before,
	.header-wrapper
	a.account-link
	~ .sub-menu::after {
		display: none !important;
		content: none !important;
		width: 0 !important;
		height: 0 !important;
		border: 0 !important;
		opacity: 0 !important;
	}

	/*
	 * Flatsome zeichnet den sichtbaren Pfeil am übergeordneten Dropdown-LI.
	 * Die Pseudoelemente bleiben als unsichtbare Hover-Brücke erhalten.
	 */
	.header-wrapper
	li.account-item.has-dropdown::before,
	.header-wrapper
	li.account-item.has-dropdown::after {
		background: transparent !important;
		border-color: transparent !important;
		box-shadow: none !important;
	}
}


/* =========================================================
   WARENKORB-ICON
   ========================================================= */

.header-cart-link .cart-icon strong {
	border-color:
		var(--truento-rot)
		!important;

	color:
		var(--truento-rot)
		!important;
}

.header-cart-link .cart-icon strong::after {
	border-color:
		var(--truento-rot)
		!important;
}

.header-cart-link:hover .cart-icon strong,
.header-cart-link:focus .cart-icon strong {
	background-color:
		var(--truento-rot)
		!important;

	border-color:
		var(--truento-rot)
		!important;

	color:
		var(--truento-weiss)
		!important;
}

.header-cart-link:hover .cart-icon strong::after,
.header-cart-link:focus .cart-icon strong::after {
	border-color:
		var(--truento-rot)
		!important;
}

/* =========================================================
   HEADER – TRENNLINIE ÜBER VOLLE BROWSERBREITE
   ========================================================= */

/* vorhandene Flatsome-Linie ausblenden */
.header-main .top-divider {
	display: none;
}

/* neue Linie direkt am vollständigen Header */
.header-main {
	border-bottom:
		1px solid var(--truento-linie-anthrazit-12);
}