/* ==========================================================================
  FTS: compat-events-calendar.css
  Purpose: Compatibility + light normalization for The Events Calendar (TEC).

  Principles:
  - Keep this file minimal. Do not deeply “skin” TEC.
  - Use FTS tokens for typography, color, radii, and focus.
  - Avoid layout changes and avoid hiding theme/navigation elements.
  ========================================================================== */

/* --- Base typography + color --- */
:where(.tribe-events, .tribe-common) {
  font-family: var(--font-sans);
  color: var(--color-text);
}

/* Links inside TEC: follow content-link conventions */
:where(.tribe-events a) {
  color: var(--color-link);
  text-decoration-thickness: var(--fts-link-underline-thickness);
  text-underline-offset: var(--fts-link-underline-offset);
}

:where(.tribe-events a:hover) {
  color: var(--denim);
}

/* Focus ring: consistent across links, buttons, and focusable controls */
:where(
  .tribe-events a:focus-visible,
  .tribe-events button:focus-visible,
  .tribe-events [tabindex]:focus-visible,
  .tribe-common a:focus-visible,
  .tribe-common button:focus-visible,
  .tribe-common [tabindex]:focus-visible
) {
  outline: var(--fts-focus-width) solid var(--fts-focus-ring);
  outline-offset: var(--fts-focus-offset);
}

/* --- Controls: inputs, selects, buttons --- */

:where(.tribe-common) :where(input, select, textarea) {
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--white);
  border: 1px solid var(--cream);
  border-radius: 0;
}

:where(.tribe-common) :where(input::placeholder, textarea::placeholder) {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* TEC primary buttons (subscribe, search, etc.) */
:where(.tribe-common) :where(
  .tribe-common-c-btn,
  .tribe-events-c-subscribe-dropdown__button,
  .tribe-events-c-search__button,
  .tribe-common-c-btn-border,
  .tribe-common-c-btn--small
) {
  font-family: inherit;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;

  border-radius: 0;
  border: 2px solid transparent;

  background-color: var(--ocean);
  color: var(--white);

  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

:where(.tribe-common) :where(
  .tribe-common-c-btn,
  .tribe-events-c-subscribe-dropdown__button,
  .tribe-events-c-search__button
):hover {
  background-color: var(--denim);
  color: var(--white);
}

/* Outline-style buttons (often used in top bar / view toggles) */
:where(.tribe-common) :where(
  .tribe-events-c-view-selector__button,
  .tribe-events-c-top-bar__nav,
  .tribe-events-c-top-bar__today-button
) {
  font-family: inherit;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;

  background-color: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-text);
  border-radius: 0;
}

:where(.tribe-common) :where(
  .tribe-events-c-view-selector__button,
  .tribe-events-c-top-bar__nav,
  .tribe-events-c-top-bar__today-button
):hover {
  color: var(--ocean);
  border-color: var(--ocean);
}

:where(.tribe-common) .tribe-events-c-view-selector__button[aria-pressed="true"] {
  background-color: var(--midnight);
  border-color: var(--midnight);
  color: var(--white);
}

/* --- List view: gentle typography alignment (minimal) --- */

:where(.tribe-events-calendar-list__month-separator) {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  letter-spacing: 0.075rem;
  color: var(--midnight);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

:where(.tribe-events-calendar-list__month-separator::after) {
  background-color: var(--cream);
}

:where(
  .tribe-event-date-start,
  .tribe-event-date-end,
  .tribe-event-time
) {
  font-size: 1rem;
  color: var(--midnight);
  font-weight: var(--weight-semibold);
}

:where(.tribe-events-calendar-list__event-title a) {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--denim);
  font-weight: var(--weight-light);
}

:where(.tribe-events-calendar-list__event-venue) {
  font-weight: var(--weight-bold);
}

:where(.tribe-events-event-image img) {
  border-radius: 0;
}

/* Date tag typography (keep minimal, avoid heavy visual styling) */
:where(.tribe-events-calendar-list__event-date-tag-weekday) {
  font-family: var(--font-sans);
  font-size: 0.725rem;
  font-weight: var(--weight-bold);
  color: var(--midnight);
  background-color: var(--white);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 4px !important;
}

:where(.tribe-events-calendar-list__event-date-tag-daynum) {
  font-family: var(--font-sans);
  font-size: 0.725rem;
  font-weight: var(--weight-regular);
  color: var(--midnight);
  background-color: var(--white);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Search input: keep neutral, token-driven */
:where(.tribe-events-c-search__input-group) {
  margin-bottom: 1rem;
}

:where(#tribe-events-events-bar-keyword) {
  font-family: inherit;
  font-size: 0.875rem;
  padding: 8px 14px;
  background-color: var(--white);
  color: var(--midnight);
  border-radius: 0;
  border: 1px solid var(--cream);
  width: 100%;
}

:where(#tribe-events-events-bar-keyword)::placeholder {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-style: italic;
}

/* Datepicker toggle: keep readable and consistent */
:where(.tribe-events-c-top-bar__datepicker button) {
  font-family: inherit;
  font-size: 0.875rem;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  background: transparent;
  color: var(--midnight);
  border-radius: 0;
  border: 0;
  transition: background-color 160ms ease, color 160ms ease;
}

:where(.tribe-events-c-top-bar__datepicker button:hover) {
  background-color: var(--ocean);
  color: var(--white);
}

/* Buttons */
.tribe-common-c-btn {
  background-color: var(--ocean) !important;
  border: none !important;
  border-radius: 0px !important;
  text-transform: uppercase !important;
}

.tribe-common-c-btn-border {
  color: var(--ocean) !important;
  background-color: transparent !important;
  border: 2px solid var(--ocean) !important;
  border-radius: 0px !important;
  text-transform: uppercase !important;
}

.tribe-common-c-btn-border svg {
  color: var(--ocean) !important;
}

.tribe-common-c-btn:hover {
  background-color: var(--sky) !important;
}

.tribe-common-c-btn-border:hover {
  color: var(--sky) !important;
  background-color: transparent !important;
  border: 2px solid var(--sky) !important;
}

.tribe-common-c-btn-border svg:hover {
  color: var(--sky) !important;
}