/* ===== Base ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: #fff;
  font-family: "Tahoma", Geneva, sans-serif;
  background: url("/images/patternonwood.jpg") center/cover fixed no-repeat;
}
iframe { border-radius: 8px; display: block; }

/* ===== Weather strip (top) ===== */
.weather {
  border-radius: 12px;
  background-color: #882266;   /* purple bar */
  opacity: 0.95;
  padding: 8px 12px;
  border: 0;
}
.weather td { vertical-align: middle; }

/* NEW: keep current conditions + forecast horizontal and clamped */
.weather-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  height: 165px;         /* matches clock area height */
  overflow: hidden;      /* no tall widget overflow */
}
.weather-block {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* right-hand labels under the clock */
.temp {
  color: #FFFFFF;
  font-size: 20px;
  font-weight: bold;
  text-align: right;
  line-height: 20px;
  white-space: nowrap;
}

/* small clock container so your local widget sits nicely */
.clock-box {
  width: 230px;
  height: 85px;
  overflow: hidden;
  border-radius: 8px;
}

/* ===== Calendars ===== */
.big-calendar-frame-wrapper {
  width: 697px;
  height: 600px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 20px;
}
.big-calendar-frame-wrapper iframe { width: 697px; height: 600px; border: none; }

.calendar-list-frame-wrapper { width: 246px; height: 600px; overflow: hidden; border-radius: 8px; }
.calendar-list-frame-wrapper iframe { width: 246px; height: 600px; border: none; }

/* ===== Strava ===== */
.strava-header {
  width: 547px;
  height: 80px;
  background: #fff url("images/strava.jpg") center/contain no-repeat;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.strava {
  width: 180px;
  height: 410px;
  overflow: hidden;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.strava-frame-wrapper { width: 100%; height: 410px; overflow: hidden; border-radius: 8px; }
.strava-frame-wrapper iframe { width: 100%; height: 410px; border: none; }

/* ===== Countdown / Slides ===== */
.countdown {
  border-radius: 8px;
  text-align: center;
  text-shadow: #BBBBBB 5px 5px 6px;
  font-weight: bold;
  font-size: 40px;
  color: #000;
}
.rounded { border-radius: 8px; }

/* ===== Right column blocks ===== */
.family {
  border-radius: 8px;
  opacity: 0.95;
  color: #FFFFFF;
  background: transparent;
}

/* ===== Table hygiene ===== */
table { border-collapse: collapse; }
td { padding: 0; }

/* Optional white card background for embeds */
.white-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  overflow: hidden;
}

/* ===== Weather forecast layout overrides ===== */
.weather-forecast { width: 100%; }
.weather-forecast .forecast-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* force 4 cards */
  gap: 8px;
  align-items: stretch;
}
.weather-forecast .widget-card {
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 8px;
}
.weather-forecast .widget-title { font-size: 14px; font-weight: 700; }
.weather-forecast .widget-value { font-size: 18px; font-weight: 800; }
.weather-forecast .widget-subvalue { font-size: 12px; opacity: .9; }

/* === Weather row polish (forces clean 4-card layout) === */

/* Give "Currently" a fixed lane; let forecast take the rest */
.weather-row .weather-block:first-child { flex: 0 0 215px; min-width: 215px; }
.weather-row .weather-block:last-child  { flex: 1 1 auto; }

/* Slightly smaller gap so more room goes to cards */
.weather-row { gap: 10px; }

/* Forecast grid stays one row with 4 equal cards */
.weather-forecast .forecast-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

/* Card cosmetics + compact typography */
.weather-forecast .widget-card {
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 10px;
}
.weather-forecast .widget-title   { font-size: 13px; font-weight: 700; opacity: .95; }
.weather-forecast .widget-value   { font-size: 17px; font-weight: 800; line-height: 1.1; }
.weather-forecast .widget-subvalue{ font-size: 12px; opacity: .9; }

/* Icon + sparkline tweaks so nothing overflows */
.weather-forecast .icon img { height: 44px; width: auto; display: block; }
.weather-forecast svg { height: 68px; }

/* Optional: if your total width is tight, shrink fonts a touch */
@media (max-width: 980px) {
  .weather-forecast .widget-title   { font-size: 12px; }
  .weather-forecast .widget-value   { font-size: 16px; }
  .weather-forecast .icon img       { height: 40px; }
}

/* Fix for squeezed "Currently" block */
.weather-row .weather-block:first-child {
  flex: 0 0 180px;  /* lock to ~180px */
  min-width: 180px;
}

.weather-row .weather-block:last-child {
  flex: 1 1 auto;   /* forecast expands to fill */
}
/* --- Keep "Currently" readable (reserve a lane) --- */
.weather-row .weather-block:first-child {
  flex: 0 0 200px;     /* adjust 180–220px to taste */
  min-width: 200px;
}
.weather-row .weather-block:last-child {
  flex: 1 1 auto;
  overflow: hidden;    /* clip any overflows from the forecast widget */
}

/* --- Force the forecast to stay inside the 165px bar even in HOURLY mode --- */
/* The widget’s PHP prints an id like #wf_xxx and inline CSS with big heights.
   These overrides use higher specificity and !important to win. */
.weather-forecast [id^="wf_"] .hourly-grid {
  grid-template-rows: 40px 22px 40px 6px 16px !important; /* icons / temps / spark / bar / time */
  row-gap: .12rem !important;
}

.weather-forecast [id^="wf_"] .icon img { height: 34px !important; width: auto !important; }
.weather-forecast [id^="wf_"] .temp     { font-size: 1.1em !important; font-weight: 700 !important; }
.weather-forecast [id^="wf_"] .spark svg { height: 42px !important; }
.weather-forecast [id^="wf_"] .poplbl,
.weather-forecast [id^="wf_"] .time     { font-size: .9em !important; }

.weather-forecast { height: 100%; overflow: hidden; }

/* If the daily cards ever wrap or crowd: keep 4 on one row */
.weather-forecast .forecast-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
.weather-forecast .widget-card {
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 10px;
}
.weather-forecast .widget-title   { font-size: 13px; font-weight: 700; }
.weather-forecast .widget-value   { font-size: 17px; font-weight: 800; line-height: 1.1; }
.weather-forecast .widget-subvalue{ font-size: 12px; opacity: .9; }