/* kaikkien html-elementtien oletus-ulkomarginaalit, oletussisennykset. Border-box helpottaa html-elementtien koon hallintaa. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* sivun taustan väri */
body {
    background-color: #d0e3dc;
}

/* osakaskunnan sivuston yläosassa oleva kuva */
.hero {
    height: 35vh;
    /* kuvan koko on 35 % selainikkunan korkeudesta. */
    background-image: url("kuvat/IMG_20260830_154351.jpg");
    /* kuvan sijaintipolku. */
    background-size: cover;
    /* koko hero-alue täytetään kuvalla. */
    background-position: center 48%;
    /* kuva rajataan alareunasta. */
    display: flex;
    /* tällä saadaan hero-osio (yläosan kuva) flexboxiksi ja sen päälle saadaan tekstielementti. */
    justify-content: flex-start;
    /* hero-osion sisällön (tekstielementin) sijainti vaakasuunnassa. */
    align-items: flex-end;
    /* hero-osion sisällön (tekstielementin) sijainti pystysuunnassa */
    position: relative;
    /* mahdollistaa elementtien tarkan sijoittamisen hero-alueen päälle. */
}

/* hero-osion tekstielementin asettelu. */
.hero-content {
    text-align: left;
    margin-bottom: 40px;
    margin-left: 50px;
}

/* hero-osion tekstin tyyliasetukset. */
.hero h1 {
    font-family: Georgia, serif;
    font-size: 3rem;
    color: white;
    font-weight: bold;
    padding-bottom: 10px;
}

/* valikon taustan väri */
.paa-valikko {
    background-color: #3F6657;
}

/* valikon asettelu */
.paa-valikko>ul {
    list-style: none;
    display: flex;
    justify-content: center;
    margin-left: 5px;
}

/* alavalikon avautuu oikein päävalikon alle */
.paa-valikko li {
    position: relative;
}

.paa-valikko a {
    display: block;
    /* valikon linkkien ympärillä oleva alue sisältyy linkkiin (ei pelkkä teksti). */
    padding: 18px 50px;
    /* valikon linkkien ympärillä on reilusti tilaa */
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-family: Georgia, serif;
    font-size: 1.2rem;
}

/* valikon linkin taustaväri muuttuu hieman, kun hiiri viedään sen päälle. */
.paa-valikko a:hover {
    background-color: #35564A;
}

.paa-valikko .alasveto-linkki {
    display: block;
    padding: 18px 50px;
    color: white;
    background: none;
    border: none;
    font-weight: bold;
    font-family: Georgia, serif;
    font-size: 1.2rem;
    cursor: pointer;
}

.paa-valikko .alasveto-linkki:hover {
    background-color: #35564A;
}

/* valikon linkin perään tuleva pieni nuoli, joka kertoo että siitä aukeaa alasvetovalikko. */
.alasveto-linkki::after {
    content: " ▼";
    font-size: 0.8rem;
    margin-left: 8px;
}

/* alasvetovalikon asettelu. */
.alavalikko {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 240px;
    background-color: #3F6657;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    z-index: 1000;
}

/* Näytä alavalikko hiiren ollessa päävalikon päällä */
.alasveto:hover .alavalikko {
    display: block;
}

/* Alavalikon linkit */
.alavalikko a {
    padding: 14px 20px;
    font-weight: normal;
    font-size: 1rem;
    white-space: nowrap;
}

/* hampurilaisvalikko piilotetaan selainnäkymässä */
.kala-hampurilaisvalikko {
    display: none;
}

main {
    max-width: 1500px;
    /* sivun pääsisällön leveys */
    margin: 50px auto;
    /* ylä- ja alareunan marginaali 50 px, sisällön keskitys. */
    padding: 0 20px;
    /* tilaa sivuille, jotta sisältö ei ole ihan kiinni reunassa. */
}

/* Ajankohtaista -kortin tyyliasetukset*/
.ajankohtaista {
    background-color: white;
    /* taustan väri */
    border-radius: 12px;
    /* kulmien pyöristys */
    padding: 35px 40px;
    /* tilaa sisällön sivuille (ylä/ala, vasen/oikea) */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    /* kortin reunaan pieni varjostus */

}

/* ajankohtaista-kortin tekstien tyyliasetukset */
.ajankohtaista h2 {
    font-family: Georgia, serif;
    color: #355B4C;
    margin-bottom: 20px;
}

/* ajankohtaista-kortin uutisten tyyliasetukset */
.uutinen {
    background-color: #F4F7F2;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 15px;
}

/* uutisten kellonajan tyyliasetukset */
.uutinen time {
    display: block;
    font-family: Georgia, serif;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 8px;
}

