/* ==========================================================================
   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;
  }