/* ==========================================================================
   Calendar (FullCalendar v7 + Grace Church theme)
   Loaded after: fullcalendar/dist/skeleton.css
                 fullcalendar/dist/themes/monarch/theme.css
                 fullcalendar/dist/themes/monarch/palettes/purple.css
   ========================================================================== */


/* --------------- Category key / filters --------------- */

.cal-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.cal-key__title {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #2d2d2d;
    margin-right: 0.5rem;
}
.cal-key__title a {
    text-decoration: underline;
}
.cal-key__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
    padding: 0.5rem 0.9rem;
    border-radius: 2rem;
    border: 1px solid transparent;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.cal-key__item:focus-visible {
    outline: 2px solid #2d2d2d;
    outline-offset: 2px;
}


/* --------------- Toolbar --------------- */

.cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.cal-toolbar__title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: #2d2d2d;
    margin: 0;
}
.cal-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.cal-toolbar__sep {
    width: 1px;
    height: 1.5rem;
    background-color: #dcd5c4;
    margin: 0 0.4rem;
}
.cal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(45, 45, 45, 0.06);
    color: #2d2d2d;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.cal-btn:hover,
.cal-btn:focus {
    background-color: #778986;
    color: #ffffff;
}
.cal-btn:focus-visible {
    outline: 2px solid #2d2d2d;
    outline-offset: 2px;
}
.cal-btn.is-active {
    background-color: #2d2d2d;
    color: #ffffff;
}
.cal-btn--text {
    width: auto;
    padding: 0 1rem;
    border-radius: 2rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .cal-toolbar {
        justify-content: center;
    }
    .cal-toolbar__title {
        width: 100%;
        text-align: center;
        font-size: 1.4rem;
    }
}


/* --------------- FullCalendar theme overrides --------------- */

#calendar {
    font-family: 'Inter', sans-serif;

    /* width of the dark time segment inside each event lozenge */
    --cal-time-width: 44px;

    /* primary */
    --fc-monarch-primary: #778986;
    --fc-monarch-primary-foreground: #ffffff;
    --fc-monarch-primary-over: #869692;
    --fc-monarch-primary-down: #94a29f;

    /* secondary */
    --fc-monarch-secondary: #eee5d5;
    --fc-monarch-secondary-foreground: #2d2d2d;
    --fc-monarch-secondary-over: #e8ddc9;
    --fc-monarch-secondary-down: #e1d4bc;

    /* tertiary */
    --fc-monarch-tertiary: #2b4046;
    --fc-monarch-tertiary-foreground: #ffffff;
    --fc-monarch-tertiary-over: #3a4f55;
    --fc-monarch-tertiary-down: #495e64;

    /* calendar content */
    --fc-monarch-event: var(--fc-monarch-primary);
    --fc-monarch-event-contrast: var(--fc-monarch-primary-foreground);
    --fc-monarch-highlight: rgba(220, 213, 196, 0.35);
    --fc-monarch-now: #b99f82;

    /* controls */
    --fc-monarch-selected: #2d2d2d;
    --fc-monarch-selected-foreground: #ffffff;
    --fc-monarch-selected-over: #3d3d3d;
    --fc-monarch-selected-down: #4d4d4d;
    --fc-monarch-outline: #778986;

    /* neutral foregrounds */
    --fc-monarch-foreground: #2d2d2d;
    --fc-monarch-faint-foreground: #b3b3b3;
    --fc-monarch-muted-foreground: #8d8d8d;

    /* neutral borders */
    --fc-monarch-border: #e4ded2;
    --fc-monarch-strong-border: #cdc4b2;
}

/* Today shading, in sand rather than the stock yellow */
#calendar {
    --fc-monarch-today: rgba(220, 213, 196, 0.3);
}

/* Events are clickable — make that obvious */
#calendar [role="button"] {
    cursor: pointer;
}

/* The weekday header cells ship without borders, so the column dividers only
   started below them and left the grid looking unjoined at the top. Mirror
   what the day cells do: a left border on every column but the first. */
#calendar [role="columnheader"] + [role="columnheader"] {
    border-left: 1px solid var(--fc-monarch-border);
}

/* Close the day-name row off from the grid below it. The !important is needed:
   skeleton.css zeroes this row's borders with `.fc-QX { border: 0 !important }`. */
#calendar [role="row"]:has(> [role="columnheader"]) {
    border-bottom: 1px solid var(--fc-monarch-border) !important;
}

/* The outer box is rounded but every line inside it is square, so the column
   dividers ran straight past the corner arc and the top corners never closed.
   Clipping the grid to its own radius makes them meet. */
#calendar [role="grid"] {
    overflow: hidden;
}

/* The list view has room to wrap; the month grid does not, so keep the
   truncation there. `cal-list-view` is toggled in calendar_scripts.php. */
#calendar.cal-list-view .cal-event-title {
    white-space: normal;
    overflow: visible;
}

/* Give the time its own darker segment at the head of the lozenge, as per
   citychurchsheffield.org.uk. Grid views only — the list view lays the time
   out in its own column already.

   The time element carries only FullCalendar's hashed class, so it is selected
   as "the child of the inner wrapper that is not the title". All-day events
   have no time element at all, and simply render as a plain lozenge. */

#calendar:not(.cal-list-view) .cal-event-inner {
    padding: 0;
    align-items: stretch;
}
#calendar:not(.cal-list-view) .cal-event-inner > *:not(.cal-event-title) {
    display: flex;
    align-items: center;
    justify-content: center;
    /* fixed, so the titles line up down the column */
    flex: 0 0 var(--cal-time-width);
    width: var(--cal-time-width);
    padding: 2px 2px;
    background-color: rgba(0, 0, 0, 0.2);
    /* matches the lozenge's own radius, so the corners sit flush */
    border-radius: 4px 0 0 4px;
    font-weight: 700;
}
#calendar:not(.cal-list-view) .cal-event-title {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    padding: 2px 6px;
}


/* --------------- Subscribe buttons --------------- */

.cal-subscribe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}


/* --------------- Event modal --------------- */

#eventModal .modal-body {
    padding: 0 1.5rem 1.5rem;
}
.cal-modal__image {
    width: 100%;
    height: auto;
    border-top-left-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
    margin-bottom: 1.25rem;
}
.cal-modal__title {
    font-size: 1.5rem;
    margin: 0.5rem 0 1rem;
}
.cal-modal__venue {
    font-size: 0.9rem;
    color: #8d8d8d;
    margin-bottom: 1rem;
}
.cal-modal__description {
    text-align: left;
    font-family: 'Poppins', sans-serif;
    color: #2d2d2d;
}
.cal-modal__description p:last-child {
    margin-bottom: 0;
}
.cal-modal__map {
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.cal-modal__share {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
}
.cal-modal__share a,
.cal-modal__share button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 0;
    font-size: 1.3rem;
    border-radius: 50%;
    background-color: rgba(45, 45, 45, 0.06);
    color: #2d2d2d;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.cal-modal__share a:hover,
.cal-modal__share button:hover {
    background-color: #778986;
    color: #ffffff;
}