/* ==========================================================================
   ACA calendar - the first-party school calendar, wherever it is rendered

   One .aca-cal block: the "Next up" banner, the colour legend, the
   month-grouped agenda and the month grid beside it. Families.php renders it
   full (data-cal-mode="full"), index.php compact (data-cal-mode="compact",
   items past the limit carried as [hidden][data-cal-overflow]).

   css/public_site.css MUST be loaded BEFORE this sheet: the calendar always
   renders inside main.fh-page, and the rules below read the --fh-* KEEP
   variables (--fh-tile, --fh-tile-past, --fh-slate) declared there. On
   Families.php this sheet loads between public_site.css and families_hub.css,
   which sets --aca-cal-sticky-top so the sticky month grid clears the hub's
   sticky chip bar. Nothing here redeclares a token or a --fh-* variable.

   _aca_script/aca-calendar.js drives the grid: month paging, the day filter
   and the print reset.

     1. Next up            - .aca-cal__nextup*
     2. Legend             - .aca-cal__legend*
     3. Agenda             - .aca-cal__months, .aca-cal__month*,
                             .aca-cal__events, .aca-cal-event*
     4. Badges             - .aca-cal__badges, .aca-cal__badge--*
     5. Layout and grid    - .aca-cal__layout, .aca-cal__agenda,
                             .aca-cal__grid*, .aca-cal__nav, .aca-cal__table,
                             .aca-cal-day*, .aca-cal-dot*, .aca-cal__clear
     6. Subscribe menu     - .aca-cal__subscribe*
     7. Responsive (991px layout / 576px type)
     8. Print
   ========================================================================== */

/* The three values the public page shell (css/public_site.css, .fh-page) also declares, restated on
   the calendar block itself so it renders the same inside the Family Portal, which loads no public
   sheet. KEEP #94a3b8 / #eef2f7 / #f1f5f9: see the KEEP notes on .fh-page. */
.aca-cal {
    --fh-slate: #94a3b8;
    --fh-tile: #eef2f7;
    --fh-tile-past: #f1f5f9;
}

/* ==========================================================================
   1. Next up
   -------------------------------------------------------------------------- */

.aca-cal__nextup {
    display: flex;
    align-items: center;
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--aca-surface);
    border: 1px solid var(--aca-line);
    border-left: 6px solid var(--aca-orange);
    border-radius: var(--aca-radius);
    box-shadow: var(--aca-shadow);
}

.aca-cal__nextup--holiday {
    border-left-color: var(--aca-danger);
}

.aca-cal__nextup--milestone {
    border-left-color: var(--aca-green);
}

.aca-cal__nextup--event {
    border-left-color: var(--aca-muted);
}

.aca-cal__nextup-icon {
    display: flex;
    flex: 0 0 3rem;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0 1rem 0 0;
    padding: 0;
    border-radius: 50%;
    background: var(--aca-orange-soft);
    color: var(--aca-orange-strong);
    font-size: 1.25rem;
}

.aca-cal__nextup--holiday .aca-cal__nextup-icon {
    background: var(--aca-danger-soft);
    color: var(--aca-danger);
}

.aca-cal__nextup--milestone .aca-cal__nextup-icon {
    background: var(--aca-green-soft);
    color: var(--aca-green);
}

