/*KAIKILLE YHTENAISET*/

/* Tausta*/
body {
    background-color: white;
    margin: 0;
    text-align: center;
}
html, body {
    overflow-x: hidden;
    max-width: 100%;
}


/* Navigation */
.navigation {
    font-family: "Londrina Solid", cursive;
    font-weight: 400;
    background-color: #402309;
}

.navigation ul {
    list-style-type: none;
    margin: 0%;
    padding: 0%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.navigation ul li {
    flex: 1 1 auto;
    text-align: center;
}

.navigation ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 0.8rem 1rem;
    text-decoration: none;
}

.navigation ul li a.active {
    color: #000000;
    background-color: #C29864;
}

/* Hover*/
.navigation ul li a:hover {
    color: #ffffff;
    background-color: #2b1b08;
}

/* Navigaation highlight vari */
body.index .navigation ul li a[href="index.html"],
body.ajanvaraus .navigation ul li a[href="ajanvaraus.html"],
body.henkilokunta .navigation ul li a[href="henkilokunta.html"],
body.yhteystiedot .navigation ul li a[href="yhteystiedot.html"] {
    background-color: #C29864;
    color: black;
} 
/* Otsikot*/
h1{
    font-family: "Merriweather Sans", sans-serif;
    color: white;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);

}


/*Leipäteksti*/
p {
    font-family:  "Merriweather Sans", sans-serif;
    color: black;
}

/*Logon tyyli*/
.logo{
 font-size: 1.5rem;
  color: black;
  text-decoration: none;
  font-family: "Merriweather Sans", sans-serif;
  text-align: center;
}

/*Kuvat*/
img {
    width: 100%;
    display: block;
    object-fit: cover;
}

h2 {
    color: black;
    font-weight: 400;
    font-family: "Merriweather Sans", sans-serif;
    padding: 0%;
    margin: 0%;
    text-align: center;
}


/* Card layout */
.card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 60px 10%;
}
.card img {
    width: 50%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.card .text {
    display: flex;
    flex-direction: column;
    text-align: left;
    flex: 1;
}
.card-title{
    text-align: left;
}

/*Mobiilin skaalaus*/
@media (max-width: 768px) {
    .card {
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
        padding: 20px 5%;
    }
    h2 {
        font-size: 1.5rem; /* 24px */
    }

    .card h2 {
        font-size: 1.5rem;
    }

    .card p {
        font-size: 0.875rem; /* 14px */
    }

    .card .text {
        text-align: center;
        align-items: center;
        padding: 0 10px;
    }
    .text{
        padding: 0 10px;
    }

    .card img {
        width: 100%;
    }
}
/*Tekijänoikeudet-muotoilu*/
.tekijanoikeus{
  color: #c59d5f;
  text-decoration: none; 
}

/* ETUSIVU */

/*Painike*/
.button {
  background-color: #C29864;
  border: none;
  color: white;
  padding: 15px 32px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 10px;
  transition-duration: 0.4s;
  font-family: Inter;
}

/*Varjostus painikkeeseen*/
.button:hover {
  background-color: green;
}

/* Hero index*/
.hero {
    position: relative;
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 50px;
}

.hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0; /*kuva on alempi*/
}

.hero-text {
    display: block;
    position: relative;
    z-index: 1; /* teksti on ylempi */
}

.hero-text h1{
    color: #000000;
    text-shadow: none;
}


/*Kuvagalleria*/
.gallery {
  padding: 40px 20px;
  text-align: center;
}

.gallery-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: nowrap;   /* keep them in one row on desktop */
}
 
.gallery-container img {
  width: 100%;
  max-width: 250px;    /* controls image size */
  height: 250px;
  object-fit: cover;   /* keeps images nicely cropped */
  border-radius: 8px;
}


/*Gallery mobiilissa*/
@media (max-width: 600px){
    

 .gallery-container {
 flex-direction: column;
align-items: center;
 }
 
.gallery-container img {
 max-width: 90%;
 height: auto;
 }
}

/* Footer */
.flex-container-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px;
    background-color: #402309;
    color: white;
    font-size: 20px;
    text-align: center;
}

.table-class {
    margin: 0 auto;
}

.table-class th,
.table-class td {
    padding: 8px 20px;
    text-align: center;
}
  /*Footer mobiili */
  @media(max-width: 600px){
    
  .flex-container-footer {
        font-size: 12px;
        padding: 12px;
    }

    .table-class th,
    .table-class td {
        font-size: 11px;
        padding: 4px;
    }
}


/*Ajanvaraus*/

/*Hero*/
.ajanvaraus {
    position: relative;
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.ajanvaraus-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.ajanvaraus-text {
    display: block;
    position: relative;
    z-index: 1;
}


/*Sähkoposti-linkki*/
.sahkoposti{
  color: #c59d5f;
  text-decoration: none;
}

/*HENKILOKUNTA*/

/*Hero henkilokunta*/
.henkilokunta {
    position: relative;
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.henkilokunta-text{
    z-index: 1;
    position: relative;
}

.henkilokunta-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* Henkilokunta kuvan ja tekstin container*/
.henkilot {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 5%;
    flex-wrap: wrap;
    height: 100%;

}

.kuvahenkilo {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;       
    max-width: 500px;
    flex-wrap: wrap;
    margin: auto;

}

/* Henkilokunta kuvan koko */
.kuvahenkilo img {
    width: 300px;
    height: 300px;
    /* Korkeus sama kuin leveys */
    object-fit: cover;
    /* Rajaa kuvan siististi */
    border-radius: 50%;

}

/* Henkilokunta mobiili*/
@media (max-width: 600px) {
    
    .henkilot {
        padding: 0 1rem;
        justify-content: center;
    }

    .kuvahenkilo {
        flex-direction: column;
        text-align: center;
        align-items: center;
        width: 100%;
    }
    
    .yhteystiedot-kartta img {
        width: 100%; 
    }
}

/*YHTEYSTIEDOT*/

/*Kartta*/
.yhteystiedot-kartta {
    width: 100%;
    height: auto;
    max-height: 300px;
    border: 2px solid #402309; /* Esimerkki: lisätään reunat vain kartalle */
}

.kartta {
    width: 100%;
    max-width:300px;
    margin: 20px auto;
}

.kartta iframe {
    width: 100%;
    height: 300px;
    border: 0;
    border-radius: 10px;
}

/*Instagram*/
.ig-tili {
    display: inline-block;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    max-height: 70px
   
}


/*Yhteystiedot  hero*/
.otameihinyhteytta {
    position: relative;
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.otameihinyhteytta-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.otameihinyhteytta-text {
    display: block;
    position: relative;
    z-index: 1;
}