/* d:\Zasoby\xampp\htdocs\prntd.pl\prntd.pl\assets\components\Navbar\navbar.css */
/* Styles specific to the navbar section */

nav {
    /* Style dla głównego kontenera <nav> */
    /* Na desktopie jego wygląd będzie determinowany przez wewnętrzny ul#navbarLinks */
}

.navbar-toggler {
    display: none; /* Ukryty domyślnie na większych ekranach */
    background-color: var(--NavBtn);
    color: var(--NavBtnText);
    border: 1px solid var(--NavSep);
    padding: 8px 12px;
    font-size: 1.25rem;
    line-height: 1;
    border-radius: .25rem;
    cursor: pointer;
}

nav ul {
    list-style-type: none;
    margin-top: 0;
    margin-bottom: 5px; /* Ustawienie dolnego marginesu na 5px */
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;  /* Usunięto górny padding, aby wysokość paska była równa wysokości linków */
    padding-bottom: 0; /* Usunięto dolny padding, aby wysokość paska była równa wysokości linków */
    background-color: rgba(76, 175, 80, 0.25); /* Kolor --NavBtn (#4CAF50) z 25% kryciem */
    display: flex; /* Używamy Flexbox */
    flex-wrap: wrap; /* Pozwalamy elementom zawijać się do nowego wiersza */
    justify-content: center; /* Wyśrodkowanie elementów w poziomie */
}

nav li {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 3px; /* 3px odstępu po obu stronach przycisku 'a' wewnątrz 'li' */
    padding-right: 3px;
    /* Ten padding stworzy miejsce między krawędzią przycisku a separatorem */
    border-left: 2px solid var(--NavSep); /* Separator po lewej stronie każdego elementu li */
}

/* Dodajemy również separator po prawej stronie ostatniego elementu */
nav li:last-child {
    border-right: 2px solid var(--NavSep); /* Ciemnoszary separator o szerokości 2px */
}

nav li a {
    display: flex; /* Używamy Flexbox do centrowania zawartości */
    align-items: center; /* Wyśrodkowanie zawartości w pionie */
    justify-content: center; /* Wyśrodkowanie zawartości w poziomie */
    /* width: 80px; */  /* Usunięto stałą szerokość, aby była elastyczna */
    height: 30px;  /* Zmniejszona wysokość */
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 15px; /* Zwiększony padding lewo/prawo */
    padding-right: 15px;
    box-sizing: border-box; /* Padding i border wliczane w width/height */
    background-color: var(--NavBtn); /* Kolor tła przycisku */
    color: var(--NavBtnText); /* Kolor tekstu przycisku */
    text-align: center;
    text-decoration: none;
    font-family: 'Antonio', sans-serif; /* Używamy czcionki Antonio, jeśli dostępna */
    font-size: 16px; /* Rozmiar czcionki - można dostosować, jeśli tekst się nie mieści */
    font-weight: 400; /* Standardowa grubość */
    /* border-radius: 3px; */ /* Opcjonalnie: lekkie zaokrąglenie rogów przycisków */
}

/* Styl dla pierwszego elementu nawigacji (np. HOME z ikoną domku) */
nav li:first-child a {
    padding-left: 5px; /* Zmniejszony padding lewy dla ikony domku */
    padding-right: 5px; /* Zmniejszony padding prawy dla ikony domku */
    font-size: 18px; /* Można lekko zwiększyć rozmiar ikony, jeśli potrzeba */
}

nav li a:hover {
    background-color: var(--NavBtnHover); /* Kolor tła przycisku po najechaniu */
    color: var(--NavBtnTextHover); /* Kolor tekstu przycisku po najechaniu */
}

