/* Existing General/Navigation Styles (Kept as they look fine) */
.calendar-navigation, .calendar-grid-container { max-width: 800px; margin: 0 auto 20px; text-align: center; }
.calendar-navigation { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; }
.calendar-navigation a { text-decoration: none; color: #007bff; font-weight: bold; padding:0px 5px; }

.calendar-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px auto 20px;
    padding: 0 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

.current-month-display {
    font-size: 18.5px;
    line-height: 1.3;
    font-weight: 700;
    color: #333;
    max-width: 200px;
    text-align: center;
    padding: 2px 0;
    margin: 0;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
}

.prev-month, .next-month {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    color: #333;
    max-width: 200px;
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    flex-shrink: 0;
}

.prev-month a, .next-month a {
    color:  var(--primary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 8px 5px;
}
.prev-month a, .next-month a:hover{
    color:  var(--primary-color);
}


.prev-month a::before {
    padding-right: 4px;
    content: "\003C";
    line-height: 1;
}

.next-month a::after {
    padding-left: 4px;
    content: "\003E";
    line-height: 1;
}

/* --- General Event List/Container Styles --- */
.calendar-grid { width: 100%; border-collapse: collapse; }
.calendar-grid th, .calendar-grid td { border: 1px solid #ccc; padding: 5px; text-align: left; height: 80px; vertical-align: top; }
.calendar-grid th { background-color: #f0f0f0; text-align: center; }
.calendar-day { background-color: #fff; }
.calendar-day.has-events { background-color: #e6f7ff; }
.day-number { font-size: 1.2em; font-weight: bold; margin-bottom: 5px; }
.event-list-mini { list-style: none; padding: 0; margin: 0; font-size: 0.8em; }
.event-list-mini a { display: block; background-color: #007bff; color: white; margin-bottom: 2px; padding: 2px; border-radius: 3px; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.event-list { margin-top: 0px; flex-grow: 1; list-style: none; padding: 0; }
.event-list ol, ul { list-style: square; margin-left: 0px; margin-bottom: 40px; }
.event-list li {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 10px;
    /* NEW: Turn the list item into a Flex container */
    display: flex;
    /* NEW: Vertically align the items to the top */
    align-items: flex-start;
}
.event-list li:hover{
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
}


/* New class for the date container */
.event-date-container {
    /* Set a fixed width for the date column */
    width: 70px; /* Adjust this width as needed */
    /* Add some spacing between date and content */
    margin-right: 20px;
    /* Optional: Style the date text */
    font-weight: bold;
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
    padding:5px 0;
}

/* Ensure the date text is styled correctly */
.event-date {
    display: block; /* Makes the <time> element behave like a block for alignment */
    /* Add any other desired date styling here */
    color:  var(--primary-color);
    font-size: 26px;
    line-height: 24px;
}
.event-date span{
    display: block; /* Makes the <time> element behave like a block for alignment */
    /* Add any other desired date styling here */
    color:  #555;
    font-size: 20px;
    line-height: 20px;
     text-transform: uppercase;
}

/* New class for the title/description wrapper */
.event-content-container {
    /* Takes up the remaining available space */
    flex-grow: 1;
    /* NEW: Ensure the content is left-aligned within the container */
    text-align: left;
}
.event-list-header { font-size: 18px; line-height: 20px;font-weight: 600; color:#333 !important;margin: 0px 0px 0px 0px;}
.event-list-description { font-size: 12px; font-weight: normal; color:#333 !important; margin: 0px 0px 0px 0px;}


/* -------------------------------------------------------------------------- */
/* 1. LAYOUT FOR DESKTOP - CALENDAR ON RIGHT */
/* -------------------------------------------------------------------------- */
.event-display-container {
    display: flex;
    /* NEW: This reverses the order of the flex items, placing the mini-calendar on the right */
    flex-direction: row-reverse;
    gap: 30px; /* Increased gap for better separation */
    align-items: flex-start;
}

/* -------------------------------------------------------------------------- */
/* 2. MODERN MINI-CALENDAR STYLING (Default: Desktop View) */
/* -------------------------------------------------------------------------- */
.mini-calendar {
    flex-shrink: 0;
    width: 200px;
    padding: 10px 10px;
    /* NEW: Removed border and added subtle shadow */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    text-align: center;
    background-color: #fff; /* Ensure it has a white background */

    /* Initially visible on large screens */
    display: block;
}

.mini-calendar h2 {
    font-size: 14px;
    margin: 2px 0 2px 0;
    color: #fff !important;
    font-weight: 600;
    background-color: var(--background-color);
    border-radius: 5px;
    line-height: 20px;
}

.mini-calendar table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 5px;
}

.mini-calendar th {
    padding: 6px 6px;
    text-align: center;
    font-size: 0.6em;
    font-weight: 700;
    color: #777;
    background-color: transparent; /* Clean background */
    border: none; /* Removed border */
}

.mini-calendar td {
    padding: 2px 2px;
    text-align: center;
    font-size: 0.65em;
    border: none; /* Removed internal borders */
    transition: background-color 0.2s; /* Smooth hover/highlight transition */
}
.mini-calendar td a{
   color: white; /* White text for contrast */
}

.mini-calendar td a:hover{
   color:  var(--primary-color);
}
/* Highlight Days with Events (More refined colors) */
.mini-calendar td.has-event {
    background-color: var(--background-color);
    font-weight: 600;
    color: white; /* White text for contrast */
   cursor: default;
   border-radius: 5px;
}

.mini-calendar td:hover:not(.empty) {
    background-color: #f0f0f0;
    border-radius: 5px;
}
#view-all-events{
  font-size: 0.65em;
}


/* -------------------------------------------------------------------------- */
/* 3. MOBILE HIDE: MEDIA QUERY */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    /* Hide the entire mini-calendar on screens 768px wide or smaller */
    .mini-calendar {
        display: none;
    }

    /* Important: Ensure the list takes up 100% width when the calendar is hidden */
    .event-display-container {
        display: block;
        gap: 0;
    }
}