/* Weather forecast - theme-aware colour tokens.
   Defined once here and overridden under dark theme below, so temp/icon colours
   stay legible against the event-colour-tinted header in both themes. */
:root {
  --pg-forecast-temp-max: #d9730d;
  --pg-forecast-temp-min: #0d7fd9;

  --pg-forecast-icon-sun: #d9a100;
  --pg-forecast-icon-cloud: var(--bs-gray-600);
  --pg-forecast-icon-rain: #347ad4;
  --pg-forecast-icon-storm: #8e5cf6;
  --pg-forecast-icon-snow: #5b8def;
}

[data-bs-theme="dark"] {
  --pg-forecast-temp-max: #ffa94d;
  --pg-forecast-temp-min: #4dabf7;

  --pg-forecast-icon-sun: #ffc83d;
  --pg-forecast-icon-cloud: var(--bs-gray-400);
  --pg-forecast-icon-rain: #5b9bf0;
  --pg-forecast-icon-storm: #b18cff;
  --pg-forecast-icon-snow: #82a9ff;
}


.event-forecast {
  display: flex;

  align-items: stretch;
  justify-content: end;

  column-gap: 1rem;

  @media (width <=768px) {
    column-gap: 0.5rem;
  }
}

/* Each forecast day. The event day is the hero; lead-up days recede as context. */
.event-forecast__day {
  /* Resolve the event's own colour, falling back to the theme primary. */
  --pg-day-accent: var(--pg-event-colour, var(--bs-gray-500));

  display: flex;
  flex-direction: column;

  padding: 0 0.35rem;

  border-radius: 0.5rem;
}

/* Lead-up days recede: faded and slightly smaller so the event day dominates. */
.event-forecast__day--leadup {
  opacity: 0.55;

  transform: scale(0.9);
  transform-origin: bottom center;
}

.event-forecast__day--leadup .event-forecast__weather-icon {
  font-size: 1.2rem;
}

/* Event day = hero: a pill tinted with the event's own colour. */
.event-forecast__day--event {
  padding: 0.1rem 0.6rem 0.3rem;

  border: 1px solid color-mix(in oklab, var(--pg-day-accent) 45%, transparent);
  border-radius: var(--bs-card-inner-border-radius);
  /* 0.5rem; */

  background-color: color-mix(in oklab, var(--pg-day-accent) 25%, #fff);

  /* On mobile only the event day shows, so the pill outline/highlight is just
     noise - drop it and let the icon + temps stand alone. */
  @media (width <=768px) {
    padding: 0;

    border: none;

    background-color: transparent;
  }
}

.event-forecast__day--event .event-forecast__weather-icon {
  font-size: 1.95rem;

  @media (width <=768px) {
    font-size: 1.5rem;
  }
}

.event-forecast__day--event .event-forecast__temps {
  font-weight: 700;
}

/* Star marker before the event-day label, in the event colour. */
.event-forecast__event-marker {
  margin-inline-end: 0.25rem;

  font-size: 0.65rem;

  color: var(--pg-day-accent);
}

/* Condition word ("Partly sunny") beneath the event day. */
.event-forecast__condition {
  margin-top: 0.05rem;

  font-size: 0.7rem;
  line-height: 1.1;

  text-align: center;

  color: var(--bs-secondary-color);

  @media (width <=768px) {
    display: none;
  }

  div[data-event-entry-type="continuation_bar"] & {
    display: none;
  }
}

.event-forecast__day-header {
  display: block;

  align-items: center;

  padding: 0;

  border-bottom: 1px solid var(--bs-secondary-border-subtle);

  @media (width <=768px) {
    display: none;
  }

  div[data-event-entry-type="continuation_bar"] & {
    display: none;
  }
}

.event-forecast__day-label {
  display: block;

  margin: 0;

  font-size: 0.8rem;
  font-weight: 600;

  text-align: center;

  color: var(--bs-secondary-text-emphasis);
}

.event-forecast__day--event .event-forecast__day-label {
  font-weight: 700;

  color: var(--bs-emphasis-color);
}

.event-forecast__day-body {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.5rem;

  flex-grow: 1;
}

.event-forecast__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  text-align: center;
}

.event-forecast__weather-icon {
  display: flex;
  align-items: center;

  font-size: 1.5rem;
  line-height: 1;
  color: var(--pg-forecast-icon-cloud);

  @media (width <=768px) {
    font-size: 1.3rem;
  }

  div[data-event-entry-type="continuation_bar"] & {
    font-size: 1rem;
  }
}

