/* /calendar/ only — loaded from the page's own pageCss.
   Markup: partials/calendar.njk. Behaviour: assets/js/calendar-month.js. */

/* ── Month switcher (added by the script) ───────────────────────── */
.calm-nav[hidden] { display: none; }
.calm-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}
.calm-nav .btn[disabled] {
  opacity: 0.45;
  cursor: default;
}
.calm-nav .btn[disabled]:hover { background: transparent; }
.calm-nav-icon { width: 18px; height: 18px; flex: none; }

/* One month at a time once the script has run. The first month's heading
   sits straight under the switcher, so it loses the section's top margin. */
.calm-month[hidden] { display: none; }
.calm.is-paged .calm-month { margin-top: 0; }

/* ── The grid ──────────────────────────────────────────────────── */
/* Monday first. The weekend is kept, so nothing on a Saturday goes missing,
   but narrower and shaded: this is a school week. */
.calm-weekdays,
.calm-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, 0.45fr));
  gap: var(--sp-2);
}
.calm-weekdays {
  margin-top: var(--sp-6);
  padding-bottom: var(--sp-2);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-muted);
}
.calm-weekdays span { padding-inline: var(--sp-2); }
.calm-grid {
  margin: 0;
  padding: 0;
  list-style: none;
}
.calm-day {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  min-height: 8rem;
  padding: var(--sp-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
}
.calm-day--weekend { background: var(--paper-alt); }
.calm-day--blank {
  border-color: transparent;
  background: none;
}
/* Today by its border, as on the homepage week. */
.calm-day[aria-current="date"] {
  border-color: var(--bms-blue-700);
  box-shadow: inset 0 0 0 1px var(--bms-blue-700);
}

.calm-daylabel { margin: 0; }
/* The header row names the days on a wide screen; each day only needs its
   number. Below 900px the header goes and the name comes back. */
.calm-dayname { display: none; }
.calm-date {
  font-size: var(--step-1);
  font-weight: 200;
  line-height: 1;
  color: var(--bms-blue-700);
}

.calm-events {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.calm-event {
  font-size: var(--step--1);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.calm-event-kind {
  display: block;
  font-weight: 600;
  color: var(--bms-blue-700);
}
.calm-event-title { display: block; color: var(--ink); }
.calm-event-where { display: block; color: var(--ink-muted); }

.calm-empty {
  margin: var(--sp-6) 0 0;
  color: var(--ink-muted);
}

/* ── Agenda, below 900px ───────────────────────────────────────── */
/* Seven columns will not hold on a phone. The same list becomes a ruled
   agenda of the days that have something on. */
@media (max-width: 900px) {
  .calm-weekdays { display: none; }
  .calm-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: var(--sp-4);
    border-top: 1px solid var(--hairline);
  }
  .calm-day--blank,
  .calm-day:not(.has-events) { display: none; }
  .calm-day {
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-6);
    min-height: 0;
    padding: var(--sp-4) var(--sp-2);
    border: 0;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    background: none;
  }
  .calm-day[aria-current="date"] {
    box-shadow: none;
    background: var(--bms-blue-100);
  }
  .calm-daylabel {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    width: 6rem;
  }
  .calm-dayname {
    display: block;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--bms-blue-900);
  }
  .calm-events { flex: 1; min-width: 0; gap: var(--sp-3); }
  .calm-event { font-size: var(--step-0); }
}

/* ── The "contact us" line under the calendar ──────────────────── */
/* One sentence now, so less than a full section gap: clear of the last row
   of days without floating away from the calendar it refers to. */
.page-section.calm-contact { margin-top: var(--sp-12); }