/* Inherit color variables from the main site */
:root {
    --dark-green: #437666;
    --light-cream: #f8fae5;
    --warm-brown: #b19470;
    --dark-brown: #76453b;
    --darker-brown: #3e211c;
    --lighter-cream: #fdfbf7; /* Slightly lighter than light cream */}

#events {
    padding: 1em;
    max-width: 800px;
    margin: 0 auto;
}

#events h2 {
    text-align: center;
    color: var(--dark-brown);
    margin-bottom: 1em;
}

#events-list {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.event-card {
    background-color: var(--lighter-cream);  /* Changed from light-cream to lighter-brown */
    border-left: 6px solid var(--dark-green);
    padding: 1em;
    border-radius: 4px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease;
}

/* .event-card:hover {
    background-color: #d4c2b3;
} */

.event-title {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--dark-brown);
    margin-bottom: 0.5em;
}

.event-date,
.event-time {
    font-size: 0.95em;
    color: var(--dark-green);
    margin-bottom: 0.5em;
}

.event-description {
    font-size: 1em;
    color: var(--darker-brown);
}