/* 90-contact.css — Strona kontaktu i formularz Contact Form 7 */

/* ---------- desktop (>= 1025px) ---------- */
@media screen and (min-width: 1025px) {
    .contact-container{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
    }
    .contact-left{
        width: 50%;
        height: 100%;
        background-color: #f2eee6;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .contact-left div{
        width: calc(var(--screen-width)/2);
        height: 100%;
        padding: 150px 150px 150px 0;
        box-sizing: border-box;
    }
    .contact-left div img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .contact-right{
        width: 50%;
        background-color: #5198f9;
    }
    .contact-right-content{
        width: calc(var(--screen-width)/2);
        box-sizing: border-box;
        padding: 0 0 0 150px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .contact-right-header-container{
        width: fit-content;
        margin: auto;
    }
    .contact-right-header-container h2{
        font-size: var(--text-label); /* bylo 1.5rem = 24px, reszta etykiet sekcji ma 20px */
        font-family: var(--font-display);
        color: #f2eee6;
    }
    .contact-right-header-container hr{
        width: 50%;
        height: 2px;
        background-color: #f2eee6;
        border: none;
        margin-bottom: 7%;
        margin-top: 70px;
    }
    .contact-right-text-container{
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding-bottom: 150px;
    }
    .contact-right-text-container p{
        font-size: var(--text-2xl); /* bylo 2.5rem = 40px, jak pozostale leady */
        color: #f2eee6;
    }
    .contact-right-text-container div{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }
    .contact-right-text-container button{
        background-color: #f2eee6;
        border: none;
        cursor: pointer;
        padding: 15px 35px 15px 35px;
        border-radius: 30px;
        color: #222222;
        font-family: var(--font-body);
        letter-spacing: 1px;
        transition: background-color 0.5s;
        font-size: var(--text-md);
        font-weight: bold;
    }

    .contact_form-container{
        width: 100%;
        background-color: #16488f;
    }
    .contact_form-content{
        width: min(var(--screen-width), 100% - 80px);
        margin: auto;
        display: flex;
        flex-direction: column;
        padding: 100px 0 100px 0;
    }
    .contact_form-content div{
        width: 100%;
    }
    .contact_form-header div{
        width: fit-content !important;
        color: #f2eee6;
        margin: auto;
        padding: 0 0 50px 0;
    }
    .contact_form-header h2{
        font-size: var(--text-label); /* bylo 1.5rem = 24px, reszta etykiet sekcji ma 20px */
        font-family: var(--font-display);
    }
    .contact_form-header hr{
        width: 100%;
        height: 2px;
        background-color: #f2eee6;
        border: none;
        margin-bottom: 7%;
        margin-left: 0;
    }
    .wpcf7{
        color: #f2eee6;
        font-family: var(--font-body);
        /* bylo 1.3rem (20.8 px) na desktopie i 1rem (16 px) na mobile —
           ten sam formularz w dwoch rozmiarach. Teraz oba na --text-md. */
        font-size: var(--text-md);
    }
    .wpcf7 form{
        display: flex;
        flex-direction: column;
        width: calc(var(--screen-width)/2);
        margin: auto;
    }
    /*
     Bylo: .wpcf7 div. Ten selektor pasowal takze do .screen-reader-response —
     ukrytego obszaru dostepnosci, ktory Contact Form 7 trzyma jako
     position:absolute; width:1px; clip:rect(1px,1px,1px,1px). Nasze
     width:100% !important przywracalo mu pelna szerokosc okna, wiec na
     /contacto/ dokument mial 1536 px w oknie 1425 px i strona dostawala
     poziomy pasek przewijania.
     Formularz ma wszystkie swoje divy jako bezposrednie dzieci <form>, a
     .screen-reader-response jest rodzenstwem <form> — zawezenie do
     "form > div" nie zmienia wygladu zadnego pola, a obszar dostepnosci
     zostaje schowany tak, jak zaklada wtyczka.
    */
    .wpcf7 form > div{
        width: 100% !important;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
    }
    .wpcf7 div p{
        display: flex;
        flex-direction: column;
        padding: 10px;
        margin: 0;
        width: 50%;
    }
    .message-box{
        display: flex;
        flex-direction: column;
        padding: 10px;
        margin: 0;
    }
    .wpcf7 input{
        padding: 10px 15px 10px 15px;
        box-sizing: border-box;
        border: none;
        border-radius: 5px;
        font-family: var(--font-body);
        margin: 20px 0 20px 0 !important;
    }
    /*
     Bylo na id: #phone, #email, #name, #lastname. Pola Contact Form 7 nie
     maja atrybutow id, tylko name, wiec ta regula nie pasowala do niczego.
     Efektu i tak nie widac — rodzic <p> ma padding 10px, przez co pole
     wypelnia swoja kolumne tak samo z width: 100% i bez niego (zmierzone
     280 px w obu przypadkach). Zapis poprawiony, zeby nie wygladal na
     dzialajacy.
    */
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"]{
        width: 100%;
    }

    /*
     Pole wiadomosci bylo stylowane przez martwe #message, wiec jako jedyne
     zostawalo przy ustawieniach przegladarki: padding 2px zamiast 10/15,
     kwadratowe rogi zamiast 5px, zerowe marginesy i uchwyt do rozciagania
     w rogu. Wygladalo inaczej niz pozostale pola. resize: none to
     pierwotny zamysl z #message — rozciagniecie pola rozjezdzalo kolumne.
    */
    .wpcf7 textarea{
        width: 100%;
        resize: none;
        padding: 10px 15px 10px 15px;
        box-sizing: border-box;
        border: none;
        border-radius: 5px;
        font-family: var(--font-body);
        margin: 20px 0 20px 0;
    }
    .contact_form-button{
        background-color: #f2eee6;
        border: none;
        cursor: pointer;
        padding: 15px 170px 15px 170px !important;
        color: #222222;
        font-family: var(--font-body);
        letter-spacing: 1px;
        transition: background-color 0.5s;
        font-size: var(--text-md);
        font-weight: bold;
        align-self: center;
        width: 100%;
        box-sizing: border-box;
    }
    .submit-box{
        padding: 0 10px 0 10px;
    }
}

