/* =====================================================
   FPC Griffin — Calendar Page Stylesheet
   Targets: The Events Calendar (tribe-events) plugin
   Brand: fpcgriffin.org brand guidelines v1 · 2026
   ===================================================== */

/* --- Brand Tokens ------------------------------------ */
:root {
  --fpc-blue:       #195C79;
  --fpc-blue-dark:  #144A61;
  --fpc-blue-light: #1E6E91;
  --fpc-dark:       #29292A;
  --fpc-mid-gray:   #54595B;
  --fpc-light-gray: #D9E1E4;
  --fpc-bg:         #F4F7F8;
  --fpc-cream:      #FAF6F1;
  --fpc-white:      #FFFFFF;

  /* Licensed fonts; fallbacks used if unavailable on device */
  --fpc-font-display: "clarendon-text-pro", "Roboto Slab", Georgia, serif;
  --fpc-font-body:    "CMG Sans", "Source Sans 3", "Source Sans Pro", Helvetica, Arial, sans-serif;

  --fpc-radius:     6px;
  --fpc-shadow:     0 1px 4px rgba(25, 92, 121, 0.08);
  --fpc-transition: 0.2s ease;
}

/* --- Page Background --------------------------------- */
body.post-type-archive-tribe_events,
body.tribe-events-page-template {
  background-color: var(--fpc-bg);
}

/* --- Main Calendar Container ------------------------- */
.tribe-common.tribe-events {
  font-family: var(--fpc-font-body);
  color: var(--fpc-dark);
  background-color: var(--fpc-bg);
}

/* --- Events Bar (search + view selector) ------------ */
.tribe-events-c-events-bar {
  background-color: var(--fpc-white) !important;
  border: 1px solid var(--fpc-light-gray) !important;
  border-radius: var(--fpc-radius) !important;
  padding: 8px 12px !important;
  margin-bottom: 20px !important;
}

.tribe-common-form-control-text__input {
  font-family: var(--fpc-font-body) !important;
  font-size: 16px !important;
  color: var(--fpc-dark) !important;
}

.tribe-common-form-control-text__input::placeholder {
  color: var(--fpc-mid-gray) !important;
}

/* Search button */
.tribe-common-c-btn,
.tribe-events-c-search__button {
  background-color: var(--fpc-blue) !important;
  color: var(--fpc-white) !important;
  font-family: var(--fpc-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: var(--fpc-radius) !important;
  border: none !important;
  padding: 8px 18px !important;
  transition: background-color var(--fpc-transition) !important;
}

.tribe-common-c-btn:hover,
.tribe-events-c-search__button:hover {
  background-color: var(--fpc-blue-dark) !important;
}

/* --- View Selector (List / Month / Day) ------------- */
.tribe-events-c-view-selector__list-item-link {
  font-family: var(--fpc-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--fpc-mid-gray) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  padding: 6px 12px !important;
  border-radius: var(--fpc-radius) !important;
  text-decoration: none !important;
  transition: color var(--fpc-transition), background-color var(--fpc-transition) !important;
}

.tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link {
  color: var(--fpc-blue) !important;
  background-color: rgba(25, 92, 121, 0.08) !important;
}

.tribe-events-c-view-selector__list-item-link:hover {
  color: var(--fpc-blue) !important;
}

/* --- Top Bar (date navigation) ----------------------- */
.tribe-events-c-top-bar {
  padding: 12px 0 !important;
  margin-bottom: 16px !important;
  border-bottom: 2px solid var(--fpc-light-gray) !important;
}

/* Datepicker button (current date range label) */
.tribe-common-c-btn__clear.tribe-common-h3.tribe-common-h--alt,
.tribe-events-c-top-bar__datepicker-button {
  font-family: var(--fpc-font-display) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--fpc-dark) !important;
  text-decoration: none !important;
}

/* Today button */
.tribe-common-c-btn-border-small {
  font-family: var(--fpc-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--fpc-blue) !important;
  border-color: var(--fpc-blue) !important;
  border-radius: var(--fpc-radius) !important;
  padding: 4px 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  transition: background-color var(--fpc-transition), color var(--fpc-transition) !important;
}

.tribe-common-c-btn-border-small:hover {
  background-color: var(--fpc-blue) !important;
  color: var(--fpc-white) !important;
}

/* Prev / next nav arrows in top bar */
.tribe-common-c-btn-icon {
  color: var(--fpc-blue) !important;
}

.tribe-common-c-btn-icon:hover {
  color: var(--fpc-blue-dark) !important;
}