.aca-cal__nextup-body {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.aca-cal__nextup-label {
    margin: 0;
    padding: 0;
    color: var(--aca-orange-strong);
    font-size: var(--aca-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.aca-cal__nextup-title {
    margin: 0.125rem 0 0.25rem;
    padding: 0;
    color: var(--aca-ink);
    font-size: 1.3125rem;
    font-weight: 800;
    line-height: 1.3;
}

.aca-cal__nextup-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    color: var(--aca-muted);
    font-size: var(--aca-text-xs);
    line-height: 1.4;
}

.aca-cal__nextup-when,
.aca-cal__nextup-relative {
    margin: 0.25rem 0.875rem 0 0;
    padding: 0;
}

.aca-cal__nextup-when {
    color: var(--aca-ink);
    font-weight: 600;
}

.aca-cal__nextup-meta .aca-cal__badge {
    margin-top: 0.25rem;
}

/* ==========================================================================
   2. Legend
   -------------------------------------------------------------------------- */

.aca-cal__legend {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.aca-cal__legend-item {
    display: inline-flex;
    align-items: center;
    margin: 0 1.25rem 0.5rem 0;
    padding: 0;
    color: var(--aca-fg-muted);
    font-size: var(--aca-text-xs);
    line-height: 1.4;
}

.aca-cal__legend-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 0.5rem 0 0;
    padding: 0;
    border-radius: 50%;
    background: var(--aca-muted);
}

.aca-cal__legend-swatch--holiday {
    background: var(--aca-danger);
}

.aca-cal__legend-swatch--milestone {
    background: var(--aca-green);
}

.aca-cal__legend-swatch--special {
    background: var(--aca-orange);
}

.aca-cal__legend-swatch--past {
    background: var(--aca-line-strong);
}

/* ==========================================================================
   3. Agenda - month groups and their events
   -------------------------------------------------------------------------- */

.aca-cal__months {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--aca-surface);
    border: 1px solid var(--aca-line);
    border-radius: var(--aca-radius);
    box-shadow: var(--aca-shadow);
}

.aca-cal__month {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    grid-gap: 1.5rem;
    margin: 0;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--aca-line);
}

.aca-cal__month:last-child {
    border-bottom: 0;
}

.aca-cal__month-title {
    margin: 0.375rem 0 0;
    padding: 0;
    color: var(--aca-fg);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.3;
    text-align: left;
    text-transform: uppercase;
}

.aca-cal__month.is-past .aca-cal__month-title {
    color: var(--fh-slate);
}

.aca-cal__events {
    margin: 0;
    padding: 0;
    list-style: none;
}

.aca-cal-event {
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 0.75rem 0;
    border-bottom: 1px dashed var(--aca-line);
}

.aca-cal-event:first-child {
    padding-top: 0;
}

.aca-cal-event:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.aca-cal-event.is-past {
    opacity: 0.55;
}

.aca-cal-event.is-next {
    margin: 0 -0.75rem;
    padding: 0.75rem;
    border-bottom-color: transparent;
    border-radius: var(--aca-radius-sm);
    background: var(--aca-orange-soft);
    box-shadow: inset 4px 0 0 var(--aca-orange);
}

.aca-cal-event__date {
    display: block;
    flex: 0 0 3.25rem;
    width: 3.25rem;
    margin: 0 0.875rem 0 0;
    padding: 0.375rem 0;
    border-radius: var(--aca-radius-sm);
    background: var(--fh-tile);
    color: var(--aca-ink);
    text-align: center;
}

.aca-cal-event--holiday .aca-cal-event__date {
    background: var(--aca-danger-soft);
    color: var(--aca-danger);
}

.aca-cal-event--milestone .aca-cal-event__date {
    background: var(--aca-green-soft);
    color: var(--aca-green);
}

.aca-cal-event--special .aca-cal-event__date {
    background: var(--aca-orange-soft);
    color: var(--aca-orange-strong);
}

.aca-cal-event__day {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.1;
}

