/*
  GospelFlame — The Events Calendar, "Bento Modern" theming.
  Loaded only when The Events Calendar is active (see functions.php).

  Strategy: override TEC's "Common" design-system CSS variables (the durable
  part, stable across versions) and add a few component-level tweaks on top.
  Class-name overrides may need light tuning if TEC ships markup changes —
  the variable block below carries most of the look on its own.

  Relies on the theme tokens from style.css (var(--accent), --font-display, …),
  which are already loaded on the front end.
*/

/* ── 1) Map TEC design tokens → bento palette + type ─────────── */
.tribe-common,
.tribe-events,
.tribe-events-view,
.tribe-theme-gospelflame .tribe-common {
  --tec-color-accent-primary: var(--accent);
  --tec-color-accent-primary-hover: var(--accent-2);
  --tec-color-accent-primary-active: var(--accent-2);
  --tec-color-accent-primary-background: var(--accent);
  --tec-color-accent-primary-multiday: var(--accent-soft);
  --tec-color-accent-primary-multiday-hover: var(--accent-soft);

  --tec-color-link-primary: var(--accent);
  --tec-color-link-primary-hover: var(--accent-2);
  --tec-color-link-accent: var(--accent);
  --tec-color-link-accent-hover: var(--accent-2);

  --tec-color-text-primary: var(--text);
  --tec-color-text-secondary: var(--text-muted);
  --tec-color-text-events-title: var(--text);
  --tec-color-background-secondary: var(--off-white);

  --tec-font-family-sans-serif: 'Inter', system-ui, sans-serif;
  --tec-font-family-base: 'Inter', system-ui, sans-serif;

  --tec-border-radius-default: var(--radius);
}

/* ── 2) Event + section titles → display font ───────────────── */
.tribe-events .tribe-events-calendar-list__event-title,
.tribe-events .tribe-events-calendar-month__calendar-event-title,
.tribe-events-single-event-title,
.tribe-common .tribe-common-h1,
.tribe-common .tribe-common-h2,
.tribe-common .tribe-common-h3,
.tribe-common .tribe-common-h4 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em;
}

/* ── 3) List view rows → bento tiles ────────────────────────── */
.tribe-events-calendar-list__event {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tribe-events-calendar-list__event:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(28, 26, 23, .10);
}
/* drop the default horizontal rules between rows */
.tribe-events-calendar-list__event-row {
  border: 0 !important;
  margin-bottom: .9rem;
}
.tribe-events-calendar-list__event-row::after,
.tribe-events-calendar-list__event-row::before {
  display: none !important;
}

/* featured rows pick up the accent tint */
.tribe-events-calendar-list__event--featured {
  background: var(--accent-soft);
  border-color: transparent;
}
.tribe-events-calendar-list__event-featured-image,
.tribe-events-calendar-list__event-row img {
  border-radius: var(--radius-lg);
}

/* ── 4) Date / time metadata → mono caps ────────────────────── */
.tribe-events-calendar-list__event-datetime,
.tribe-events-calendar-list__event-date-tag,
.tribe-events-schedule__datetime,
.tribe-event-date-start,
.tribe-event-time {
  font-family: var(--font-mono) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tribe-events-calendar-list__event-date-tag-datetime {
  color: var(--accent);
}

/* ── 5) Buttons → bento pill buttons ────────────────────────── */
.tribe-common .tribe-common-c-btn,
.tribe-events .tribe-common-c-btn,
.tribe-events-c-top-bar__today-button,
.tribe-events-c-subscribe-dropdown__button,
.tribe-tickets__tickets-buy .tribe-common-c-btn {
  border-radius: 99px !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
}
.tribe-common .tribe-common-c-btn {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.tribe-common .tribe-common-c-btn:hover,
.tribe-common .tribe-common-c-btn:focus {
  background: var(--accent-2) !important;
  border-color: var(--accent-2) !important;
}

/* ── 6) Calendar nav (prev / next / datepicker) ─────────────── */
.tribe-events-c-nav__prev,
.tribe-events-c-nav__next,
.tribe-events-c-top-bar__datepicker-button {
  border-radius: 99px !important;
  font-family: var(--font-mono) !important;
}
.tribe-events-c-nav__prev:hover,
.tribe-events-c-nav__next:hover {
  color: var(--accent);
}

/* ── 7) Month grid ──────────────────────────────────────────── */
.tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date {
  color: var(--accent);
  font-family: var(--font-display);
}
.tribe-events-calendar-month__calendar-event-title-link:hover {
  color: var(--accent);
}
.tribe-events-calendar-month__day-cell--selected,
.tribe-events-calendar-month__day--current {
  background: var(--accent-soft);
}

/* ── 8) Single event view ───────────────────────────────────── */
.tribe-events-single .tribe-events-event-meta {
  background: var(--off-white);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-lg);
}
.single-tribe_events .tribe-events-back a,
.tribe-events .tribe-events-c-subscribe-dropdown__button-text {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── 9) Filter / category pills ─────────────────────────────── */
.tribe-events-c-top-bar__nav,
.tribe-common-c-svgicon {
  color: var(--accent);
}