/* ============================================================
   EventPlannr — Frontend Styles
   Minimal, override-friendly. Add your theme styles on top.
   ============================================================ */

/* ─── Custom Properties ───────────────────────────────────── */
.ep-archive,
.ep-single {
  --ep-primary:        #2271b1;
  --ep-primary-dark:   #135e96;
  --ep-text:           #1d2327;
  --ep-text-muted:     #646970;
  --ep-border:         #ddd;
  --ep-bg:             #fff;
  --ep-bg-alt:         #f6f7f7;
  --ep-radius:         8px;
  --ep-shadow:         0 2px 8px rgba(0,0,0,.08);
  --ep-shadow-hover:   0 4px 16px rgba(0,0,0,.14);
  --ep-badge-full:     #d63638;
  --ep-badge-cancel:   #646970;
  --ep-occ-selected:   #d6e4f0;
  --ep-transition:     0.18s ease;
  --ep-month-color:    #8c8f94;
  --ep-spots-low:      #d63638;
}

/* ─── Archive ─────────────────────────────────────────────── */
.ep-archive {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.ep-archive__header { margin-bottom: 36px; }

.ep-archive__title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--ep-text);
  margin: 0 0 20px;
}

/* ─── Archive Intro (optional heading + paragraph above the cards) ────── */
.ep-archive__intro {
  margin: 0 0 24px;
}

.ep-archive__intro-heading {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  color: var(--ep-text);
  margin: 0 0 10px;
  line-height: 1.35;
}

.ep-archive__intro-text {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ep-text-muted);
  margin: 0;
}

/* ─── Category Filter ─────────────────────────────────────── */
.ep-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.ep-filter__item {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--ep-border);
  border-radius: 100px;
  font-size: 0.85rem;
  color: var(--ep-text-muted);
  text-decoration: none;
  transition: background var(--ep-transition), color var(--ep-transition), border-color var(--ep-transition);
}

.ep-filter__item:hover,
.ep-filter__item.is-active {
  background: var(--ep-primary);
  border-color: var(--ep-primary);
  color: #fff;
}

/* ─── Grid ────────────────────────────────────────────────── */
.ep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}

/* ─── Event Card ──────────────────────────────────────────── */
.ep-card {
  background: var(--ep-bg);
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  overflow: hidden;
  box-shadow: var(--ep-shadow);
  transition: box-shadow var(--ep-transition), transform var(--ep-transition);
  display: flex;
  flex-direction: column;
}

.ep-card:hover {
  box-shadow: var(--ep-shadow-hover);
  transform: translateY(-2px);
}

.ep-card__image-link { display: block; overflow: hidden; }

.ep-card__image {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.ep-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.ep-card:hover .ep-card__image img {
  transform: scale(1.04);
}

.ep-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ep-card__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

/* `color` deliberately stays on this single, low-specificity selector
   (no ancestor, no :link/:visited) so .ep-card__cat--source below (same
   specificity, defined later) can still override it for the source pill
   via normal cascade order. */
.ep-card__cat {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ep-primary);
}

/* text-decoration is split out and boosted with the always-present
   `.ep-archive` ancestor. Some themes ship their own `a:visited { text-
   decoration: underline !important }` (a common — if blunt — accessibility
   pattern) at equal specificity to a plain `.ep-card__cat`/`.ep-card__title
   a` rule; when two `!important` declarations tie on specificity, whichever
   is later in the cascade wins, and theme CSS often loads after ours. The
   extra ancestor class breaks that tie in our favor regardless of load
   order. */
.ep-card__cat,
.ep-archive .ep-card__cat {
  text-decoration: none !important;
}

.ep-card__cat:hover,
.ep-card__cat:focus,
.ep-archive .ep-card__cat:hover,
.ep-archive .ep-card__cat:focus {
  text-decoration: underline !important;
}

.ep-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.3;
}

.ep-card__title a,
.ep-card__title a:link,
.ep-card__title a:visited,
.ep-archive .ep-card__title a,
.ep-archive .ep-card__title a:link,
.ep-archive .ep-card__title a:visited {
  color: var(--ep-text) !important;
  text-decoration: none !important;
}
.ep-card__title a:hover,
.ep-card__title a:focus,
.ep-archive .ep-card__title a:hover,
.ep-archive .ep-card__title a:focus {
  color: var(--ep-primary) !important;
  text-decoration: underline !important;
}

