/*
 * This CSS sheet is loaded by TEC after it loads its own sheets.
 * Since it overrides some of our defaults we now restore them.
 */
:root {
  --tec-font-family-sans-serif: var(--font-family-normal);


  --tec-color-text-primary: var(--blue);
  --tec-color-text-secondary: var(--blue);
  --tec-color-text-primary-light: var(--light-blue);
  --tec-color-icon-events-bar: var(--blue);
  --tec-color-accent-primary: var(--blue);
  --tec-color-icon-secondary: var(--blue);
  --tec-color-border-default: var(--blue);
  --tec-color-border-secondary-month-grid: var(--blue);
  --tec-color-text-event-date: var(--blue);
  --tec-color-button-primary: var(--blue);
}

h1.tribe-events-single-event-title,
h2.tribe-events-related-events-title,
.tribe-common .tribe-common-h5, 
.tribe-common .tribe-common-h6,
.tribe-events-c-top-bar__datepicker-desktop {
  font-family: var(--font-family-heading);
  font-weight: var(--semibold);
  color: var(--blue);
}

.tribe-common .tribe-common-b2 {
  font-family: var(--font-family-normal);
}

input.tribe-common-form-control-text__input::placeholder {
  color: var(--blue) !important;
}

button.tribe-common-c-btn[type="submit"] {
  background: var(--navy-blue);
  border-radius: var(--radius);

  &:hover {
    border-radius: var(--radius);
    background: var(--blue);
  }

  &:focus {
    border-radius: var(--radius);
    background: var(--blue);
    outline: 2px solid var(--gold);
  }
}

main#content {
  .tribe-events-back a,
  .tribe-events-schedule h2 span {
    color: var(--blue);
  }

  .tribe_events:has(.tribe-events-single-event-description) {
    display: grid;
    grid-template: auto / 1fr 1fr;
    gap: var(--space);

    .tribe-events-event-image {
      grid-row: 1;
      grid-column: 2;
      img {
        width: 100%;
        height: auto;
      }
    }

    div:has(.tribe-events-c-subscribe-dropdown__container) {
      grid-column: 2;
      grid-row: 2;
    }

    .tribe-events-event-meta {
      grid-column: 1;
    }

    > h2, > ul {
      grid-column: span 2;
    }

    > ul {
      display: grid;
      grid-template: auto / 1fr 1fr 1fr 1fr;
      a {
        padding: 0;
      }
      img {
        position: static;
        transform: none;
        width: 100%;
        height: auto;
        object-fit: contain;
      }
    }
  }
  #tribe-events-footer {
    a {
      color: var(--blue);
      &:hover {
        color: var(--light-blue);
      }
    }
  }
}

.tribe-events-calendar-series-archive__link svg {
  width: 1em;
}