/**
 * Theme Name: Kasvuliike Teema
 * Template:   astra
 * Author: Laura Heinonen
 * Version: 1.0
 */
 
/* Estetään vaakasuuntainen vieritys mutta sallitaan pystysuuntainen */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* Estää vaakasuoran vierityksen */
  overflow-y: auto; /* Sallii pystysuuntaisen vierityksen */
  box-sizing: border-box; /* Ehkäisee ylimääräistä kasvua */
}

/* Yleinen tyylitiedosto */
/* Yleinen tyylitiedosto */
.custom-details {
  background-color: #CFFF5E; /* Täyttää koko elementin värillä #CFFF5E */
  padding: 20px; /* Vähän tilaa elementissä */
  max-width: 100%; /* Elementin leveys voi olla 100% vanhemman säilyttämiseksi */
  margin: 10px auto; /* Keskittää elementin */
  transition: max-height 0.3s ease-in-out; /* Liukuminen alas */
  box-sizing: border-box; /* Sisällyttää paddingin ja reunaviivan elementin leveyteen */
  overflow: hidden; /* Estää ylimääräisen sisällön ulottumisen */
  border-radius: 8px; /* Kulmien pyöristys */
}

/* Otsikon tyylit */
.custom-summary {
  font-size: var(--wp--preset--font-size--heading-3); /* Otsikon koko teemasta (H3) */
  font-weight: bold;
  color: #030303; /* Otsikon väri musta */
  cursor: pointer; /* Kursori muuttuu kädeksi */
  display: block; /* Otsikko vie koko leveyden */
  margin: 0;
  padding: 0;
  width: 100%; /* Otsikko täyttää koko leveysalueen */
}

/* Tekstin tyylit */
.custom-details p {
  font-size: var(--wp--preset--font-size--base); /* Normaalikokoisella fontilla teemasta */
  margin-top: 10px; /* Väli otsikon ja tekstin välillä */
  color: #030303; /* Tekstin väri musta */
}

/* Avattaessa sisällön liukuminen */
.custom-details:not([open]) p {
  display: none; /* Piilottaa tekstin, kun elementti ei ole auki */
}

/* Lisää alaviiva hover-efektille */
.entry-title {
    text-decoration: none; /* Varmistaa, että alaviivaa ei ole aluksi */
}

.entry-title:hover {
    text-decoration: underline; /* Lisää alaviivan otsikon alle hover-efektillä */
}


@media (max-width: 768px) {
    .entry-title {
        position: relative;
    }

    .entry-title:after {
        content: ' →'; /* Lisää nuoli otsikon perään mobiililaitteille */
        font-size: 1.2em; /* Muokkaa koon mukaan */
        margin-left: 5px; /* Väli otsikon ja nuolen välillä */
    }
}

img,
button,
input[type="button"],
input[type="submit"],
a.button {
  border-radius: 8px;
}