/* ─── Card Date Block ─────────────────────────────────────── */
.ep-card__dates {
  /* Icon width (22px) + the .ep-card__date-primary gap (6px) below.
     Keep both in sync so subsequent dates' text lines up under the first. */
  --ep-date-icon-col: 28px;
  margin-bottom: 10px;
  border-left: 3px solid var(--ep-primary);
  padding-left: 10px;
  /* .ep-card__body is a column flexbox, and flex items default to
     min-width: auto — meaning this block refused to shrink below its
     content's unwrapped width and overflowed past the card's right edge
     (clipped by .ep-card's overflow:hidden, which read as "no right
     padding"). min-width: 0 lets it actually respect the card width. */
  min-width: 0;
}

/* Primary (next) date — the headline.
   The icon is its own flex item; date-main + date-time live together in
   .ep-card__date-primary-text so that if they don't fit on one line, the
   time wraps *inside that text column* (staying indented under the date)
   instead of breaking all the way back to the icon's left edge. */
.ep-card__date-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}

.ep-card__date-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--ep-text-muted);
}

.ep-card__date-primary-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  min-width: 0; /* let this box (not the icon) absorb the wrap */
}

.ep-card__date-main {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ep-text);
}

.ep-card__date-time {
  font-size: 0.76rem;
  color: var(--ep-text-muted);
  white-space: nowrap;
}

/* Additional date list — indented by the icon column so each subsequent
   date's text lines up under the first (primary) date's text, rather than
   under its icon.
   margin/padding use !important because theme stylesheets commonly style
   bare <ul>/<li> elements (e.g. content-area list resets) with their own
   inset — at equal specificity, whichever loads last wins, which was
   throwing this list's indent out of sync with the primary date above it. */
.ep-card__date-more {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 0 0 var(--ep-date-icon-col) !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ep-card__date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1px 6px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.76rem;
  line-height: 1.3;
  color: var(--ep-text-muted);
  min-width: 0;
}

.ep-card__date-row-day {
  color: var(--ep-text);
  font-weight: 500;
  white-space: nowrap;
}

.ep-card__date-row-time {
  white-space: nowrap;
}

.ep-card__date-row--more a {
  color: var(--ep-primary);
  text-decoration: none;
  font-weight: 500;
}

.ep-card__date-row--more a:hover { text-decoration: underline; }

/* No-dates state */
.ep-card__date--none {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--ep-text-muted);
  font-style: italic;
  margin-bottom: 14px;
}

/* CTA */
.ep-card .ep-btn { margin-top: auto; }

/* ─── Button ──────────────────────────────────────────────── */
.ep-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--ep-primary);
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background var(--ep-transition);
  border: none;
  cursor: pointer;
  margin-top: 12px;
}

/* Same theme-override problem as the card title above: force the visited/
   link/hover states so the button never inherits the theme's default (or
   visited-purple) link color instead of white. */
.ep-btn,
.ep-btn:link,
.ep-btn:visited {
  color: #fff !important;
  text-decoration: none !important;
}

.ep-btn:hover,
.ep-btn:focus {
  background: var(--ep-primary-dark);
  color: #fff !important;
  text-decoration: none !important;
}

.ep-btn__arrow { text-decoration: none; }

.ep-btn--full { width: 100%; justify-content: center; }

.ep-btn--reg[disabled],
.ep-btn--reg.is-disabled {
  background: #8c8f94;
  cursor: not-allowed;
  opacity: 0.7;
}

/* ─── Pagination / Empty ──────────────────────────────────── */
.ep-pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.ep-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--ep-text-muted);
  font-size: 1.1rem;
}

/* ============================================================
   SINGLE EVENT
   ============================================================ */

.ep-single {
  /* max-width intentionally removed — hero should run full template width.
     The layout and header below carry their own max-width constraint. */
}

