/* General container for the entire plugin */
.twe-container {
    border: 1px solid #ddd;
    margin-bottom: 20px;
    background-color: var(--e-global-color-uicore_secondary);
    border-radius: 2px;
    overflow: hidden;
    box-sizing: border-box;
    position: absolute;
    right: 50px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

@media (max-width:500px) {
    .twe-container {
        text-align: center;
    }
}

/* Main "This week" header bar */
.twe-header {
    background-color: var(--e-global-color-uicore_secondary);
    /* UiCore secondary color */
    color: var(--e-global-color-uicore_primary);
    padding: 5px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-radius: 2px 2px 0 0;
    font-weight: bold;
}
.twe-header.active,
.twe-header:hover {
    background-color: var(--e-global-color-uicore_primary);
}

.twe-header.active:hover {
    background-color: var(--e-global-color-uicore_primary);
}

.twe-header:hover .twe-icon::before,
.twe-header:hover .twe-title {
    color: var(--e-global-color-uicore_secondary);
}

.twe-header.active:hover .twe-icon::before,
.twe-header.active:hover .twe-title {
    color: var(--e-global-color-uicore_secondary);
}



.twe-title {
    margin: 0;
    font-size: 1.2em;
    flex-grow: 1;
    color: var(--e-global-color-uicore_primary);
    margin-right: 25px;
    font-weight:bold;
}
.twe-header.active .twe-icon,
.twe-header.active .twe-title {
    color: var(--e-global-color-uicore_secondary);
}

.twe-icon::before {
    content: "\2b";
    /* Unicode for plus sign. Consider using SVG or icon font for better control. */
    font-size: 1.5em;
    line-height: 1.5;
    transition: transform 0.3s ease-in-out;
    display: inline-block;
}

/* Content area that slides down/up */
.twe-content {
    display: none;
    /* Hidden by default */
    padding: 15px 20px;
    border-top: 1px solid #eee;
    background-color: var(--e-global-color-uicore_secondary);
}

/* List of events */
.twe-event-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Individual event item */
.twe-event-item {
    padding: 15px 0;
    /* Add padding for spacing */
    border-bottom: 1px dashed #eee;
}

.twe-event-item:last-child {
    border-bottom: none;
}

/* --- NEW GRID LAYOUT FOR EACH EVENT ITEM --- */
.twe-event-grid-wrapper {
    display: grid;
    gap: 15px;
    /* Space between grid columns/rows */
    align-items: center;
    /* Vertically align content in grid cells */
}

/* Default mobile layout (single column or stacked) */
.twe-event-grid-wrapper {
    grid-template-columns: 1fr;
    /* Stack columns on small screens */
}

.twe-grid-col {
    /* Basic styling for columns */
}

/* Column 1: Date */
.twe-grid-col-date {
    text-align: center;
    line-height: 1.2;
    padding-bottom: 10px;
    /* Add some space if stacking */
}

.twe-display-day-of-week {
    display: block;
    font-size: 0.9em;
    color: #666;
    text-transform: uppercase;
}

.twe-display-day-of-month {
    display: block;
    font-size: 2.5em;
    /* Large day of month */
    font-weight: bold;
    color: #333;
}

/* Column 2: Event Details */
.twe-grid-col-details {
    padding-bottom: 10px;
    /* Add some space if stacking */
}

.twe-details-row {
    margin-bottom: 5px;
    line-height: 1.3;
}

.twe-details-row:last-child {
    margin-bottom: 0;
}

.twe-display-event-category {
    font-weight: bold;
    color: #0073aa;
    /* WordPress blue */
    font-size: 0.9em;
}

.twe-category-time-separator {
    color: #ccc;
    margin: 0 5px;
}

.twe-display-event-time {
    font-size: 0.9em;
    color: #555;
}

.twe-display-event-title-link {
    text-decoration: none;
    color: #333;
    display: block;
    /* Ensure the link takes full width */
}

.twe-display-event-title {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
}

.twe-display-event-title-link:hover .twe-display-event-title {
    color: #0073aa;
}

.twe-display-event-venue {
    display: block;
    /* Ensure venue appears below title */
    font-size: 0.85em;
    color: #777;
    margin-top: 3px;
    /* Space between title and venue */
}


/* Column 3: Actions (Add to Calendar) */
.twe-grid-col-actions {
    text-align: center;
    /* Center the button on small screens */
}


/* --- Responsive Adjustments (Media Queries) --- */

/* Medium screens (e.g., tablets, up to 768px or 992px) */
@media (min-width: 600px) {
    .twe-event-grid-wrapper {
        grid-template-columns: 100px 1fr auto;
        /* Date | Details | Actions */
        align-items: flex-start;
        /* Align content to the top within rows */
    }

    .twe-grid-col-date {
        padding-bottom: 0;
        /* Remove padding if not stacking */
    }

    .twe-grid-col-details {
        padding-bottom: 0;
        /* Remove padding if not stacking */
    }

    .twe-grid-col-actions {
        text-align: right;
        /* Align button to the right on larger screens */
    }
}

/* Larger screens (e.g., desktops) */
@media (min-width: 992px) {
    .twe-event-grid-wrapper {
        grid-template-columns: 120px 1fr auto;
        /* Adjust column widths as needed */
    }
}


/* No events/Error messages */
.twe-no-events,
.twe-error-message {
    padding: 10px;
    text-align: center;
    color: #777;
    font-style: italic;
}

.twe-error-message {
    color: #D32F2F;
    /* Red for errors */
    font-weight: bold;
}


/* Styles for the nested "Add to Calendar" button */
.twe-add-to-calendar-section {
    /* Adjust text-align for the media query behavior if needed */
}

.twe-add-to-calendar-header {
    display: inline-flex;
    /* Use inline-flex to keep button size to content */
    align-items: center;
    gap: 5px;
    background-color: #eee;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85em;
    color: #555;
    transition: background-color 0.2s ease-in-out;
}

.twe-add-to-calendar-header:hover {
    background-color: #e0e0e0;
    color: #333;
}

.twe-dropdown-icon::before {
    content: "\2b";
    font-size: 1em;
    transition: transform 0.2s ease-in-out;
}

.twe-add-to-calendar-header.active .twe-dropdown-icon::before {
    transform: rotate(45deg);
}

.twe-add-to-calendar-dropdown {
    display: none;
    padding: 10px;
    background-color: #f3f3f3;
    border: 1px solid #e0e0e0;
    border-radius: 0 0 3px 3px;
    text-align: right;
    /* Align links to the right */
    font-size: 0.8em;
    margin-top: 5px;
    position: relative;
    z-index: 1;
}

.twe-add-to-calendar-dropdown a {
    color: #0073aa;
    text-decoration: none;
    border-bottom: 1px dotted #0073aa;
    white-space: nowrap;
}

.twe-add-to-calendar-dropdown a:hover {
    color: #005177;
    border-bottom-style: solid;
}

.twe-calendar-link-separator {
    color: #ccc;
    margin: 0 5px;
}

.twe-no-calendar-options {
    font-style: italic;
    color: #888;
    margin: 0;
    padding: 5px 0;
    text-align: center;
}