/* =========================================================
   dumaguete.uk — weather.css
   The live panel only. Built mobile-first: a bold hero whose
   mood follows the sky, a scrolling hourly strip, and a clean
   seven-day row. Everything below the panel is content.css.
   ========================================================= */

.wx-loading {
  padding: 28px 0;
  font-size: 0.92rem;
  color: var(--ink-faint);
  text-align: center;
}
.wx-offline {
  margin: 0 0 24px;
  padding: 14px 16px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* The whole live block, spaced apart from the reference content. */
#wx-live { margin: 0 0 26px; }

/* ---------- Hero ---------- */
.wx-hero {
  position: relative;
  overflow: hidden;
  padding: 20px 20px 22px;
  border-radius: 22px;
  color: #fff;
  /* default sky — replaced per mood below */
  background: linear-gradient(160deg, #4a90d9 0%, #6aa9e0 55%, #8fc0ea 100%);
  box-shadow: 0 14px 40px rgba(20, 50, 90, 0.28);
}
.wx-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  opacity: 0.97;
}
.wx-hero__place { text-transform: lowercase; }
.wx-hero__hilo { font-variant-numeric: tabular-nums; opacity: 0.96; }

.wx-hero__read {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
}
.wx-hero__icon {
  font-size: 3.4rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}
.wx-hero__temp {
  font-family: var(--font-display);
  font-size: 4.4rem;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.wx-hero__deg { font-weight: 400; opacity: 0.88; }
.wx-hero__desc {
  margin: 6px 0 0;
  font-size: 0.98rem;
  opacity: 1;
}
.wx-hero__sun {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 8px 0 0;
  font-size: 0.82rem;
  opacity: 0.96;
  font-variant-numeric: tabular-nums;
}
.wx-hero__sundot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
.wx-hero__alert {
  margin: 12px 0 0;
  padding: 9px 13px;
  font-size: 0.86rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  border-radius: 11px;
}

/* condition chips */
.wx-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.wx-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(4px);
  text-align: center;
}
.wx-chip__i { font-size: 1rem; line-height: 1; }
.wx-chip__v { font-size: 0.92rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.wx-chip__l { font-size: 0.75rem; opacity: 0.94; text-transform: lowercase; letter-spacing: 0.02em; }

/* ---------- Sky moods ---------- */
#wx-live[data-sky="clear"] .wx-hero { background: linear-gradient(160deg, #2f80d6 0%, #56a0e2 50%, #86c2f0 100%); }
#wx-live[data-sky="cloud"] .wx-hero { background: linear-gradient(160deg, #6d8299 0%, #8598ac 55%, #a7b6c6 100%); box-shadow: 0 14px 40px rgba(60, 75, 95, 0.26); }
#wx-live[data-sky="rain"]  .wx-hero { background: linear-gradient(160deg, #3f5c73 0%, #557089 55%, #6f89a0 100%); box-shadow: 0 14px 40px rgba(35, 55, 75, 0.32); }
#wx-live[data-sky="storm"] .wx-hero { background: linear-gradient(160deg, #2b3a4d 0%, #3d4f66 55%, #55647d 100%); box-shadow: 0 14px 44px rgba(15, 25, 40, 0.42); }
#wx-live[data-sky="fog"]   .wx-hero { background: linear-gradient(160deg, #8793a0 0%, #9aa5b1 55%, #b6bfc9 100%); }
#wx-live[data-sky="night"] .wx-hero { background: linear-gradient(160deg, #1f2b45 0%, #2c3a5c 55%, #43537a 100%); box-shadow: 0 14px 44px rgba(10, 18, 35, 0.46); }

/* ---------- Hourly strip ---------- */
.wx-hours {
  margin-top: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wx-hours::-webkit-scrollbar { display: none; }
.wx-hours__track {
  display: inline-flex;
  gap: 6px;
  padding: 2px;
}
.wx-hr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 58px;
  padding: 12px 6px;
  border-radius: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.wx-hr__t { font-size: 0.75rem; color: var(--ink-faint); }
.wx-hr__i { font-size: 1.25rem; line-height: 1; }
.wx-hr__deg { font-size: 0.92rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.wx-hr__p { font-size: 0.75rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.wx-hr__p.is-wet { color: #2f80d6; font-weight: 600; }

/* ---------- Seven-day ---------- */
.wx-days {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wx-day {
  display: grid;
  grid-template-columns: 1fr auto 52px 84px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
}
.wx-day.is-today { background: var(--surface-alt); }
.wx-day__name { font-size: 0.9rem; font-weight: 500; }
.wx-day__icon { font-size: 1.3rem; line-height: 1; }
.wx-day__rain { font-size: 0.78rem; color: var(--ink-faint); text-align: right; font-variant-numeric: tabular-nums; }
.wx-day__rain.is-wet { color: #2f80d6; font-weight: 600; }
.wx-day__temp {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}
.wx-day__temp b { font-weight: 600; }
.wx-day__temp i { font-style: normal; color: var(--ink-faint); }

.wx-source {
  margin: 14px 2px 0;
  font-size: 0.75rem;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* ---------- Desktop: give the hero room, keep it tidy ---------- */
@media (min-width: 620px) {
  .wx-hero { padding: 26px 28px 26px; border-radius: 24px; }
  .wx-hero__icon { font-size: 4rem; }
  .wx-hero__temp { font-size: 5.2rem; }
  .wx-chips { max-width: 460px; }
  .wx-hr { min-width: 64px; }
}