/* ─── Hero ────────────────────────────────────────────────── */
.ep-single__hero {
  position: relative;
  height: clamp(280px, 38vw, 460px);
  overflow: hidden;
  border-radius: 0;          /* full-bleed, sidebar card provides the rounding */
  margin-bottom: 0;          /* layout's negative margin handles spacing */
}

/* Custom 32:9 hero image — drives its own height */
.ep-single__hero:has(.ep-single__hero-image--custom) {
  height: auto;
  aspect-ratio: 32 / 9;
}

.ep-single__hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Custom hero: full-width, preserve 32:9 ratio */
.ep-single__hero-image--custom {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ep-single__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.08) 55%);
}

.ep-single__hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 32px;
  color: #fff;
}

.ep-single__header {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 32px 20px 24px;
}

.ep-single__cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.ep-single__cat {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.15);
  padding: 3px 10px;
  border-radius: 100px;
  text-decoration: none;
}

.ep-single__header .ep-single__cat {
  color: var(--ep-primary);
  background: #dde8f0;
}

.ep-single__title {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
}

.ep-single__hero-content .ep-single__title { color: #fff; }

/* ─── Layout ──────────────────────────────────────────────── */
.ep-single__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  padding: 0 20px 60px;
  align-items: start;
  position: relative;
  max-width: 1200px;      /* constrain the two-column layout, not the hero */
  margin-left: auto;
  margin-right: auto;
}

.ep-single__layout .gform_footer {
    margin-bottom: 10px !important;
    padding-bottom: 10px;
    text-align: center;
}


/* Hero overlap: pull the whole layout up so sidebar floats into hero.
   −180px gives ~80px more overlap than the original −100px, lifting
   the RSVP card noticeably higher up the hero image. */
.ep-single--has-hero .ep-single__layout {
/*   margin-top: -180px; */
}

/* Content column: compensate by the same amount so body text still
   starts below the hero bottom edge. */
.ep-single--has-hero .ep-single__content {
/*   padding-top: 180px; */
}

@media (max-width: 820px) {
  .ep-single__layout { grid-template-columns: 1fr; }
  /* Sidebar stays after content on mobile — mobile RSVP button handles above-fold CTA */
  .ep-single--has-hero .ep-single__layout { margin-top: 0; }
  .ep-single--has-hero .ep-single__content { padding-top: 0; }
  .ep-single__layout { padding-bottom: 32px; gap: 20px; } /* tighter on mobile */
}

/* Sticky sidebar — natural height, no scroll container */
.ep-single__sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
}

/* Hero variant: sidebar becomes a single elevated card floating over the hero */
.ep-single--has-hero .ep-single__sidebar {
  background: #fff;
  border: 1px solid var(--ep-border, #ddd);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,.16);
  overflow-x: hidden;         /* clip at rounded corners horizontally */
  overflow-y: auto;           /* allow tall form content to scroll */
  position: relative;
  z-index: 10;
}

/* Flatten individual blocks into sections of the card */
.ep-single--has-hero .ep-single__sidebar .ep-sidebar-block {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--ep-border, #ddd);
  margin-bottom: 0;
  box-shadow: none;
}

.ep-single--has-hero .ep-single__sidebar .ep-sidebar-block:last-child {
  border-bottom: none;
}

@media (max-width: 820px) {
  .ep-single__sidebar {
    position: static;
  }
  .ep-single--has-hero .ep-single__sidebar {
    position: static;          /* override the desktop relative/z-index */
    top: auto;
    overflow: visible;         /* don't clip form content on mobile */
    overflow-x: hidden;        /* keep horizontal clipping for border-radius */
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    border-radius: var(--ep-radius, 8px);
  }
}

.ep-single__body {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ep-text);
  padding-top: 60px;
}

/* Tags */
.ep-single__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.ep-single__tag {
  font-size: 0.8rem;
  padding: 4px 12px;
  border: 1px solid var(--ep-border);
  border-radius: 100px;
  color: var(--ep-text-muted);
  text-decoration: none;
  transition: background var(--ep-transition);
}

.ep-single__tag:hover { background: var(--ep-bg-alt); }

/* ─── Sidebar Blocks ──────────────────────────────────────── */
.ep-sidebar-block {
  background: var(--ep-bg);
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  padding: 20px;
  margin-bottom: 20px;
}