/* --- Month Separator --------------------------------- */
.tribe-events-calendar-list__month-separator {
  margin: 32px 0 16px !important;
  border: none !important;
  border-top: 2px solid var(--fpc-blue) !important;
  padding-top: 14px !important;
}

.tribe-events-calendar-list__month-separator-text {
  font-family: var(--fpc-font-display) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--fpc-blue) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
}

/* --- Event Row --------------------------------------- */
.tribe-common-g-row.tribe-events-calendar-list__event-row {
  background-color: var(--fpc-white) !important;
  border-radius: var(--fpc-radius) !important;
  box-shadow: var(--fpc-shadow) !important;
  margin-bottom: 10px !important;
  padding: 16px 20px !important;
  transition: box-shadow var(--fpc-transition), transform var(--fpc-transition) !important;
  align-items: center !important;
}

.tribe-common-g-row.tribe-events-calendar-list__event-row:hover {
  box-shadow: 0 4px 16px rgba(25, 92, 121, 0.14) !important;
  transform: translateY(-1px) !important;
}

/* --- Date Tag (day number + weekday column) ---------- */
.tribe-events-calendar-list__event-date-tag {
  text-align: center !important;
  background-color: var(--fpc-bg) !important;
  border-radius: var(--fpc-radius) !important;
  padding: 8px 10px !important;
  margin-right: 4px !important;
}

.tribe-events-calendar-list__event-date-tag-daynum {
  font-family: var(--fpc-font-display) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--fpc-blue) !important;
  line-height: 1 !important;
  display: block !important;
}

.tribe-events-calendar-list__event-date-tag-weekday {
  font-family: var(--fpc-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--fpc-mid-gray) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  display: block !important;
  margin-top: 3px !important;
}

/* --- Event Details ----------------------------------- */
.tribe-events-calendar-list__event-title {
  font-family: var(--fpc-font-display) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  margin-bottom: 4px !important;
}

.tribe-events-calendar-list__event-title-link {
  color: var(--fpc-dark) !important;
  text-decoration: none !important;
  transition: color var(--fpc-transition) !important;
}

.tribe-events-calendar-list__event-title-link:hover {
  color: var(--fpc-blue) !important;
  text-decoration: none !important;
}

.tribe-events-calendar-list__event-datetime-wrapper {
  font-family: var(--fpc-font-body) !important;
  font-size: 14px !important;
  color: var(--fpc-mid-gray) !important;
  margin-bottom: 2px !important;
}

.tribe-events-calendar-list__event-venue {
  font-family: var(--fpc-font-body) !important;
  font-size: 13px !important;
  color: var(--fpc-mid-gray) !important;
}

.tribe-events-calendar-list__event-venue-title {
  font-weight: 600 !important;
}

/* --- Bottom Navigation ------------------------------ */
.tribe-events-calendar-list-nav {
  margin-top: 32px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--fpc-light-gray) !important;
}

.tribe-events-c-nav__prev,
.tribe-events-c-nav__next {
  font-family: var(--fpc-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--fpc-blue) !important;
  text-decoration: none !important;
  transition: color var(--fpc-transition) !important;
}

.tribe-events-c-nav__prev:hover,
.tribe-events-c-nav__next:hover {
  color: var(--fpc-blue-dark) !important;
}

.tribe-events-c-nav__today {
  font-family: var(--fpc-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fpc-blue) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

/* --- Subscribe / iCal Dropdown ---------------------- */
.tribe-common-c-btn-border {
  font-family: var(--fpc-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fpc-blue) !important;
  border-color: var(--fpc-blue) !important;
  border-radius: var(--fpc-radius) !important;
  transition: background-color var(--fpc-transition), color var(--fpc-transition) !important;
}

.tribe-common-c-btn-border:hover {
  background-color: var(--fpc-blue) !important;
  color: var(--fpc-white) !important;
}

/* --- SVG icons (loader dots, carets) ---------------- */
.tribe-common-c-svgicon__svg-fill {
  fill: var(--fpc-blue) !important;
}

/* --- Responsive ------------------------------------- */
@media (max-width: 767px) {
  .tribe-common-g-row.tribe-events-calendar-list__event-row {
    padding: 12px 14px !important;
  }

  .tribe-events-calendar-list__event-date-tag-daynum {
    font-size: 22px !important;
  }

  .tribe-events-calendar-list__event-title {
    font-size: 16px !important;
  }

  .tribe-events-calendar-list__month-separator-text {
    font-size: 17px !important;
  }

  .tribe-common-c-btn__clear.tribe-common-h3.tribe-common-h--alt,
  .tribe-events-c-top-bar__datepicker-button {
    font-size: 18px !important;
  }
}