/* Oman fontin käyttö */
@font-face {
    font-family: 'HoneyRoom'; /* Fontin nimi */
    src: url('HoneyRoom.ttf') format('truetype'); /* Hakee tiedostoista fontti-tiedoston */
    font-weight: normal; /* Normaali fontin paksuus, ei boldattu */
    font-style: normal; /* Normaali fontin tyyli, ei kursivoitu */
}

/* Säiliön keskitys ja reunoille jäävä tyhjä tila */
.container {
    text-align: center; /* Keskitys */
    padding: 0 16px; /* Reunoille jäävä tyhjä tila sisäänpäin */
}

/* Sivujen yleinen ulkoasu */
body {
    background-color: #bde3f7; /* Taustan väri */
    margin: 0; /* Elementin ulkoinen marginaali */
    padding: 0; /* Reunojen tyhjä tila */
    font-family: 'HoneyRoom'; /* Käytetty fontti */
}

/* Ylätunnisteen kuva */
.header-image {
    position: relative; /* Säilyttää normaalin paikkansa sivun rakenteessa */
    width: 100%; /* Asettaa elementin leveydeksi 100 % sen sisältävän elementin leveydestä. */
    height: auto; /* Antaa elementin korkeuden mukautua sisällön mukaan */
    overflow: hidden; /* Piilottaa kaiken sisällön, joka ylittää elementin rajat */ 
    display: flex; /* Ottaa käyttöön flexbox-asettelun, joka mahdollistaa elementtien helpon kohdistamisen ja jakamisen riviin tai sarakkeeseen. */
    justify-content: center; /* Keskittää sisällön vaakasuunnassa */
    align-items: center; /* Keskittää sisällön pystysuunnassa */
}

/* Headerin kuva */
.header-img {
    width: 100%; /* Leveys */
    height: 100%; /* Korkeus */
    object-fit: cover; /* Täyttää kokonaan elementin tilan ja säilyttää mittasuhteet */
    object-position: center center; /* Keskittää kuvan sekä vaaka- että pystysuunnassa */
}

/* Logo headeriin */
.logo-container {
    position: absolute; /* elementti sijoitetaan suhteessa sen lähimpään suhteellisesti (tai absoluuttisesti) sijoitettuun vanhempaan elementtiin. */
    z-index: 10; /* Varmistaa, että logo on muiden elementtien päällä */
    display: flex; /* Ottaa käyttöön flexbox-asettelun, joka mahdollistaa elementtien helpon kohdistamisen ja jakamisen riviin tai sarakkeeseen. */
    justify-content: center; /* Keskittää logon vaakasuunnassa */
    align-items: center; /* Keskittää logon pystysuunnassa */
    top: 40%; /* Pienennetty top-arvo, logo siirtyy hieman ylemmäs */
    left: 50%; /* Keskittää logon vaakasuunnassa */
    transform: translate(-50%, -50%); /* Siirtää elementtiä takaisin keskelle */
}

/* Logon skaalaus */
.header-logo {
    max-width: 100%; /* Logo ei kasva yli säilöönsä */
    width: auto; /* Leveys säilyttää mittasuhteet */
    height: auto; /* Korkeus säilyttää mittasuhteet */
}

/* Kieli-nappien asemointi */
.language-buttons {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px; /* Nappien väli */
}

/* Navigointinapit, kun kursori menee nappien päälle */
.language-buttons:hover {
    opacity: 0.8; /* Läpinäkyvyys */
    cursor: pointer; /* Kursori muuttuu nappien päällä sormeksi */
}

/* Navigointinappien asemointi */
.custom-nav {
    display: flex;
    justify-content: center; /* Keskittää napit vaakasuunnassa */
    gap: 5px; /* Nappien väli */
    margin-top: -10px; /* Nostaa navigointia ylemmäs */
    padding: 20px 0;
    flex-wrap: wrap; /* Rivittää napit tarvittaessa pienemmillä näytöillä */
}

/* Navigointinapit */
.nav-button {
    height: 55px; /* Sama korkeus kaikille */
    object-fit: contain; /* Skaalaa kuvat mittasuhteet säilyttäen */
}

/* Navigointinapit, kun kursori menee nappien päälle */
.nav-button:hover {
    opacity: 0.8; /* Läpinäkyvyys */
    cursor: pointer; /* Kursori muuttuu nappien päällä sormeksi */
}

/* Lisää tilaa pääotsikoiden väliin */
h1 {
    margin-top: 50px; 
}

p {
    font-size: 20px;
}

/* Gif-kuvat otsikon molemmin puolin */
.gif-left,
.gif-right {
  display: inline-block; /* Asetetaan elementti riville tekstin kanssa */
  width: 32px;
  height: 32px;
  background-repeat: no-repeat; /* Kuvia ei toisteta */
  vertical-align: middle; /* Keskitetään kuvat vaakatasossa*/
}

/* Yksittäisen gif-kuvan marginaali ja haettava tiedosto */
.gif-left {
  background-image: url('sam.gif');
  margin-right: 8px; /* Rako tekstin ja kuvan välillä */
}

.gif-right {
  background-image: url('pebble.gif');
  margin-left: 8px;
}


/* QR-koodin container */
.qr-container {
    text-align: center; /* Keskittää QR-koodin */
    margin: 20px 0; /* Lisää väliä ympärille */
}

/* QR-koodi */
.qr-code {
    width: 100px; /* Määritä sopiva koko */
    height: auto;
    margin-top: 10px;
}

/* Gallerian container */
#gallery {
    margin-top: 50px;
    text-align: center;
}