.ep-sidebar-block__title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ep-text-muted);
  margin: 0;
  padding-bottom: 12px;
/*   border-bottom: 1px solid var(--ep-border); */
}

/* ─── Venue ───────────────────────────────────────────────── */
.ep-venue__name { display: block; font-weight: 600; margin-bottom: 6px; }

.ep-venue__address {
  font-size: 0.88rem;
  color: var(--ep-text-muted);
  font-style: normal;
  line-height: 1.6;
}

.ep-venue__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.ep-venue__directions-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--ep-primary);
  color: #fff;
  border-radius: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
}

.ep-venue__directions-btn:hover,
.ep-venue__directions-btn:focus {
  background: var(--ep-primary-dark);
  color: #fff;
}

.ep-venue__directions-btn:focus {
  outline: 3px solid var(--ep-primary);
  outline-offset: 2px;
}

.ep-venue__map-link {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--ep-text-muted);
  text-decoration: none;
  padding: 8px 4px;
  white-space: nowrap;
}

.ep-venue__map-link:hover { color: var(--ep-primary); text-decoration: underline; }

/* ─── Occurrence header row ───────────────────────────────── */
.ep-occ-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
/*   border-bottom: 1px solid var(--ep-border); */
  margin-bottom: 4px;
}

.ep-occ-total {
  font-size: 0.78rem;
  color: var(--ep-text-muted);
  background: var(--ep-bg-alt);
  border: 1px solid var(--ep-border);
  border-radius: 100px;
  padding: 2px 10px;
  font-weight: 600;
}

/* ─── Month Group ─────────────────────────────────────────── */
.ep-occ-list {
  display: flex;
  flex-direction: column;
}

.ep-month-group { margin-bottom: 4px; }

.ep-month-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ep-month-color);
  padding: 10px 0 4px;
}

/* ─── Occurrence Row ──────────────────────────────────────── */
.ep-occ {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid var(--ep-border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color var(--ep-transition), background var(--ep-transition);
  position: relative;
  margin-bottom: 6px;
}

.ep-occ:not(.ep-occ--full):not(.ep-occ--cancelled):hover {
  border-color: var(--ep-primary);
  background: #f0f6fc;
}

.ep-occ.is-selected {
  border-color: var(--ep-primary);
  background: var(--ep-occ-selected);
}

.ep-occ--full,
.ep-occ--cancelled {
  cursor: default;
  opacity: 0.5;
}

/* Hidden occurrences (shown after expand) */
.ep-occ--hidden {
  display: none;
}

/* ─── Radio Indicator ─────────────────────────────────────── */
.ep-occ__radio {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ep-border);
  border-radius: 50%;
  flex-shrink: 0;
  transition: border-color var(--ep-transition);
  position: relative;
}

.ep-occ:not(.ep-occ--full):not(.ep-occ--cancelled):hover .ep-occ__radio {
  border-color: var(--ep-primary);
}

.ep-occ.is-selected .ep-occ__radio {
  border-color: var(--ep-primary);
}

.ep-occ.is-selected .ep-occ__radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--ep-primary);
  border-radius: 50%;
}

/* ─── Occurrence Info ─────────────────────────────────────── */
.ep-occ__info {
  flex: 1;
  min-width: 0;
}

/* Day of week + date on one line */
.ep-occ__daydate {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 2px;
}

.ep-occ__dow {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ep-text);
}

.ep-occ__date {
  font-size: 0.88rem;
  color: var(--ep-text-muted);
}

/* Time range on its own line — visually distinct */
.ep-occ__timerange {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.82rem;
  color: var(--ep-text-muted);
}

.ep-occ__time-start,
.ep-occ__time-end {
  font-weight: 500;
  color: var(--ep-text);
}

.ep-occ__time-sep {
  color: var(--ep-border);
  font-weight: 300;
}

/* Spots remaining */
.ep-occ__spots {
  font-size: 0.72rem;
  color: var(--ep-text-muted);
  margin-top: 3px;
}

.ep-occ__spots--low {
  color: var(--ep-spots-low);
  font-weight: 600;
}