/* uutisten otsikoiden tyyliasetukset */
.uutinen h3 {
    font-family: Georgia, serif;
    font-size: 1.2rem;
    color: #355B4C;
    margin-bottom: 10px;
}

/* uutisten perustekstin tyyliasetukset */
.uutinen p {
    font-family: Georgia, serif;
    font-size: 0.95rem;
    color: #34423D;
    line-height: 1.6;
    margin-bottom: 0;
}

/* uutisten linkin tyyliasetukset */
.uutinen a {
    font-family: Georgia, serif;
    font-size: 0.95rem;
    color: #34423D;
    line-height: 1.6;
    margin-bottom: 0;
}

/* sivuston korttien pohjan tyyliasetukset */
.esittely {
    background-color: white;
    /* taustan väri */
    border-radius: 12px;
    /* kulmien pyöristys */
    padding: 35px 40px;
    /* tilaa sisällön sivuille (ylä/ala, vasen/oikea) */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    /* kortin reunaan pieni varjostus */
    margin-bottom: 30px;
}

/* korttien otsikon tyyliasetukset */
.esittely h2 {
    font-family: Georgia, serif;
    color: #3F6657;
    margin-bottom: 20px;
}

/* esittely-korttien perustekstin tyyli */
.esittely p {
    font-family: Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 18px;
    color: #333;
}

/* esittely-korttien sisältökortin tyyli */
.esittely-kortti {
    background-color: #F4F7F2;
    padding: 30px;
    border-radius: 12px;
}

/* sisältökortin otsikon tyyli */
.esittely-teksti h3 {
    font-family: Georgia, serif;
    font-size: 1.2rem;
    color: #3F6657;
    margin-bottom: 8px;
}

/* osakaskunta-sivun hoitokunnan jäsenlistan tyyli */
.hoitokunta-lista {
    margin-top: 25px;
}

/*osakaskunta-sivun jäsenlistan tietojen tyyli */
.hoitokunta-henkilo {
    display: grid;
    grid-template-columns: 200px 200px 500px 200px;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    background-color: #F4F7F2;
    border-bottom: 1px solid #d6d6d6;
}

/* jäsenlistan otsikon tyyli */
.hoitokunta-henkilo h3 {
    font-family: Georgia, serif;
    font-size: 1.1rem;
    color: #355B4C;
    margin: 0;
}

/* jäsenlistan perustekstin tyyli */
.hoitokunta-henkilo p {
    font-family: Georgia, serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #34423D;
    margin: 0;
}

/* jäsenlistan roolin tyyli */
.hoitokunta-henkilo .rooli {
    font-size: 0.9rem;
    font-style: italic;
    color: #666;
}

/* jäsenlistan puhelinnumeron tyyli */
.hoitokunta-henkilo .puhelin {
    font-weight: bold;
    color: #3F6657;
}

/*jäsenlistna osoitteiden rivinvaihtoa ei näytetä selainnäkymässä */
.mobiili-rivinvaihto {
    display: none;
}

/*linkkien tyyliasetukset */
.pdf-linkki {
    display: inline-block;
    /* linkki kattaa suorakaiteen muotoisen alueen linkkitekstin ympärillä */
    margin-top: 15px;
    padding: 12px 20px;
    background-color: #3F6657;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
}

/* linkin taustan väri muuttuu kun hiiri viedään sen päälle */
.pdf-linkki:hover {
    background-color: #3b666b;
}

/* sivuilla olevien linkkien yläpuolelle jää tilaa */
.linkkilista {
    margin-top: 30px;
}

/* linkkikorttien tyyliasetukset */
.linkkikortti {
    display: block;
    background-color: #F4F7F2;
    border-left: 6px solid #3F6657;
    padding: 18px 25px;
    margin-bottom: 18px;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: 0.2s;
    /* pieni hidastus hover-efektille */
}

/* linkkikortin tyyliasetukset kun hiiri viedään kortin päälle */
.linkkikortti:hover {
    background-color: #d0e3dc;
    transform: translateX(5px);
    /* kun hiiri viedään linkin päälle, elementti siirtyy 5 pikseliä oikealle. */
}

/* linkkikorttien otsikon tyyli */
.linkkikortti h3 {
    color: #3F6657;
    margin-bottom: 8px;
}

/* esittelytekstin linkit alleviivataan */
.esittely-teksti a {
    color: #3F6657;
    text-decoration: underline;
}

/*esittelytekstin linkkien väri korostuu, teksti pysyy alleviivattuna ja se muuttuu vahvemmaksi, kun hiiri viedään linkin päälle */
.esittely-teksti a:hover {
    color: #355348;
    text-decoration: underline;
    font-weight: bold;
}

