/**
 * CSS-Fix für Vue-App Integration in TYPO3
 * Verhindert Layout-Konflikte zwischen Vue und TYPO3
 */

/* ===== MENU ICON COLORS ===== */

/* Aktive Menüeinträge: Weiße SVG-Icons grün färben */
#topnav a.text-drc-gruen-300 svg,
#topnav .text-drc-gruen-300 svg {
    filter: invert(0) sepia(1) saturate(10) hue-rotate(46.8deg) brightness(0.7) !important;
}

/* ===== ADAPTIVE NAVIGATION WIDTHS ===== */

/*
 * Die `desktopmenu:`-Utility soll laut Tailwind-Config nur >= 901px greifen.
 * Diese Overrides werden daher konsequent in eine min-width-Media-Query
 * eingeschlossen — sonst überschreiben sie mit !important auch die
 * Smartphone-Basisbreite `w-12` und das Top-Nav-Band läuft horizontal
 * aus dem Viewport heraus.
 */
@media (min-width: 901px) {
    /* Download-Center benötigt mehr Platz als Standard-Menüeinträge */
    .desktopmenu\:w-56 {
        width: 14rem !important; /* 224px bei großen Bildschirmen */
    }
}

/* Responsive Anpassungen für kleinere Desktops */
@media (min-width: 901px) and (max-width: 1400px) {
    .desktopmenu\:w-56 {
        width: 11rem !important; /* 176px */
    }
}

@media (min-width: 901px) and (max-width: 1200px) {
    .desktopmenu\:w-56 {
        width: 9rem !important; /* 144px */
    }
}

/* ===== Z-INDEX HIERARCHIE ===== */
/* Header: 10000, Navigation: 10001, Mobile-Menu: 10050, Vue PWA: 10100+ */

#topnav > div.flex.items-center.justify-start {
    position: relative;
    z-index: 10001 !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
}

#topnav > div.flex.items-center.justify-start a {
    position: relative;
    z-index: 10001 !important;
}

/* Suche und Abmelden unter der Navigation */
#topnav > div:not(.flex.items-center.justify-start):not(.flex-grow) {
    position: relative;
    z-index: 9999 !important;
}

/* ===== LAYOUT FIXES ===== */

/* Spacer darf Klicks nicht blockieren */
#topnav > div.flex-grow {
    pointer-events: none !important;
}

/* Menü-Links: Keine grüne Farbe, kein Unterstrich */
#topnav a,
#main-navigation a {
    color: inherit !important;
    text-decoration: none !important;
    font-weight: normal !important;
}

/* Menü-Links: Hover nur durch Hintergrundfarbe (nicht durch Textfarbe) */
#topnav a:hover,
#main-navigation a:hover {
    color: inherit !important;
    text-decoration: none !important;
}

/* Menüeinträge gleiche Höhe */
#topnav a > div {
    max-height: 32px !important;
    line-height: 32px !important;
}

#topnav a > div > span {
    line-height: normal !important;
}

/* Overflow verhindern */
#topnav {
    overflow: visible !important;
}

/* ===== TYPO3 BREAKPOINT PROTECTION ===== */

@media (min-width: 901px) {
    .desktopmenu\:hidden {
        display: none !important;
    }

    .desktopmenu\:w-40 {
        width: 10rem !important;
    }

    .desktopmenu\:w-44 {
        width: 11rem !important;
    }

    /* Auf Desktop: mobilemenu:hidden Elemente SICHTBAR (Text) */
    .mobilemenu\:hidden {
        display: inherit !important;
    }

    /* Auf Desktop: mobilemenu:block Elemente VERSTECKT (SVGs) */
    .mobilemenu\:block {
        display: none !important;
    }
}

/* ===== DESKTOP BREAKPOINT (> 900px) ===== */
@media (min-width: 901px) {
    /* Mobile Menü auf Desktop verstecken */
    #main-menu-btn {
        display: none !important;
    }

    #mobile-navigation {
        display: none !important;
    }
}