/* ─── Badges ──────────────────────────────────────────────── */
.ep-occ__badge {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  padding: 3px 7px;
  border-radius: 3px;
  flex-shrink: 0;
}

.ep-occ__badge--full      { background: #ffd6d6; color: var(--ep-badge-full); }
.ep-occ__badge--cancelled { background: #f0f0f1; color: var(--ep-badge-cancel); }

/* ─── Expand Button ───────────────────────────────────────── */
.ep-occ-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  background: var(--ep-bg-alt);
  border: 1px dashed var(--ep-border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--ep-primary);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background var(--ep-transition), border-color var(--ep-transition);
}

.ep-occ-expand:hover {
  background: #eef3f8;
  border-color: var(--ep-primary);
}

.ep-occ-expand[aria-expanded="true"] .ep-occ-expand__icon {
  display: inline-block;
  transform: rotate(180deg);
}

/* ─── Registration ────────────────────────────────────────── */
.ep-registration__hint {
  font-size: 0.82rem;
  color: var(--ep-text-muted);
  margin-top: 8px;
  text-align: center;
}

.ep-embed-form,
.ep-gf-form { margin-top: 4px; }

/* ─── Accessibility ───────────────────────────────────────── */
.ep-occ:focus {
  outline: 3px solid var(--ep-primary);
  outline-offset: 2px;
}

.ep-btn:focus {
  outline: 3px solid var(--ep-primary);
  outline-offset: 2px;
}

.ep-occ-expand:focus {
  outline: 3px solid var(--ep-primary);
  outline-offset: 2px;
}

/* ============================================================
   MULTI-SELECT MODE additions
   ============================================================ */

/* Checkbox-style indicator (replaces the radio dot in multiple mode) */
.ep-occ-list--multiple .ep-occ__radio {
  border-radius: 3px; /* square = checkbox */
  width: 18px;
  height: 18px;
}

.ep-occ-list--multiple .ep-occ.is-selected .ep-occ__radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  background: transparent;
  border-radius: 0;
}

.ep-occ-list--multiple .ep-occ.is-selected .ep-occ__radio {
  background: var(--ep-primary);
  border-color: var(--ep-primary);
}

/* Selected count badge (next to "N dates" in header) */
.ep-occ-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ep-selected-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--ep-primary);
  border-radius: 100px;
  padding: 2px 10px;
  animation: re-pop 0.15s ease;
}

@keyframes re-pop {
  0%   { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(1);    opacity: 1;   }
}

/* Multi-select: selected rows get a stronger border + left accent */
.ep-occ-list--multiple .ep-occ.is-selected {
  border-color: var(--ep-primary);
  background: var(--ep-occ-selected);
  box-shadow: inset 3px 0 0 var(--ep-primary);
}

/* ── Multi-selection summary strip ───────────────────────── */
.ep-multi-summary {
  background: #eef3f8;
  border: 1px solid #c3d8ee;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 0.85rem;
}

.ep-multi-summary__label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ep-text-muted);
  margin-bottom: 6px;
}

.ep-multi-summary__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--ep-text);
  font-weight: 500;
}

/* Registration hint — visible in multiple mode too, not hidden */
.ep-registration .ep-registration__hint {
  font-size: 0.82rem;
  color: var(--ep-text-muted);
  margin-top: 8px;
  text-align: center;
}

/* ============================================================
   WAITLIST STATE
   Amber/gold treatment — visually distinct from full (red)
   and cancelled (grey), but still selectable.
   ============================================================ */

:root {
  --ep-waitlist:        #b45309; /* amber-700 */
  --ep-waitlist-bg:     #fffbeb; /* amber-50 */
  --ep-waitlist-border: #fbbf24; /* amber-400 */
  --ep-waitlist-badge:  #92400e; /* amber-800 */
  --ep-waitlist-badge-bg: #fef3c7; /* amber-100 */
}

/* Occurrence row in waitlist state */
.ep-occ--waitlist {
  border-color: var(--ep-waitlist-border);
  background:   var(--ep-waitlist-bg);
}

.ep-occ--waitlist:hover {
  border-color: var(--ep-waitlist);
  background:   #fef9ec;
}

