/*========================================
  general.css � Combined Calendar & List Styles (variables-driven)
========================================*/






:root {
  /* defaults for your layout overrides */
  --vr-layout-wrapper_padding: 1em 2em;
  --vr-layout-cell_height:      80px;
}

/* 0) Base reset: inherit text color, allow CSS vars to flow */
.vr-block-event-list,
.vr-block-event-list > * {
  color: var(--vr-text, #000);
}

/* 1) District / vr-event cards (list view) */
.district-event-item,
.vr-event-item {
  background: var(--vr-card-bg, var(--vr-bg, #f7f7f7));
  color: var(--vr-text, #000);
  font-family: var(--vr-font, inherit);
  border-radius: 10px;
  padding: 1em 1.5em;
  margin-bottom: 1.5em;
  text-decoration: none;
}
.vr-event-item .event-title {
  font-weight: 700;
  margin-bottom: 0.3em;
}
/* venue font-size setting */
.vr-event-item .event-venue {
  font-size: var(--vr-venue-font-size, 0.9em);
}

/* 2) Bracketed text styling (list & tooltip titles) */
.event-title-brackets {
  font-size: var(--vr-font-size-datetime, 0.9rem);
  font-weight: 400;
  margin-left: 0.25em;
}

/* 3) Calendar wrapper */
.vr-block-event-list {

  font-family: var(--vr-font, Arial, sans-serif);

}
.vr-block-event-list .vr-calendar-wrapper {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: visible !important;
}

/* 4) Month-grid table wrapper */
.vr-block-event-list .vr-calendar-wrapper .calendar-grid {
  background: var(--vr-card-bg, var(--vr-bg, #fff));
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.vr-block-event-list .vr-calendar-wrapper .calendar-grid th,
.vr-block-event-list .vr-calendar-wrapper .calendar-grid td {
  text-align: center;
  vertical-align: middle;
  border: 1px solid #ddd;
  padding: 1.5em 0;
  font-size: var(--vr-font-size-datetime, 0.9rem);
}
.vr-block-event-list .vr-calendar-wrapper .calendar-grid td .highlight {
  width: 100%;
  padding: 0.6em 0;
  background-color: transparent; /* non-days by default */
}

/* 5) Non-days (empty cells before/after month) */
.vr-block-event-list .vr-calendar-wrapper .calendar-grid td.no-event span,
.vr-block-event-list .vr-calendar-wrapper .calendar-grid td .highlight {
  background-color: transparent !important;
}

/* 6) Active-day pill (days with events) */
.vr-block-event-list
  .vr-calendar-wrapper
  .calendar-grid td.has-event
  > a.tooltip-link {
  background-color: var(--vr-primary, #019EDD) !important;
  color: #FFF !important;
}

/* 7) �Today� cell styling to match wrapper background */
.vr-block-event-list
  .vr-calendar-wrapper
  .calendar-grid td.current-day {
  background-color: var(--vr-bg, #fff) !important;
  color:            var(--vr-active, var(--vr-text, #000)) !important;
}

/* 8) Calendar header (month name + arrows) */
.vr-block-event-list .vr-calendar-wrapper .vr-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5em 0;
}
.vr-block-event-list .vr-calendar-wrapper .vr-prev,
.vr-block-event-list .vr-calendar-wrapper .vr-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none !important;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--vr-meta, #000);
}
.vr-block-event-list .vr-calendar-wrapper .vr-arrow-icon {
  display: block;
  width: 1rem;
  height: 1rem;
}
.vr-block-event-list .vr-calendar-wrapper .vr-current-month {
  font-weight: bold;
  font-size: var(--vr-font-size-title, 1rem);
  color: var(--vr-meta, #000);
}

/* 9) Weekday labels (S M T W T F S) */
.vr-block-event-list .vr-calendar-wrapper .calendar-grid th {
  color: var(--vr-meta, #000);
}

/* 10) Tooltip trigger */
.tooltip-link {
  position: relative;
  display: inline-block;
  background-color: var(--vr-primary, #019EDD);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  text-decoration: none;
  color: var(--vr-text, #fff);
}
.tooltip-link:hover {
  filter: brightness(0.9);
}

/* 11) Tooltip content */
.tooltip-link .tooltip-content {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.8em;
  background-color: var(--vr-bg, #fff);
  color:            var(--vr-meta, #000);
  border-radius: 4px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.tooltip-link:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

/* 12) Month/List toggle buttons
   Inactive is a hardcoded neutral gray — deliberately NOT built from
   --vr-card-bg/--vr-primary — because on a site whose configured "Card &
   Grid Background Color" happens to be close to its Primary Color, an
   outline-vs-solid treatment built from those same two variables collapses
   back into "both buttons look solid blue" (reported after the first fix).
   Gray vs. the brand accent color can't collide that way. Hover gets its
   own distinct mid-tone so hover, inactive, and active are three clearly
   different shades, not two. */
.vr-calendar-toggle {
  text-align: center;
  margin-bottom: 2em;
}
.vr-calendar-toggle button {
  background: #e5e5e5 !important;
  color:      #444 !important;
  border:     1.5px solid transparent !important;
  padding:    6px 10px;
  border-radius: 4px;
  margin: 0 5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}
.vr-calendar-toggle button:hover {
  background: #cfcfcf !important;
  color:      #222 !important;
}
.vr-calendar-toggle button.active {
  background: var(--vr-primary, #019EDD) !important;
  color:      var(--vr-text,    #fff) !important;
  border-color: var(--vr-primary, #019EDD) !important;
}
.vr-calendar-toggle button.active:hover {
  filter: brightness(0.9);
}

/* 13) List view: date & time inline */
.vr-events-list .event-datetime .event-date,
.vr-events-list .event-datetime .event-time {
  font-size: var(--vr-font-size-datetime, 0.9rem);
  color:     var(--vr-meta, #000);
}

/* 14) Horizontal list layout */
.vr-events-list.horizontal {
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap;
    justify-content: space-between;
}
.vr-events-list.horizontal .vr-event-item {
  flex: 1 1 200px;
  max-width: 200px;
  background: var(--vr-bg, #f4f4f0);
  border-radius: 5px;
  padding: 1em;
}

/* Hide venue on condensed (horizontal) list */
.vr-events-list.horizontal .event-venue-line,
.vr-events-list.horizontal .event-venue {
  display: none !important;
}


/* 15) Full-calendar link */
.vr-full-calendar-link {
  text-align: center;
  margin: 1em 0;
}
.vr-full-calendar-link a {
  background-color: var(--vr-primary, #019EDD);
  color:            var(--vr-text,    #fff);
  padding:          6px 10px;
  display:          inline-block;
  border-radius:    4px;
  transition:       filter 0.2s ease;
  text-decoration:  none;
}
.vr-full-calendar-link a:hover {
  filter: brightness(0.9);
}

/* 16) Subscribe dropdown */
.vr-calendar-subscribe {
  position: relative;
  width: 100%;
  text-align: center;
}
.vr-subscribe-toggle {
  background: var(--vr-primary, #019EDD);
  color:      var(--vr-text,    #fff);
  padding:    10px 20px 5px 20px;
  border: none;
  border-radius: 4px;
  margin: 1em 0;
  transition: filter 0.2s ease;
  text-decoration: none;
}
.vr-subscribe-list {
  display: none;
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  list-style: none;
  background: var(--vr-bg, #fff);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 8px;
  border-radius: 4px;
  z-index: 1000;
}
.vr-calendar-subscribe:hover .vr-subscribe-list {
  display: block;
}

/* 17) Remove odd-row and hover shading entirely */
.vr-block-event-list .vr-calendar-wrapper .calendar-grid tbody > tr:nth-child(odd) > td,
.vr-block-event-list .vr-calendar-wrapper .calendar-grid tbody > tr:nth-child(odd) > th,
.vr-block-event-list .vr-calendar-wrapper .calendar-grid tbody tr:hover > td,
.vr-block-event-list .vr-calendar-wrapper .calendar-grid tbody tr:hover > th {
  background-color: transparent !important;
}



/* Keep Load more below content (already used) */
.vr-events-load-more-wrap{display:block;width:100%;text-align:center;margin:1rem 0 0}
.vr-events-load-more{background:var(--vr-primary,#019EDD);color:#fff;border:0;border-radius:4px;padding:8px 14px;cursor:pointer}

/* Match "Venue" font size to the date/time */
.vr-event-item .event-venue,
.vr-event-item .event-date-time { font-size: var(--vr-font-size-datetime, 0.9rem); }

/* Per-block wrapper overrides + anti-icon wrapper */
.vr-block-event-list{background:var(--vr-wrapper-bg,var(--vr-bg,#fff));color:var(--vr-wrapper-text,var(--vr-text,#000))}
.skip-iconify-wrapper a.ski-iconify{ /* marker classes for your external-link icon plugin */ }




span.event-venue {
  font-size: var(--vr-venue-font-size, 0.9em);
}

/* Single-event page only: tighten row height + sit above circular badge */
body.single-visionred_event .vr-calendar-subscribe .vr-subscribe-list { z-index: 100000; }
body.single-visionred_event .vr-calendar-subscribe .vr-subscribe-list a { line-height: 1.02; padding: 4px 8px; }
body.single-visionred_event .vr-calendar-subscribe .vr-subscribe-list li { margin: 0; padding: 0; }
/* Single-event ONLY: left-align the Add to calendar dropdown */
body.single-visionred_event .vr-calendar-subscribe { text-align: left; }

/* Single-event page: "Back to Events" link above the details grid */
.vr-event-back { margin-bottom: 1rem; }
.vr-event-back a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  text-decoration: none;
  color: var(--vr-primary, #019EDD);
  font-weight: 600;
}
.vr-event-back a:hover { text-decoration: underline; }

.vr-event-datetime-block { margin-bottom: 1.5rem; }
.vr-event-datetime-block > div { margin-bottom: 0.75rem; }

.vr-event-content { margin-bottom: 2rem; line-height: 1.6; }