/**
 * base_verticalmenu – Thin-HTML Lazy Loading: poprawki CSS
 * Wersja 5 – minimalna i bezpieczna
 *
 * Celowo rezygnujemy z overflow-y:auto na listach kategorii.
 * Powód: overflow-y:auto + overflow-x:visible = niemożliwe w CSS —
 * przeglądarka wymusza overflow-x:auto, co przycina zagnieżdżone podmenu
 * i niszczy białe tła elementów. Długa lista jest akceptowalna.
 *
 * Trzy zadania tego pliku:
 * 1. Odblokować overflow:hidden na .menu-dropdown (szablon ToolPart)
 *    żeby zagnieżdżone podmenu mogły wychodzić poza rodzica.
 * 2. Ukryć placeholder <ul> przed załadowaniem AJAX
 *    żeby nie pojawiał się jako cienka kreska.
 * 3. Pokazać podmenu lazy po dodaniu przez JS klasy menu-dropdown.
 */

@media (min-width: 992px) {

    /* Fix 1: odblokowanie overflow – podmenu mogą wychodzić poza rodzica.
       Używamy selektora ID (#base-menu-vertical) dla wyższej specyficzności
       niż klasa szablonu (.base-menu-vertical). */
    #base-menu-vertical .menu-dropdown {
        overflow: visible;
    }

    /* Fix 2: placeholder przed załadowaniem AJAX – całkowicie niewidoczny.
       Klasa menu-dropdown jest dodawana przez JS dopiero po wypełnieniu treścią. */
    #base-menu-vertical ul.lazy-submenu-vertical:not(.menu-dropdown) {
        display: none !important;
    }

    /* Fix 3: po dodaniu menu-dropdown przez JS – podmenu widoczne na hover.
       Obsługuje poziomy 2–5 (lazy-ładowane przez AJAX). */
    #base-menu-vertical li.level-2:hover > ul.menu-dropdown.lazy-submenu-vertical,
    #base-menu-vertical li.level-3:hover > ul.menu-dropdown.lazy-submenu-vertical,
    #base-menu-vertical li.level-4:hover > ul.menu-dropdown.lazy-submenu-vertical,
    #base-menu-vertical li.level-5:hover > ul.menu-dropdown.lazy-submenu-vertical {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }
}

@media (max-width: 991px) {

    /* Mobile: placeholder niewidoczny przed załadowaniem */
    #base-menu-vertical ul.lazy-submenu-vertical:not(.menu-dropdown) {
        display: none !important;
    }

    /* Mobile: po załadowaniu – zgodnie z oryginalnym Bootstrap collapse */
    #base-menu-vertical ul.menu-dropdown.lazy-submenu-vertical {
        display: none;
    }

    #base-menu-vertical ul.menu-dropdown.lazy-submenu-vertical.in,
    #base-menu-vertical ul.menu-dropdown.lazy-submenu-vertical.collapse.in {
        display: block;
    }
}