/* Desktop: stacked max-over-min temps */
.event-forecast__temps {
  display: block;

  font-size: 0.8rem;

  text-align: center;

  @media (width <=768px) {
    display: none;
  }

  div[data-event-entry-type="continuation_bar"] & {
    display: none;
  }
}

.event-forecast__temp-max {
  color: var(--pg-forecast-temp-max);
}

.event-forecast__temp-min {
  color: var(--pg-forecast-temp-min);
}

.event-forecast__temps .event-forecast__temp-min {
  border-top: 1px solid;
}

.event-forecast__temp-units {
  display: inline;

  @media (width <=576px) {
    display: none;
  }
}

/* Compact temps shown only on mobile, for the event day only. Stacked
   high-over-low (the "/" separator is hidden), slightly smaller text. */
.event-forecast__temps-compact {
  display: none;

  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.05;
  white-space: nowrap;

  @media (width <=768px) {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  div[data-event-entry-type="continuation_bar"] & {
    display: none;
  }
}

.event-forecast__temps-compact-sep {
  display: none;
}

/* Mobile: collapse the strip to just the event day (icon + compact high/low),
   dropping the lead-up days which add little on small screens. When the event is
   beyond the forecast range there is no event day, so keep the furthest-available
   days visible instead. */
@media (width <=768px) {
  .event-forecast__day:not(.event-forecast__day--event):not(.event-forecast__day--furthest):not(.event-forecast__day--unavailable) {
    display: none;
  }
}

.event-forecast__footnote {
  display: block;

  @media (width <=768px) {
    display: none;
  }

  div[data-event-entry-type="continuation_bar"] & {
    display: none;
  }
}

/* When the event is too far ahead for any forecast, we show a single crossed-out
   weather icon (bi-cloud-slash) in place of the forecast days, rather than a text
   message. It stays muted so it reads as "no data" rather than a real condition. */
.event-forecast__day--unavailable {
  justify-content: center;
}

.event-forecast__unavailable-icon {
  color: var(--pg-forecast-icon-cloud);
  opacity: 0.55;
}


/* Weather forecast icons (theme-aware via the tokens above) */
.event-forecast__weather-icon.bi-sun-fill,
.event-forecast__weather-icon.bi-cloud-sun-fill,
.event-forecast__weather-icon.bi-sun,
.event-forecast__weather-icon.bi-cloud-sun {
  color: var(--pg-forecast-icon-sun);
}

.event-forecast__weather-icon.bi-cloud-fill,
.event-forecast__weather-icon.bi-clouds-fill,
.event-forecast__weather-icon.bi-cloud-fog2-fill,
.event-forecast__weather-icon.bi-cloud,
.event-forecast__weather-icon.bi-clouds,
.event-forecast__weather-icon.bi-cloud-fog2,
.event-forecast__weather-icon.bi-wind {
  color: var(--pg-forecast-icon-cloud);
}

.event-forecast__weather-icon.bi-cloud-rain-fill,
.event-forecast__weather-icon.bi-cloud-rain-heavy-fill,
.event-forecast__weather-icon.bi-cloud-sleet-fill,
.event-forecast__weather-icon.bi-cloud-hail-fill,
.event-forecast__weather-icon.bi-cloud-rain,
.event-forecast__weather-icon.bi-cloud-rain-heavy,
.event-forecast__weather-icon.bi-cloud-sleet,
.event-forecast__weather-icon.bi-cloud-hail {
  color: var(--pg-forecast-icon-rain);
}

.event-forecast__weather-icon.bi-cloud-lightning-rain-fill,
.event-forecast__weather-icon.bi-cloud-lightning-rain {
  color: var(--pg-forecast-icon-storm);
}

.event-forecast__weather-icon.bi-cloud-snow-fill,
.event-forecast__weather-icon.bi-cloud-snow {
  color: var(--pg-forecast-icon-snow);
}

.event-forecast__icon.event-forecast__icon--faded {
  opacity: 0.3;
  filter: grayscale(1)
}

/* Out-of-range ("furthest available") forecast in a continuation bar: the day
   container is already dimmed (--leadup) and the bar shrinks icons to 1rem, which
   combined with the --faded greyscale made the icons nearly invisible. Make them
   more prominent there - larger, and only lightly dimmed (the container opacity
   still signals they are out of range). */
div[data-event-entry-type="continuation_bar"] .event-forecast__day--furthest .event-forecast__weather-icon {
  font-size: 1.5rem;
}

div[data-event-entry-type="continuation_bar"] .event-forecast__day--furthest .event-forecast__icon--faded {
  opacity: 0.8;
  filter: none;
}