/* ===== MOBILE BREAKPOINT (<= 900px) ===== */
@media (max-width: 900px) {
    /* Auf Mobile: desktopmenu:hidden Elemente SICHTBAR (Burger-Button) */
    .desktopmenu\:hidden {
        display: flex !important;
    }

    /* Auf Mobile: mobilemenu:hidden Elemente VERSTECKT (Text, Navigation) */
    .mobilemenu\:hidden {
        display: none !important;
    }

    /* KRITISCH: Desktop-Navigation auf Mobile KOMPLETT verstecken */
    #main-navigation,
    nav#main-navigation,
    #main-bar #main-navigation {
        display: none !important;
    }

    /* Auf Mobile: mobilemenu:block Elemente SICHTBAR (SVGs/Icons) */
    .mobilemenu\:block {
        display: block !important;
    }

    /* KRITISCH: flex-grow Spacer vor dem Burger-Button ausblenden */
    #main-bar > .flex-grow {
        display: none !important;
    }

    /* KRITISCH: Burger-Button auf Mobile IMMER sichtbar */
    #main-menu-btn,
    #main-menu-btn.desktopmenu\:hidden,
    div#main-menu-btn,
    header #main-bar #main-menu-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: auto !important;
        height: auto !important;
        min-width: 40px !important;
        min-height: 30px !important;
    }

    /* Topnav horizontal */
    #topnav {
        display: flex !important;
        flex-direction: row !important;
    }

    /* Dropdown-Menüs müssen vertikal sein */
    .dsubmenu {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* ============================================================
 * Mobile Navigation
 * ------------------------------------------------------------
 * Der <nav id="mobile-navigation"> liegt als absolut positionierter
 * Wrapper (w-full h-full) über dem gesamten Seiteninhalt. Das
 * eigentliche Menü-Panel (#mobile-main-menu) wird per
 * -translate-x-full nach links aus dem Viewport geschoben, der
 * transparente Wrapper bleibt aber sichtbar und würde ohne
 * pointer-events:none alle Klicks auf darunterliegende Buttons/
 * Links blockieren.
 *
 * Zustände:
 *   - geschlossen (default):  Wrapper ist klick-transparent,
 *                             nur das Panel selbst (außerhalb
 *                             des Viewports) hat pointer-events.
 *   - geöffnet (.is-open):    Wrapper wird zur Backdrop und fängt
 *                             Klicks ein, um das Menü per Click-
 *                             outside zu schließen. Panel und
 *                             Submenüs bleiben interaktiv.
 * ============================================================ */
#mobile-navigation {
    z-index: 10050;
    pointer-events: none;
}

#mobile-navigation.is-open {
    pointer-events: auto;
}

#mobile-main-menu,
#mobile-navigation .submenu,
#mobile-navigation .subsubmenu {
    z-index: 10050;
    pointer-events: auto;
}

/*
 * Submenu- und Subsubmenu-Panels sind im Template mit
 * `absolute top-0 left-full -translate-x-full` positioniert.
 * Rechnerisch (left:100% + translateX(-100%)) liegen sie dadurch im
 * geschlossenen Zustand exakt über dem Hauptpanel (#mobile-main-menu)
 * und verdecken mit ihrem weißen/grauen Hintergrund die Top-Level-
 * Einträge — der grüne Streifen wirkt dann „leer".
 *
 * Da die Geöffnet-Logik (JS) nur `-translate-x-full` toggelt, wird die
 * Sichtbarkeit hier sauber an genau diese Klasse gekoppelt: solange
 * sie gesetzt ist (= geschlossen), bleibt das Panel ausgeblendet und
 * klick-transparent; beim Toggle fadet es sanft ein und gleitet
 * (Transform-Transition aus dem Template) an seine Zielposition.
 */
#mobile-navigation .submenu,
#mobile-navigation .subsubmenu {
    transition: transform 500ms ease-in, opacity 300ms ease-in;
}

#mobile-navigation .submenu.-translate-x-full,
#mobile-navigation .subsubmenu.-translate-x-full {
    opacity: 0;
    pointer-events: none;
}

/* Verhindere, dass die Vue-App das TYPO3-Layout beeinflusst */
#app {
    position: relative !important;
    z-index: 1 !important;
    height: auto !important;
    min-height: 100vh;
}

/* Stelle sicher, dass Vue-App-Container das Layout nicht stört */
body > #app {
    display: block !important;
}

/* Flexbox-Reset für Body, falls Vue es verändert */
body {
    display: block !important;
    position: relative !important;
}