/* =========================================================
   Weather Module (Drop-in Replacement)
   ========================================================= */

/* ---------- Base Weather ---------- */

.weather {
  position: relative;
  overflow: hidden;
  border-left: 4px solid #ccc;
  background: var(--paper-bg);
}

/* Ensure content stays above watermark */
.weather > * {
  position: relative;
  z-index: 1;
}

/* ---------- Watermark ---------- */

.weather::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -10%;
  width: 140%;
  height: 140%;
  transform: translateY(-50%);
  opacity: 0.15;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Content ---------- */

.weather-desc {
  display: flex;
  align-items: center;
  gap: 0.1in;
  font-size: 1rem;
}

.weather-emoji {
  font-size: 1.2rem;
  line-height: 1;
}

.weather-temps {
  font-size: 0.95rem;
}

/* ---------- Condition Variants (BEM) ---------- */

.weather--clear {
  background: #fffbe6;
  border-left-color: #f2c94c;
}
.weather--clear::before {
  background-image: url('/svg/clear.svg');
}

.weather--partly-cloudy {
  background: #f5f7fa;
  border-left-color: #9aa5b1;
}
.weather--partly-cloudy::before {
  background-image: url('/svg/partly-cloudy.svg');
}

.weather--overcast {
  background: #f0f0f0;
  border-left-color: #6b7280;
}
.weather--overcast::before {
  background-image: url('/svg/overcast.svg');
}

.weather--rain,
.weather--showers {
  background: #eef6fb;
  border-left-color: #3b82f6;
}
.weather--rain::before,
.weather--showers::before {
  background-image: url('/svg/rain.svg');
}

.weather--snow,
.weather--snow-showers {
  background: #f8fbff;
  border-left-color: #60a5fa;
}
.weather--snow::before,
.weather--snow-showers::before {
  background-image: url('/svg/snow.svg');
}

.weather--thunder {
  background: #fef2f2;
  border-left-color: #dc2626;
}
.weather--thunder::before {
  background-image: url('/svg/thunder.svg');
}

.weather--fog {
  background: #f3f4f6;
  border-left-color: #9ca3af;
}
.weather--fog::before {
  background-image: url('/svg/fog.svg');
}

.weather--drizzle {
  background: #eef6fb;
  border-left-color: #60a5fa;
}
.weather--drizzle::before {
  background-image: url('/svg/drizzle.svg');
}

/* ---------- Error State ---------- */

.weather--error {
  border-left-color: #999;
  background: #f6f6f6;
}