/* muut vesialueet -sivulla olevan Pyhäjoen esittelykortin tyyli on samanlainen kuin linkkikorttien tyyli */
.esittely-kortti-vesialueet {
    display: block;
    background-color: #F4F7F2;
    border-left: 6px solid #3F6657;
    padding: 18px 25px;
    margin-bottom: 18px;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
}

/* kalastusluvat-sivun valikoiden tyyli */
details {
    display: block;
    background-color: #F4F7F2;
    border-left: 6px solid #3F6657;
    padding: 0;
    margin-bottom: 18px;
    border-radius: 8px;
    overflow: hidden;
    transition: 0.2s;
}

/* kalastusluvat-sivun valikoista avautuvan kentän perustekstin tyyli */
details p {
    padding: 20px 25px;
    margin: 0;
    font-family: Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
}

/* kalastusluvat-sivun valikoista avautuvan kentän linkkien tyyli */
details a {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #3F6657;
    text-decoration: underline;
}

/* kalastusluvat-sivun valikosta avautuvan kentän linkkien tyyli kun hiiri viedään linkin päälle */
details a:hover {
    color: #355348;
    text-decoration: underline;
    font-weight: bold;
}

/* kalastuskuvat-sivun valikon tyyli */
summary {
    padding: 18px 25px;
    cursor: pointer;
    font-family: Georgia, serif;
    font-size: 1.2rem;
    font-weight: bold;
    color: #3F6657;
    list-style: none;
}

/* kalastusluvat-sivun valikon tyyli kun hiiri viedään valikon päälle */
summary:hover {
    background-color: #d0e3dc;
}

/* kalastusluvat-sivun valikon nuoli */
summary::after {
    content: " ▼";
    font-size: 0.8rem;
    margin-left: 8px;
}

/* kalastusluvat-sivun valikon nuoli muuttuu kun valikko on avattu */
details[open] summary::after {
    content: " ▲";
}

/* kalastusluvat-sivun kortit rinnakkain */
.esittely-luvat-rivi {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}


.esittely-luvat {
    flex: 1;
    background-color: white;
    /* taustan väri */
    border-radius: 12px;
    /* kulmien pyöristys */
    padding: 35px 40px;
    /* tilaa sisällön sivuille (ylä/ala, vasen/oikea) */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    /* kortin reunaan pieni varjostus */
    margin-bottom: 30px;
}

/* korttien tekstien tyyliasetukset */
.esittely-luvat h2 {
    font-family: Georgia, serif;
    color: #3F6657;
    margin-bottom: 20px;
}

/* kalastusluvat-kortin otsikon tyyli */
.esittely-luvat h3 {
    font-family: Georgia, serif;
    color: #3F6657;
    margin-bottom: 20px;
}

/* kalastusluvat-kortin perustekstin tyyli */
.esittely-luvat p {
    font-family: Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 18px;
    color: #333;
}

/* Luvanmyyntipaikkojen lista */

.luvanmyyntipaikat {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 10px;
}

.luvanmyyntipaikka {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    background-color: #F4F7F2;
    border-left: 6px solid #3F6657;
    border-radius: 8px;
}

.luvanmyyntipaikka strong {
    font-family: Georgia, serif;
    font-size: 1.05rem;
    color: #355B4C;
    margin-bottom: 4px;
}

.luvanmyyntipaikka span {
    font-family: Georgia, serif;
    font-size: 1rem;
    line-height: 1.4;
    color: #34423D;
}

/* kuvia-sivun korttipohjan tyyli */
.kuvakortti {
    background-color: white;
    /* taustan väri */
    border-radius: 12px;
    /* kulmien pyöristys */
    padding: 35px 40px;
    /* tilaa sisällön sivuille (ylä/ala, vasen/oikea) */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    /* kortin reunaan pieni varjostus */
    margin-bottom: 30px;
}

/* kuvia-sivun korttien otsikoiden tyyli */
.kuvakortti h2 {
    font-family: Georgia, serif;
    color: #3F6657;
    margin-bottom: 20px;
}

/* kuvia-sivun korttien perustekstin tyyli */
.kuvakortti p {
    font-family: Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 18px;
    color: #333;
}

/* kuvakarusellin tyyli */
.kuvakaruselli {
    position: relative;
    width: 1000px;
    max-width: 100%;
    margin: 30px auto;
}

/* kuvakarusellin kuvakentän tyyli */
.kuvakaruselli figure {
    display: none;
    margin: 0;
}

/* kuvakarusellin aktiivisena olevan (näytettävän kuvan) tyyli */
.kuvakaruselli figure.aktiivinen {
    display: block;
}

