/* 10-navbar.css — Nawigacja: pasek desktop i menu mobilne (hamburger) */

/* ---------- desktop (>= 1025px) ---------- */
@media screen and (min-width: 1025px) {
    nav{
        width: 100%;
    }
    .nav-mobile{
        display: none;
    }
    .nav-desktop{
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        padding: 20px 0 20px 0;
        background-color: initial;
        width: 100%;
        z-index: 1000;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .nav-desktop-logo{
        width: 250px;
    }
    /*
     Bylo: obie grupy linkow bez wlasnych regul, a na pasku
     justify-content:space-between — linki ladowaly wiec na samych
     krawedziach okna (zmierzone przy oknie 1585 px: grupa lewa 0–370,
     prawa 1252–1585). Logo tez nie bylo dokladnie posrodku, tylko 18 px
     obok, bo "space-between" rozklada wolna przestrzen miedzy elementami
     o roznych szerokosciach (370 vs 333 px).

     flex:1 1 0 daje obu grupom rowny udzial niezaleznie od dlugosci
     etykiet, przez co logo stoi na osi okna co do piksela, a
     justify-content dosuwa linki do loga zamiast do krawedzi.
    */
    .nav-desktop-link_container_left,
    .nav-desktop-link_container_right{
        flex: 1 1 0;
        display: flex;
        align-items: center;
        gap: 44px;
    }
    .nav-desktop-link_container_left{
        justify-content: flex-end;
        padding-right: 56px;
    }
    .nav-desktop-link_container_right{
        justify-content: flex-start;
        padding-left: 56px;
    }
    /* Odstepy robia teraz gap i padding grup — padding na samym linku
       dawal 50 px takze od strony krawedzi okna. */
    .nav-desktop-link{
        padding-left: 0;
        padding-right: 0;
    }
    /* 16 px bylo dotad wartoscia domyslna przegladarki, nie decyzja —
       token --text-base zapisuje ja w skali bez zmiany wygladu. */
    .nav-desktop-link, .nav-desktop-link:focus, .nav-desktop-link:active, .nav-desktop-link:hover{
        font-size: var(--text-base);
        text-decoration: none;
        color: #f2eee6;
        font-family: var(--font-body);
        font-weight: 400;
    }
}

/* ---------- mobile (<= 1024px) ---------- */
@media screen and (max-width: 1024px) {
    .nav-desktop{
        display: none;
    }
    .nav-mobile{
        position: fixed;
        z-index: 9999;
        width: 100%;
        padding: 0;

    }
    .nav-mobile img{
        height: 20px;
        position: relative;
        left: 50%;
        transform: translateX(-100%);
    }
    .nav-mobile label {
        display: inline-block;
    }
    .nav-items {
        flex-wrap: wrap;
    }
    .nav-items {
        display: none;
        background-color: initial;
    }
    .nav-mobile input:checked ~ .nav-items{
        display: flex;
    }
    .nav-mobile label {
        font-size: 2em;
        padding: 10px;
    }
    .nav-mobile {
        background: #333;
    }
    .nav-mobile, .nav-items a {
        color: #fff;
        text-decoration: none;
        display: block;
        width: 100%;
        background-color: initial;
        font-family: var(--font-body);
    }
    .nav-items a{
        font-size: var(--text-base);
        text-align: left;
        padding: 20px 0 20px 20px;
    }
    .nav-items a:last-of-type{
        padding-bottom: 40px;
    }
    #hamburger {
        display: none;
    }
    .nav-mobile input:checked ~ .nav-items, .nav-mobile input:checked .nav-mobile {
        display: flex;
    }
    .nav-items hr{
        width: 90%;
    }
    .ham-label{
        color: #222222;
        -webkit-text-stroke: 3px darkgrey;
        -webkit-text-fill-color: white;
    }
}