/* ==============================
   Forecast Page Styles
============================== */

/* Container for each forecast day */
.forecast-day {
  display: none; /* hidden by default */
  margin: 10px auto;
  max-width: 600px;
}

/* Active day container */
.forecast-day.active {
  display: block;
}

/* Day tab/button */
.forecast-tab {
  display: inline-block;
  margin: 0 5px 10px 0;
  padding: 5px 10px;
  background-color: #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

.forecast-tab.active {
  background-color: #007bff;
  color: white;
}

/* Hourly table for forecast details */
.forecast-day table {
  font-family: "Raleway", sans-serif;
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.forecast-day th, .forecast-day td {
  padding: 6px 8px;
  border: 1px solid #ccc;
  text-align: right;
}

.forecast-day th:first-child,
.forecast-day td:first-child {
  text-align: left;
}

/* Alternate row color */
.forecast-day tbody:nth-of-type(even) {
  background-color: #f2f2f2;
}

/* Weather icons/emojis */
.weather_icon {
  display: block;
  margin: 0 auto 2px auto;
}

.forecast-day th:nth-child(1),
.forecast-day td:nth-child(1) { width: 12%; } /* Time */
.forecast-day th:nth-child(2),
.forecast-day td:nth-child(2) { width: 12%; } /* Temp */
.forecast-day th:nth-child(3),
.forecast-day td:nth-child(3) { width: 12%; } /* Feels Like */
.forecast-day th:nth-child(4),
.forecast-day td:nth-child(4) { width: 12%; } /* Wind Dir */
.forecast-day th:nth-child(5),
.forecast-day td:nth-child(5) { width: 12%; } /* Wind Speed */
.forecast-day th:nth-child(6),
.forecast-day td:nth-child(6) { width: 12%; } /* Wind Gust */
.forecast-day th:nth-child(7),
.forecast-day td:nth-child(7) { width: 13%; } /* Precip % */
.forecast-day th:nth-child(8),
.forecast-day td:nth-child(8) { width: 13%; } /* Total Precip */

/* 3-Day Forecast Overview Table */
#three-day-overview {
  width: 100%;
  max-width: 600px;
  margin: 10px auto;
  border-collapse: collapse;
}

#three-day-overview th, 
#three-day-overview td {
  border: 1px solid #ccc;
  padding: 6px 8px;
  text-align: right;
}

#three-day-overview th:first-child,
#three-day-overview td:first-child {
  text-align: left;
}

#three-day-overview tbody:nth-of-type(even) {
  background-color: #f2f2f2;
}

/* Column widths */
#three-day-overview th:nth-child(1),
#three-day-overview td:nth-child(1) { width: 15%; } /* Date */
#three-day-overview th:nth-child(2),
#three-day-overview td:nth-child(2) { width: 20%; } /* Condition */
#three-day-overview th:nth-child(3),
#three-day-overview td:nth-child(3) { width: 10%; } /* High */
#three-day-overview th:nth-child(4),
#three-day-overview td:nth-child(4) { width: 10%; } /* Low */
#three-day-overview th:nth-child(5),
#three-day-overview td:nth-child(5) { width: 15%; } /* Rain % */
#three-day-overview th:nth-child(6),
#three-day-overview td:nth-child(6) { width: 15%; } /* Snow % */
#three-day-overview th:nth-child(7),
#three-day-overview td:nth-child(7) { width: 15%; } /* Total Snow */

.forecast-day table tbody tr:nth-child(even) {
    background-color: #ffffff;
}

.forecast-day table tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* optional, ensures contrast */
}