/*
    Style.css

    Tämä tiedosto sisältää sivun tyylit. Alla on lyhyt selitys kuinka tiedosto
    on jäsennelty ja mitä eri osiot tarkoittavat. Tarkat CSS-säännöt löytyvät
    tiedoston alapuolelta; kommentit selittävät miksi sääntö on olemassa ja miten
    siihen kannattaa tehdä muutoksia.

    Rakenne lyhyesti:
    - Perustyyli: perusfontti, marginaalit
    - Header: sivun yläosa, jossa otsikko (vasen) ja laskurin selite (oikea)
        -- Sisältö on keskitetty .header-inner-kääreeseen, jotta se linjautuu
             saman leveyden kanssa kuin pääsisällön `.container`.
    - Logo-alue: sivun alalaidan logot
    - Pääsisältö (.container): kaksi saraketta (.content-left ja .content-right)
    - Lomake: grid-asettelu label/input -pareille
    - Responsiivisuus: alle 800px siirrytään yhden sarakkeen asetteluun

    Muistiinpanot kehittäjälle:
    - Jos haluat että headerin tausta ulottuu koko näytön leveydelle mutta
        sisältö linjautuu samalla tavalla kuin sisältöalue, muokkaa `.header-inner`
        eikä `header`-elementtiä. `.header-inner` hallinnoi leveyttä (max-width)
        ja vaakasisennystä (padding).
*/

/* Perustyyli */
body {
        font-family: "Poppins", sans-serif;
        margin: 0;
        padding: 0;
        background-color: rgba(225, 241, 255, 0.5);
}

/*
    Header (sivun yläosa)

    Selitys:
    - `header` on taustaväriltään leveä laatikko koko näytön leveydellä.
    - Sisältö (otsikko ja selite) keskitetään sisäiseen kääreeseen `.header-inner`.
    - Näin voimme pitää headerin taustan koko leveydellä, mutta linjata
        tekstin tarkasti saman leveysalueen kanssa kuin muu sisältö (.container).
*/

/* Headerin kuva liitetty suoraan kansiosta */
header {
    background: #f5f5f5;
    padding: 20px 0;
    background-image: url('../img/Palkkiolaskuri_Hero.webp');
    background-size: cover;
    color: white;
    height: 500px;
}

/*
    .header-inner - keskitetty kääre

    Tämä elementti määrittää headerin sisällön leveyden ja vaakasisennyksen.
    - `max-width` pitää sisällön saman levyisenä kuin `.container`.
    - `margin:0 auto` keskittää kääreen.
    - Flex-asettelu asettaa otsikon ja selitteen vierekkäin.
*/
.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding: 0 10px;
    box-sizing: border-box;
}

/* Vasemman ja oikean header-lohkon asettelu */
.header-inner-left {
    flex: 1 1 50%;
    text-align: left;
    padding-right: 20px; 
}

.header-inner-right {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    padding-left: 20px; 
}

.header-inner-right .calc-info {
    max-width: 500px;
    font-size: 20px;
    display: block;
    text-align: left; /*Laskee tekstin vasempaan reunaan*/
    background-color: white;
    color: black;
    padding: 60px;
}

.yel-info {
    max-width: 520px;
    font-size: 18px;
    display: block;
    text-align: left; /*Laskee tekstin vasempaan reunaan*/
    background-color: white;
    color: black;
    padding: 50px;
    margin-top: 90px;
}

.logo-container {
    max-width: 520px;
    display: block;
    text-align: left; /*Laskee tekstin vasempaan reunaan*/
    background-color: white;
    color: black;
    padding: 50px;
    margin-top: 60px;
}

/* Otsikon tyyli */
.header-inner-left h1 {
    text-align: left;
    margin: 0;
    font-size: 60px;
}

/* Väliä bannerin ja ensimmäisen h2:n väliin*/
span {
    padding: 20px;
}

/*Logo alue*/
.logo-container {
    display: flex;
    justify-content: center;
    flex-direction: column;   /* keskittää logot */
    align-items: center;
    gap: 40px;                  /* väli logojen välissä */
}

.logo img {
    max-height: 70px;          /* logo kuvan koko */
    width: auto;
    display: block;
}

/* Pääsisältö */
main {
    padding: 20px;
}

