/* =========================================================
   SLEY Events - tyylit (frontend + admin-esikatselu)
   Versio: 3.1.1
   ---------------------------------------------------------
   - Brändiväri: #084f3f (tumma teal)
   - "Lisätiedot" = pieni siro painike
   - "Lisää tapahtumia" = suurempi pääpainike
   ========================================================= */

/* Perustypografia ja asettelu */
.sley-events {
    font-family: inherit;           /* Perii sivuston oletusfontin */
    color: #084f3f;                 /* Pääteksti brändivärillä */
    max-width: 800px;               /* Luettavuusrajoitus */
    margin: 0 auto;                 /* Keskitys */
}

/* Aikaleima */
.sley-events-timestamp {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
    text-align: right;
}

/* Yksittäinen tapahtuma */
.sley-event {
    border-bottom: 1px solid #e0e0e0;
    padding: 15px 0;
}

/* Päivämäärä ja aika */
.sley-event-date {
    font-size: 14px;
    font-weight: 700;
    color: #084f3f;
    margin-bottom: 6px;
}

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

/* Puhuja */
.sley-event-speaker {
    font-size: 14px;
    color: #555;
    margin-bottom: 5px;
}

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

/* Osoite (vain other-place) */
.sley-event-address {
    font-size: 12px;
    color: #777;
    margin-bottom: 6px;
}

/* ---------------------------------------------------------
   Napit / linkkipainikkeet
   --------------------------------------------------------- */

/* Yleinen hover/focus -aputyyli nappimaisille linkeille */
.sley-btn {
    display: inline-block;
    text-decoration: none;
    border-radius: 5px;
    border: 1px solid transparent;
    line-height: 1.2;
    transition: background-color .15s ease, box-shadow .15s ease, transform .02s ease-in-out, color .15s ease;
    cursor: pointer;
}

/* Pieni, siro: “Lisätiedot” */
.sley-event-more {
    /* button reset + koko */
    display: inline-block;
    padding: 6px 12px;              /* pienempi kuin isossa napissa */
    font-size: 13px;
    font-weight: 500;

    /* väri */
    background-color: #084f3f;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;              /* aavistuksen pienempi radius */
    border: 1px solid transparent;

    /* vuorovaikutus */
    transition: background-color .15s ease, box-shadow .15s ease, transform .02s ease-in-out, color .15s ease;
    margin-top: 6px;                 /* pieni hengitys väliin */
}

.sley-event-more:hover {
    background-color: #063d31;       /* tummempi hover */
    color: #fff;
    text-decoration: none;
}

.sley-event-more:active {
    transform: translateY(1px);
}

.sley-event-more:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(8, 79, 63, 0.25);
}

/* “Lisää tapahtumia” -osio */
.sley-events-more {
    text-align: left;
    padding: 16px 0;
}

/* Suurempi pääpainike: “Lisää tapahtumia” */
.sley-more-button {
    display: inline-block;
    padding: 10px 20px;              /* isompi koko */
    background-color: #084f3f;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background-color .15s ease, box-shadow .15s ease, transform .02s ease-in-out, color .15s ease;
}

.sley-more-button:hover {
    background-color: #063d31;
    color: #fff;
    text-decoration: none;
}

.sley-more-button:active {
    transform: translateY(1px);
}

.sley-more-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(8, 79, 63, 0.25);
}

/* ---------------------------------------------------------
   Admin-sivun layout (builder)
   --------------------------------------------------------- */

.sley-events-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.sley-events-form {
    flex: 1;
    min-width: 300px;
}

.sley-events-preview {
    flex: 1;
    min-width: 300px;
}

/* “Tyhjennä kaikki suodattimet” -painike */
#sley-events-clear {
    margin-left: 10px;
    background-color: #d63638;       /* WP “danger” */
    color: #fff;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color .15s ease, transform .02s ease-in-out;
}

#sley-events-clear:hover {
    background-color: #b32d2e;
}

#sley-events-clear:active {
    transform: translateY(1px);
}

#sley-events-clear:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.25);
}

/* ---------------------------------------------------------
   Vastuullinen animointi
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .sley-btn,
    .sley-event-more,
    .sley-more-button,
    #sley-events-clear {
        transition: none;
    }
}

/* ---------------------------------------------------------
   Responsiivisuus
   --------------------------------------------------------- */

@media (max-width: 600px) {
    .sley-events-container {
        flex-direction: column;
    }

    .sley-event {
        padding: 10px 0;
    }

    .sley-event-title {
        font-size: 16px;
    }

    .sley-more-button {
        padding: 8px 16px;           /* hieman pienempi mobiilissa */
        font-size: 13px;
    }

    .sley-event-more {
        padding: 6px 10px;           /* hitusen kompaktimpi mobiilissa */
        font-size: 12.5px;
    }
}