:root {
  --taxonomy-20-color: #ffc857;
  --taxonomy-21-color: #90c6fc;
  --taxonomy-22-color: #a997df;
  --taxonomy-23-color: #bdd9bf;
  --taxonomy-24-color: #ffc857;
  --taxonomy-25-color: #929084;
  --taxonomy-140-color: #ffc857;
  --taxonomy-141-color: #ffc857;
  --taxonomy-142-color: #e5323b;
}

.calendar-legend {
  padding-top: 2.7rem;
  padding-bottom: 5.6rem;

  .view-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
  }

  .fc-event {
    margin: 0;
    padding: 1.3rem .5rem;
    border-radius: 0;

    .field-content::before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      margin-right: 0.5rem;
    }
  }

  .views-row:has(.term--20) {
    .fc-event {
      background-color: var(--taxonomy-20-color);
      border-color: var(--taxonomy-20-color);
      .field-content::before {
        content: "\f0c0";
      }
    }
  }
  .views-row:has(.term--21) {
    .fc-event {
      background-color: var(--taxonomy-21-color);
      border-color: var(--taxonomy-21-color);
      .field-content::before {
        content: "\f772";
      }
    }
  }
  .views-row:has(.term--22) {
    .fc-event {
      background-color: var(--taxonomy-22-color);
      border-color: var(--taxonomy-22-color);
      .field-content::before {
        content: "\f071";
      }
    }
  }
  .views-row:has(.term--23) {
    .fc-event {
      background-color: var(--taxonomy-23-color);
      border-color: var(--taxonomy-23-color);
      .field-content::before {
        content: "\f017";
      }
    }
  }
  .views-row:has(.term--24) {
    display: none;
  }
  .views-row:has(.term--25) {
    .fc-event {
      background-color: var(--taxonomy-25-color);
      border-color: var(--taxonomy-25-color);
      .field-content::before {
        content: "\f51b";
      }
    }
  }
  .views-row:has(.term--140) {
    display: none;
  }
  .views-row:has(.term--141) {
    display: none;
  }
  .views-row:has(.term--142) {
    .fc-event {
      background-color: var(--taxonomy-142-color);
      border-color: var(--taxonomy-142-color);
      .field-content::before {
        content: "\f056";
      }
    }
  }
}

.fc-day-number {
  font-weight: 600;
}

.fc-event {
  font-weight: 600;
  padding: 3px;
  color: #000000;
  margin: 0 4px 4px;

  /* Undo default fullcalendar styles using em, causing subpixel inaccuracy. */
  /* We also can't "revert" because the default font size is 18px. */
  font-size: 1.5rem;
}

.fc-event:visited,
.fc-event:hover,
.fc-event:focus-visible,
.fc-event:active {
  color: #000000;
}

.fc-day-grid-event .fc-content {
  white-space: unset;
  overflow: initial;
}

.fc-event .fc-content::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 0.5rem;
}

.fc-month-view .fc-scroller {
  height: 100% !important;
  overflow: visible !important;
}
.fc-month-view .fc-row {
  min-height: 7em;
}
.fc-month-view .fc-row td {
  border-right: 1px solid #ccc;
}
.fc-month-view .fc-head .fc-row {
  min-height: initial;
}
.fc-month-view .fc-head th {
  border: none;
}

:is(.event-category-20, .event-category-140, .event-category-141) .fc-content::before {
  content: "\f0c0";
}

.event-category-142 .fc-content::before {
  content: "\f056";
}

.event-category-21 .fc-content::before {
  content: "\f772"; /* Unicode for fa-check-to-slot */
}

.event-category-22 .fc-content::before {
  content: "\f071";
}

.event-category-23 .fc-content::before {
  content: "\f017";
}

.event-category-24 .fc-content::before {
  content: "\f0c0";
}

.event-category-25 .fc-content::before {
  content: "\f51b";
}

/**
 * Unfortunately, the calendar is styled specifically for desktop. It would be
 * more tedious to write mobile-first (min-width) overrides, then restoring them
 * to their desktop defaults after.
 *
 * So we write in mobile _last_ format (max-width).
 */
@media screen and (max-width: 992px) {
  .fc-header-toolbar {
    flex-wrap: wrap;
    justify-content: center;
  }

  .fc-center {
    order: 0;
    flex-basis: 100%;
    text-align: center;
    margin-bottom: 0.8rem;
  }

  .fc-left,
  .fc-right {
    order: 1
  }

  .fc-right {
    margin-left: .375em;
  }

  .fc-button {
    font-size: .875em;
  }

  .fc-toolbar > * > :not(:first-child) {
    margin-left: .375em;
  }
}