/* Sekcja KATEGORII w lewej kolumnie sklepu (div#naviNew z navi_new.php).
 *
 * Zakres: wylacznie nawigacja kategorii. Blok wyszukiwania i panel filtrow
 * (shop_filter.php) maja wlasne style i ten arkusz ich nie dotyka - dlatego
 * KAZDY selektor jest zakotwiczony w #naviNew.
 *
 * Markup generuje LoadMenuNode()/treemenu() z
 * includes/functions/MenuNode.inc.php, ktorego NIE wolno tu ruszac:
 *
 *   <ul class="naviNew">
 *     <li id="recordsArray_1035">
 *       <a class="menuLeftOff|menuLeftOn" href="1035-eep-lokomotiven">Nazwa</a>
 *       <span style="color:#999999; font-size:.8em">1955</span>
 *       <ul class="naviNew"> ...podkategorie... </ul>
 *
 * Trzy konsekwencje tego markupu, ktore ksztaltuja caly ten plik:
 *
 * 1. Licznik <span> jest RODZENSTWEM odnosnika, nie jego dzieckiem. Zeby cel
 *    klikalny objal caly wiersz, <a> dostaje display:block, a licznik jest
 *    wyjety z ukladu przez position:absolute i dosuniety do prawej. Miejsce
 *    na niego rezerwuje padding-right odnosnika.
 * 2. Licznik ma style WPISANE W ATRYBUT style=, a te bija kazdy selektor.
 *    Kolor i rozmiar licznika mozna wiec nadpisac tylko przez !important.
 *    To samo dotyczy .menuLeftOn / .menuLeftOff ze style_new.css, ktore juz
 *    w oryginale uzywaja !important.
 * 3. Zagniezdzony <ul> siedzi WEWNATRZ <li>, a znaczniki <li> pozycji bez
 *    dzieci nie sa domykane. Dlatego separator wisi na <a> (border-bottom),
 *    a nie na <li> - na <li> podkreslilby caly blok razem z podkategoriami.
 *
 * Paleta jak w koszyku, kasie i na listach sortymentu:
 *   akcent #4E5461   czerwien marki #960001   ramka #d9d9d9
 *   separator #ececec   tlo hover #fafafa   tekst mocny #222
 *   tekst wyciszony #888   promien 2px   Arial
 *
 * Plik jest czystym ASCII - strony sklepu sa w ISO-8859-1.
 *
 * UWAGA: reguly responsywne sa CELOWO na koncu pliku. Media query NIE
 * podnosi specyficznosci, wiec regula o rownej specyficznosci umieszczona
 * PO bloku @media wygrywa na kazdej szerokosci.
 */


/* ---------------------------------------------------------------------
 * NAGLOWEK SEKCJI
 * ------------------------------------------------------------------ */

/* Klasa katNaviHeader jest DOPISANA obok HeaderNew, a nie zamiast niej.
 * HeaderNew nosi w tym sklepie takze naglowek panelu filtrow, wiec zmiana
 * samej HeaderNew wyszlaby poza zlecony zakres. Przy okazji: gdyby ten
 * arkusz nie zostal wpiety, sekcja wroci po prostu do starego wygladu.
 *
 * Zakotwiczenie w #naviNew (1,1,0) bije .HeaderNew ze style_new.css (0,1,0)
 * niezaleznie od kolejnosci wpiecia arkuszy. */
#naviNew .katNaviHeader {
    background-image: none;
    background-color: transparent;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #4E5461;
    height: auto;
    margin: 10px 0 6px 0;
    /* 13px = 10px paddingu wiersza + 3px na pasek akcentu aktywnej pozycji,
     * dzieki czemu naglowek stoi w jednej linii z nazwami kategorii */
    padding: 0 4px 6px 13px;
    border-bottom: 1px solid #d9d9d9;
    position: relative;
    clear: both;
}

/* Czerwona "wstega" pod naglowkiem to trojkat zrobiony na border-width
 * w .HeaderNew:before. Naglowek ma byc tekstowy, wiec trojkat znika. */
#naviNew .katNaviHeader:before {
    content: none;
    display: none;
}

#naviNew .katNaviHeader__title {
    float: left;
    line-height: 24px;
}

/* Strzalka "poziom wyzej" zostaje - to jedyna droga powrotu z podkategorii.
 * Adres i sam obrazek bez zmian, zmniejszony tylko do wysokosci naglowka. */
#naviNew .katNaviHeader__up {
    float: right;
    line-height: 24px;
}

#naviNew .katNaviHeader__up img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    opacity: 0.75;
}

#naviNew .katNaviHeader__up a:hover img {
    opacity: 1;
}


/* ---------------------------------------------------------------------
 * LISTA KATEGORII - struktura
 * ------------------------------------------------------------------ */

/* style_new.css daje pozycjom margin:3px 4px i border-top, przez co
 * podswietlenie nie doklejalo sie do krawedzi kolumny. Zerujemy, bo
 * cel klikalny ma siegac od brzegu do brzegu. */
#naviNew ul.naviNew {
    margin: 0;
    padding: 0;
    list-style: none;
}

#naviNew ul.naviNew > li {
    /* uklad odniesienia dla licznika wyjetego z przeplywu */
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    background: none;
}

/* .naviNew > li * ze style_new.css dokleja 1px 2px paddingu i 2px marginesu
 * kazdemu dziecku pozycji - lamie to rachunek wysokosci wiersza. */
#naviNew ul.naviNew > li > a,
#naviNew ul.naviNew > li > span {
    margin: 0;
}


/* ---------------------------------------------------------------------
 * POZYCJA LISTY - cel klikalny na calej szerokosci wiersza
 * ------------------------------------------------------------------ */