.ep-occ--waitlist.is-selected {
  border-color: var(--ep-waitlist);
  background:   #fef3c7;
  box-shadow:   inset 3px 0 0 var(--ep-waitlist);
}

/* Radio/checkbox indicator — amber when waitlist */
.ep-occ--waitlist .ep-occ__radio {
  border-color: var(--ep-waitlist-border);
}

.ep-occ--waitlist:hover .ep-occ__radio,
.ep-occ--waitlist.is-selected .ep-occ__radio {
  border-color: var(--ep-waitlist);
}

.ep-occ--waitlist.is-selected .ep-occ__radio::after {
  background: var(--ep-waitlist);
}

/* Checkbox tick in waitlist+multiple mode */
.ep-occ-list--multiple .ep-occ--waitlist.is-selected .ep-occ__radio {
  background:   var(--ep-waitlist);
  border-color: var(--ep-waitlist);
}

/* "Waitlist available" spots label */
.ep-occ__spots--waitlist {
  font-size:   0.72rem;
  font-weight: 600;
  color:       var(--ep-waitlist);
}

/* WAITLIST badge */
.ep-occ__badge--waitlist {
  background: var(--ep-waitlist-badge-bg);
  color:      var(--ep-waitlist-badge);
}

/* Waitlist note below button/form */
.ep-registration__waitlist-note {
  font-size:   0.82rem;
  color:       var(--ep-waitlist);
  font-weight: 500;
  background:  var(--ep-waitlist-bg);
  border:      1px solid var(--ep-waitlist-border);
  border-radius: 5px;
  padding:     8px 12px;
  margin-top:  8px;
  text-align:  center;
}

/* Waitlist button state — amber instead of blue */
.ep-btn--waitlist,
.ep-btn--waitlist:hover,
.ep-btn--waitlist:focus {
  background: var(--ep-waitlist);
}

/* ─── Archive card excerpt ─────────────────────────────── */
.ep-card__excerpt {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ep-text-muted);
  margin: 8px 0 12px;
  /* Clamp to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── GF occurrence notice (above the form) ──────────────── */
.ep-gf-occ-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: var(--ep-bg-alt, #f6f7f7);
  border: 1px solid var(--ep-border, #ddd);
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 0.85rem;
  color: var(--ep-text-muted, #646970);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.ep-gf-occ-notice__icon {
  flex-shrink: 0;
  line-height: 1.4;
}

/* After an occurrence is selected: turns green ✓ confirmed */
.ep-gf-occ-notice--selected {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
  font-weight: 600;
}


/* Single-occurrence date confirmation chip (no selection needed) */
.ep-gf-occ-notice--single {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
  font-weight: 600;
}

.ep-gf-occ-notice__time {
  font-weight: 400;
  color: #047857;
  margin-left: 6px;
}

/* ─── Smooth scroll for anchor links ──────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ─── Mobile RSVP button (below hero, mobile only) ─────────── */
.ep-mobile-rsvp-btn {
  display: none; /* hidden on desktop */
}

@media (max-width: 820px) {
  .ep-mobile-rsvp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;   /* prevent padding from blowing out width */
    padding: 16px 20px;
    background: var(--ep-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
    margin-bottom: 0;
  }

  .ep-mobile-rsvp-btn:hover,
  .ep-mobile-rsvp-btn:focus {
    background: var(--ep-primary-dark);
    color: #fff;
  }

  .ep-mobile-rsvp-btn:focus {
    outline: 3px solid var(--ep-primary);
    outline-offset: -3px;
  }
}

/* ============================================================
   RSVP LANDING PAGE  (ep_rsvp_page)
   ============================================================ */

.ep-rsvp-page { max-width: 1200px; margin: 0 auto; }

/* Hero */
.ep-rsvp-page__hero {
  position: relative;
  height: clamp(220px, 30vw, 360px);
  overflow: hidden;
  margin-bottom: 0;
}
.ep-rsvp-page__hero-img   { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-rsvp-page__hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.1) 60%); }
.ep-rsvp-page__hero-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 32px; }
.ep-rsvp-page__header { padding: 32px 20px 0; }
.ep-rsvp-page__title {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
  color: #fff;
}
.ep-rsvp-page__header .ep-rsvp-page__title { color: var(--ep-text); }