.aca-cal-event__dow {
    display: block;
    margin: 0;
    padding: 0;
    font-size: var(--aca-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
}

.aca-cal-event__body {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.aca-cal-event__title {
    margin: 0.125rem 0;
    padding: 0;
    color: var(--aca-ink);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
}

.aca-cal-event__when,
.aca-cal-event__info {
    margin: 0;
    padding: 0;
    color: var(--aca-muted);
    font-size: var(--aca-text-xs);
    line-height: 1.45;
}

.aca-cal-event__info {
    margin-top: 0.25rem;
}

.aca-cal-event__info-icon {
    margin: 0 0.375rem 0 0;
}

/* ==========================================================================
   4. Badges
   -------------------------------------------------------------------------- */

.aca-cal__badges {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.aca-cal__badge {
    display: inline-flex;
    align-items: center;
    margin: 0 0.375rem 0.25rem 0;
    padding: 0.125rem 0.5rem;
    border-radius: var(--aca-radius-pill);
    background: var(--fh-tile);
    color: var(--aca-muted-strong);
    font-size: var(--aca-text-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
}

.aca-cal__badge--holiday {
    background: var(--aca-danger-soft);
    color: var(--aca-danger);
}

.aca-cal__badge--milestone {
    background: var(--aca-green-soft);
    color: var(--aca-green);
}

.aca-cal__badge--special {
    background: var(--aca-orange-soft);
    color: var(--aca-orange-strong);
}

.aca-cal__badge--next {
    background: var(--aca-orange-strong);
    color: var(--aca-on-brand);
}

.aca-cal__badge--past {
    background: var(--fh-tile-past);
    color: var(--aca-muted);
}

/* --aca-accent-staff has no -soft companion in the token sheet and resolves to
   --aca-info, so the info pair is the matching soft/ink for it. */
.aca-cal__badge--staff {
    background: var(--aca-info-soft);
    color: var(--aca-accent-staff);
}

.aca-cal__badge--family {
    background: var(--aca-accent-family-soft);
    color: var(--aca-accent-family-strong);
}

/* ==========================================================================
   5. Layout and month grid
   -------------------------------------------------------------------------- */

/* css/aca-base.css carries no global [hidden] rule, and the UA one loses to
   any author display declaration, so the block states its own. */
.aca-cal [hidden] {
    display: none;
}

.aca-cal__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--aca-space-5);
    align-items: start;
}

.aca-cal__agenda {
    min-width: 0;
    margin: 0;
    padding: 0;
}

.aca-cal__clear {
    margin-bottom: var(--aca-space-3);
}

.aca-cal-event {
    scroll-margin-top: var(--aca-cal-sticky-top, var(--aca-space-4));
}

.aca-cal__grid {
    position: -webkit-sticky;
    position: sticky;
    top: var(--aca-cal-sticky-top, var(--aca-space-4));
    min-width: 0;
    margin: 0;
    padding: var(--aca-space-3);
    background: var(--aca-surface);
    border: 1px solid var(--aca-line);
    border-radius: var(--aca-radius);
    box-shadow: var(--aca-shadow-sm);
}

.aca-cal__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 var(--aca-space-3);
    padding: 0;
}

.aca-cal__grid-title {
    flex: 1 1 auto;
    margin: 0;
    padding: 0 var(--aca-space-2);
    color: var(--aca-fg);
    font-family: inherit;
    font-size: var(--aca-text);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.aca-cal__table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 2px;
    table-layout: fixed;
}

.aca-cal__table thead th {
    padding: 0 0 var(--aca-space-1);
    color: var(--aca-muted);
    font-size: var(--aca-text-xs);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.aca-cal-day {
    height: 2.5rem;
    padding: 0;
    border-radius: var(--aca-radius-sm);
    text-align: center;
    vertical-align: middle;
}

.aca-cal-day__num {
    display: block;
    color: inherit;
    font-size: var(--aca-text-sm);
    line-height: 1.2;
}

.aca-cal-day.is-outside {
    background: transparent;
}

.aca-cal-day.is-past .aca-cal-day__num {
    color: var(--fh-slate);
}

.aca-cal-day.is-today {
    box-shadow: inset 0 0 0 2px var(--aca-orange);
}

.aca-cal-day.is-today .aca-cal-day__num {
    color: var(--aca-ink);
    font-weight: 800;
}

.aca-cal-day[data-range="holiday"] {
    background: var(--aca-danger-soft);
}

.aca-cal-day[data-range="milestone"] {
    background: var(--aca-green-soft);
}

.aca-cal-day[data-range="special"] {
    background: var(--aca-orange-soft);
}

.aca-cal-day[data-range="event"] {
    background: var(--fh-tile);
}

.aca-cal-day[data-range="staff"] {
    background: var(--aca-info-soft);
}

.aca-cal-day[data-range="family"] {
    background: var(--aca-accent-family-soft);
}

.aca-cal-day__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 2.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.aca-cal-day__btn:hover {
    background: var(--aca-surface-2);
}

.aca-cal-day__btn:focus-visible {
    outline: none;
    box-shadow: var(--aca-focus);
}

.aca-cal-day__btn[aria-pressed="true"] {
    border: 1px solid var(--aca-orange-line);
    background: var(--aca-orange-soft);
}

.aca-cal-day__dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 1px 0 0;
    padding: 0;
}

.aca-cal-dot {
    display: block;
    width: 6px;
    height: 6px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--aca-muted);
}

