/* ==========================================================================
   FORCES GROUP — EVENTS
   1. The calendar plugin's own design tokens, remapped to ours.
   2. The single event page.
   3. The RSVP registration form.
   ========================================================================== */

/* --- 1. PLUGIN TOKEN REMAP ------------------------------------------------ */
/* The plugin ships a light theme driven by custom properties. Remapping those
   is a fraction of the work of fighting its selectors, and it survives plugin
   updates that change markup. */
.tribe-common,
.tribe-events,
.tribe-tickets,
.tribe-events-widget {
  --tec-color-background:                     var(--c-bg);
  --tec-color-background-events:              var(--c-surface);
  --tec-color-background-secondary:           var(--c-surface);
  --tec-color-background-secondary-hover:     var(--c-surface-2);
  --tec-color-background-messages:            var(--c-surface);
  --tec-color-background-transparent:         transparent;

  --tec-color-text-primary:                   var(--c-text);
  --tec-color-text-primary-light:             var(--c-text-muted);
  --tec-color-text-secondary:                 var(--c-text-muted);
  --tec-color-text-events-title:              var(--c-text);
  --tec-color-text-event-title:               var(--c-text);
  --tec-color-text-event-date:                var(--c-gold);
  --tec-color-text-disabled:                  var(--c-text-dim);

  --tec-color-accent-primary:                 var(--c-crimson);
  --tec-color-accent-primary-hover:           var(--c-crimson-400);
  --tec-color-accent-primary-active:          var(--c-crimson-700);
  --tec-color-accent-primary-background:      var(--c-crimson);
  --tec-color-accent-secondary:               var(--c-gold);
  --tec-color-accent-secondary-hover:         var(--c-gold-400);
  --tec-color-accent-secondary-background:    var(--c-surface-2);

  --tec-color-link-primary:                   var(--c-text);
  --tec-color-link-accent:                    var(--c-gold);
  --tec-color-link-accent-hover:              var(--c-gold-400);

  --tec-color-border-default:                 var(--c-line);
  --tec-color-border-secondary:               var(--c-line);
  --tec-color-border-tertiary:                var(--c-line);
  --tec-color-border-hover:                   var(--c-line-strong);
  --tec-color-border-active:                  var(--c-gold);

  --tec-color-button-primary:                 var(--c-text-on-brand);
  --tec-color-button-primary-background:      var(--c-crimson);
  --tec-color-button-primary-hover:           var(--c-crimson-400);
  --tec-color-button-primary-active:          var(--c-crimson-700);
  --tec-color-button-secondary:               var(--c-text);
  --tec-color-button-secondary-background:    var(--c-surface-2);
  --tec-color-button-secondary-hover:         var(--c-surface-2);

  --tec-color-icon-primary:                   var(--c-text-muted);
  --tec-color-icon-secondary:                 var(--c-text-dim);
  --tec-color-icon-active:                    var(--c-gold);
  --tec-color-event-icon:                     var(--c-text-muted);
  --tec-color-event-icon-hover:               var(--c-gold);

  --tec-color-box-shadow:                     rgba(0, 0, 0, .6);
  --tec-color-box-shadow-secondary:           rgba(0, 0, 0, .5);

  --tec-form-color-background:                var(--c-surface);
  --tec-form-color-border-default:            var(--c-line-strong);
  --tec-form-color-border-secondary:          var(--c-line);
  --tec-form-color-border-active:             var(--c-gold);
  --tec-form-color-accent-primary:            var(--c-crimson);

  --tec-border-radius-default:                var(--r-none);
  --tec-font-family-sans-serif:               var(--ff-body);
}

/* The archive sits below the fixed header. */
.tribe-events-view,
.tribe-events-pg-template { padding-top: var(--header-h); background: var(--c-bg); }

/* Headings pick up the display face; the plugin only sets weights. */
.tribe-common h1, .tribe-common h2,
.tribe-events-calendar-list__month-separator-text,
.tribe-events-header__title {
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
}
.tribe-events-calendar-list__event-title a { color: var(--c-text); }
.tribe-events-calendar-list__event-title a:hover { color: var(--c-crimson-400); }
.tribe-events-calendar-list__event-date-tag-daynum { color: var(--c-gold); font-family: var(--ff-display); }
.tribe-events-calendar-list__event-row { border-bottom: 1px solid var(--c-line); padding-block: var(--s-6); }

/* Inputs and buttons the plugin styles with hard-coded whites. */
.tribe-common input[type="text"],
.tribe-common input[type="search"],
.tribe-common input[type="email"],
.tribe-common select,
.tribe-events-c-search__input-control-input {
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  border-color: var(--c-line-strong) !important;
}
.tribe-common ::placeholder { color: var(--c-text-dim); }
.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn {
  border-radius: var(--r-none);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
}
.tribe-events-c-top-bar__datepicker-button,
.tribe-events-c-view-selector__button { color: var(--c-text); }

