/* ============================================================
   Weather App Styles
   Day / night colors are variables on .wx (night = .wx.night)
   ============================================================ */

.wx {
  --wx-top: #3174d3;
  --wx-bottom: #7fb8f2;
  --wx-card: rgba(5, 44, 123, 0.2);
  --wx-track: rgba(30, 56, 80, 0.3);
  --wx-bar: #3b86d8;
  --wx-line: rgba(255, 255, 255, 0.2);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #fff;
  font-family: var(--font);
  background: linear-gradient(180deg, var(--wx-top), var(--wx-bottom));
}
.wx.night {
  --wx-top: #0d1433;
  --wx-bottom: #34467d;
  --wx-card: rgba(120, 140, 210, 0.16);
  --wx-track: rgba(10, 18, 50, 0.45);
  --wx-bar: #1b274f;
  --wx-line: rgba(255, 255, 255, 0.16);
}

/* Scrolling area: the bar below stays fixed, so everything is reachable on short screens */
.wx-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 44px 14px calc(85px + 31px + env(safe-area-inset-bottom, 0px));
}
.wx-scroll::-webkit-scrollbar { display: none; }

/* Shrinking header: --p goes from 0 (top of the page) to 1 (fully collapsed) as you scroll.
   The big header fades out, the small one fades in, and content fades out under it. */
.wx { --p: 0; }
.wx-scroll {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, calc(1 - var(--p))) 0, rgba(0, 0, 0, calc(1 - var(--p))) 74px, #000 116px);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, calc(1 - var(--p))) 0, rgba(0, 0, 0, calc(1 - var(--p))) 74px, #000 116px);
}
.wx-head { opacity: max(0, calc(1 - var(--p) * 1.7)); }
.wx-sticky {
  position: absolute;
  top: 42px;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  opacity: max(0, calc((var(--p) - 0.6) * 2.5));
  transform: translateY(calc((1 - var(--p)) * 8px));
}
.wx-sticky-city { font-size: 24px; font-weight: 500; line-height: 1.15; }
.wx-sticky-sub { font-size: 15px; font-weight: 600; line-height: 1.2; margin-top: 1px; }

/* Header */
.wx-head { text-align: center; padding-bottom: 40px; }
.wx-loc { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; opacity: 0.9; }
.wx-city { font-size: 34px; font-weight: 400; line-height: 1.15; margin-top: 3px; }
.wx-temp { font-size: 100px; font-weight: 200; line-height: 1.02; margin-left: 12px; }
.wx-cond { font-size: 19px; font-weight: 600; margin-top: 0; }
.wx-hl { font-size: 17px; font-weight: 500; margin-top: 1px; }

/* Cards */
.wx-card {
  background: var(--wx-card);
  border-radius: 15px;
  padding: 12px 15px 13px;
  margin-bottom: 17px;
}
.wx-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--wx-line);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.72;
}
.wx-cal { width: 14px; height: 14px; }

/* Hourly card */
.wx-hourly { padding-top: 14px; padding-bottom: 8.7px; }
.wx-sum { margin: 0 0 9px; padding-bottom: 10px; border-bottom: 0.5px solid var(--wx-line); font-size: 14.5px; line-height: 1.2; font-weight: 500; }
.wx-sum span { display: block; }
.wx-hrs { display: flex; justify-content: space-between; padding: 11px 0 2px; }
.wx-hr { display: flex; flex-direction: column; align-items: center; }
.wx-hr-t { font-size: 14.5px; font-weight: 600; }
.wx-hr .wx-ico { width: 24px; height: 24px; margin: 12px 0 10.3px; }
.wx-hr-d { font-size: 16px; font-weight: 600; }

/* 10-day card */
.wx-daily { padding-bottom: 6px; }
.wx-row {
  display: grid;
  grid-template-columns: 56px 28px 52px 1fr 36px;
  align-items: center;
  height: 43.8px;
  border-top: 0.5px solid var(--wx-line);
}
.wx-title + .wx-row { border-top: 0; }
.wx-day { font-size: 17px; font-weight: 600; }
.wx-row .wx-ico { width: 23px; height: 23px; justify-self: center; }
.wx-lo { text-align: right; font-size: 17px; font-weight: 500; opacity: 0.6; }
.wx-hi { font-size: 17px; font-weight: 600; }
.wx-track { position: relative; height: 5px; margin: 0 8px 0 6px; border-radius: 3px; background: var(--wx-track); }
.wx-track i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #92d3c3, #f1c850);
}

/* UV index + Sunset cards */
.wx-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.wx-mini { margin-bottom: 0; min-height: 106px; }
.wx-mini .wx-title { margin-bottom: 13px; }
.wx-big { font-size: 28px; font-weight: 700; line-height: 1.1; }
.wx-sub { font-size: 14.5px; font-weight: 500; margin-top: 6px; }

/* Bottom bar */
.wx-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 85px;
  background: var(--wx-bar);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 9px 30px 0;
  box-sizing: border-box;
}
.wx-bar-btn { width: 21px; height: 21px; display: block; }
.wx-bar-btn svg { width: 100%; height: 100%; display: block; }
.wx-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-top: 19px; }