/* ============================================================
   climate.css  —  Kelowna Climatology section
   Requires style.css loaded first (uses its CSS variables).
   ============================================================ */

/* ── Section wrapper ─────────────────────────────────────── */
.climo-section {
  width: 100%;
  /* Add extra top margin so the visual gap above CLIMATOLOGY matches
     the gap above 7-DAY FORECAST — the tall forecast grid cards make
     the standard gap look disproportionately tight without it */
  margin-top: 1.5rem;
}
/* Header row mirrors .forecast-header-row exactly */
.climo-header-row {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.8rem;  /* matches .forecast-header-row */
}
.climo-header-row .panel-label {
  margin-bottom: 0;  /* matches .forecast-header-row .panel-label */
}

/* ── Today: unified three-column card ─────────────────────  */
/* Always side-by-side — columns compress gracefully on small screens */
.climo-today {
  display: flex;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  align-items: stretch;
}
.climo-today-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.climo-col-header {
  background: var(--bg-card2);
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: clamp(0.52rem, 1.5vw, 0.68rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.2;
  /* Use a fixed pixel height so all three headers are identical
     regardless of how much text they contain */
  height: 44px;
  display: flex;
  align-items: center;
}
.climo-col-body {
  padding: 0.4rem 0.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Stat rows each take equal share of the column body height */
.climo-stat-row { flex: 1; }
.climo-divider {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
}

/* ── Stat rows ───────────────────────────────────────────── */
.climo-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border);
  gap: 0.3rem;
  min-height: 0;
}
.climo-stat-row:last-child { border-bottom: none; }
.climo-stat-label {
  font-size: clamp(0.58rem, 1.3vw, 0.72rem);
  color: var(--text-muted);
  flex: 1;
  line-height: 1.2;
  min-width: 0;
}
.climo-stat-sub {
  font-size: clamp(0.52rem, 1vw, 0.6rem);
  color: var(--text-muted);
  margin-top: 0.05rem;
  line-height: 1.2;
}
.climo-stat-val {
  font-size: clamp(0.7rem, 1.8vw, 0.88rem);
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
}
.climo-hot  { color: var(--accent-warm); }
.climo-cold { color: #79c0ff; }
/* Observed-line colours — match the graph's actual line colours */
.climo-obs-hi { color: #e63946; }   /* crimson — matches observed high line */
.climo-obs-lo { color: #0096ff; }   /* electric blue — matches observed low line */

/* ── Loading / error ─────────────────────────────────────── */
.climo-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: var(--text-xs);
  padding: 0.4rem 0;
}
.climo-spinner {
  width: 11px; height: 11px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: climo-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes climo-spin { to { transform: rotate(360deg); } }
.climo-error {
  font-size: var(--text-xs);
  color: #f85149;
  padding: 0.3rem 0;
}

/* ── Precipitation unified card ─────────────────────────── */
.climo-precip-card {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 0.7rem;
}
.climo-precip-header {
  background: var(--bg-card2);
  padding: 0.45rem 0.85rem;
  border-bottom: 1px solid var(--border);
  font-size: clamp(0.6rem, 1.1vw, 0.7rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.climo-precip-body {
  display: flex;
  align-items: stretch;
}

/* Left: three stacked stat panels */
.climo-precip-left {
  display: flex;
  flex-direction: column;
  width: 200px;
  flex-shrink: 0;
}
.climo-precip-panel {
  flex: 1;
  padding: 0.55rem 0.85rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--border);
}
.climo-precip-panel:last-child { border-bottom: none; }
.climo-panel-label {
  font-size: clamp(0.55rem, 0.9vw, 0.63rem);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
  margin-bottom: 0.15rem;
}
.climo-panel-val {
  font-size: clamp(0.92rem, 1.5vw, 1.05rem);
  font-weight: 700;
}
.climo-panel-sub {
  font-size: clamp(0.58rem, 0.9vw, 0.65rem);
  color: var(--text-muted);
  margin-top: 0.1rem;
  line-height: 1.3;
}
.climo-panel-val.climo-rain { color: #79c0ff; }
.climo-panel-val.climo-pos  { color: #56d364; }
.climo-panel-val.climo-neg  { color: #f85149; }

.climo-precip-divider {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
}

/* Right: chart */
.climo-chart-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.4rem 0.25rem 0.4rem 0.25rem;
  min-width: 0;
  min-height: 0;
}
.climo-chart-wrap {
  position: relative;
  width: 100%;
  height: 280px;
  min-height: 200px;
  flex-shrink: 0;
}
/* Chart.js manages its own canvas dimensions — let it fill the wrap */
.climo-chart-wrap canvas {
  display: block;
}
/* Legend drawn on canvas — see climoDrawChart() */

/* ── Responsive ──────────────────────────────────────────── */

/* Portrait phones: precip panels go 2+1 grid, departure centred */
@media (max-width: 640px) and (orientation: portrait) {
  /* Today columns stay side by side — grid handles alignment */
  .climo-col-header {
    padding: 0.4rem 0.3rem;
    font-size: clamp(0.48rem, 3.5vw, 0.6rem);
    letter-spacing: 0.03em;
    height: 52px; /* taller on phone to allow text to wrap */
  }
  .climo-col-body { padding: 0.3rem 0.3rem; }
  .climo-stat-label { font-size: clamp(0.52rem, 2.8vw, 0.65rem); }
  .climo-stat-val   { font-size: clamp(0.62rem, 3vw, 0.78rem); }
  .climo-stat-sub   { display: none; }

  /* Precip card: stats stack on top, chart below */
  .climo-precip-body  { flex-direction: column; align-items: stretch; }
  .climo-precip-left  {
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .climo-precip-panel {
    flex: 1 1 45%;
    border-bottom: none;
    border-right: 1px solid var(--border);
    padding: 0.5rem 0.6rem;
    align-items: center;
    text-align: center;
  }
  /* Third panel (departure) centred by itself */
  .climo-precip-panel:nth-child(3) {
    flex: 1 1 100%;
    border-right: none;
    border-top: 1px solid var(--border);
    align-items: center;
    text-align: center;
  }
  .climo-precip-panel:last-child { border-right: none; }
  .climo-precip-divider { width: auto; height: 1px; }
  .climo-chart-wrap { height: 220px; }
}

/* Landscape phones: keep side-by-side layout, reduce chart height */
@media (max-width: 959px) and (orientation: landscape) {
  .climo-col-header { font-size: clamp(0.52rem, 1.2vw, 0.65rem); padding: 0.4rem 0.6rem; }
  .climo-col-body { padding: 0.35rem 0.6rem; }
  .climo-stat-sub   { display: none; }
  .climo-chart-wrap { height: 240px; }

  /* Temperature wrap height only — inline panel fix is in portrait instead */
}

/* ── Temperature chart card ─────────────────────────────────── */
.climo-temp-card {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 0.7rem;
}
.climo-temp-header {
  background: var(--bg-card2);
  padding: 0.45rem 0.85rem;
  border-bottom: 1px solid var(--border);
  font-size: clamp(0.6rem, 1.1vw, 0.7rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Temperature card reuses precip body/left/panel/divider layout */
.climo-temp-wrap {
  height: 300px;
}
@media (max-width: 640px) and (orientation: portrait) {
  .climo-temp-wrap { height: 220px; }
  /* Temperature stat panels — same 2+1 centred layout as precip */
  .climo-temp-card .climo-precip-body  { flex-direction: column; align-items: stretch; }
  .climo-temp-card .climo-precip-left  {
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .climo-temp-card .climo-precip-panel {
    flex: 1 1 45%;
    border-bottom: none;
    border-right: 1px solid var(--border);
    padding: 0.5rem 0.6rem;
    align-items: center;
    text-align: center;
  }
  .climo-temp-card .climo-precip-panel:nth-child(3) {
    flex: 1 1 100%;
    border-right: none;
    border-top: 1px solid var(--border);
    align-items: center;
    text-align: center;
  }
  .climo-temp-card .climo-precip-panel:last-child { border-right: none; }
  .climo-temp-card .climo-precip-divider { width: auto; height: 1px; }
  /* Value + date on same line — panel uses flex row,
     label spans full width forcing val+sub onto next line together */
  .climo-temp-card .climo-precip-panel {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.35rem;
  }
  .climo-temp-card .climo-panel-label {
    flex: 1 1 100%;
  }
  .climo-temp-card .climo-panel-val {
    flex-shrink: 0;
  }
  .climo-temp-card .climo-panel-sub,
  #climo-temp-ytd-mean-dep {
    flex-shrink: 0;
    font-size: clamp(0.55rem, 2.5vw, 0.63rem);
    color: var(--text-muted);
  }
}
@media (max-width: 959px) and (orientation: landscape) {
  .climo-temp-wrap { height: 240px; }
}