/* KOMPLETNÁ OPRAVA MENU PRE TABLET A DESKTOP (od 768px) */
@media (min-width: 768px) {
    /* 1. CAST TU OPRAVUJU MENU LEVEL 3 ABY BOLO VIDNO VSETKY KATEGORIE*/
    /* 1. HLAVNÝ KONTAJNER (Riadok) */
    /* Nastavíme ho na celú šírku a povolíme zalamovanie riadkov */
    #navigation ul.menu-level-2 {
        /*display: flex !important; toto rozbija kod nepustat to */
        flex-wrap: wrap !important;       /* Povolí viac riadkov pod sebou */
        align-items: flex-start !important;  /* Zarovná všetko na horný okraj */
        justify-content: flex-start !important; /* Zarovná všetko doľava */
        
        width: 100% !important;              /* Roztiahne sa na celú dostupnú šírku */
        min-width: 100% !important;
        padding: 25px 15px 10px 15px !important; /* Vnútorné odstupy (hore, vpravo, dole, vľavo) */
        box-sizing: border-box !important;   /* Padding sa započíta do šírky, nerozťahuje ju */
        
        left: 0 !important;                  /* Poistka pre pozíciu */
        right: auto !important;
    }

    /* 2. JEDNOTLIVÝ STĹPEC (Bunka mriežky) - TOTO OPRAVUJE PREKRÝVANIE */
    #navigation .menu-level-2 > li {
        /* --- KĽÚČOVÁ ČASŤ: NASTAVENIE PEVNEJ ŠÍRKY --- */
        width: 25% !important;           /* Každý stĺpec má presne 1/4 šírky */
        flex: 0 0 25% !important;        /* Poistka pre flexbox */
        box-sizing: border-box !important; /* Aby padding nerozbil 25% šírku */
        
        /* --- VZHĽAD STĹPCA (Obrázok vľavo, text vpravo) --- */
        display: flex !important;        
        flex-direction: row !important;  /* Uložiť vedľa seba */
        align-items: flex-start !important; 
        
        margin: 0 0 35px 0 !important;   /* Odstup pod stĺpcom (medzera medzi riadkami) */
        padding: 0 10px !important;      /* Medzera medzi stĺpcami */
        border: none !important;         /* Zrušenie prípadných čiar */
        height: auto !important;
        min-height: 120px !important;    /* Minimálna výška pre stabilitu */
    }

    /* 3. OBRÁZOK VĽAVO */
    #navigation .menu-level-2 > li > a.menu-image {
        display: block !important;
        /* Zafixujeme šírku priestoru pre obrázok na 80px */
        flex: 0 0 80px !important;       
        width: 80px !important;
        margin-right: 15px !important;   /* Medzera medzi obrázkom a textom */
        padding: 0 !important;
    }
    /* Donútime obrázok, aby sa prispôsobil svojmu 80px priestoru */
    #navigation .menu-level-2 > li > a.menu-image img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;  /* Zachová pomer strán obrázka */
        display: block !important;
    }

    /* 4. KONTAJNER PRE TEXT (Vpravo) */
    #navigation .menu-level-2 > li > div {
        flex: 1 !important;              /* Zvyšok šírky (25% mínus 80px za obrázok) */
        display: flex !important;
        flex-direction: column !important; /* Nadpis hore, zoznam pod ním */
        align-items: flex-start !important;
        text-align: left !important;
        width: auto !important;
        min-width: 0 !important;         /* Dôležitá oprava pre flexbox zalamovanie textu */
    }

    /* 5. NADPIS KATEGÓRIE (Level 2) */
    #navigation .menu-level-2 > li > div > a {
        font-weight: bold !important;
        font-size: 15px !important;
        margin-bottom: 10px !important;
        display: block !important;
        text-align: left !important;
        color: #000 !important;
        text-decoration: none !important;
    }
    #navigation .menu-level-2 > li > div > a:hover {
         color: #016abb !important;
    }

    /* 6. ZOZNAM PODKATEGÓRIÍ (Level 3) */
    #navigation ul.menu-level-3 {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* 7. POLOŽKY ZOZNAMU (Odstránenie čiarok) */
    #navigation ul.menu-level-3 > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        font-size: 0 !important;         /* Skrytie čiarky */
        line-height: 0 !important;
    }

    /* 8. ODKAZY (Level 3 Text) */
    #navigation ul.menu-level-3 > li > a {
        display: block !important;
        font-size: 13px !important;
        line-height: 1.6 !important;     /* Vzdušnejšie riadkovanie */
        color: #555 !important;          /* Jemne sivá farba */
        text-align: left !important;
        white-space: normal !important;
        padding: 2px 0 !important;
        text-decoration: none !important;
    }

    /* 9. Hover efekt na odkazoch */
    #navigation ul.menu-level-3 > li > a:hover {
        color: #016abb !important;       /* Modrá pri nabehnutí */
        text-decoration: underline !important;
    }

    /*2. CAST*/
    /* --- DIZAJN HLAVNÉHO PÁSU --- */
    /* 1. Modré pozadie a layout */
    .navigation-in {
        background-color: #016abb !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        height: auto;
        min-height: 60px;
    }

    /* 2. Skrytie mobilných ikoniek */
    .auto-mobile-icon {
        display: none !important;
    }

    /* 3. Štýlovanie položiek menu (Level 1) */
    #navigation .menu-level-1 > li > a {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 100%;
        color: #ffffff !important;
        font-weight: bold;
        border: none !important;
    }
    
    /* Poistka pre tučné písmo vnútri odkazu */
    #navigation .menu-level-1 > li > a b {
        color: #ffffff !important;
        font-weight: bold;
    }

    /* 4. Tlačidlo "VIAC" */
    .menu-helper {
        background-color: #ffffff !important;
        color: #016abb !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        height: 40px;
        padding: 0 20px;
        margin-right: 15px;
        font-weight: bold;
        text-transform: uppercase;
        cursor: pointer;
        white-space: nowrap;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        margin-top: -4px;
    }

    .menu-helper span {
        color: #016abb !important;
    }
    
    .menu-helper:hover {
        background-color: #f0f0f0 !important;
    }
}