/* =========================================================
   advotec – Hauptnavigation: Hover- und Active-Zustand
   =========================================================

   Verwendung: CSS-Klassen am Nav-Menu-Widget im Theme Builder
       adv-nav adv-nav--dark    Kopfzeile 55  (weiss auf #1F3566)
       adv-nav adv-nav--light   Kopfzeile 1102 (#1F3566 auf weiss)

   Der Balken haengt am <li>, nicht am <a>. Grund: Elementor besetzt
   .elementor-item::before/::after selbst fuer seine Pointer-Effekte, und
   zwar u.a. mit
       .elementor-item:not(:hover):not(:focus):not(.elementor-item-active):not(.highlighted):after
   Das sind fuenf Klassen Spezifitaet plus die pro-Widget-Regel
   (.elementor-55 .elementor-element.elementor-element-be1f9d7 …) obendrauf.
   Dagegen anzuschreiben ginge nur mit !important. Das <li> ist unbesetzt.

   Textfarben bleiben in Elementor einstellbar (Reiter Normal/Hover/Active).
   Hier steht ausschliesslich die Geometrie des Balkens.
   ========================================================= */

.adv-nav {
	/* Balken */
	--adv-nav-bar-height: 2px;          /* Hover */
	--adv-nav-bar-height-active: 3px;   /* Active – eine Spur kraeftiger */
	--adv-nav-bar-inset: 20px;          /* = horizontales Padding von .elementor-item */
	--adv-nav-bar-bottom: 6px;          /* Abstand zur Unterkante des Menuepunkts */
	--adv-nav-bar-width: .8;            /* Anteil der Textbreite, linksbuendig */

	/* Schraege am rechten Balkenende, Richtung wie bei .slanted-button.
	   Als Vielfaches der Balkenhoehe, damit Hover und Active denselben Winkel
	   haben. Das Marken-Verhaeltnis (20px Versatz auf 32px Hoehe = 0,625)
	   ergaebe auf 2px Hoehe gut 1px – optisch nicht wahrnehmbar. 1,35 ist der
	   flachste Wert, bei dem die Kante als Schraege lesbar bleibt, ohne in eine
	   duenne Spitze auszulaufen. Groesser = spitzer. */
	--adv-nav-slant-ratio: 1.35;

	/* Farben. Hover = Textfarbe, Active = advotec | Ember. */
	--adv-nav-bar-color: currentColor;
	--adv-nav-bar-color-active: #EC6608;

	/* Schriftstaerke des aktiven Menuepunkts (uebrige Punkte: 400) */
	--adv-nav-weight-active: 700;

	--adv-nav-duration: 420ms;
	--adv-nav-ease: cubic-bezier(.16, 1, .3, 1);
}

.adv-nav--dark {
	--adv-nav-bar-color: #FFFFFF;
}

.adv-nav--light {
	--adv-nav-bar-color: #1F3566;
}

/* Elementors eigene Pointer-Pseudoelemente stilllegen. Bei pointer = none
   bekommen sie zwar keine Groesse, aber .elementor-item-active:after hebt die
   opacity:0-Regel wieder auf – uebrig bleibt ein weisser Splitter links am
   Balken. Betrifft nur .adv-nav, andere Menues behalten ihre Pointer. */
.adv-nav .elementor-nav-menu--main .elementor-item::before,
.adv-nav .elementor-nav-menu--main .elementor-item::after {
	display: none;
}

/* Nur die horizontale Hauptnavigation. Das Burger-Dropdown
   (.elementor-nav-menu--dropdown) bleibt unangetastet. */
.adv-nav .elementor-nav-menu--main > .elementor-nav-menu > li {
	position: relative;
}

.adv-nav .elementor-nav-menu--main > .elementor-nav-menu > li::after {
	content: "";
	position: absolute;
	left: var(--adv-nav-bar-inset);
	right: auto;
	/* Textbreite = Elementbreite minus dem Padding auf beiden Seiten */
	width: calc((100% - 2 * var(--adv-nav-bar-inset)) * var(--adv-nav-bar-width));
	bottom: var(--adv-nav-bar-bottom);
	height: var(--adv-nav-bar-height);
	background-color: var(--adv-nav-bar-color);
	pointer-events: none;

	/* Elementor benutzt exakt dieses li::after als Menue-Trenner
	   (.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(:last-child)::after
	    mit border-left-width: 2px). Solange content dort "none" ist, greift das
	   nicht – unser content: "" aktiviert die Regel aber mit, und der weisse
	   border-left sass als Klotz am linken Balkenende. Darum: Rahmen weg. */
	border: 0;

	--adv-nav-slant: calc(var(--adv-nav-bar-height) * var(--adv-nav-slant-ratio));
	-webkit-clip-path: polygon(0 0, 100% 0, calc(100% - var(--adv-nav-slant)) 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--adv-nav-slant)) 100%, 0 100%);

	/* Ruhezustand: eingeklappt nach rechts. Beim Verlassen laeuft der Balken
	   also nach rechts raus, beim Betreten von links rein. */
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition:
		transform var(--adv-nav-duration) var(--adv-nav-ease),
		height 220ms var(--adv-nav-ease),
		background-color 220ms linear;
}

.adv-nav .elementor-nav-menu--main > .elementor-nav-menu > li:hover::after,
.adv-nav .elementor-nav-menu--main > .elementor-nav-menu > li:focus-within::after {
	transform: scaleX(1);
	transform-origin: 0 50%;
}

/* Active. Muss nach der Hover-Regel stehen: gleiche Spezifitaet, spaetere
   Regel gewinnt – damit bleibt ein aktiver Punkt auch beim Hovern kraeftig.
   .current-menu-item setzt WordPress am <li>; fuer die Detailseiten der
   Custom Post Types ergaenzt es includes/nav-active-state.php. */
.adv-nav .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-item::after,
.adv-nav .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-ancestor::after,
.adv-nav .elementor-nav-menu--main > .elementor-nav-menu > li:has(> .elementor-item-active)::after {
	transform: scaleX(1);
	transform-origin: 0 50%;
	/* Nicht height setzen, sondern die Variable: dann zieht die Schraege im
	   clip-path oben automatisch mit und der Winkel bleibt gleich. */
	--adv-nav-bar-height: var(--adv-nav-bar-height-active);
	background-color: var(--adv-nav-bar-color-active);
}

/* Der aktive Punkt steht auch in der Schrift kraeftiger. Die Regel muss die
   pro-Widget-Regel von Elementor schlagen
   (.elementor-55 .elementor-element.elementor-element-be1f9d7 .elementor-nav-menu .elementor-item{font-weight:400}) –
   deshalb die lange Kette. */
.adv-nav .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-item > .elementor-item,
.adv-nav .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-ancestor > .elementor-item,
.adv-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item.elementor-item-active {
	font-weight: var(--adv-nav-weight-active);
}

@media (prefers-reduced-motion: reduce) {
	.adv-nav .elementor-nav-menu--main > .elementor-nav-menu > li::after {
		transform: scaleX(1);
		transform-origin: 0 50%;
		opacity: 0;
		transition: opacity 150ms linear, background-color 150ms linear;
	}

	.adv-nav .elementor-nav-menu--main > .elementor-nav-menu > li:hover::after,
	.adv-nav .elementor-nav-menu--main > .elementor-nav-menu > li:focus-within::after,
	.adv-nav .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-item::after,
	.adv-nav .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-ancestor::after,
	.adv-nav .elementor-nav-menu--main > .elementor-nav-menu > li:has(> .elementor-item-active)::after {
		opacity: 1;
	}
}