/* These two ship with a hard-coded blue that no variable reaches. */
.tribe-events-c-search__button,
.tribe-common .tribe-common-c-btn.tribe-events-c-search__button,
.tribe-events-c-subscribe-dropdown__button {
  background-color: var(--c-crimson) !important;
  border-color: var(--c-crimson) !important;
  color: var(--c-text-on-brand) !important;
}
.tribe-events-c-search__button:hover,
.tribe-events-c-subscribe-dropdown__button:hover {
  background-color: var(--c-crimson-400) !important;
  border-color: var(--c-crimson-400) !important;
}
.tribe-events-c-search__input-control { border-color: var(--c-line-strong); }
.tribe-events-c-subscribe-dropdown__list { background: var(--c-surface); border: 1px solid var(--c-line); }
.tribe-events-c-subscribe-dropdown__list-item a { color: var(--c-text-muted); }
.tribe-events-c-subscribe-dropdown__list-item a:hover { color: var(--c-gold); }

/* --- 2. SINGLE EVENT ------------------------------------------------------ */
.event__head {
  position: relative; overflow: hidden;
  min-height: 60svh;
  display: flex; align-items: flex-end;
  padding-block: calc(var(--header-h) + var(--s-16)) var(--s-10);
}
.event__media { position: absolute; inset: 0; z-index: 0; }
.event__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-grade); }
.event__media--empty { background: radial-gradient(110% 80% at 60% 25%, var(--c-surface-tint), var(--c-void) 72%); }
.event__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, var(--c-scrim) 0%, var(--c-scrim-soft) 55%, transparent 92%),
    linear-gradient(0deg, var(--c-void) 4%, transparent 58%),
    var(--c-scrim-flat);
}
.event__head-inner { position: relative; z-index: 2; display: grid; gap: var(--s-4); }

.event__back a {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-micro); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--c-text-muted); transition: color var(--t-fast);
}
.event__back a:hover { color: var(--c-gold); }

.event__title { max-width: 20ch; overflow-wrap: break-word; }

.event__date {
  display: inline-flex; align-items: baseline; gap: .45em;
  justify-self: start; padding: var(--s-2) var(--s-4);
  background: var(--c-crimson); color: var(--c-text-on-brand);
  font-family: var(--ff-display); font-weight: var(--fw-bold);
  text-transform: uppercase;
}
.event__month { font-size: .72em; font-weight: var(--fw-medium); letter-spacing: .06em; }

.event__body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, .75fr);
  gap: var(--s-12);
  padding-block: var(--s-16);
  align-items: start;
}
.event__main > * + * { margin-top: var(--s-5); }
.event__main p { color: var(--c-text-muted); max-width: 68ch; }

.event__aside {
  position: sticky; top: calc(var(--header-h) + var(--s-6));
  padding: var(--s-6);
  background: var(--c-surface); border: 1px solid var(--c-line);
}
.event__facts { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.event__facts dt {
  font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--c-text-dim);
}
.event__facts dd { margin-top: var(--s-1); font-size: var(--fs-sm); }
.event__facts dd span { display: block; font-size: var(--fs-micro); }

.event__siblings {
  display: flex; justify-content: space-between; gap: var(--s-6);
  padding-block: var(--s-8); border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}
.event__siblings a { color: var(--c-text-muted); transition: color var(--t-fast); }
.event__siblings a:hover { color: var(--c-gold); }

/* --- 3. RSVP FORM --------------------------------------------------------- */
.tribe-tickets__rsvp-wrapper,
.event__main .tribe-tickets__rsvp {
  margin-top: var(--s-8);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.tribe-tickets__rsvp-title,
.tribe-tickets__rsvp-description { color: var(--c-text); }
.tribe-tickets__rsvp-actions-button-going,
.tribe-tickets__rsvp-form-button--submit {
  background: var(--c-crimson) !important;
  border-color: var(--c-crimson) !important;
  color: var(--c-text-on-brand) !important;
  border-radius: var(--r-none) !important;
  text-transform: uppercase; letter-spacing: var(--ls-button);
  font-weight: var(--fw-bold);
}
.tribe-tickets__rsvp-actions-button-going:hover,
.tribe-tickets__rsvp-form-button--submit:hover {
  background: var(--c-crimson-400) !important;
  border-color: var(--c-crimson-400) !important;
}
.tribe-tickets__rsvp-actions-button-not-going { color: var(--c-text-muted) !important; }
.tribe-tickets__rsvp-availability { color: var(--c-gold); }

/* --- RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 1023px) {
  .event__head { min-height: 46svh; padding-block: calc(var(--header-h) + var(--s-10)) var(--s-8); }
  .event__body { grid-template-columns: 1fr; gap: var(--s-8); padding-block: var(--s-10); }
  .event__aside { position: static; }
}