/*
    Pään sisältöalue (.container) — kaksi saraketta

    - `.container` rajoittaa sisällön leveydeltä (max-width) ja keskittää sen.
    - Sen sisällä on kaksi saraketta: `content-left` (lomake) ja `content-right`
        (selitykset ja lisätiedot).
    - `gap`-arvo määrittää tilan sarakkeiden välissä.
*/
.container {
    max-width: 1400px;    /* tuodaan sisältö lähemmäksi reunoja */
    margin: 0 auto;
    padding: 0 10px;     /* pienempi sisäreunaväli */
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Vasemman puolen ja oikean puolen erottelu */
.content-left {
    padding-right: 20px;
}

.content-right {
    padding-left: 20px;
    line-height: 1.6;
}

.content-left,
.content-right {
    flex: 1;
}

/* Lomake: käytetään gridiä kahdelle sarakkeelle (label | input) ilman HTML-muutoksia */
form {
    display: grid;
    grid-template-columns: 30% 1fr;
    column-gap: 12px;
    row-gap: 12px;
    align-items: center;
}

/* Oletuksena label vasempaan sarakkeeseen, input/select oikeaan */
form > label {
    grid-column: 1;
    justify-self: start;
    margin: 0;
    font-weight: bold;
    display: inline-block; /* Firefox tarvitsee tämän */
    align-self: center;     /* Keskittää labelin pystysuunnassa */
}

form > input[type="number"],
form > input[type="text"],
form > select {
    grid-column: 2;
    width: 100%;
    margin: 0;
}

/* Rajaa inputien maksimileveys jotta ne eivät veny liian pitkiksi leveillä näytöillä */
form > input[type="number"],
form > input[type="text"],
form > select {
    max-width: 320px;
    justify-self: start; /* vasemmalle tasaus grid-sarakkeessa */
    box-sizing: border-box;
}

/* Elementit jotka haluavat kattaa molemmat sarakkeet */
form > hr,
form > .tulos-box,
form > .print-section,
form > button,
form > p {
    grid-column: 1 / -1;
}

/* Otsikkopari (h2 + heti seuraava h3): sijoitetaan vierekkäin
   h2 vasempaan sarakkeeseen, pieni yksikkö ("/ kk", "/ vuosi") oikeaan */
form > h2 {
    grid-column: 1;
    margin-top: 50px;
    margin-bottom: 20px;
    color: #005a9c;
    font-size: 22px;
    font-weight: 700;
}

form > h2 + h3 {
    grid-column: 2;
    justify-self: start;
    align-self: center;
    margin-top: 50px;
    margin-bottom: 20px;
    color: #666;
    font-size: 16px;
}

/* Jos haluat, voit merkitä tietyn h3:n luokalla 'section-subtitle' jotta se kattaa molemmat sarakkeet */
form > h3.section-subtitle {
    grid-column: 1 / -1;
}

/* Standalone h3 (ei luokkana section-subtitle): sijoita oikeaan sarakkeeseen
   jotta teksti tulee input-kentän yläpuolelle vaikka edeltävää h2:ta ei ole */
form > h3:not(.section-subtitle) {
    grid-column: 2;
    justify-self: start;
    align-self: center;
    margin-top: 50px;
    margin-bottom: 20px;
    color: #666;
    font-size: 16px;
}

/* Otsikot (vastaa alkuperäisen laskurin sinisävyä) */
form h2 {
    margin-top: 50px;
    margin-bottom: 20px;
    color: #005a9c;
    font-size: 22px;
}

form h2:first-child {
    margin-top: 0;
}

/* Labelien tyylit */

/* Tekstikentät */
input[type="number"],
input[type="text"],
select {
    padding: 7px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: auto;
    max-width: 100%;
    font-size: 14px;
}

/* Alasvetovalikot saman korkuisiksi */
select {
    height: 34px;
    background: #fff;
    cursor: pointer;
}

/* Napit */
button {
    margin-top: 15px;
    max-width: 400px;
    padding: 20px 5px;
    font-size: 18px;
    border: 1px solid #aaa;
    background: black;
    cursor: pointer;
    border-radius: 10px;
    color: white;
    font-weight: 700;
}

button:hover {
    background: #818181;
    color: black;
}

/* Tulostusnappi */
.print-button {
    background-color: #005a9c;
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
}

.print-button:hover {
    background-color: #003d6b;
}

.print-section {
    text-align: left;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
    display: none;
}

/* Tuloslaatikko */
.tulos-box {
    margin-top: 20px;
    padding: 15px;
    background: #f0f8ff;           
    
    border-radius: 8px;           
    font-size: 1.2rem;
    font-weight: 600;
    color: black;                
    display: none;                 
}

/* Tulostustyyli */
@media print {
    * {
        background: white;;
        color: black;
    }
    
    body {
        margin: 0;
        padding: 20px;
        background: white;
    }
}

/* Footer */
footer {
    text-align: center;
    background: #f5f5f5;
    height: 40px;
}

/*loppu logolaatikon tyylit*/
.loppu-logo-container {
    background-color: #121B1F;
    padding: 40px;

}

/*Footerin logojen koko*/
.loppu-logot {
    max-height: 120px;
}

/* Responsiivisuus
     @media screen and (max-width: 1024px)

     Tämä media-query kohdistuu kapeampiin näyttöihin (esim. tabletit ja pienemmät näytöt).
     Se muuttaa sivun asettelun yksipalstaiseksi ja parantaa luettavuutta kosketusnäytöillä
     tekemällä seuraavia muutoksia:
     - muuttaa kaksisarakkeisen `.container`-asettelun pystysuuntaiseksi (yksi sarake)
     - pinottaa headerin sisällön pystysuoraan ja keskittää otsikot
     - kaventaa ja keskittää oikean puolen laatikot (`.yel-info`, `.logo-container`)
     - muuttaa lomakkeen yksipalstaiseksi, kasvattaa kenttien leveyttä ja säätää labelien
         asemaa mobiilikäyttöön sopivaksi
     - säätää nappien ja logokuvien leveyksiä kosketusystävällisemmiksi

     Breakpoint: 1024px (sopiva rajapiste tableteille ja pienemmille näytöille).
*/
@media screen and (max-width: 1024px) {

    /* Yksi sarake koko sivulle */
    .container {
        flex-direction: column;
        padding: 0 15px;
        gap: 20px;
    }
    /* Sisältöalueet pinottuna, täyttävät koko leveyden */
    .content-left,
    .content-right {
        padding: 0;
        width: 100%;
    }

    /* Header: sisältö pinottuna, keskitettynä, ja otsikot keskitettynä */
    header {
        height: auto;
        min-height: 400px;
        padding: 20px 15px;
    }

    /* Headerin sisäiset elementit pinottuna ja keskitettynä */
    .header-inner {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        align-items: center;
    }

    /* Headerin vasen ja oikea lohko täyttävät koko leveyden, otsikot keskitettynä */
    .header-inner-left,
    .header-inner-right {
        width: 100%;
        padding: 0;
    }

    .header-inner-left h1 {
        text-align: center;
        font-size: 1.8rem;
    }

    .header-inner-left h3 {
        text-align: center;
    }

    .header-inner-right {
        justify-content: center;
    }

    /* Laskurin selite ja oikean puolen laatikot kavennetaan ja keskitetään, jotta ne eivät veny liian leveiksi mobiilissa */
    .header-inner-right .calc-info {
        max-width: 700px;
        width: 90%;
        padding: 20px;
        text-align: left;
        margin: 40px auto -60px auto;
    }

    /* Oikean puolen laatikot keskelle */
    .yel-info,
    .logo-container {
        width: 90%;
        max-width: 700px;
        margin: 20px auto 0 auto;
        padding: 20px;
    }

    /* LOMAKE: yksipalstainen ja keskitetty */
    form {
        display: block;
        width: 90%;
        max-width: 700px;
        margin: 0 auto;
        text-align: center;
    }

    /* Labelit ja inputit täyttämään koko leveyden, mutta rajoitetaan maksimileveyttä jotta ne eivät veny liian leveiksi mobiilissa */
    form label {
        display: block;
        width: 100%;
        margin: 15px auto 5px auto;
        font-weight: bold;
        text-align: left;
    }

    form input,
    form select {
        display: block;
        width: 100%;
        margin: 0 auto 12px auto;
    }

    form > input[type="number"],
    form > input[type="text"],
    form > select {
        max-width: none;
        justify-self: center;
    }

    /* Otsikot keskitetään, mutta h2 ja h3 pidetään erillään jotta ne eivät mene päällekkäin */
    form h2 {
        text-align: left;
        margin-top: 25px;
    }

    /*H3:set jotka eivät ole section-subtitle, sijoitetaan keskelle input-kenttien yläpuolelle*/
    form > h3,
    form > h3:not(.section-subtitle) {
        width: 100%;
        margin: 20px auto 10px auto;
        text-align: left;
        grid-column: auto;
    }

    /* Napit täyttämään koko leveyden, mutta rajoitetaan maksimileveyttä jotta ne eivät veny liian leveiksi mobiilissa */
    button {
        width: 100%;
        max-width: 500px;
        margin: 20px auto 0 auto;
        display: block;
    }

    /* Logot keskitettynä ja kavennettuina, jotta ne eivät veny liian leveiksi mobiilissa */
    .logo-container {
        gap: 20px;
        align-items: center;
    }

    .logo img {
        width: 100%;
        max-width: 200px;
        height: 55px;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }

    /* Loppu logolaatikon logot keskitettynä ja kavennettuina, jotta ne eivät veny liian leveiksi mobiilissa */
    .loppu-logo-container img {
        width: auto;
        max-width: 90%;
        height: auto;
        max-height: 60px;
        display: block;
        margin: 0 auto;
    }

    /* Sisältöalueiden tekstit keskitettynä ja kavennettuina, jotta ne eivät veny liian leveiksi mobiilissa */
    .content-left > p {
        width: 90%;
        max-width: 700px;
        margin: 20px auto;
        text-align: left;
    }
}