/* 6277.ch forecast table refinements - loaded after Forecast 5.3 CSS.
 * V4.29: one authoritative responsive layout for desktop, tablet and mobile. */

.fc_table {
  max-width: 100%;
}

.fc_table td {
  font-size: 100% !important;
  line-height: 1.35;
  vertical-align: middle !important;
  text-align: center;
}

.fc_table .day {
  font-size: 120% !important;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--wx-header-mid) !important;
}

.fc_table .date {
  font-size: 90% !important;
  line-height: 1.25;
  white-space: nowrap;
}

.fc_table .units {
  font-size: 95%;
}

.fc_table > .summary > table > tbody > tr > td.col-date,
.fc_table > .period > table > tbody > tr > td.col-date {
  text-align: left;
}

.fc_table .legend-img,
.fc_table .outlook-img,
.fc_table .pop-img,
.fc_table .precip-img,
.fc_table .obvis-img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

.wx-forecast-table-wrap {
  width: 100%;
  max-width: 100%;
}

.fc_table > .legend > table,
.fc_table > .summary > table,
.fc_table > .period > table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

/* Desktop: full Forecast with all 10 active columns. */
@media (min-width: 992px) {
  .wx-forecast-table-wrap {
    overflow-x: visible;
  }

  .fc_table .col-date      { width: 14% !important; min-width: 0 !important; }
  .fc_table .col-outlook   { width: 8% !important;  min-width: 0 !important; }
  .fc_table .col-temp      { width: 7% !important;  min-width: 0 !important; }
  .fc_table .col-humidity  { width: 7% !important;  min-width: 0 !important; }
  .fc_table .col-wind      { width: 12% !important; min-width: 0 !important; }
  .fc_table .col-sun       { width: 12% !important; min-width: 0 !important; }
  .fc_table .col-moon      { width: 12% !important; min-width: 0 !important; }
  .fc_table .col-moonphase { width: 8% !important;  min-width: 0 !important; }
  .fc_table .col-pop       { width: 10% !important; min-width: 0 !important; }
  .fc_table .col-precip    { width: 10% !important; min-width: 0 !important; }
}

/* Tablet: keep all useful weather data, remove the separate moon-phase column. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .wx-forecast-table-wrap {
    overflow-x: visible;
  }

  .fc_table .col-moonphase {
    display: none !important;
  }

  .fc_table .col-date     { width: 15% !important; min-width: 0 !important; }
  .fc_table .col-outlook  { width: 9% !important;  min-width: 0 !important; }
  .fc_table .col-temp     { width: 8% !important;  min-width: 0 !important; }
  .fc_table .col-humidity { width: 8% !important;  min-width: 0 !important; }
  .fc_table .col-wind     { width: 13% !important; min-width: 0 !important; }
  .fc_table .col-sun      { width: 12% !important; min-width: 0 !important; }
  .fc_table .col-moon     { width: 12% !important; min-width: 0 !important; }
  .fc_table .col-pop      { width: 11% !important; min-width: 0 !important; }
  .fc_table .col-precip   { width: 12% !important; min-width: 0 !important; }
}

/* Mobile: six core columns, no forced 760px table and no horizontal scrolling. */
@media (max-width: 767.98px) {
  .wx-forecast-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .fc_table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .fc_table .col-humidity,
  .fc_table .col-sun,
  .fc_table .col-moon,
  .fc_table .col-moonphase {
    display: none !important;
  }

  .fc_table .col-date    { width: 22% !important; min-width: 0 !important; }
  .fc_table .col-outlook { width: 14% !important; min-width: 0 !important; }
  .fc_table .col-temp    { width: 14% !important; min-width: 0 !important; }
  .fc_table .col-wind    { width: 20% !important; min-width: 0 !important; }
  .fc_table .col-pop     { width: 15% !important; min-width: 0 !important; }
  .fc_table .col-precip  { width: 15% !important; min-width: 0 !important; }

  .fc_table td {
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: 90% !important;
    overflow-wrap: anywhere;
  }

  .fc_table .day {
    font-size: 105% !important;
    white-space: normal;
  }

  .fc_table .date {
    font-size: 80% !important;
    white-space: normal;
  }
}