.aca-cal-dot--holiday {
    background: var(--aca-danger);
}

.aca-cal-dot--milestone {
    background: var(--aca-green);
}

.aca-cal-dot--special {
    background: var(--aca-orange);
}

.aca-cal-dot--event {
    background: var(--aca-muted);
}

.aca-cal-dot--staff {
    background: var(--aca-accent-staff);
}

.aca-cal-dot--family {
    background: var(--aca-accent-family);
}

.aca-cal-dot--past {
    background: var(--aca-line-strong);
}

/* ==========================================================================
   6. Subscribe menu

   The one action that lives OUTSIDE .aca-cal: it sits in the section head's
   .fh-section-actions (css/public_site.css), a flex row that spaces its
   children with .fh-section-actions .fh-btn { margin: 0.25rem } against a
   -0.25rem container margin. A .dropdown is not a .fh-btn, so it repeats that
   margin, and align-self centres the btn-sm toggle against the taller
   .fh-btn siblings the row would otherwise stretch it to.
   -------------------------------------------------------------------------- */

.aca-cal__subscribe {
    display: inline-block;
}

.fh-section-actions .aca-cal__subscribe {
    align-self: center;
    margin: 0.25rem;
}

.aca-cal__subscribe-note {
    max-width: 16rem;
    color: var(--aca-fg-muted);
    font-size: var(--aca-text-xs);
    white-space: normal;
}

/* ==========================================================================
   7. Responsive - 991px layout switch, 576px phone type scale
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .aca-cal__layout {
        display: block;
    }

    .aca-cal__grid {
        display: none;
    }

    .aca-cal__nextup {
        align-items: flex-start;
        padding: 1rem 1.125rem;
    }

    .aca-cal__month {
        grid-template-columns: minmax(0, 1fr);
        grid-gap: 0.75rem;
        padding: 1rem 1.125rem;
    }

    .aca-cal__month-title {
        margin: 0;
    }
}

@media (max-width: 576px) {
    .aca-cal__nextup-title {
        font-size: 1.125rem;
    }

    .aca-cal-event__day {
        font-size: 1.25rem;
    }

    .aca-cal-event__title {
        font-size: 1rem;
    }
}

/* ==========================================================================
   8. Print

   Printing must show every event, and an attribute the script set cannot be
   un-hidden from CSS without !important, so _aca_script/aca-calendar.js
   clears the day filter on beforeprint instead: every agenda item is visible
   again before the sheet below is applied. (Compact mode's overflow items stay
   hidden on purpose - only the full calendar carries a print action.)

   Last in the sheet, so an equally specific screen rule above it loses on
   order.
   -------------------------------------------------------------------------- */

@media print {
    .aca-cal__subscribe,
    .aca-cal__grid,
    .aca-cal__clear,
    .aca-cal__status,
    .aca-cal__nextup,
    .aca-cal__badge--next,
    .aca-cal__badge--past,
    .aca-cal__legend-item:last-child {
        display: none;
    }

    .aca-cal__layout {
        display: block;
    }

    .aca-cal__months,
    .aca-cal__nextup {
        box-shadow: none;
    }

    /* Letter at full size: one column of months, each its name beside its
       events, running on from sheet to sheet (a card holding them too, which
       aca-base.css section 13 would otherwise keep whole). A month may break
       between two events - kept whole, the months jumped the first sheet - and
       an event never splits. */
    .aca-card:has(.aca-cal__months) {
        break-inside: auto;
    }

    .aca-cal__months {
        overflow: visible;
    }

    .aca-cal-event {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .aca-cal__month {
        grid-template-columns: 8rem minmax(0, 1fr);
        grid-gap: 1rem;
        padding: 0.5rem 0.75rem;
    }

    .aca-cal-event {
        padding: 0.375rem 0;
    }

    .aca-cal-event.is-past {
        opacity: 1;
    }

    /* "Next" means nothing on paper: its badge goes above, its tint here. */
    .aca-cal-event.is-next {
        background: none;
    }

    .aca-cal__badge,
    .aca-cal-event__date,
    .aca-cal__legend-swatch,
    .aca-cal__nextup {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}