/* ================================
   Futures First Event Calendar
   Complete stylesheet. Everything the calendar needs lives here,
   so nothing has to be pasted into the theme or Elementor.
================================ */


/* ================================
   Site type classes
   Elementor loads a global class's CSS only on pages whose own elements use
   it, so text printed by these shortcodes could fall back to the system font.
   The same values as the site's global classes, at the lowest specificity:
   when Elementor does load the class, its identical rule takes over.
================================ */
:where(.ff-calendar, .ff-slider, .ff-month-events, .ff-mini-calendar) :where(.title_4) {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: var(--title_4_size, clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem));
  text-transform: uppercase;
}

:where(.ff-calendar, .ff-slider, .ff-month-events, .ff-mini-calendar) :where(.title_6) {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: var(--title_6_size, clamp(0.93rem, 0.88rem + 0.22vw, 1.08rem));
  line-height: 1.3em;
  text-transform: uppercase;
  padding: 3px;
}

:where(.ff-calendar, .ff-slider, .ff-month-events, .ff-mini-calendar) :where(.small_text) {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 0.8em;
  line-height: 27px;
}

:where(.ff-calendar, .ff-slider, .ff-month-events, .ff-mini-calendar) :where(.small_eyebrow_text) {
  font-family: "Space Mono", monospace;
  font-weight: 300;
  font-size: 0.8em;
  text-transform: uppercase;
}

:where(.ff-calendar, .ff-slider, .ff-month-events, .ff-mini-calendar) :where(.button_small_text) {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 0.8em;
  font-style: italic;
  line-height: 27px;
}

@media (max-width: 1024px) {
  :where(.ff-calendar, .ff-slider, .ff-month-events, .ff-mini-calendar) :where(.small_text, .button_small_text) {
    line-height: 26px;
  }
}


/* ================================
   Mini Calendar
================================ */

.ff-mini-calendar {
  width: 100%;
  color: #ffffff;
  font-family: inherit;
}

.ff-mini-calendar__weekdays,
.ff-mini-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  column-gap: 18px;
  row-gap: 12px;
}

.ff-mini-calendar__weekdays {
  margin-bottom: 18px;
}

.ff-mini-calendar__weekdays span {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.28);
}

.ff-mini-calendar__day {
  min-height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  font-weight: 700;
  position: relative;
  line-height: 1;
}

.ff-mini-calendar__day[data-ff-event] {
  cursor: pointer;
  user-select: none;
}

.ff-mini-calendar__day.ff-has-event {
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  color: var(--Off_White, #F8F7F3);
}

.ff-mini-calendar__day.ff-has-event:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* Keyboard focus only. Mouse users never see a ring. */
.ff-mini-calendar__day:focus-visible {
  outline: 2px solid var(--orange, #EC6315);
  outline-offset: 2px;
}

.ff-mini-calendar__day.ff-is-today {
  color: #ffffff;
  outline: 1px solid rgba(255, 255, 255, 0.5);
  outline-offset: -1px;
  background: rgba(255, 255, 255, 0.035);
}

.ff-mini-calendar__day.ff-is-today .ff-day-number {
  color: #ffffff;
}

.ff-mini-calendar__day.ff-has-event.ff-is-today {
  background: rgba(255, 255, 255, 0.11);
  outline: 1px solid rgba(255, 255, 255, 0.75);
}

.ff-day-number {
  display: block;
}

.ff-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 7px;
}

.ff-event-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ec6315;
}

.ff-empty {
  visibility: hidden;
}


/* ================================
   Month Event List
================================ */

.ff-month-events {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.ff-event-list-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 20px;
  align-items: flex-start;
  min-height: 104px;
  padding: 22px 26px;
  background: rgba(255, 255, 255, 0.045);
  border-left: 4px solid #ec6315;
  border-radius: 0;
  color: #ffffff;
}

.ff-event-list-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1;
  text-align: center;
  color: #ec6315;
  padding-top: 2px;
}

.ff-event-list-day-name {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.ff-event-list-day-number {
  font-size: 1.15rem;
  font-weight: 900;
}

.ff-event-list-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ff-event-list-phase {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.55);
}

