/* ===========================================================================
   When-to-visit annual weather calendar (share pages)
   Themed via --brand-* custom properties set in the share layout, so it picks
   up FFF teal, HW orange and MOA teal automatically.
   Mobile-first: base = 240px, 360px, 768px, 1280px
   =========================================================================== */

.wtv-section {
  width: 100%;
  margin: 1.5rem auto;
}

.wtv-subhead {
  text-align: center;
  font-size: 13px;
  color: var(--fff-muted, #5a7a7e);
  margin: 10px auto;
  max-width: 700px;
}

.wtv-subhead a {
  color: var(--brand-primary);
}

/* ── Scroll region ── */
.wtv-scroll {
  position: relative;
  height: 50vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  border: 1px solid var(--fff-border, rgba(11, 82, 89, 0.18));
  border-radius: 10px;
  background: #f7f0e6;
  margin: 0 auto;
}

/* ── Month ── */
.wtv-month {
  margin-bottom: 22px;
  /* When a month's sticky weather-bar locks to the top, it must not obscure
     the tail end of the previous month. scroll-margin-top pushes the snap
     anchor down by the combined height of the shared dow + the bar itself
     (~22px dow + ~40px bar). Measured value is written by JS if available. */
  scroll-margin-top: calc(var(--wtv-dow-h) + var(--wtv-bar-h, 40px));
}

.wtv-month:last-child {
  margin-bottom: 0;
}

/* ── Month summary bar ── */
/*
 * --wtv-dow-h: approximate rendered height of the shared .wtv-dow strip that
 * JS hoists to the very top of #wtv-scroll. The weather-bar sticks below it.
 * Adjust if dow padding / font-size changes (~5px top + 5px bottom + 12px line).
 */
:root {
  --wtv-dow-h: 22px;
}

.wtv-weather-bar {
  position: sticky;
  top: var(--wtv-dow-h);
  z-index: 2;
  border: 1px solid var(--fff-border, rgba(11, 82, 89, 0.18));
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: #fff;
  color: var(--fff-text, #2e2e2e);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Dosis", sans-serif;
  font-weight: 600;
  font-size: 13px;
}

.wtv-wb-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.wtv-wb-month {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: clamp(0.8rem, 0.8rem + 0.7vh, 1.2rem);
  margin-left: auto;
}

.wtv-wb-temp {
  opacity: 0.85;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  font-size: clamp(0.8rem, 0.8rem + 0.4vh, 1rem);
}

.wtv-wb-wpi {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #eef1f0;
  color: var(--fff-muted, #5a7a7e);
  font-family: "Inter", sans-serif;
  font-weight: 500;
  white-space: nowrap;
  display: none;
}

/* ── Day-of-week header ── */
/*
 * JS hoists one .wtv-dow to #wtv-scroll's first child and removes the rest.
 * The hoisted copy gets .wtv-dow-shared which pins it at top:0 above everything.
 * Any .wtv-dow that JS did not process (e.g. JS disabled) stays visible as
 * a per-month header without stickiness, so the calendar remains readable.
 */
.wtv-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--brand-primary, #0b5259);
}

.wtv-dow.wtv-dow-shared {
  position: sticky;
  top: 0;
  z-index: 3;
}

.wtv-dow span {
  font-family: "Dosis", sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: center;
  padding: 5px 2px;
  color: rgba(255, 255, 255, 0.85);
}

/* ── Day grid ── */
.wtv-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid var(--fff-border, rgba(11, 82, 89, 0.18));
  border-top: 1px solid var(--fff-border, rgba(11, 82, 89, 0.18));
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* ── Day cell: base = 240px ── */
.wtv-day {
  border-right: 1px solid var(--fff-border, rgba(11, 82, 89, 0.18));
  border-bottom: 1px solid var(--fff-border, rgba(11, 82, 89, 0.18));
  background: #fff;
  min-height: 52px;
  padding: 4px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.wtv-day.wtv-empty {
  background: #f7f0e6;
}

/* ── Day cell contents ── */
.wtv-dnum {
  align-self: flex-start;
  font-family: "Dosis", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--fff-muted, #5a7a7e);
  line-height: 1;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}

.wtv-dicon {
  width: clamp(18px, 3.4vw, 35px);
  height: auto;
}

.wtv-dtemp {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: var(--fff-muted, #5a7a7e);
  line-height: 1;
}

/* ── Trip window + depart day highlighting ── */
.wtv-day.in-trip {
  background: #daf3ff;
  border-bottom: 2px solid var(--colourA-light);
  /* border-top: 2px solid var(--colourA-light); */
}

.wtv-day.is-depart-day .wtv-dnum {
  color: var(--brand-primary, #0b5259);
}

/* ── Plane icons on depart / return cells ── */
/* .wtv-dplane { */
/*   width: clamp(14px, 4vw, 24px); */
/*   height: auto; */
/*   color: var(--brand-primary, #0b5259); */
/*   fill: var(--brand-primary, #0b5259); */
/* } */

.wtv-day.is-depart-day .wtv-dnum,
.wtv-day.is-return-day .wtv-dnum {
  color: var(--brand-primary, #0b5259);
  font-weight: 700;
}

.wtv-dplane {
  width: clamp(10px, 2.8vw, 18px);
  height: auto;
  opacity: 0.35;
  fill: var(--brand-primary, #0b5259);
  margin-left: 0px;
}

.wtv-cell-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 360px) {
  .wtv-scroll {
    height: 55vh;
  }
  .wtv-dtemp {
    font-size: 12px;
  }
  .wtv-day {
    min-height: 62px;
  }
}

@media (min-width: 768px) {
  .wtv-scroll {
    max-width: 700px;
  }
  .wtv-day {
    min-height: 61px;
    padding: 5px 4px 4px;
  }
  .wtv-dplane {
    margin-left: 5px;
  }

  .wtv-dnum {
    justify-content: end;
  }
}

@media (min-width: 1280px) {
  .wtv-section {
    max-width: 960px;
  }
}