/* ================================
   widgets.css (layout + sizing only)
   Do NOT put colors here. Themes handle colors.
   ================================ */

/* Weather strip container */
.weather {
    border-radius: 12px;
    padding: 8px 12px;
    height: 165px;                 /* lock the strip height */
    border: 0;
  }
  .weather-row {
    display: flex;
    gap: 12px;
    height: 100%;
    align-items: stretch;
    overflow: hidden;              /* clip any tall internals */
  }
  
  /* Reserve a fixed lane for "Currently" so it never gets squished */
  .weather-row .block--current {
    flex: 0 0 210px;               /* adjust 200–220px if needed */
    min-width: 210px;
  }
  .weather-row .block--forecast {
    flex: 1 1 auto;
    overflow: hidden;
  }
  
  /* Daily forecast grid: always 4 cards across in the strip */
  .weather-forecast .forecast-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }
  
  /* Card chrome (spacing; colors come from theme) */
  .weather-forecast .widget-card,
  .current-conditions .widget-card {
    border-radius: 10px;
    padding: 8px 10px;
  }
  
  /* Typography inside cards (neutral sizes) */
  .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; }
  
  /* Icon sizing inside forecast */
  .weather-forecast .icon img { height: 44px; width: auto; display: block; }
  
  /* --- Hourly containment ---
     weather_forecast2.php injects inline styles with large heights.
     These overrides keep the hourly block inside the 165px strip. */
  .weather-forecast [id^="wf_"] .hourly-grid {
    grid-template-rows: 34px 20px 40px 6px 16px !important;  /* icons / temps / spark / bar / time */
    row-gap: .10rem !important;
  }
  .weather-forecast [id^="wf_"] .icon img  { height: 32px !important; width: auto !important; }
  .weather-forecast [id^="wf_"] .spark svg { height: 40px !important; }
  .weather-forecast [id^="wf_"] .temp,
  .weather-forecast [id^="wf_"] .poplbl,
  .weather-forecast [id^="wf_"] .time { font-size: .95em !important; }
  
  /* Optional: slightly smaller spacing if your total width is tight */
  @media (max-width: 980px) {
    .weather-row { gap: 10px; }
    .weather-forecast .widget-title { font-size: 12px; }
    .weather-forecast .widget-value { font-size: 16px; }
    .weather-forecast .icon img     { height: 40px; }
  }