.ff-event-list-title {
  margin: 0 0 6px 0;
  color: #ffffff;
}

.ff-event-list-description {
  margin: 0 0 8px 0;
  color: rgba(255, 255, 255, 0.68);
}

.ff-event-list-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 0;
  color: #ffffff;
  background: transparent;
  text-decoration: none;
  border-radius: 0;
  transition: color 200ms ease, opacity 200ms ease, transform 200ms ease;
}

.ff-event-list-button::after {
  content: "";
  width: 12px;
  height: 12px;
  display: inline-block;
  background-color: currentColor;
  mask-image: url("https://futuresfirstlb.com/wp-content/uploads/2026/05/right-chevron3.svg");
  -webkit-mask-image: url("https://futuresfirstlb.com/wp-content/uploads/2026/05/right-chevron3.svg");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  transition: transform 200ms ease, background-color 200ms ease;
}

.ff-event-list-button:hover {
  color: #ec6315;
  transform: translateX(2px);
}

.ff-event-list-button:hover::after {
  transform: translateX(3px);
}

.ff-event-list-card {
  transition: box-shadow 250ms ease, background 250ms ease;
}

.ff-event-list-card.ff-is-highlighted {
  background: rgba(236, 99, 21, 0.12);
  box-shadow: 0 0 0 2px var(--orange, #EC6315);
}

.ff-no-events {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
}


/* A finished event: the button gives way to a quiet label. */
.ff-event-list-passed {
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
}

/* ================================
   Series slider ([ff_event_series])
   Built like the DFS Okanagan card slider: the track moves one card per step,
   the viewport runs to the right edge of the screen so the next card peeks in,
   and the arrows and dots stay on the content column. The controls are spans,
   not buttons, because the theme restyles buttons with !important.
================================ */
.ff-slider {
  --ff-per: 2.3;
  --ff-gap: 1.25rem;
  /* the page sections' side padding: the track bleeds by exactly that much */
  --ff-bleed: 4rem;
  width: 100%;
}

.ff-slider__bar {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.ff-slider__arw {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(248, 247, 243, 0.45);
  color: var(--Off_White, #F8F7F3);
  cursor: pointer;
  user-select: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

.ff-slider__arw::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: currentColor;
  mask: url("https://futuresfirstlb.com/wp-content/uploads/2026/05/right-chevron3.svg") center / contain no-repeat;
  -webkit-mask: url("https://futuresfirstlb.com/wp-content/uploads/2026/05/right-chevron3.svg") center / contain no-repeat;
}

.ff-slider__arw--prev::before {
  transform: scaleX(-1);
}

.ff-slider__arw:hover:not([aria-disabled="true"]) {
  background: var(--orange, #EC6315);
  border-color: var(--orange, #EC6315);
  color: var(--Black, #0D1117);
}

.ff-slider__arw[aria-disabled="true"] {
  opacity: 0.25;
  cursor: default;
}

.ff-slider__vp {
  overflow: hidden;
  margin-right: calc(-1 * var(--ff-bleed));
  transition: height 0.45s cubic-bezier(.22, .61, .36, 1);
}

.ff-slider__track {
  display: flex;
  align-items: stretch;
  gap: var(--ff-gap);
  touch-action: pan-y;
  will-change: transform;
  transition: transform 560ms cubic-bezier(.4, 0, .2, 1);
}

.ff-slider.is-dragging .ff-slider__track {
  transition: none;
  cursor: grabbing;
}

.ff-slide {
  --ff-accent: #ec6315;
  flex: 0 0 calc((100% - (var(--ff-per) - 1) * var(--ff-gap)) / var(--ff-per));
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 2rem 2rem 1.75rem;
  background: rgba(255, 255, 255, 0.045);
  border-top: 4px solid var(--ff-accent);
  color: #ffffff;
  user-select: none;
}

.ff-slide.ff-phase-exploration { --ff-accent: #ec6315; }
.ff-slide.ff-phase-ignite { --ff-accent: #f6be00; }
.ff-slide.ff-phase-launch { --ff-accent: #45a80b; }
.ff-slide.ff-phase-lift { --ff-accent: #3970d2; }
.ff-slide.ff-phase-orbit { --ff-accent: #a86ff7; }
.ff-slide.ff-phase-community { --ff-accent: #8f9bb0; }
.ff-slide.ff-phase-veterans { --ff-accent: #e0403a; }

/* The date leads the card: there is no picture on an event yet. */
.ff-slide__date {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.ff-slide__day {
  font-size: clamp(3rem, 2.4rem + 2vw, 4.25rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ff-accent);
  font-variant-numeric: tabular-nums;
}

.ff-slide__when {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.ff-slide__month {
  color: #ffffff;
  text-transform: uppercase;
}

.ff-slide__time {
  color: rgba(255, 255, 255, 0.55);
}

.ff-slide__title {
  margin: 0 0 0.6rem 0;
  color: #ffffff;
}

.ff-slide__text {
  margin: 0 0 0.75rem 0;
  color: rgba(255, 255, 255, 0.72);
}

.ff-slide__loc {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
}

.ff-slide__foot {
  margin-top: auto;
  padding-top: 1.5rem;
}

.ff-slide.ff-is-past {
  background: rgba(255, 255, 255, 0.025);
}

.ff-slide.ff-is-past .ff-slide__date,
.ff-slide.ff-is-past .ff-slide__title {
  opacity: 0.55;
}

.ff-slider__dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.ff-slider__dot {
  width: 2.75rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* the bar is a pseudo-element of the element that carries the state */
.ff-slider__dot::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: rgba(248, 247, 243, 0.22);
  transition: background 160ms ease;
}

.ff-slider__dot[aria-current="true"]::after {
  background: var(--orange, #EC6315);
}

.ff-slider__dot[hidden] {
  display: none;
}

.ff-slider__arw:focus-visible,
.ff-slider__dot:focus-visible {
  outline: 2px solid var(--orange, #EC6315);
  outline-offset: 2px;
}

/* On a light section: light cards, dark text, dark controls. */
.ff-slider--light .ff-slide {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px rgba(13, 17, 23, 0.1);
  color: #0D1117;
}

.ff-slider--light .ff-slide.ff-is-past {
  background: rgba(255, 255, 255, 0.35);
}

.ff-slider--light .ff-slide__when {
  border-left-color: rgba(13, 17, 23, 0.18);
}

.ff-slider--light .ff-slide .ff-slide__month,
.ff-slider--light .ff-slide .ff-slide__title {
  color: #0D1117;
}

.ff-slider--light .ff-slide .ff-slide__time,
.ff-slider--light .ff-slide .ff-slide__loc {
  color: rgba(13, 17, 23, 0.55);
}

.ff-slider--light .ff-slide .ff-slide__text {
  color: rgba(13, 17, 23, 0.75);
}

.ff-slider--light .ff-slide .ff-event-list-button {
  color: #0D1117;
}

.ff-slider--light .ff-slide .ff-event-list-button:hover {
  color: var(--orange, #EC6315);
}

.ff-slider--light .ff-slide .ff-event-list-passed {
  color: rgba(13, 17, 23, 0.45);
}

.ff-slider--light .ff-slider__arw {
  border-color: rgba(13, 17, 23, 0.4);
  color: #0D1117;
}

.ff-slider--light .ff-slider__dot::after {
  background: rgba(13, 17, 23, 0.18);
}

.ff-slider--light .ff-slider__dot[aria-current="true"]::after {
  background: var(--orange, #EC6315);
}

.ff-slider--light .ff-no-events {
  color: rgba(13, 17, 23, 0.6);
}

@media (max-width: 1024px) {
  .ff-slider { --ff-per: 1.4; --ff-bleed: 2rem; }
}

@media (max-width: 767px) {
  .ff-slider { --ff-per: 1.12; --ff-gap: 1rem; }
  .ff-slider__track { align-items: flex-start; }
  .ff-slide { padding: 1.5rem 1.5rem 1.25rem; }
  .ff-slider__arw { width: 2.75rem; height: 2.75rem; }
  .ff-slider__bar { margin-bottom: 1rem; }
  .ff-slider__dots { margin-top: 1.25rem; gap: 0.375rem; flex-wrap: nowrap; }
  .ff-slider__dot { width: 1.75rem; }
}

/* ================================
   More Events Dropdown
================================ */

.ff-more-events-dropdown {
  width: 100%;
}

.ff-more-events-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 0;
  color: #ffffff;
  background: transparent;
  text-decoration: none;
  border-radius: 0;
  cursor: pointer;
  list-style: none;
  text-transform: uppercase;
  transition: color 200ms ease, opacity 200ms ease, transform 200ms ease;
}

.ff-more-events-toggle::-webkit-details-marker {
  display: none;
}

.ff-more-events-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: currentColor;
  transition: transform 300ms ease;
}

.ff-more-events-toggle:hover {
  color: #ec6315;
  transform: translateX(2px);
}

.ff-more-events-dropdown.is-open .ff-more-events-plus {
  transform: rotate(45deg);
}

.ff-more-events-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height 300ms ease, opacity 220ms ease, transform 220ms ease;
}

.ff-more-events-dropdown.is-open .ff-more-events-content {
  max-height: 2000px;
  opacity: 1;
  transform: translateY(0);
}


/* ================================
   Shared Phase Colors
================================ */

/* Exploration */
.ff-event-dot.ff-phase-exploration {
  background: #ec6315;
}

.ff-event-list-card.ff-phase-exploration {
  border-left-color: #ec6315;
}

.ff-event-list-card.ff-phase-exploration .ff-event-list-date {
  color: #ec6315;
}


/* Ignite */
.ff-event-dot.ff-phase-ignite {
  background: #f6be00;
}

.ff-event-list-card.ff-phase-ignite {
  border-left-color: #f6be00;
}

.ff-event-list-card.ff-phase-ignite .ff-event-list-date {
  color: #f6be00;
}


/* Launch */
.ff-event-dot.ff-phase-launch {
  background: #45a80b;
}

.ff-event-list-card.ff-phase-launch {
  border-left-color: #45a80b;
}

.ff-event-list-card.ff-phase-launch .ff-event-list-date {
  color: #45a80b;
}


/* Lift */
.ff-event-dot.ff-phase-lift {
  background: #3970d2;
}

.ff-event-list-card.ff-phase-lift {
  border-left-color: #3970d2;
}

.ff-event-list-card.ff-phase-lift .ff-event-list-date {
  color: #3970d2;
}


/* Orbit */
.ff-event-dot.ff-phase-orbit {
  background: #a86ff7;
}

.ff-event-list-card.ff-phase-orbit {
  border-left-color: #a86ff7;
}

.ff-event-list-card.ff-phase-orbit .ff-event-list-date {
  color: #a86ff7;
}


/* Community */
.ff-event-dot.ff-phase-community {
  background: #8f9bb0;
}

.ff-event-list-card.ff-phase-community {
  border-left-color: #8f9bb0;
}

.ff-event-list-card.ff-phase-community .ff-event-list-date {
  color: #8f9bb0;
}


/* Veterans */
.ff-event-dot.ff-phase-veterans {
  background: #e0403a;
}

.ff-event-list-card.ff-phase-veterans {
  border-left-color: #e0403a;
}

.ff-event-list-card.ff-phase-veterans .ff-event-list-date {
  color: #e0403a;
}


/* Default */
.ff-event-dot.ff-phase-default {
  background: #ec6315;
}

.ff-event-list-card.ff-phase-default {
  border-left-color: #ec6315;
}

.ff-event-list-card.ff-phase-default .ff-event-list-date {
  color: #ec6315;
}


/* ================================
   Calendar Shell
   (year tabs + month blocks + the two column panel)
================================ */

.ff-calendar {
  width: 100%;
}


/* ---- Year tabs ---- */

.ff-year-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.ff-year-tab {
  display: inline-block;
  cursor: pointer;
  user-select: none;
  padding: 12px 28px;
  border-radius: 14px;
  border: 2px solid transparent;
  background: var(--Black, #0D1117);
  color: var(--Light_Gray, #EFEDE9);
  /* title_4, straight from the Elementor kit */
  font-family: var(--e-global-typography-v4-title_4-font-family, "Poppins"), sans-serif;
  font-size: var(--title_4_size, clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem));
  font-weight: var(--e-global-typography-v4-title_4-font-weight, 600);
  line-height: 1.2em;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.ff-year-tab:hover {
  border-color: var(--orange, #EC6315);
  color: var(--Off_White, #F8F7F3);
}

.ff-year-tab.is-active {
  background: var(--orange, #EC6315);
  border-color: var(--orange, #EC6315);
  color: var(--Black, #0D1117);
}

.ff-year-tab:focus-visible {
  outline: 2px solid var(--Off_White, #F8F7F3);
  outline-offset: 2px;
}


/* ---- Year panels ---- */

.ff-year-panel {
  display: none;
}

.ff-year-panel.is-active {
  display: block;
}


/* ---- Month block ---- */

.ff-month-block + .ff-month-block {
  margin-top: 32px;
}

.ff-month-title {
  margin: 16px 0;
  /* Pulled from the Elementor v4 design tokens, so the month heading tracks
     title_3 exactly as the old heading widgets did. The fallbacks are the
     values those tokens currently hold, in case the kit is ever renamed. */
  font-family: var(--e-global-typography-v4-title_3-font-family, "Poppins"), sans-serif;
  font-size: var(--title_3_size, clamp(1.5rem, 1.3rem + 1vw, 2rem));
  font-weight: var(--e-global-typography-v4-title_3-font-weight, 600);
  line-height: 1.2em;
  text-transform: var(--e-global-typography-v4-title_3-text-transform, uppercase);
  color: var(--Light_Gray, #EFEDE9);
  /* Hugs the month name rather than running the full width, so it reads as an
     underline and not as a divider above the panel. */
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 4px solid var(--orange, #EC6315);
}


/* ---- The two column panel ---- */

.ff-calendar-container {
  display: grid;
  grid-template-columns: 2fr 3fr; /* 40 / 60, matching the Elementor build */
  gap: 32px;
  padding: 32px;
  background: #0d1117;
  border-radius: 20px;
}

.ff-calendar-container__calendar,
.ff-calendar-container__list {
  min-width: 0; /* lets long titles wrap instead of stretching the grid */
}


/* ---- Earlier months ---- */

.ff-past-months {
  width: 100%;
  margin-bottom: 24px;
}

.ff-past-months__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 0;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  cursor: pointer;
  list-style: none;
  text-transform: uppercase;
  transition: color 200ms ease, transform 200ms ease;
}

.ff-past-months__toggle::-webkit-details-marker {
  display: none;
}

.ff-past-months__toggle:hover {
  color: #ec6315;
  transform: translateX(2px);
}

.ff-past-months__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform 300ms ease;
}

.ff-past-months[open] .ff-past-months__plus {
  transform: rotate(45deg);
}

.ff-past-months__content {
  margin-top: 20px;
}

/* Past months read as archive, not as what is coming up. */
.ff-past-months__content .ff-month-block {
  opacity: 0.72;
}

.ff-past-months__content .ff-month-block:hover {
  opacity: 1;
}


/* ================================
   Mobile
================================ */

@media (max-width: 767px) {
  .ff-mini-calendar__weekdays,
  .ff-mini-calendar__grid {
    column-gap: 8px;
    row-gap: 8px;
  }

  .ff-mini-calendar__day {
    min-height: 36px;
    font-size: 0.85rem;
  }

  .ff-event-dot {
    width: 6px;
    height: 6px;
  }

  .ff-event-list-card {
    grid-template-columns: 46px 1fr;
    gap: 14px;
    min-height: 90px;
    padding: 18px 18px;
  }

  .ff-event-list-day-name {
    font-size: 0.55rem;
  }

  .ff-event-list-day-number {
    font-size: 1rem;
  }

  .ff-event-list-button::after {
    width: 10px;
    height: 10px;
  }

  .ff-calendar-container {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }

  .ff-year-tab {
    padding: 8px 18px;
  }
}