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


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

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

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

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

/* 3) Calendar wrapper */
.bot-block-event-list {
  background: var(--bot-bg, #fff);
  font-family: var(--bot-font, Arial, sans-serif);
  padding: var(--bot-layout-wrapper_padding, 1em 2em);
}
.bot-block-event-list .bot-calendar-wrapper {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: visible !important;
}

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

.bot-block-event-list .bot-calendar-wrapper .calendar-grid th,
.bot-block-event-list .bot-calendar-wrapper .calendar-grid td {
  text-align: center;
  vertical-align: middle;
  border: 1px solid #ddd;
  padding: 0.5em 0;
  font-size: var(--bot-font-size-datetime, 0.9rem);
}
.bot-block-event-list .bot-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) */
.bot-block-event-list .bot-calendar-wrapper .calendar-grid td.no-event span,
.bot-block-event-list .bot-calendar-wrapper .calendar-grid td .highlight {
  background-color: transparent !important;
}

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

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

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

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

/* 10) Tooltip trigger */
.tooltip-link {
  position: relative;
  display: inline-block;
  background-color: var(--bot-primary, #019EDD);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  text-decoration: none;
  color: var(--bot-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: #FFF;
  color:            var(--bot-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 */
.bot-calendar-toggle {
  text-align: center;
  margin-bottom: 2em;
}
.bot-calendar-toggle button {
  background: var(--bot-primary, #019EDD);
  color:      var(--bot-text,    #fff);
  padding:    6px 10px;
  border:     none;
  border-radius: 4px;
  margin: 0 5px;
  cursor: pointer;
  transition: filter 0.2s ease;
  text-decoration: none;
}
.bot-calendar-toggle button:hover {
  filter: brightness(0.9);
}
.bot-calendar-toggle button.active {
  filter: brightness(0.8);
}

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

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

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

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

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


.bot-events-list.horizontal .bot-event-item {
    background: #FAF3F0;
}
.bot-block-event-list.bot-block-event-list--horizontal {
    padding: 0;
}


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