/* =========================================
   1. ZÁKLADNÉ NASTAVENIA (FARBY)
   ========================================= */
@media screen and (max-width: 767px) {
    /* Tučný čierny text pre kategórie */
    .navigation-in ul li a b {
        font-weight: bold;
        color: black;
    }
    
    /* MODRÁ LIŠTA (SPÄŤ) - Level 2 a 3 */
    .navigation-in ul li.ext.exp > a, 
    .navigation-in ul li.ext.exp > div > a {
        background-color: #016ABB !important;
        color: white !important;
    }
    /* Biely text a šípky v modrej lište */
    .navigation-in li.ext.exp > a *,
    .navigation-in li.ext.exp > a .submenu-arrow::after,
    .navigation-in li.ext.exp > div > a .submenu-arrow::after,
    .navigation-in ul li.ext.exp > div > .submenu-arrow::after {
        color: white !important;
        border-color: white !important;
    }
    .navigation-in li.ext.exp > a .submenu-arrow,
    .navigation-in li.ext.exp > div > .submenu-arrow {
        border-right: 0px !important;
    }
}

/* =========================================
   2. ROZLOŽENIE (LAYOUT)
   ========================================= */
@media (max-width: 767px) {
    
    /* Skrytie starých veľkých obrázkov */
    #navigation .menu li a img,
    #navigation .menu li a.menu-image {
        display: none !important;
    }

    /* --- A. BEŽNÝ RIADOK MENU (Zoznam) --- */
    /* Platí pre Level 1, 2, 3 (pokiaľ to nie je tá modrá lišta) */
    
    #navigation .menu li a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Všetko doľava */
        position: relative !important;
        min-height: 50px !important;
        padding: 10px 50px 10px 15px !important; /* Pravý padding 50px pre šípku! */
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* IKONA */
    .auto-mobile-icon {
        display: block !important;
        width: 30px !important;
        height: 30px !important;
        margin-right: 15px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        flex-shrink: 0 !important;
    }

    /* TEXT (b alebo span) */
    #navigation .menu li a b,
    #navigation .menu li a span:not(.submenu-arrow):not(.auto-mobile-icon) {
        display: block !important;
        width: auto !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        text-align: left !important;
        flex: 1 !important; /* Vyplní priestor */
    }

    /* ŠÍPKA (vpravo) */
    #navigation .menu li a .submenu-arrow {
        position: absolute !important; /* Absolútne, aby bola vždy na kraji */
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        left: auto !important;
        margin: 0 !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* --- B. ŠPECIÁLNA ÚPRAVA PRE MODRÚ LIŠTU (SPÄŤ) --- */
    /* Toto prepíše nastavenia vyššie len pre ten horný riadok */
    
    #navigation .menu li.exp > a,
    #navigation .menu li.exp > div > a {
        /* Prehodíme padding: miesto vľavo pre šípku, vpravo normálne */
        padding-left: 50px !important; 
        padding-right: 15px !important;
    }

    /* Šípka v modrej lište (VĽAVO) */
    #navigation .menu li.exp > a .submenu-arrow,
    #navigation .menu li.exp > div > a .submenu-arrow,
    #navigation-in ul li.ext.exp > div > .submenu-arrow 
    .navigation-in ul li.ext.exp > div > .submenu-arrow {
        right: auto !important;
        left: 3px !important; /* Pripnutá vľavo */
    }
}