/**
 * agenic Komponenten-CSS – nav-item (Atom) — vollständige Übertragung.
 *
 * Figma-Quelle: Set `nav-item` (684:241, Seite 0.5, Sektion `02 · Atoms`,
 * 16 Varianten, gemessen 20.08.2026):
 *   State = Default · Hover · Aktiv · Disabled → CSS-States, kein Control
 *   Theme = light · dark                       → --dark
 *   Type  = Pill · Text                        → --pill / --text
 *
 * Gemessene Werte (identisch über alle Varianten, wo nicht anders vermerkt):
 *   Radius        999            → Values/radius/max
 *   Polster Pill  8 / 16         → Values/spacing/s · Values/spacing/m
 *   Polster Text  8 / 12         → Values/spacing/s · Values/spacing/ms
 *   Abstand       8              → Values/spacing/s
 *   Typo Default  Copy/M         → Inter Light 16/21, -2 %
 *   Typo Hover    Button/M       → Inter Medium (nur Type=Text)
 *   Typo Aktiv    Headline/S     → Inter Medium
 *   Hover light   hover-tint         6 %  (nur Type=Pill; Type=Text wechselt nur die Schrift)
 *   Hover dark    hover-tint--inverse 10 %
 *   Aktiv light   Surface/brand-subtle
 *   Aktiv dark    hover-tint--inverse 10 %
 *
 * Farbe ist nie alleiniger Bedeutungsträger: „aktiv" trägt zusätzlich das
 * Schriftgewicht, „disabled" zusätzlich `aria-disabled` und den Cursor.
 *
 * Markup-Partial: includes/render-nav-item.php. Konsumenten: ag_nav_item, ag_subnavi.
 * Kontrakt: KONTRAKT-ag-subnavi-20-08.md §10. 0 tmp-Punkte.
 *
 * Kit-Härtung: Das Atom rendert ein <a>. `.elementor-kit-7 a` hat Spezifität
 * (0,1,1) und schlägt jede Einzelklasse — deshalb liegen Grundblock UND
 * Farbregeln auf Doppelklasse (0,2,0). Kein !important.
 */

.ag-nav-item,
.ag-nav-item * {
	box-sizing: border-box;
}

.ag-nav-item.ag-nav-item {
	/* L3 mit L2-Defaults */
	--ag-nav-item-fg: var(--color-text-standard);                     /* Figma Text/standard */
	--ag-nav-item-fg-disabled: var(--color-text-disabled);            /* Figma Text/disabled */
	--ag-nav-item-bg: transparent;
	--ag-nav-item-bg-hover: var(--color-interaction-hover-tint);      /* Figma Interaction/hover-tint 6 % */
	--ag-nav-item-bg-aktiv: var(--color-surface-brand-subtle);        /* Figma Surface/brand-subtle */
	--ag-nav-item-radius: var(--radius-max);                          /* Figma radius/max = 999 */
	--ag-nav-item-pad-y: var(--spacing-s);                            /* Figma spacing/s = 8 */
	--ag-nav-item-pad-x: var(--spacing-m);                            /* Figma spacing/m = 16 (Pill) */
	--ag-nav-item-gap: var(--spacing-s);                              /* Figma spacing/s = 8 */

	display: inline-flex;
	align-items: center;
	gap: var(--ag-nav-item-gap);
	padding: var(--ag-nav-item-pad-y) var(--ag-nav-item-pad-x);
	border: 0;
	border-radius: var(--ag-nav-item-radius);
	background: var(--ag-nav-item-bg);
	color: var(--ag-nav-item-fg);
	font-family: var(--font-sans);
	/* Text Style Digital/General/Copy/M: Inter Light 16/21, -2 % */
	font-size: var(--fs-300);
	line-height: calc(21 / 16);
	font-weight: var(--fw-light);
	letter-spacing: -0.02em;
	text-align: start;
	text-decoration: none;
	transition: background-color var(--motion-dauer, 180ms) var(--motion-easing, ease),
		color var(--motion-dauer, 180ms) var(--motion-easing, ease);
}

/* Type=Text — engeres Polster, keine Fläche */
.ag-nav-item.ag-nav-item--text {
	--ag-nav-item-pad-x: var(--spacing-ms);                           /* Figma spacing/ms = 12 */
	--ag-nav-item-bg-hover: transparent;
	--ag-nav-item-bg-aktiv: transparent;
}

/* Über die volle Breite (Listen in der Subnavi) */
.ag-nav-item.ag-nav-item--voll {
	display: flex;
	width: 100%;
}