#naviNew ul.naviNew > li > a {
    display: block;
    box-sizing: border-box;
    /* prawy padding rezerwuje pas na licznik (4 cyfry: kategorie maja
     * po ponad 4000 artykulow), lewy ustawiaja nizej reguly poziomow */
    padding: 6px 44px 6px 10px;
    /* pasek akcentu jest zawsze, tylko przezroczysty - inaczej aktywna
     * pozycja przesuwalaby tekst o 3px wzgledem pozostalych */
    border-left: 3px solid transparent;
    border-bottom: 1px solid #ececec;
    border-radius: 2px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #222;
    text-decoration: none;
}

#naviNew ul.naviNew > li > a:hover,
#naviNew ul.naviNew > li > a:focus {
    background-color: #fafafa;
    color: #222;
    text-decoration: none;
}

/* Licznik artykulow: wyciszony i dosuniety do prawej krawedzi wiersza.
 * !important jest konieczne - color i font-size siedza w atrybucie style=
 * wypisywanym przez treemenu(), a tego pliku nie wolno tu zmieniac. */
#naviNew ul.naviNew > li > span {
    position: absolute;
    top: 6px;
    right: 10px;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px !important;
    line-height: 16px;
    color: #888 !important;
    white-space: nowrap;
    pointer-events: none;
}


/* ---------------------------------------------------------------------
 * STAN POZYCJI
 * ------------------------------------------------------------------ */

/* style_new.css: .menuLeftOff{font-weight:100!important} - taka grubosc
 * przy Arialu daje cienki, trudny do odczytania tekst. */
#naviNew ul.naviNew > li > a.menuLeftOff {
    font-weight: 400 !important;
}

/* Kategoria aktywna - czerwien marki zamiast czystego #FF0000, ktore
 * style_new.css wymusza przez !important. */
#naviNew ul.naviNew > li > a.menuLeftOn {
    border-left-color: #960001;
    background-color: #fff;
    color: #960001 !important;
    font-weight: 700 !important;
}

#naviNew ul.naviNew > li > a.menuLeftOn:hover,
#naviNew ul.naviNew > li > a.menuLeftOn:focus {
    background-color: #fafafa;
    color: #960001 !important;
}

/* Licznik przy aktywnej pozycji zostaje wyciszony - ma nie konkurowac
 * z czerwienia nazwy. */
#naviNew ul.naviNew > li > a.menuLeftOn + span {
    color: #888 !important;
}


/* ---------------------------------------------------------------------
 * POZIOMY ZAGNIEZDZENIA
 *
 * Hierarchie niesie WCIECIE, nie rozmiar czcionki - podkategorie maja te
 * sama wielkosc tekstu co kategorie glowne.
 *
 * Wciecie robi padding-left odnosnika, a nie padding <ul>. Gdyby wcinac
 * liste, podswietlenie hover zaczynaloby sie dopiero za wcieciem i wiersz
 * przestalby byc jednolitym celem klikalnym.
 *
 * Kazdy glebszy poziom to dodatkowy .naviNew w selektorze, wiec kolejne
 * reguly maja rosnaca specyficznosc i nie musza byc uporzadkowane recznie.
 * Ustawiaja WYLACZNIE padding-left - gdyby uzyly skrotu padding, kasowalyby
 * padding pionowy z bloku @media (celu dotykowego 44px) i to bez szans na
 * odzyskanie go, bo maja od tamtych regul wyzsza specyficznosc.
 * ------------------------------------------------------------------ */

#naviNew ul.naviNew ul.naviNew > li > a {
    padding-left: 24px;
}

#naviNew ul.naviNew ul.naviNew ul.naviNew > li > a {
    padding-left: 38px;
}

#naviNew ul.naviNew ul.naviNew ul.naviNew ul.naviNew > li > a {
    padding-left: 52px;
}

#naviNew ul.naviNew ul.naviNew ul.naviNew ul.naviNew ul.naviNew > li > a {
    padding-left: 66px;
}


/* =====================================================================
 * REGULY RESPONSYWNE - CELOWO NA KONCU PLIKU
 *
 * Media query NIE podnosi specyficznosci. Regula o rownej specyficznosci
 * postawiona PO bloku @media wygrywalaby na kazdej szerokosci, takze na
 * telefonie - dlatego blok stoi jako ostatni, tak jak w css/sortiment.css.
 *
 * Viewport sklepu ma initial-scale=0.6, wiec 44px ukladu to okolo 26px
 * fizycznie na ekranie. Zostaje mimo to 44px - taka wartosc przyjeto
 * w pozostalych arkuszach tego sklepu i cel dotykowy ma byc z nimi zgodny.
 * ===================================================================== */
@media only screen and (max-width: 700px) {

    /* 12 + 20 + 12 = 44px. min-height pilnuje wysokosci takze wtedy, gdy
     * inny arkusz zmniejszy tekst pozycji. */
    #naviNew ul.naviNew > li > a {
        min-height: 44px;
        padding-top: 12px;
        padding-bottom: 12px;
        padding-right: 48px;
        line-height: 20px;
        font-size: 17px !important;
    }

    /* licznik trzyma sie gornej linii wiersza, nie jego srodka */
    #naviNew ul.naviNew > li > span {
        top: 12px;
        line-height: 20px;
        font-size: 14px !important;
    }

    #naviNew .katNaviHeader {
        font-size: 18px;
        padding-bottom: 8px;
    }

    #naviNew .katNaviHeader__title,
    #naviNew .katNaviHeader__up {
        line-height: 30px;
    }

    /* strzalka powrotu wraca do pelnych 30px - to tez cel dotykowy */
    #naviNew .katNaviHeader__up img {
        width: 30px;
        height: 30px;
    }

}