/* ==========================================================================
   GoodVibes Foundation — CALENDAR SKIN
   gvs.foundation · production CSS · overflow layer (loads after gvs-blog)

   Scope: the FullCalendar instance rendered by the `hydrogen-calendar-embeds`
   plugin (v3.0.1) on /events/. Out of the box that plugin ships FullCalendar's
   stock palette — #2c3e50 navy toolbar buttons, #3788d8 blue event dots, #ddd
   rules, a white page ground and grey list-day cushions — none of which is in
   the GVS system. The result was one gray, off-brand panel on an otherwise
   warm-paper page.

   FullCalendar drives ALL of that from its own `--fc-*` custom properties, so
   the skin is a re-point, not an override war: the block below re-declares the
   variables on `.fc` and only a handful of real rules follow, for the two
   things FullCalendar hard-codes (button chrome and list typography).

   Everything is scoped under `.fc`. Nothing here can reach the rest of the
   site. Palette values come from gvs-tokens.css — no new colours.

   ROLLBACK: dequeue 'gvs-calendar' in functions.php and delete this file.
   ========================================================================== */

.fc {
  /* --- ground and rules ------------------------------------------------- */
  --fc-page-bg-color:            transparent;        /* let paper show through */
  --fc-neutral-bg-color:         var(--gvs-cream);   /* list day cushion       */
  --fc-neutral-text-color:       var(--gvs-petrol);
  --fc-border-color:             var(--gvs-soft-grey);

  /* --- toolbar buttons: the secondary control, not a CTA ----------------- */
  --fc-button-text-color:        var(--gvs-petrol);
  --fc-button-bg-color:          transparent;
  --fc-button-border-color:      var(--gvs-petrol);
  --fc-button-hover-bg-color:    var(--gvs-secondary-hover);
  --fc-button-hover-border-color:var(--gvs-petrol);
  --fc-button-active-bg-color:   var(--gvs-gold);
  --fc-button-active-border-color:var(--gvs-gold);

  /* --- events: gold fill, petrol label (5.03:1) -------------------------- */
  --fc-event-bg-color:           var(--gvs-gold);
  --fc-event-border-color:       var(--gvs-gold);
  --fc-event-text-color:         var(--gvs-text-on-gold);

  /* --- states ------------------------------------------------------------ */
  --fc-today-bg-color:           rgba(232, 179, 60, 0.16);  /* gold @16%      */
  --fc-highlight-color:          rgba(232, 179, 60, 0.20);
  --fc-list-event-hover-bg-color:var(--gvs-cream);

  font-family: var(--gvs-font-body);
  color: var(--gvs-text);
}

/* --- month / week title: the display face, like every other GVS heading -- */
.fc .fc-toolbar-title {
  font-family: var(--gvs-font-display);
  color: var(--gvs-petrol);
}

/* --- buttons -------------------------------------------------------------
   FullCalendar hard-codes weight, radius and box-shadow on .fc-button, so the
   variables above cannot reach them. These four rules bring the control in
   line with .gvs-btn--secondary / --primary. The button-group's inner corners
   are left to FullCalendar's own, more specific, :not(:first-child) rules. */
.fc .fc-button {
  border-width: var(--gvs-border-width);
  border-radius: var(--gvs-radius-sm);
  min-height: var(--gvs-btn-h-sm);
  padding: 0 var(--gvs-btn-pad-sm);
  font-family: var(--gvs-font-body);
  font-weight: var(--gvs-body-weight-em);
  font-size: var(--gvs-btn-fs-sm);
  text-transform: none;
  box-shadow: none;
  transition: background-color var(--gvs-t) var(--gvs-ease),
              border-color var(--gvs-t) var(--gvs-ease),
              color var(--gvs-t) var(--gvs-ease);
}
.fc .fc-button:focus,
.fc .fc-button:focus-visible {
  box-shadow: none;
  outline: var(--gvs-focus-width) solid var(--gvs-focus-ring);
  outline-offset: var(--gvs-focus-offset);
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  color: var(--gvs-text-on-gold);
}
.fc .fc-button-primary:disabled {
  background-color: transparent;
  border-color: var(--gvs-petrol);
  color: var(--gvs-petrol);
  opacity: var(--gvs-disabled-opacity);
  cursor: not-allowed;
}

/* --- list view ----------------------------------------------------------
   The day cushion is a heading row, so it takes the display face; times and
   titles are body copy in petrol. The leading dot is the event colour. */
.fc .fc-list {
  border-radius: var(--gvs-radius);
  overflow: hidden;
}
.fc .fc-list-day-cushion {
  font-family: var(--gvs-font-display);
  color: var(--gvs-petrol);
}
.fc .fc-list-event-time,
.fc .fc-list-event-title a {
  color: var(--gvs-text);
  text-decoration: none;
}
.fc .fc-list-event-title a:hover {
  color: var(--gvs-petrol-deep);
  text-decoration: underline;
  text-decoration-color: var(--gvs-gold);
  text-decoration-thickness: var(--gvs-underline);
}
.fc .fc-list-event-dot {
  border-color: var(--gvs-gold);
}

/* --- grid view ----------------------------------------------------------- */
.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number {
  color: var(--gvs-text);
  text-decoration: none;
}