/* Defines the styles for Weather. */
/* Applies styling to .weather-card. */
.weather-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #ffffff;
  max-width: 420px;
}

/* Applies styling to .weather-icon. */
.weather-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(15, 118, 110, 0.12);
  display: grid;
  place-items: center;
  color: var(--teal);
}

/* Applies styling to .weather-icon svg. */
.weather-icon svg {
  width: 26px;
  height: 26px;
}

/* Applies styling to .weather-temp. */
.weather-temp {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
}

/* Applies styling to .weather-meta. */
.weather-meta {
  margin: 0.15rem 0 0 0;
  color: var(--slate);
}

/* Applies styling to .weather-note. */
.weather-note {
  margin-top: 0.6rem;
  color: var(--slate-light);
  font-size: 0.85rem;
}

/* Defines the styles for Footer compact weather (contact page). */
.page-contact .weather-card-compact {
  padding: 0.6rem 0.75rem;
  gap: 0.6rem;
  border-radius: 12px;
  max-width: 240px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.page-contact .weather-card-compact .weather-icon {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.page-contact .weather-card-compact .weather-temp {
  font-size: 1.05rem;
  color: #ffffff;
}

.page-contact .weather-card-compact .weather-meta,
.page-contact .weather-card-compact .weather-note {
  color: rgba(255, 255, 255, 0.78);
}

.page-contact .weather-card-compact .weather-note {
  margin-top: 0.2rem;
  font-size: 0.75rem;
}