/* Gallerian kuvat */
.gallery {
    display: flex; /* Flexbox */
    flex-wrap: wrap; /* Kuvat menee toiselle riville jos ei mahdu samalle riville */
    justify-content: center; /* Keskittää kuvat */
    gap: 16px; /* Väli kuvien välillä */
}

/* Yksittäinen kuva */
.gallery-item {
    width: 30%; /* 3 kuvaa per rivi */
    margin-bottom: 16px;
}

.gallery-image {
    width: 100%; /* Täyttää kuvapohjan */
    height: auto; /* Säilyttää kuvan mittasuhteet */
    object-fit: cover;
    border-radius: 8px; /* Pehmeät kulmat */
    transition: opacity 0.3s ease; /* Sujuva läpinäkyvyysvaikutus */
}

/* Läpinäkyvyys efekti kuviin, kun kursori menee päälle */
.gallery-image:hover {
    opacity: 0.8; /* Muuttaa läpinäkyvyyttä kursori päällä */
    cursor: pointer; /* Muuttaa kursoria sormeksi */
}

/* Modal (popup-kuva) */
.modal {
    display: none; /* Piilotettu oletuksena – näkyviin vain kun käyttäjä klikkaa kuvaa */
    position: fixed; /* Asetetaan näkymä kiinteäksi koko näytölle */
    z-index: 1000; /* Varmistetaan, että modal tulee muiden elementtien päälle */
    padding-top: 60px; /* Jätetään tilaa yläreunaan */
    left: 0;
    top: 0;
    width: 100%; /* Peittää koko näytön leveydeltä */
    height: 100%; /* Peittää koko näytön korkeudelta */
    overflow: auto; /* Mahdollistaa sisällön vierittämisen, jos se on liian suuri */
    background-color: rgba(0,0,0,0.9); /* Tumma läpinäkyvä tausta (90 % peittävä musta) */
}
  
/* Modalin sisällä oleva kuva, suurempi versio */
.modal-content {
    margin: auto; /* Keskitetään kuva vaakasuunnassa */
    display: block; /* Näytetään block-elementtinä */
    max-width: 80%; /* Kuvan enimmäisleveys 80 % näytöstä */
    max-height: 80%; /* Kuvan enimmäiskorkeus 80 % näytöstä */
    border-radius: 8px; /* Pyöristetyt kulmat kuvalle */
}
  
/* Kuvatekstit kuville */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
}
  
/* Gallerian sulkemispainike */ 
.close {
    position: absolute;
    top: 30px;
    right: 45px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}
  
/* Gallerian sulkemispainikkeen hover ja focus */
.close:hover,
  .close:focus {
    color: #bbb;
}  

#team {
    text-align: center;
}

.team-logo {
    margin-bottom: 5px;
}

.team-member {
    display: inline-block; /* Kuvan ja alla olevan tekstin linjaus */
    width: 220px; /* Kuvan ja tekstin leveys */
    margin: 20px; /* Väli tiimin jäsenten välillä */
}

.team-photo {
    width: 100%; /* Kuva täyttää koko divin leveysalueen */
    height: auto;
    border-radius: 50%; /* Pyöristää kuvan kulmat (esim. ympyräksi) */
    margin-bottom: 10px; /* Väli kuvan ja tekstin välille */
}

.team-member h2 {
    font-size: 18px; /* Nimen fonttikoko */
    margin: 5px 0;
}

.team-member p {
    font-size: 14px; /* Tittelin fonttikoko */
    color: #555; /* Tummanharmaa väri tittelille */
}

.partner-row {
    display: flex;
    justify-content: center; /* Keskittää kuvat vaakasuunnassa */
    align-items: center;     /* Keskittää kuvat pystysuunnassa */
    gap: 20px;               /* Väli kuvien välillä */
    flex-wrap: wrap;         /* Säädetään, että kuvat rivittyvät pienillä näytöillä */
}

/* Läpinäkyvyys efekti kuviin, kun kursori menee päälle */
.partner-image:hover {
    opacity: 0.8; /* Muuttaa läpinäkyvyyttä kursori päällä */
    cursor: pointer; /* Muuttaa kursoria sormeksi */
}

/* Optimoitu kuva (muun sisällön kuvat) */
.responsive-image {
    width: 350px;           /* Kiinteä leveys, voi säätää tarpeen mukaan */
    max-width: 100%;        /* Ei saa ylittää vanhemman elementin leveyttä */
    height: auto;
    display: block;
    object-fit: contain;    /* Säilyttää mittasuhteet ilman rajausta tai venytystä */
    margin: 0 auto;
}

/* Footerin kuva */
.footer-image {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center; /* Keskittää kaikki footerin sisällön */
}

.footer-image p {
    margin: 10px 0; /* Lisätään hieman tilaa tekstien ympärille */
}

.footer-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

html {
    scroll-behavior: smooth;
}

/* Responsiivisuus */
@media (min-width: 768px) {
    .container {
        padding: 0 60px;
    }
}

@media (max-width: 600px) {
    .nav-button {
        height: 40px;
    }
}

@media (max-width: 768px) {
    .gallery-item {
        width: 45%; /* Kaksi kuvaa per rivi pienemmillä näytöillä */
    }

    .language-buttons {
        top: 15px; /* Kielinappien sijainti */
    }

    .language-buttons img {
        width: 28px; /* Kielilippujen koko */
        height: auto;
    }
}

@media (max-width: 480px) {
    .gallery-item {
        width: 100%; /* Yksi kuva per rivi mobiililaitteilla */
    }

    .language-buttons {
        top: 10px; /* Kielinappien sijainti */
        gap: 8px; /* Tyhjä tila nappien välillä */
    }

    .language-buttons img {
        width: 24px; /* Kielilippujen koko */
        height: auto;
    }
}