/* Two-column layout */
.ep-rsvp-page__layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
  padding: 40px 20px 60px;
  align-items: start;
}
.ep-rsvp-page__layout--single { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }

@media (max-width: 820px) {
  .ep-rsvp-page__layout { grid-template-columns: 1fr; }
}

/* Intro text */
.ep-rsvp-page__intro { margin-bottom: 28px; font-size: 1.05rem; line-height: 1.7; }

/* Featured event grid */
.ep-rsvp-page__event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

/* Event card */
.ep-rsvp-event-card {
  background: #fff;
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  overflow: hidden;
  transition: box-shadow 0.18s, transform 0.18s;
}
.ep-rsvp-event-card:hover { box-shadow: var(--ep-shadow-hover); transform: translateY(-2px); }
.ep-rsvp-event-card--waitlist { border-color: var(--ep-waitlist-border); }

.ep-rsvp-event-card__img { aspect-ratio: 16/9; overflow: hidden; }
.ep-rsvp-event-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.ep-rsvp-event-card:hover .ep-rsvp-event-card__img img { transform: scale(1.04); }

.ep-rsvp-event-card__body { padding: 14px 16px; }
.ep-rsvp-event-card__title { font-size: 0.95rem; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.ep-rsvp-event-card__title a { color: var(--ep-text); text-decoration: none; }
.ep-rsvp-event-card__title a:hover { color: var(--ep-primary); }

.ep-rsvp-event-card__date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--ep-text-muted);
  margin-bottom: 8px;
}
.ep-rsvp-event-card__time { font-size: 0.78rem; }

.ep-rsvp-event-card__waitlist-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--ep-waitlist-badge-bg);
  color: var(--ep-waitlist-badge);
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ep-rsvp-event-card__link {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ep-primary);
  text-decoration: none;
}
.ep-rsvp-event-card__link:hover { text-decoration: underline; }

/* Form column */
.ep-rsvp-page__form-col { position: sticky; top: 24px; align-self: start; }
.ep-rsvp-page__form-card {
  background: #fff;
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  padding: 24px;
  box-shadow: var(--ep-shadow);
}
.ep-rsvp-page__form-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ep-border); }
.ep-rsvp-page__form-col--centered .ep-rsvp-page__form-card { max-width: 560px; margin: 0 auto; }

/* Series buttons on event page */
.ep-series-links { display: flex; flex-direction: column; gap: 10px; }
.ep-series-btn { text-align: center; }

/* ============================================================
   FEDERATED / REMOTE EVENTS  (v1.1.0)
   Styles for events sourced from external sites via iCal feed.
   ============================================================ */

/* ─── Source pill ("Hosted by …") ─────────────────────────── */
/* Rendered inline in .ep-card__cats alongside real categories (see
   templates/partials/event-card.php) so it matches the site's plain
   category-tag look instead of standing out as a separate colored badge.
   The --source modifier only tweaks color/icon spacing; size, weight,
   case, and spacing all inherit from .ep-card__cat. */
.ep-card__cat--source {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #5b7f9e;   /* muted slate-blue — distinct from topical category color */
}

.ep-card__cat-icon {
  font-style: normal;
  font-size: 0.85em;
  flex-shrink: 0;
}

/* ─── Remote card — subtle left-border accent ─────────────── */
.ep-card--remote {
  border-left: 3px solid #5b7f9e;
}

/* Keep hover transform the same as local cards */
.ep-card--remote:hover {
  box-shadow: var(--ep-shadow-hover);
  transform: translateY(-2px);
}

/* ─── Remote CTA arrow variant ────────────────────────────── */
/* The card partial outputs ↗ for remote events instead of →  */
/* No extra style needed — inherits from .ep-btn__arrow        */

/* ============================================================
   SHORTCODES / PAGE BUILDER  (v1.2.0)
   Styles for [ep_events] and [ep_featured_events] shortcodes,
   including WPBakery / Visual Composer placements.
   ============================================================ */

