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

  xborder-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);
  xborder-radius: var(--bs-card-inner-border-radius);
  /* 0.5rem; */

  /* Tinted against the card behind it rather than against white, so the pill reads as
     that surface holding a hint of the event's colour in either theme. Mixing with a
     hardcoded #fff made it a light chip on a dark card whatever the accent was - and
     an event with no colour, falling back to grey, came out near-white. */
  background-color: color-mix(in oklab, var(--pg-day-accent) 25%, var(--bs-tertiary-bg));

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

  /* Same in a continuation bar, which strips the pill's label, condition and temps
     (see the rules above) and leaves only the icon. The outline and fill would then
     be drawn around that icon alone, reading as a stray square rather than as a
     pill marking the event day. */
  div[data-event-entry-type="continuation_bar"] & {
    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;
}