/* Style dla widoku mobilnego */
@media (max-width: 768px) { /* Powrót do jawnej wartości breakpointu */
    .navbar-toggler {
        display: block; /* Pokaż przycisk hamburgera */
        margin-top: 0; /* Reset marginesów, centrowanie przez rodzica */
        margin-bottom: 0;
    }

    nav { /* Stylizacja głównego elementu <nav> na mobilnych */
        position: relative; /* Kontekst dla absolutnie pozycjonowanego menu */
        background-color: rgba(76, 175, 80, 0.25); /* 1. Pasek z hamburgerem: przezroczystość 25% (kolor zielony jak przyciski) */
        padding-top: 0;    /* Usunięto górny padding, aby wysokość paska była równa wysokości hamburgera */
        padding-bottom: 0; /* Usunięto dolny padding, aby wysokość paska była równa wysokości hamburgera */
        display: flex; /* Aby móc wyrównać toggler */
        align-items: center; /* Dodano, aby wyśrodkować hamburger w pionie, jeśli jego wysokość jest mniejsza niż kontenera (choć przy 0 paddingu powinny się zgadzać) */
        justify-content: center; /* 5. Wyśrodkuj przycisk hamburgera */
    }

    nav ul#navbarLinks {
        display: none; /* Ukryj listę linków domyślnie */
        flex-direction: column; /* Linki w kolumnie */
        align-items: center; /* Centruje elementy <li> wewnątrz <ul> */
        
        width: 140px; /* Szerokość = 110px (elementy <a>) + 15px (lewy padding) + 15px (prawy padding) */
        
        position: absolute; /* Pozycjonowanie względem <nav> */
        top: 100%; /* Bezpośrednio pod elementem <nav> */
        left: 50%; /* Wyśrodkowanie menu */
        transform: translateX(-50%); /* Dokładne centrowanie przy position: absolute */
        background-color: rgba(255, 255, 255, 0.70); /* Białe tło z 70% przezroczystością */
        z-index: 1000; /* Aby było na wierzchu */
        
        /* Reset stylów dla ul */
        margin: 0; /* Reset wszystkich marginesów */
        padding: 0; /* Reset wszystkich paddingów, w tym domyślnego padding-left dla ul */
        list-style-type: none; /* Dodatkowo, aby na pewno nie było znaczników listy */
        box-sizing: border-box; /* Aby width uwzględniało padding i border */

        /* Dodajemy padding, aby kontener był większy od zawartości */
        padding: 5px 15px 15px 15px; /* Góra: 5px, Boki i Dół: 15px */

        flex-wrap: nowrap; /* Nie zawijamy w kolumnie */
        /* outline: 2px solid blue; */ /* Usunięto tymczasowe obramowanie */
    }

    nav ul#navbarLinks.is-active {
        display: flex; /* Pokaż menu, gdy jest aktywne */
    }

    nav ul#navbarLinks li {
        width: 100%; /* Elementy li zajmują 100% szerokości swojego rodzica (ul#navbarLinks) */
        display: flex; /* Uczynienie <li> kontenerem flex */
        justify-content: center; /* Wyśrodkowanie dziecka (<a>) w poziomie */
        border-left: none; /* Usuń lewy border */
        border-right: none; /* Usuń prawy border */
        padding: 0; /* Reset paddingu na li, jeśli jakiś był */
        margin: 0; /* Reset marginesu na li, jeśli jakiś był */
        box-sizing: border-box; /* Dla pewności */
        /* outline: 2px solid red; */ /* Usunięto tymczasowe obramowanie */
    }
    
    nav ul#navbarLinks li:first-child {
        /* outline: 2px solid red; */ /* Usunięto tymczasowe obramowanie */
    }

    nav ul#navbarLinks li:not(:last-child) {
        margin-bottom: 8px; /* Zwiększono odstęp między elementami do 8px */
    }

    nav ul#navbarLinks li:last-child {
        /* border-bottom: none; */
    }

    nav ul#navbarLinks li a {
        display: flex; 
        align-items: center; 
        justify-content: center; 
        
        width: 110px; 
        /* Wysokość będzie teraz determinowana przez font-size i padding pionowy */
        /* height: 30px; */ /* Usunięto stałą wysokość */
        padding-top: 4px;    /* Symetryczny padding pionowy */
        padding-bottom: 4px; /* Symetryczny padding pionowy */
        padding-left: 0;   
        padding-right: 0;  
        box-sizing: border-box; 
        font-size: 18px; /* Zwiększono czcionkę, np. do 18px */
        /* Tło i kolor tekstu dziedziczone z desktopowych stylów są OK */
        /* outline: 2px solid green; */ /* Usunięto tymczasowe obramowanie */
    }

    nav ul#navbarLinks li:first-child a {
        /* outline: 2px solid green; */ /* Usunięto tymczasowe obramowanie */
        /* font-size: 16px; */ /* Usunięto, aby dziedziczył ogólne 18px lub można dostosować specyficznie */
        /* Jeśli potrzebujesz innego rozmiaru dla pierwszego linku, możesz go tu ustawić, np. font-size: 18px; */
    }
    
    nav li:first-child a i.fas.fa-home {
        margin-right: 0; 
    }
}