/* 70-footer.css — Stopka: dane kontaktowe, linki, ikony spolecznosciowe */

/* ---------- desktop (>= 1025px) ---------- */
@media screen and (min-width: 1025px) {
    footer{
        width: 100%;
        color: #f2eee6;
        background-color: #222222;
    }
    .footer-container{
        width: min(var(--screen-width), 100% - 80px);
        margin: auto;
    }
    .footer-container img{
        padding: 50px 0 50px;
        width: 200px;
    }
    .footer-info{
        width: 100%;
        display: flex;
        flex-direction: row;
    }
    .footer-links{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .footer-links > div{
        flex: 1 0 50%;
    }
    .footer-links > div:last-child{
        flex: 0 1 100%;
    }
    .footer-links div:first-child{
        display: flex;
        flex-direction: column;
    }
    .footer-links button{
        background-color: #357efc;
        border: none;
        cursor: pointer;
        padding: 10px 25px 10px 25px;
        border-radius: 30px;
        color: #fff;
        font-weight: bold;
        font-family: var(--font-body);
        font-size: var(--text-md); /* bylo 2vh  = 18px */
        align-self: center;
        margin-bottom: -10px;
        margin-left: auto;
    }
    .footer-button-container{
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }
    footer a{
        cursor: pointer;
        margin: 0 0 10px 0;
        font-family: var(--font-body);
        font-weight: 400;
        width: fit-content;
        font-size: var(--text-md); /* bylo 2vh  = 18px */
        color: #f2eee6;
        
    }
   
    footer a:last-child{
    }
    .footer-text p{
        margin: 0;
        font-family: var(--font-body);
        font-size: var(--text-md); /* bylo 2vh  = 18px */
    }
    .footer-text{
        box-sizing: border-box;
        width: 40%;
    }
    .icons-container{
        display: flex;
        flex-direction: row;
        width: 100%;
    }
    /*
     Ikony sa teraz odnosnikami (patrz footer.php). <a> jest inline-flex,
     zeby nie dokladalo odstepu pod obrazkiem z line-height, a caly
     kolowy obszar ikony byl klikalny.
    */
    .icons-container a{
        display: inline-flex;
        text-decoration: none;
        border-radius: 50%;
    }
    .icons-container a:hover img,
    .icons-container a:focus-visible img{
        opacity: .75;
    }
    .icons-container a:focus-visible{
        outline: 2px solid #f2eee6;
        outline-offset: 3px;
    }
    .icons-container img{
        width: 20px;
        background-color: #f2eee6;
        height: 20px !important;
        margin: 20px 20px 20px 0;
        padding: 5px;
        border-radius: 50%;
        transition: opacity .15s ease;
    }
    .footer-text div{
        display: flex;
        flex-direction: row;
        margin-top: 20px;
        font-family: var(--font-body);
    }
    .footer-text img{
        width: 20px;
        padding: 0;
        filter: invert(100%);
        margin-right: 10px;
    }
    .footer-text-bottom{
        width: min(var(--screen-width), 100% - 80px);
        margin: auto;
        font-family: var(--font-body);
        font-size: var(--text-sm); /* bylo 1.5vh= 14px */
        padding: 30px 0 30px 0;
    }
}

/* ---------- mobile (<= 1024px) ---------- */
@media screen and (max-width: 1024px) {
    footer{
        width: 100%;
        background-color: #222222;
        color: #f2eee6;
    }
    .footer-container{
        width: 90%;
        margin: auto;
        display: flex;
        align-content: center;
        align-items: center;
        flex-direction: column;
    }
    .footer-container img{
        width: 50%;
        margin: auto;
        padding: 30px 0 30px 0;
    }
    .footer-links{
        display: none;
    }
    .footer-text{
        font-size: 1rem;
        font-family: var(--font-body);
    }
    .footer-text p{
        padding: 0;
        margin: 0;
    }
    footer hr{
        margin: 0;
        padding: 0;
    }
    .footer-text-bottom{
        width: 90%;
        margin: auto;
        font-family: var(--font-body);
        font-size: 0.9rem;
        padding: 10px 0 10px 0;
    }
    .footer-text div{
        display: flex;
        flex-direction: row;
        font-family: var(--font-body);
        padding: 20px 0 20px 0;
    }
    .footer-text img{
        width: 20px;
        padding: 0;
        filter: invert(100%);
        margin-right: 10px;
        margin-left: 0;
    }
}

/* ---------- odnosniki stopki: kolor na obu progach ---------- */
/*
 footer a { color: #f2eee6 } stalo wylacznie w strefie desktopowej, wiec na
 telefonach odnosniki mialy domyslny niebieski przegladarki #0000EE na
 niemal czarnym tle #222222 — kontrast 1,69:1. Dotyczylo to takze trzech
 odnosnikow do dokumentow prawnych, jedynych widocznych tam z calej stopki
 (.footer-links jest na mobile ukryty).
 Regula stoi poza media queries, zeby kolor nie mogl sie znow rozjechac
 miedzy progami. Rozmiarow nie rusza: 18 px na desktopie i 12 px na
 telefonie zostaja takie, jakie byly.
*/
footer a{
    color: #f2eee6;
}

/*
 Odnosniki do dokumentow prawnych. Bylo to style="font-size:12px;
 display:block" wpisane wprost w footer.php.
 Specyficznosc (0,2,0) jest tu konieczna: .footer-text div { display: flex }
 stoi w obu strefach i ma (0,1,1), wiec sama klasa by przegrala. Styl inline
 wygrywal wczesniej z kazdym selektorem, wiec problem sie nie ujawnial.
*/
.footer-text .footer-legal{
    font-size: 12px;
    display: block;
}