/* Mini calendar widget (generated by calendar.js into #miniCalendar) */

.mini-calendar {
  font-family: inherit;
}

.mini-cal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mini-cal__title {
  font-size: 14px;
  font-weight: 600;
  color: #1b2a4e;
}

.mini-cal__nav {
  display: flex;
  gap: 4px;
}

.mini-cal__prev,
.mini-cal__next {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #7c8aa5;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}

.mini-cal__prev:hover,
.mini-cal__next:hover {
  background: #f1f3f8;
  color: #1b2a4e;
}

.mini-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.mini-cal__grid--head {
  margin-bottom: 4px;
}

.mini-cal__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  height: 26px;
  color: #4a5568;
  position: relative;
}

.mini-cal__cell--head {
  font-weight: 600;
  color: #9aa3b2;
  text-transform: uppercase;
  font-size: 10px;
}

.mini-cal__cell--muted {
  color: #cbd2de;
}

.mini-cal__cell--day {
  cursor: pointer;
  border: none;
  background: transparent;
  border-radius: 50%;
  flex-direction: column;
  gap: 1px;
  padding: 0;
}

.mini-cal__cell--day:hover {
  background: #eef1f8;
}

.mini-cal__cell--day.is-today {
  font-weight: 700;
  color: #1b2a4e;
  border: 1px solid #5b7fde;
}

.mini-cal__cell--day.is-selected {
  background: #5b7fde;
  color: #fff;
}

.mini-cal__dots {
  display: flex;
  gap: 2px;
  position: absolute;
  bottom: 2px;
}

.mini-cal__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

/* Program list (right sidebar, generated by calendar.js into #programList) */

.program-list__group {
  margin-bottom: 18px;
}

.program-list__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1b2a4e;
  margin-bottom: 8px;
}

.program-list__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.program-list__card {
  background: #f8f9fc;
  border-left: 3px solid transparent;
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.program-list__date {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #7c8aa5;
  margin: 0 0 4px;
}

.program-list__title {
  font-size: 13px;
  color: #1b2a4e;
  margin: 0;
  line-height: 1.35;
}

.program-list__empty {
  font-size: 13px;
  color: #9aa3b2;
}

/* ============================================================
   MAIN CALENDAR — Prev/Next buttons + time-axis width
   Lives here (theme file) instead of Customizer Additional CSS
   because that field is being actively re-published elsewhere,
   which was repeatedly wiping this fix out of the database.
   ============================================================ */

/* FullCalendar's aria-label on the center prev/next buttons changes
   with the active view ("Previous Month" / "Previous Week" / "Previous Day"),
   so all three variants need the same boxed-button treatment. */
.calendar-main button[aria-label="Previous Month"],
.calendar-main button[aria-label="Next Month"],
.calendar-main button[aria-label="Previous Week"],
.calendar-main button[aria-label="Next Week"],
.calendar-main button[aria-label="Previous Day"],
.calendar-main button[aria-label="Next Day"] {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--njca-gray, #D8D8D8);
  background: var(--njca-white, #FFFFFF);
  border-radius: 7px;
  cursor: pointer;
  font-size: 0; /* hides the "Prev" / "Next" text */
  color: var(--njca-navy, #16284F);
  transition: all .2s var(--njca-ease, cubic-bezier(.4, 0, .2, 1));
}
.calendar-main button[aria-label="Previous Month"]::before,
.calendar-main button[aria-label="Previous Week"]::before,
.calendar-main button[aria-label="Previous Day"]::before { content: "\2039"; font-size: 20px; line-height: 1; }
.calendar-main button[aria-label="Next Month"]::before,
.calendar-main button[aria-label="Next Week"]::before,
.calendar-main button[aria-label="Next Day"]::before     { content: "\203A"; font-size: 20px; line-height: 1; }
.calendar-main button[aria-label="Previous Month"]:hover,
.calendar-main button[aria-label="Next Month"]:hover,
.calendar-main button[aria-label="Previous Week"]:hover,
.calendar-main button[aria-label="Next Week"]:hover,
.calendar-main button[aria-label="Previous Day"]:hover,
.calendar-main button[aria-label="Next Day"]:hover {
  background: var(--njca-navy, #16284F);
  border-color: var(--njca-navy, #16284F);
  color: var(--njca-white, #FFFFFF);
}

/* Year nav (prevYear/nextYear) + the "2026" label next to it. */
#calendar1 .njca-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}
#calendar1 .njca-toolbar-row #njcaToolbarExtra {
  margin-left: auto;
}
.calendar-main button[aria-label="Previous Year"],
.calendar-main button[aria-label="Next Year"] {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0; /* hides the "Prev year" / "Next year" text */
  color: #7C8AA5;
  transition: all .2s var(--njca-ease, cubic-bezier(.4, 0, .2, 1));
}
.calendar-main button[aria-label="Previous Year"]::before { content: "\2039"; font-size: 18px; line-height: 1; }
.calendar-main button[aria-label="Next Year"]::before     { content: "\203A"; font-size: 18px; line-height: 1; }
.calendar-main button[aria-label="Previous Year"]:hover,
.calendar-main button[aria-label="Next Year"]:hover {
  background: #F1F3F8;
  color: var(--njca-navy, #16284F);
}
.njca-cal-year-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--njca-navy, #16284F);
  user-select: none;
}

/* Time-axis "All-day" label drives the shared axis-column width in
   week/day view; shrinking it lets FullCalendar sync to a narrower
   column instead of sizing everything to fit "All-day" at full size. */
#calendar1 [role="rowheader"] { font-size: 12px; }

/* The "Day cells" rule (padding/border/background for real day cells)
   also matches the blank corner spacer above the axis column, which
   has no data-date — real day cells always do. Since that spacer uses
   box-sizing:content-box, the extra 4px padding + 1px border per side
   added 10px on top of its synced inline width, making the axis column
   render wider than the "All-day"/hour labels it's supposed to match.
   #calendar1 gives this enough specificity to win over that rule. */
#calendar1 [role="gridcell"]:not([data-date]) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
}