/*
 * Calendar Styles
 * Calendar grid, navigation, liturgical seasons, holy day indicators
 */

/* ==========================================================================
   Calendar Container
   ========================================================================== */

.calendar {
    margin: 0;
}

.calendar-details {
    border: var(--pico-border-width) solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    padding: 1rem;
}

.calendar-details summary {
    font-weight: bold;
    cursor: pointer;
    margin: -1rem;
    padding: 1rem;
}

.calendar-details[open] summary {
    margin-bottom: 0;
}

/* ==========================================================================
   Calendar Navigation
   ========================================================================== */

.calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 0.5rem;
}

.calendar-nav a[role="button"] {
    padding: 0.25rem 0.75rem;
    margin: 0;
}

/* ==========================================================================
   Calendar Grid
   ========================================================================== */

.calendar-grid {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.calendar-grid th {
    padding: 0.5rem 0.25rem;
    font-weight: normal;
    color: var(--pico-muted-color);
    font-size: 0.85em;
}

.calendar-grid td {
    padding: 0.125rem;
}

.calendar-grid td a {
    display: block;
    padding: 0.5rem 0.25rem;
    border-radius: var(--pico-border-radius);
    text-decoration: none;
    color: var(--pico-color);
    font-size: 0.9em;
}

.calendar-grid td a:hover {
    background: var(--pico-primary-focus);
}

.calendar-grid td.selected a {
    border: 2px solid var(--pico-primary);
    font-weight: bold;
}

/* ==========================================================================
   Liturgical Season Colors
   ========================================================================== */

.season-advent a {
    background: rgba(var(--color-advent), 0.15);
}
.season-christmas a {
    background: rgba(var(--color-christmas), 0.15);
}
.season-epiphany a {
    background: rgba(var(--color-epiphany), 0.1);
}
.season-lent a {
    background: rgba(var(--color-lent), 0.15);
}
.season-easter a {
    background: rgba(var(--color-easter), 0.15);
}
.season-trinity a {
    background: rgba(var(--color-trinity), 0.1);
}

/* Special liturgical color overrides for calendar (red, rose, black) */
.calendar-grid td.color-red a {
    background: rgba(var(--color-red), 0.2);
}
.calendar-grid td.color-rose a {
    background: rgba(var(--color-rose), 0.25);
}
.calendar-grid td.color-black a {
    background: rgba(var(--color-black), 0.15);
}

/* ==========================================================================
   Holy Day Indicators
   ========================================================================== */

.calendar-grid td.holy-day a {
    position: relative;
}
.calendar-grid td.holy-day a::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--pico-primary);
}

/* Holy day dot colors based on liturgical color */
.calendar-grid td.holy-day.color-red a::after {
    background: rgb(var(--color-red));
}
.calendar-grid td.holy-day.color-rose a::after {
    background: rgb(var(--color-rose));
}
.calendar-grid td.holy-day.color-black a::after {
    background: rgb(var(--color-black));
}
.calendar-grid td.holy-day.season-christmas a::after {
    background: rgb(var(--color-christmas));
}
.calendar-grid td.holy-day.season-easter a::after {
    background: rgb(var(--color-easter));
}

/* ==========================================================================
   Responsive Calendar
   ========================================================================== */

/* Desktop: always show calendar, hide summary toggle */
@media (min-width: 992px) {
    .calendar-details {
        border: none;
        padding: 0;
    }

    .calendar-details summary {
        display: none;
    }

    .calendar-details .calendar {
        display: block !important;
    }
}