/* ---------- mobile (<= 1024px) ---------- */
@media screen and (max-width: 1024px) {
    .contact-left{
        display: none;
    }
    .contact-right{
        width: 100%;
        min-height: 100%;
        background-color: #5198f9;
    }
    .contact-right-content{
        width: 90%;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 50px 0 0 0 ;
    }
    .contact-right-header-container{
        width: fit-content;
        padding: 50px 0 100px 0;
    }
    .contact-right-header-container hr{
        width: 50%;
        height: 2px;
        background-color: #f2eee6;
        border: none;
        margin-bottom: 7%;
    }
    .contact-right-header-container h2{
        font-size: 1.5rem;
        font-family: var(--font-display);
        color: #f2eee6;
        padding: 0;
        margin: 0;
        text-align: center;
    }
    .contact-right-text-container{
        padding: 0 0 150px 0;
    }
    .contact-right-text-container p{
        font-size: 2rem;
        color: #f2eee6;
    }
    .contact-right-text-container div{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .contact-right-text-container button {
        background-color: #f2eee6;
        border: none;
        cursor: pointer;
        padding: 15px 35px 15px 35px;
        box-sizing: border-box;
        width: 250px;
        border-radius: 30px;
        color: #222222;
        font-family: var(--font-body);
        letter-spacing: 1px;
        transition: background-color 0.5s;
        font-size: var(--text-md);
        font-weight: bold;
        margin: 10px 0 10px 0;
    }
    .contact_form-container{
        width: 100%;
        background-color: #16488f;
        color: #f2eee6;
    }
    .contact_form-content{
        width: 90%;
        margin: auto;
        padding: 50px 0 50px 0;
    }
    .contact_form-header hr{
        width: 50%;
        height: 2px;
        background-color: #f2eee6;
        border: none;
        margin-bottom: 7%;
    }
    .contact_form-header h2{
        font-size: 1.5rem;
        font-family: var(--font-display);
        color: #f2eee6;
        padding: 0;
        margin: 0;
        text-align: center;
    }
    .contact_form-header{
        padding: 0 0 50px 0;
    }
    .wpcf7 form{
        display: flex;
        flex-direction: column;
        font-size: var(--text-md);
        font-family: var(--font-body);
    }
    .wpcf7 p{
        margin: 0;
    }
    .wpcf7 input, .wpcf7 textarea{
        width: 100%;
        padding: 10px 15px 10px 15px;
        box-sizing: border-box;
        border: none;
        border-radius: 5px;
        font-family: var(--font-body);
        margin: 20px 0 20px 0 !important;
    }
    .wpcf7 input:focus, .wpcf7 textarea:focus {
        outline: none;
    }
    .contact_form-button{
        font-size: var(--text-md);
        font-weight: 700;
    }
}

/* ---------- formularz: czytelnosc pol (oba progi) ---------- */
/*
 Blok stoi poza media queries celowo. Kolory rozjechaly sie wczesniej
 miedzy progami wlasnie dlatego, ze kazdy mial swoja kopie regul: przycisk
 wysylania dostal kolory tylko w strefie desktopowej i na telefonie zostawal
 domyslny, szary. Tutaj wartosc jest jedna dla obu progow.

 UWAGA na selektory. Pola formularza NIE maja atrybutow id — Contact Form 7
 generuje je z samym atrybutem name (name, lastname, email, phone, message).
 Selektory na id w tym pliku byly wiec martwe; zostaly przepisane na typ
 pola i klase. Nie wracaj do #name, #email, #phone ani #message.
*/

/*
 Pola dziedziczyly color: #f2eee6 z .wpcf7 — kremowy tekst na bialym tle
 pola. Kontrast 1,13:1 przy wymaganych 4,5:1, czyli wpisywanego tekstu
 praktycznie nie bylo widac. Kursor tekstowy mial ten sam kolor, wiec nie
 bylo nawet wiadomo, gdzie sie pisze. #222222 na bialym to 15,9:1.
*/
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea{
    color: #222222;
    background-color: #ffffff;
    caret-color: #222222;
}

/*
 Formularz nie ma dzis zadnego placeholdera. Regula jest na zapas: bez niej
 kazdy dodany pozniej placeholder odziedziczylby kremowy kolor z .wpcf7
 i powtorzylby ten sam blad. Szary czytelny, ale slabszy od tekstu
 wpisanego: 5,1:1. opacity: 1, bo Firefox sam przygasza placeholder.
*/
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder{
    color: #6e6e6e;
    opacity: 1;
}

/*
 Pole wiadomosci nierozciagalne na obu progach. Pierwotna regula
 (#message, martwa) stala tylko w strefie desktopowej, wiec na telefonie
 uchwyt zostawal — a rozciagniecie pola w bok rozpychalo strone poziomo.
*/
.wpcf7 textarea{
    resize: none;
}

/*
 Przycisk wysylania: te same kolory na obu progach. W strefie mobilnej
 .contact_form-button ustawial tylko rozmiar i grubosc czcionki, wiec
 przycisk mial domyslne tlo przegladarki #efefef i odziedziczony kremowy
 tekst — kontrast 1,05:1, napis ENVIAR praktycznie niewidoczny.
*/
.contact_form-button{
    background-color: #f2eee6;
    color: #222222;
}

/*
 Wskaznik fokusu. W strefie mobilnej stoi wyzej zywa regula
 .wpcf7 input:focus { outline: none } bez niczego w zamian — pole z fokusem
 nie roznilo sie tam niczym od pozostalych, wiec nie dalo sie wypelnic
 formularza z klawiatury. Ta sama regula na desktopie jest oparta na id
 i nie dziala, wiec tam zostaje obwodka przegladarki; ujednolicamy oba progi.
 :focus-visible pokazuje obwodke przy nawigacji klawiatura, a klikajacy
 myszka nie zobacza zmiany.
*/
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible{
    outline: 3px solid #f2eee6;
    outline-offset: 3px;
}