/*
Theme Name:     Twenty Twenty-Four Renbergsvattnet 
Theme URI:      https://renbergsvattnet.se
Description:    Anpassat tema för evenemang
Author:         Ditt Namn
Template:       twentytwentyfour
Version:        1.0.0
Text Domain:    renbergsvattnet
*/

/* ===========================
   Baslayout för eventlistan
=========================== */
.event-list {
    max-width: 600px;
    margin: 0 auto;
    padding: 10px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Varje eventsegment */
.event-segment {
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 20px;
    background: #f9f9f9;
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
    border-radius: 4px;
}

/* ===========================
   Wrapper: datum + eventinfo i en rad
=========================== */
.event-header-wrapper {
    display: flex;
    align-items: flex-start; /* Viktigt: toppjustera datum & text */
    gap: 15px; /* Lite luft mellan datumrutan och text */
}

/* ===========================
   Datumruta (kalenderstil)
=========================== */
.event-date-box {
    background: #222;       /* Mörk bakgrund */
    color: #ddd;            /* Ljus text */
    text-align: center;
    width: 70px;            /* Kompakt */
    border-radius: 4px;
    padding: 8px 0;
    user-select: none;      /* Kan ej markeras */
}

/* Veckodag (överst) */
.event-date-box .weekday {
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin-bottom: 2px;
    text-transform: uppercase;
    color: #bbb;
}

/* Dagnummer (störst) */
.event-date-box .day {
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 2px;
    color: #eee;
}

/* Månad nederst */
.event-date-box .month {
    font-weight: 600;
    font-size: 0.85rem;
    color: #999;
}

/* ===========================
   Event-innehållet (till höger)
=========================== */
.event-content {
    flex: 1;
}

/* Titel på evenemanget */
.event-title {
    margin: 0 0 6px;
    font-size: 1.4rem;
    color: #111;
}

/* Tid, plats och arrangör under titeln */
.event-time,
.event-location,
.event-author {
    margin: 3px 0;
    font-size: 0.9rem;
    color: #444;
}

/* Beskrivning */
.event-description {
    margin-top: 8px;
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
}

/* ===========================
   Responsivitet: på mobil stapla
=========================== */
@media (max-width: 600px) {
    .event-header-wrapper {
        flex-direction: column;
        align-items: flex-start; /* Datum överst på mobil */
    }
    .event-date-box {
        margin-bottom: 8px;
    }
}