/*
 * Custom Navigation – Untermenüs im barrierefreien Navigationsmenü von Contao.
 *
 * Alle Regeln gelten nur in der Desktop-Ansicht (body.nav-is-desktop) und nur in
 * Navigationsmodulen, in denen eine Einstellung der Erweiterung aktiv ist
 * (.custom-navigation). Die mobile Ansicht bleibt unverändert.
 */

/*
 * Geöffnete Untermenüs sind sichtbar – maßgeblich ist der Zustand, den Contao führt
 * (.nav-expanded), nicht :hover. Themes, die Untermenüs nur per :hover einblenden,
 * würden ein Untermenü sonst ausblenden, während die Maus darauf zufährt (Sicherheits-
 * dreieck, .nav-gehalten) oder nachdem sie zurückgekehrt ist (Wiedereinblenden).
 */
body.nav-is-desktop .custom-navigation:is([data-nav-dreieck], [data-nav-wiedereinblenden]) .navigation-main li.nav-expanded > ul,
body.nav-is-desktop .custom-navigation:is([data-nav-dreieck], [data-nav-wiedereinblenden]) .navigation-main li.nav-expanded > .ul-wrapper,
body.nav-is-desktop .custom-navigation:is([data-nav-dreieck], [data-nav-wiedereinblenden]) .navigation-main li.nav-expanded > .ul-wrapper > ul {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/*
 * Solange ein Untermenü gehalten wird oder ruht, bleiben alle anderen, nicht geöffneten
 * Untermenüs verborgen – auch dann, wenn ein Theme sie beim Überfahren per :hover zeigt.
 * Ruhende Menüpunkte selbst sind ausgenommen: Sie blenden aus wie beim Schließen.
 */
body.nav-is-desktop .custom-navigation .navigation-main:has(li.nav-gehalten, li.nav-ruht) li:not(.nav-expanded, .nav-ruht) > ul,
body.nav-is-desktop .custom-navigation .navigation-main:has(li.nav-gehalten, li.nav-ruht) li:not(.nav-expanded, .nav-ruht) > .ul-wrapper {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
}

/*
 * Ein- und Ausblenden (data-nav-animation): Contao zeigt Untermenüs über display. Mit
 * @starting-style und transition-behavior lässt sich das überblenden; Browser ohne diese
 * Möglichkeiten zeigen sie wie bisher ohne Übergang. Ist im System „Bewegung reduzieren“
 * eingestellt, entfällt die Überblendung.
 */
@media (prefers-reduced-motion: no-preference) {
    body.nav-is-desktop .custom-navigation[data-nav-animation] .navigation-main ul ul {
        transition-property: opacity, visibility, display;
        transition-duration: var(--custom-navigation-dauer, 150ms);
        transition-timing-function: ease;
        transition-behavior: allow-discrete;
    }

    /* Beim Schließen durchsichtig werden und keine Mausereignisse mehr annehmen. Was ein
       Theme per :hover zeigt, bleibt dessen Sache. */
    body.nav-is-desktop .custom-navigation[data-nav-animation] .navigation-main li:not(.nav-expanded, :hover) > ul,
    body.nav-is-desktop .custom-navigation[data-nav-animation] .navigation-main li:not(.nav-expanded, :hover) > .ul-wrapper > ul {
        opacity: 0;
        pointer-events: none;
    }

    /* Untermenüs innerhalb eines schließenden Menüpunkts verschwinden sofort: Contao
       positioniert seitliche Untermenüs nur, solange der Menüpunkt darüber geöffnet ist –
       beim Ausblenden sprängen sie sonst an eine andere Stelle. */
    body.nav-is-desktop .custom-navigation[data-nav-animation] .navigation-main li:not(.nav-expanded) li > ul,
    body.nav-is-desktop .custom-navigation[data-nav-animation] .navigation-main li:not(.nav-expanded) li > .ul-wrapper > ul {
        transition: none;
    }

    /* Beim Öffnen aus der Durchsichtigkeit heraus – mit derselben Gewichtung wie die
       Sichtbarkeitsregel oben, deshalb auch hier !important. */
    @starting-style {
        body.nav-is-desktop .custom-navigation[data-nav-animation] .navigation-main li.nav-expanded > ul,
        body.nav-is-desktop .custom-navigation[data-nav-animation] .navigation-main li.nav-expanded > .ul-wrapper > ul {
            opacity: 0 !important;
        }
    }
}

/* Schatten (data-nav-schatten): im Navigationsmodul ausdrücklich gewählt, daher mit Vorrang vor dem Theme. */
body.nav-is-desktop .custom-navigation[data-nav-schatten="mit"] .navigation-main ul ul {
    box-shadow: var(--custom-navigation-schatten, 1px 2px 15px 8px rgb(0 0 0 / 10%)) !important;
}

body.nav-is-desktop .custom-navigation[data-nav-schatten="ohne"] .navigation-main :is(ul ul, li > .ul-wrapper) {
    box-shadow: none !important;
}

/*
 * Symbol für Untermenüs: Die Symbole sind Masken und nehmen damit die Schriftfarbe an.
 * Sie zeigen nach rechts; in der ersten Ebene dreht Contao sie nach unten.
 * Anpassbar über --custom-navigation-symbol (url(…)) und --custom-navigation-symbol-groesse.
 */
.custom-navigation[data-nav-symbol="chevron"],
.custom-navigation[data-nav-symbol="keins"] {
    --custom-navigation-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
}

.custom-navigation[data-nav-symbol="pfeil"] {
    --custom-navigation-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.custom-navigation[data-nav-symbol="dreieck"] {
    --custom-navigation-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M9 6.5v11l7.5-5.5z'/%3E%3C/svg%3E");
}

/* Plus aus zwei Schichten: Beim Öffnen zieht sich der senkrechte Strich ein (Minus). */
.custom-navigation[data-nav-symbol="plus"] {
    --custom-navigation-symbol:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12'/%3E%3C/svg%3E");
}

/*
 * Farbe wie die Menüpunkte im Contao-Stylesheet (--nav-color, bei Hover, Fokus und aktiven
 * Punkten --nav-active-color). Sie wird direkt am Symbol gesetzt und hängt damit nicht von
 * der Schriftfarbe der Schaltfläche ab, die manche Themes festlegen.
 */
body.nav-is-desktop .custom-navigation[data-nav-symbol] .navigation-main li > .btn-toggle-submenu {
    --custom-navigation-farbe: var(--nav-color, currentColor);
}

body.nav-is-desktop .custom-navigation[data-nav-symbol] .navigation-main li > :is(a:hover, a:focus-visible, a.trail, strong) + .btn-toggle-submenu,
body.nav-is-desktop .custom-navigation[data-nav-symbol] .navigation-main li > .btn-toggle-submenu:is(:hover, :focus-visible) {
    --custom-navigation-farbe: var(--nav-active-color, currentColor);
}

/* Erste Ebene: Die Schaltfläche reicht über die volle Höhe des Menüpunkts, das Symbol sitzt damit mittig zur Zeile. */
body.nav-is-desktop .custom-navigation[data-nav-symbol] .navigation-main .level_1 > li > .btn-toggle-submenu {
    top: 0;
    bottom: 0;
    height: auto;
}

/*
 * Den Kasten des Symbols selbst festlegen: Manche Themes zeichnen eigene Symbole in
 * ::before/::after der Schaltfläche. Mit gewähltem Symbol gilt nur noch dieses.
 */
body.nav-is-desktop .custom-navigation[data-nav-symbol] .navigation-main li > .btn-toggle-submenu::before {
    content: none;
}

body.nav-is-desktop .custom-navigation[data-nav-symbol] .navigation-main li > .btn-toggle-submenu::after {
    content: "";
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    background: var(--custom-navigation-farbe, currentColor);
    filter: none;
    -webkit-mask-image: var(--custom-navigation-symbol);
    mask-image: var(--custom-navigation-symbol);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: var(--custom-navigation-symbol-groesse, 20px);
    mask-size: var(--custom-navigation-symbol-groesse, 20px);
}

/* Ab der zweiten Ebene dreht Contao das Symbol nicht; Verschiebungen eines Themes aufheben. */
body.nav-is-desktop .custom-navigation[data-nav-symbol] .navigation-main ul ul li > .btn-toggle-submenu::after {
    transform: none;
}

/* Seitliche Untermenüs, die wegen Platzmangels nach links öffnen: Symbol spiegeln. */
body.nav-is-desktop .custom-navigation[data-nav-symbol] .navigation-main ul ul li:has(> ul.bounds-right, > .ul-wrapper > ul.bounds-right) > .btn-toggle-submenu::after,
body.nav-is-desktop .custom-navigation[data-nav-symbol] .navigation-main ul ul ul.bounds-right li > .btn-toggle-submenu::after {
    transform: scaleX(-1);
}

/* Plus und Minus werden nicht gedreht: Geöffnet zieht sich der senkrechte Strich ein. */
body.nav-is-desktop .custom-navigation[data-nav-symbol="plus"] .navigation-main li.submenu > .btn-toggle-submenu::after {
    transform: none;
    -webkit-mask-size: var(--custom-navigation-symbol-groesse, 20px) var(--custom-navigation-symbol-groesse, 20px), var(--custom-navigation-symbol-groesse, 20px) var(--custom-navigation-symbol-groesse, 20px);
    mask-size: var(--custom-navigation-symbol-groesse, 20px) var(--custom-navigation-symbol-groesse, 20px), var(--custom-navigation-symbol-groesse, 20px) var(--custom-navigation-symbol-groesse, 20px);
}

body.nav-is-desktop .custom-navigation[data-nav-symbol="plus"] .navigation-main li.submenu.nav-expanded > .btn-toggle-submenu::after {
    -webkit-mask-size: var(--custom-navigation-symbol-groesse, 20px) var(--custom-navigation-symbol-groesse, 20px), var(--custom-navigation-symbol-groesse, 20px) 0;
    mask-size: var(--custom-navigation-symbol-groesse, 20px) var(--custom-navigation-symbol-groesse, 20px), var(--custom-navigation-symbol-groesse, 20px) 0;
}

/* Kein Symbol: Der Schalter bleibt für die Tastatur erreichbar und zeigt sich mit dem Fokus. */
body.nav-is-desktop .custom-navigation[data-nav-symbol="keins"] .navigation-main li > .btn-toggle-submenu:not(:focus-visible)::after {
    visibility: hidden;
}

/*
 * Wechsel zwischen offen und geschlossen: Die Symbole drehen sich (bzw. das Plus zieht sich
 * ein) mit einem eigenen Übergang, denn manche Themes überschreiben den von Contao.
 */
@media (prefers-reduced-motion: no-preference) {
    body.nav-is-desktop .custom-navigation[data-nav-symbol] .navigation-main li > .btn-toggle-submenu::after {
        transition-property: transform, background-color, -webkit-mask-size, mask-size;
        transition-duration: var(--custom-navigation-dauer, 0.3s);
        transition-timing-function: ease-in-out;
    }
}

/* Kontrastmodus: Die Hintergrundfarbe würde sonst durch die Seitenfarbe ersetzt – das Symbol verschwände. */
@media (forced-colors: active) {
    body.nav-is-desktop .custom-navigation[data-nav-symbol] .navigation-main li > .btn-toggle-submenu::after {
        forced-color-adjust: none;
        background: ButtonText;
    }
}