/* ─── Shortcode wrapper ────────────────────────────────────── */
/* .ep-archive--shortcode removes the outer max-width + padding
   so the shortcode fills its WPBakery column naturally.        */
.ep-archive--shortcode {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* ─── Column overrides for [ep_events columns="1|2"] ──────── */
/* Default (3 cols) uses the existing auto-fill rule.
   columns="2" and columns="1" override with fixed tracks.      */
.ep-grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.ep-grid--cols-1 {
  grid-template-columns: 1fr;
}

/* Stack to single column on narrow screens regardless of param */
@media (max-width: 640px) {
  .ep-grid--cols-2,
  .ep-grid--cols-1 {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────────
   EventPlannr / Gravity Forms — layout & visibility fixes
   Scoped to .gform_wrapper. The Brio theme + GF "no-framework"
   theme drop GF's own grid and hidden-field CSS, so we restore them.
   ────────────────────────────────────────────────────────────── */

/* 1 ── HIDE honeypot + hidden fields (the real bug) ─────────────── */
.gform_wrapper .gform_hidden,
.gform_wrapper .gfield--type-hidden,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield_visibility_hidden,
.gform_wrapper input[type="hidden"] {
  display: none !important;
}
/* Honeypot is sometimes a visible .gfield with off-screen intent —
   neutralize it completely regardless of GF version markup. */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield--type-honeypot {
  position: absolute !important;
  left: -9999px !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
}

/* 2 ── NAME fields side by side ─────────────────────────────────── */
.gform_wrapper .ginput_container_name {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
}
.gform_wrapper .ginput_container_name > .gform-grid-col,
.gform_wrapper .ginput_container_name > span[class*="name_"] {
  display: flex !important;
  flex-direction: column;   /* input on top, sub-label below */
  flex: 1 1 0;
  min-width: 140px;
}
.gform_wrapper .ginput_container_name input {
  width: 100%;
}

/* Apply the same two-up treatment to other complex fields
   (e.g. multi-column address) so they don't collapse to inline. */
.gform_wrapper .ginput_complex.gform-grid-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
}
.gform_wrapper .ginput_complex.gform-grid-row > .gform-grid-col {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 200px;
}

/* 3 ── SUB-LABELS below their field ─────────────────────────────── */
.gform_wrapper .gform-field-label--type-sub,
.gform_wrapper .ginput_complex label {
  order: 2;                 /* ensure it sits under the input in flex col */
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 400;
  color: #6b6f76;
}
.gform_wrapper .ginput_container_name input,
.gform_wrapper .ginput_complex input {
  order: 1;
}

/* 4 ── Type scale (from before, kept tight) ─────────────────────── */
.gform_wrapper { font-size: 15px; line-height: 1.45; }
.gform_wrapper .gfield_label,
.gform_wrapper > * label:not(.gform-field-label--type-sub) {
  font-size: 15px; line-height: 1.4; font-weight: 600; margin-bottom: 4px;
}
.gform_wrapper legend,
.gform_wrapper .gsection_title {
  font-size: 16px; line-height: 1.35; font-weight: 700; margin-bottom: 6px;
}
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper textarea,
.gform_wrapper select {
  font-size: 15px; line-height: 1.4; padding: 8px 10px;
}
.gform_wrapper .gchoice label,
.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label {
  font-size: 14.5px; line-height: 1.4; font-weight: 400;
}
.gform_wrapper .gfield { margin-bottom: 14px; }
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button {
  font-size: 15px; line-height: 1.4; padding: 10px 22px;
}

/* The "indicates required fields" + validation helper text */
.gform_wrapper .gform_required_legend,
.gform_wrapper .validation_message {
  font-size: 12.5px;
  line-height: 1.4;
}

/* Honeypot field is mis-marked gfield_visibility_visible — hide it by its
   honeypot type class (and the GF validation container), off-screen so it
   still submits. Does NOT affect real visible fields. */
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper li.gfield.gform_validation_container,
.gform_wrapper .gfield.gform_validation_container {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* VCV Website Builder element CSS is loaded dynamically by
   EventPlannr\Compat\VisualComposerCompat::enqueueVcwbAssets()
   — no hardcoded VCE rules here. */