/* Yleiset tyylit tapahtumalistaan (frontend ja admin-esikatselu) */
.sley-events {
    font-family: inherit; /* Perii sivuston oletusfontin */
    color: #084f3f; /* SLEY:n brändiväri, tumma teal */
    max-width: 800px; /* Rajoittaa leveyden luettavuuden parantamiseksi */
    margin: 0 auto; /* Keskitetty asettelu */
}

/* Aikaleima esikatselussa ja frontendissä */
.sley-events-timestamp {
    font-size: 12px;
    color: #666; /* Harmaa sävy erottamaan aikaleiman */
    margin-bottom: 10px;
    text-align: right; /* Oikealle tasaus visuaalisen erottelun vuoksi */
}

/* Yksittäinen tapahtuma */
.sley-event {
    border-bottom: 1px solid #e0e0e0; /* Kevyt erotinviiva tapahtumien välille */
    padding: 15px 0; /* Väliä ylä- ja alapuolelle */
}

/* Tapahtuman päivämäärä */
.sley-event-date {
    font-size: 14px;
    font-weight: bold;
    color: #084f3f; /* Sama brändiväri kuin pääteksti */
    margin-bottom: 5px;
}

/* Tapahtuman otsikko */
.sley-event-title {
    font-size: 18px;
    font-weight: 600;
    color: #084f3f;
    margin-bottom: 5px;
}

/* Tapahtuman puhuja */
.sley-event-speaker {
    font-size: 14px;
    color: #555; /* Hieman vaaleampi sävy erottamaan puhujan */
    margin-bottom: 5px;
}

/* Tapahtuman sijainti */
.sley-event-location {
    font-size: 14px;
    color: #084f3f;
    margin-bottom: 5px;
}

/* Tapahtuman osoite (jos "other-place") */
.sley-event-address {
    font-size: 12px;
    color: #777; /* Vaaleampi sävy lisäinformaatiolle */
    margin-bottom: 5px;
}

/* Lisätiedot-linkki */
.sley-event-more {
    display: inline-block;
    font-size: 14px;
    color: #0073aa; /* WordPressin oletuslinkkiväri */
    text-decoration: none;
    margin-top: 5px;
}

.sley-event-more:hover {
    text-decoration: underline; /* Alleviivaus hover-tilassa */
    color: #005177; /* Tummempi sävy hover-tilassa */
}

/* "Lisää tapahtumia" -osio */
.sley-events-more {
    text-align: center;
    padding: 15px 0;
}

/* "Lisää tapahtumia" -painike */
.sley-more-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #084f3f;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
}

.sley-more-button:hover {
    background-color: #063d31; /* Tummempi sävy hover-tilassa */
}

/* Admin-sivun layout */
.sley-events-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Väli lomakkeen ja esikatselun välillä */
}

.sley-events-form {
    flex: 1;
    min-width: 300px; /* Minimileveys lomakkeelle */
}

.sley-events-preview {
    flex: 1;
    min-width: 300px; /* Minimileveys esikatselulle */
}

/* "Tyhjennä kaikki suodattimet" -painike */
#sley-events-clear {
    margin-left: 10px; /* Väli "Generoi Shortcode" -painikkeesta */
    background-color: #d63638; /* WordPressin oletus "danger" -väri */
    color: #fff;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
}

#sley-events-clear:hover {
    background-color: #b32d2e; /* Tummempi punainen hover-tilassa */
}

/* Responsiveness */
@media (max-width: 600px) {
    .sley-events-container {
        flex-direction: column; /* Pystysuuntainen asettelu pienillä näytöillä */
    }

    .sley-event {
        padding: 10px 0; /* Vähemmän paddingia mobiilissa */
    }

    .sley-event-title {
        font-size: 16px; /* Pienempi otsikko mobiilissa */
    }

    .sley-more-button {
        padding: 8px 16px; /* Pienempi painike mobiilissa */
    }
}