/*
 * Events calendar — structural styles for the calendar view.
 *
 * Plain CSS (the plugin has no build step). Only what Bootstrap utilities can't express lives
 * here: the 7-column grid, cell/dot/tooltip geometry, the accent tint, and the tooltip reveal.
 * Colour, weight, spacing, flex, borders and font sizes are utility classes in the template.
 *
 * Theming — override these on .events-calendar (or :root). They default to the theme's
 * Bootstrap variables, so the calendar follows the site palette out of the box:
 *   --lane-cal-accent       accent colour            (default: --bs-primary)
 *   --lane-cal-accent-rgb   accent as "r,g,b" tints  (default: --bs-primary-rgb)
 *   --lane-cal-today-color  text on the "today" disc (default: #fff)
 */

.events-calendar {
  --lane-cal-accent: var(--bs-primary, #0d6efd);
  --lane-cal-accent-rgb: var(--bs-primary-rgb, 13, 110, 253);
  --lane-cal-today-color: #fff;
}

.events-calendar__weekdays,
.events-calendar__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.events-calendar__day {
  min-height: 7.5rem;
}

/* "Today" marker: a filled disc behind the day number. */
.events-calendar__day.is-today .events-calendar__daynum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  background: var(--lane-cal-accent);
  color: var(--lane-cal-today-color);
  border-radius: 50%;
}

/* Event chip: a tinted single-line link. The tint + hover have no utility equivalent. */
.events-calendar__chip {
  padding: 0.15rem 0.4rem;
  background: rgba(var(--lane-cal-accent-rgb), 0.1);
  border-left: 3px solid var(--lane-cal-accent);
  border-radius: 0.2rem;
  transition: background-color 0.15s ease;
}

.events-calendar__chip:hover,
.events-calendar__chip:focus-visible {
  background: rgba(var(--lane-cal-accent-rgb), 0.2);
}

/*
 * Desktop hover/focus tooltip.
 *
 * The hide is delayed ~200ms so the cursor can travel from the chip onto the tooltip (and its
 * links) without it vanishing; while visible the tooltip is interactive, so hovering it holds
 * it open (it's a descendant of the chip, so :hover still applies). Show is instant.
 * `visibility` — not `pointer-events` — gates interactivity, so the resting/hidden tooltip
 * never blocks the cells beneath it, but during the hide delay it stays reachable.
 */
.events-calendar__tooltip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  z-index: 20;
  width: 16rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s ease 0.2s, transform 0.15s ease 0.2s, visibility 0s linear 0.2s;
}

/* Right-hand columns open leftwards so the tooltip stays inside the grid. */
.events-calendar__week .events-calendar__day:nth-child(n + 5) .events-calendar__tooltip {
  right: 0;
  left: auto;
}

.events-calendar__event:hover .events-calendar__tooltip,
.events-calendar__event:focus-within .events-calendar__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s; /* instant show */
}

.events-calendar__tooltip-media {
  aspect-ratio: 16 / 9;
}

.events-calendar__dots {
  gap: 2px;
}

.events-calendar__dot {
  width: 5px;
  height: 5px;
}

/* Mobile: compact cells (chips give way to dots + the agenda list below the grid). */
@media (max-width: 767.98px) {
  .events-calendar__day {
    min-height: 3.25rem;
  }
}