/* kuvakarusellin kuvien tyyli */
.kuvakaruselli img {
    width: 100%;
    height: 500px;
    object-fit: contain;
    display: block;
}

/* kuvakarusellin kuvatekstien tyyli */
.kuvakaruselli figcaption {
    padding: 10px;
    color: #333;
    text-align: center;
    font-style: italic;
    font-family: Georgia, serif;
}

/* kuvakarusellin kuvanvaihtonuolten tyyli */
.edellinen,
.seuraava {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 2rem;
    padding: 10px 18px;
    cursor: pointer;
    z-index: 2;
}

.edellinen {
    left: 10px;
}

.seuraava {
    right: 10px;
}

/* Mieluskosken kuvakaruselli näytetään, kun Mieluskoski-sivun linkistä siirrytään katsomaan kuvakarusellia. */
#Kuvat_mieluskoski {
    scroll-margin-top: 70px;
}


/* TYYLIASETUKSET MOBIILILAITTEITA VARTEN */

@media (max-width: 768px) {

    main {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .hero {
        max-height: 20vh;
    }

    .hero-content {
        margin-bottom: 5px;
        margin-left: 20px;
        margin-right: 20px;
    }

    .hero h1 {
        font-size: 1.7rem;
    }

    .kala-hampurilaisvalikko {
        display: block;
        background: none;
        border: none;
        color: white;
        font-size: 2rem;
        cursor: pointer;
        padding: 10px 20px;
    }

    .paa-valikko>ul {
        display: none;
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .paa-valikko>ul.auki {
        display: flex;
    }

    .paa-valikko a {
        padding: 14px 20px;
    }

    /* Alavalikot ovat mobiilissa oletuksena kiinni */

    .paa-valikko .alavalikko {
        display: none;
    }

    .alasveto:hover .alavalikko {
        display: none;
    }

    .alasveto.auki .alavalikko {
        display: block;
    }

    /* Alavalikon linkit */
    .paa-valikko .alavalikko a {
        padding: 12px 35px;
        white-space: normal;
    }

    .paa-valikko .alasveto-linkki {
        display: block;
        padding: 14px 20px;
        color: white;
        background: none;
        border: none;
        font-weight: bold;
        font-family: Georgia, serif;
        font-size: 1.2rem;
        cursor: pointer;
    }

    .paa-valikko .alasveto-linkki:hover {
        background-color: #35564A;
    }

    .alasveto.auki .alasveto-linkki::after {
        content: " ▲";
    }

    .kortit {
        flex-direction: column;
    }

    .esittely-kortti {
        flex-direction: column;
    }


    .hoitokunta-lista {
        margin-top: 20px;
    }

    .hoitokunta-henkilo {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;

        padding: 18px 20px;
        margin-bottom: 12px;

        border: none;
        border-left: 5px solid #3F6657;
        border-radius: 8px;
        background-color: #F4F7F2;
    }

    .hoitokunta-henkilo h3 {
        font-size: 1.15rem;
        margin-bottom: 2px;
    }

    .hoitokunta-henkilo p {
        font-size: 0.95rem;
        line-height: 1.4;
    }

    .hoitokunta-henkilo .rooli {
        font-size: 0.9rem;
        margin-bottom: 5px;
    }

    .hoitokunta-henkilo .osoite {
        margin-top: 3px;
    }

    .hoitokunta-henkilo .puhelin {
        margin-top: 3px;
    }

    .hoitokunta-henkilo p:empty {
        display: none;
    }

    .mobiili-rivinvaihto {
        display: inline;
    }

    .esittely-luvat-rivi {
        flex-direction: column;
        gap: 20px;
    }

    .esittely-luvat {
        width: 100%;
    }

    .luvanmyyntipaikat {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .luvanmyyntipaikka {
        padding: 16px 18px;
    }

    .kuvakortti {
        padding: 20px 15px;
        margin-bottom: 20px;
    }

    .kuvakortti h2 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    .kuvakaruselli {
        width: 100%;
        margin: 15px auto;
    }

    .kuvakaruselli img {
        width: 100%;
        height: 300px;
        object-fit: contain;
    }

    .kuvakaruselli figcaption {
        padding: 8px 5px;
        font-size: 0.9rem;
    }

    .edellinen,
    .seuraava {
        font-size: 1.5rem;
        padding: 8px 12px;
    }

    .edellinen {
        left: 5px;
    }

    .seuraava {
        right: 5px;
    }

    .esittely-kortti p {
        font-size: 1rem;
    }

    .esittely-teksti p {
        font-size: 1rem;
    }

    /* kalastusluvat-kortin perustekstin tyyli */
    .esittely-luvat p {
        font-size: 1rem;

    }
}