/* ── Zustände ───────────────────────────────────────────────────────────── */

/*
 * Hover nur auf echten Zielen.
 *
 * Bis 6.25.0 hing der Zustand an der Klasse allein — und traf damit auch die
 * Fassung OHNE Link, die das Partial als <span> rendert (render-nav-item.php
 * Z. 87–94). Eine Beschreibungszeile im Untermenü wechselte beim Überfahren
 * das Schriftgewicht von 200 auf 500, obwohl es nichts zu klicken gab
 * (gemessen 20.09.2026; Befund Vincent: „es hovert grad automatisch über die
 * Beschreibungstexte auch wenn gar kein Link gesetzt ist"). Hover ist ein
 * Versprechen auf Interaktion — wo keine ist, darf er nicht stehen.
 *
 * Zwei Fälle bleiben erwünscht und sind deshalb einzeln benannt:
 *   1. das Element IST das Ziel (<a> oder <button>);
 *   2. das Element ist eine statische Beschriftung INNERHALB eines Ziels —
 *      so baut `subnavi-card-item · Typ=weitere` seine Auslöser-Karte
 *      (Kontrakt ag_subnavi v0.2 §6a): der Titel ist ein <span> im <button>.
 *
 * `:where()` zählt nicht in die Spezifität — die Doppelklasse bleibt damit
 * bei (0,2,0) und schlägt die Kit-Regeln weiter wie vorher.
 */
:where(a, button).ag-nav-item.ag-nav-item:hover,
:where(a, button).ag-nav-item.ag-nav-item:focus-visible,
:where(a, button):hover .ag-nav-item.ag-nav-item,
:where(a, button):focus-visible .ag-nav-item.ag-nav-item {
	background: var(--ag-nav-item-bg-hover);
	color: var(--ag-nav-item-fg);
}

/* Type=Text: Hover trägt Button/M — Schrift statt Fläche (Figma gemessen) */
:where(a, button).ag-nav-item.ag-nav-item--text:hover .ag-nav-item__label,
:where(a, button).ag-nav-item.ag-nav-item--text:focus-visible .ag-nav-item__label,
:where(a, button):hover .ag-nav-item.ag-nav-item--text .ag-nav-item__label,
:where(a, button):focus-visible .ag-nav-item.ag-nav-item--text .ag-nav-item__label {
	font-weight: var(--fw-medium);
}

.ag-nav-item.ag-nav-item--aktiv {
	background: var(--ag-nav-item-bg-aktiv);
	color: var(--ag-nav-item-fg);
}

/* Aktiv trägt zusätzlich Headline/S — Gewicht, nicht nur Fläche */
.ag-nav-item.ag-nav-item--aktiv .ag-nav-item__label {
	font-weight: var(--fw-medium);
}

.ag-nav-item.ag-nav-item--disabled {
	color: var(--ag-nav-item-fg-disabled);
	background: transparent;
	cursor: not-allowed;
	pointer-events: none;
}

.ag-nav-item.ag-nav-item:visited {
	color: var(--ag-nav-item-fg);
}

.ag-nav-item.ag-nav-item:focus-visible {
	outline: 2px solid var(--color-interaction-focus, currentColor);
	outline-offset: 2px;
}

/* ── Theme=dark ─────────────────────────────────────────────────────────── */

.ag-nav-item.ag-nav-item--dark {
	/* Figma Text/inverse = #ebf1f2 → im Code --color-text-inverse-soft.
	   Nicht --color-text-inverse nehmen, das ist reines Weiß (tokens.css Z. 254). */
	--ag-nav-item-fg: var(--color-text-inverse-soft);
	--ag-nav-item-bg-hover: var(--color-interaction-hover-tint-inverse); /* 10 % */
	--ag-nav-item-bg-aktiv: var(--color-interaction-hover-tint-inverse);
}

.ag-nav-item.ag-nav-item--dark.ag-nav-item--text {
	--ag-nav-item-bg-hover: transparent;
	--ag-nav-item-bg-aktiv: transparent;
}

.ag-nav-item.ag-nav-item--dark.ag-nav-item--disabled {
	color: var(--ag-nav-item-fg-disabled);
}

.ag-nav-item.ag-nav-item--dark:visited {
	color: var(--ag-nav-item-fg);
}

/* ── Label ──────────────────────────────────────────────────────────────── */

.ag-nav-item .ag-nav-item__label {
	/* Umbruch erlauben: englische Beschriftungen laufen länger als deutsche. */
	min-width: 0;
	overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
	.ag-nav-item.ag-nav-item {
		transition: none;
	}
}