/* Weather — landing page styles.
   Mobile-first: base styles target ~360px, complexity is added at min-width
   breakpoints only. The palette is the Android app's own, so the page and the
   product read as one thing.

   The gradient and --glow are data-driven: live.js sets them from the searched
   location's day/night and condition. Everything else stays quiet so that one
   effect carries the page. */

:root {
  --sky-deep: #17457f;
  --sky-bright: #3d87c7;
  --gold: #ffd257;
  --rain: #7fd6ff;
  --ink: #ffffff;
  --ink-dim: rgba(255, 255, 255, 0.72);
  --ink-faint: rgba(255, 255, 255, 0.5);
  --tile: rgba(255, 255, 255, 0.14);
  --tile-2: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.16);
  --glow: #ffd257;

  --display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --shell: 1080px;
  --r: 16px;
}

:root.is-night {
  --sky-deep: #060c22;
  --sky-bright: #1b2a5e;
  --ink: #eaf0ff;
  --ink-dim: rgba(234, 240, 255, 0.66);
  --ink-faint: rgba(234, 240, 255, 0.44);
  --tile: rgba(255, 255, 255, 0.07);
  --tile-2: rgba(255, 255, 255, 0.045);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--sky-deep);
  /* Slow, because it fires when the visitor changes city — it should read as the
     page catching up with them, not as a decorative fade. */
  transition: background-color 700ms ease;
}

body {
  margin: 0;
  min-height: 100vh;
  background-image: linear-gradient(165deg, var(--sky-deep) 0%, var(--sky-bright) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

a { color: var(--rain); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; margin: 0; }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 20px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- nav ---------- */

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 0;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: -0.01em; color: var(--ink); text-decoration: none;
}
.brand svg { width: 26px; height: 26px; color: var(--gold); flex: none; }
.langs { display: flex; gap: 4px; font-size: 13px; font-family: var(--mono); }
.langs a, .langs span {
  padding: 6px 9px; border-radius: 8px; text-decoration: none;
  color: var(--ink-dim); min-height: 32px; display: inline-flex; align-items: center;
}
.langs a:hover { background: var(--tile-2); color: var(--ink); }
.langs .on { color: var(--gold); background: var(--tile-2); }

/* ---------- hero ---------- */

.hero { padding: 20px 0 8px; }
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 14px;
}
.hero h1 {
  font-size: clamp(2.1rem, 8.5vw, 3.4rem);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero .lede {
  margin: 16px 0 0; max-width: 46ch; color: var(--ink-dim); font-size: 1.05rem;
}

/* ---------- the live panel: the signature element ---------- */

.wx-search { position: relative; margin: 26px 0 12px; max-width: 460px; }
.wx-search input {
  width: 100%; min-height: 52px; padding: 0 16px;
  background: var(--tile); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); font-family: var(--body); font-size: 16px;
}
.wx-search input::placeholder { color: var(--ink-faint); }
.wx-search input:focus { border-color: var(--gold); outline: none; background: var(--tile-2); }

#wx-results {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  background: #10305c; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}
:root.is-night #wx-results { background: #101a3c; }
#wx-results ul { list-style: none; margin: 0; padding: 4px; }
#wx-results button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; min-height: 46px; padding: 8px 12px;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
  color: var(--ink); font-family: var(--body); font-size: 15px; text-align: start;
}
#wx-results button:hover, #wx-results button:focus-visible { background: var(--tile); }
#wx-results button span { font-size: 12.5px; color: var(--ink-dim); }
.wx-hint { margin: 0; padding: 14px; font-size: 14px; color: var(--ink-dim); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 30px; padding: 0; list-style: none; }
.chip {
  min-height: 36px; padding: 7px 13px; cursor: pointer;
  background: var(--tile-2); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-dim); font-family: var(--body); font-size: 13.5px;
}
.chip:hover { background: var(--tile); color: var(--ink); border-color: var(--gold); }

.wx-panel {
  position: relative;
  padding: 26px 20px 22px;
  background: var(--tile-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: opacity 200ms ease;
}
.wx-panel.is-loading { opacity: 0.55; }
/* The condition, as light. */
.wx-panel::before {
  content: ''; position: absolute; z-index: 0;
  top: -70px; inset-inline-start: -40px; width: 260px; height: 260px;
  background: radial-gradient(circle, var(--glow) 0%, transparent 68%);
  opacity: 0.24; filter: blur(26px); pointer-events: none;
  transition: background 700ms ease;
}
.wx-panel > * { position: relative; z-index: 1; }

.wx-head { display: flex; align-items: center; gap: 16px; }
#wx-icon { width: 78px; height: 78px; color: var(--gold); flex: none; }
.wx-read { min-width: 0; }
#wx-temp {
  font-family: var(--display); font-weight: 500; font-size: 3.6rem;
  line-height: 0.95; letter-spacing: -0.04em;
}
#wx-temp span { font-size: 1.4rem; font-weight: 400; letter-spacing: 0; vertical-align: 0.9rem; }
#wx-cond { font-size: 1.1rem; font-weight: 500; margin-top: 4px; }
#wx-place { font-size: 0.86rem; color: var(--ink-dim); margin-top: 2px; }

.wx-time {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
#wx-clock { font-family: var(--display); font-size: 1.7rem; font-weight: 500; letter-spacing: -0.02em; }
.wx-time span { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
                text-transform: uppercase; color: var(--ink-dim); }
.wx-status { margin-inline-start: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
.wx-status.is-stale, .wx-status.is-error { color: var(--gold); }

#wx-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0 0; }
.tile { padding: 10px 12px; background: var(--tile); border-radius: 12px; }
.tile dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.07em;
           text-transform: uppercase; color: var(--ink-dim); }
.tile dd { margin: 2px 0 0; font-family: var(--display); font-size: 1.15rem; font-weight: 500; }

.strip { margin: 10px 0 0; padding: 0 0 4px; list-style: none;
         display: flex; gap: 7px; overflow-x: auto; scrollbar-width: thin; }
.hour {
  flex: none; width: 60px; padding: 10px 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: var(--tile-2); border-radius: 12px; text-align: center;
}
.hour-t { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }
.hour-i { width: 26px; height: 26px; color: var(--ink); }
.hour-d { font-family: var(--display); font-size: 1rem; font-weight: 500; }
.hour-p { font-size: 11px; color: var(--rain); }
.hour-p.is-dry { color: var(--ink-faint); }

.days { margin: 8px 0 0; padding: 0; list-style: none; }
.day {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 4px; border-bottom: 1px solid var(--line);
}
.day:last-child { border-bottom: 0; }
.day-n { flex: 1; min-width: 0; font-weight: 500; display: flex; flex-direction: column; }
.day-sub { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); font-weight: 400; }
.day-i { width: 26px; height: 26px; flex: none; color: var(--ink); }
.day-p { width: 46px; font-size: 13px; color: var(--rain); text-align: end; }
/* flex + gap rather than a margin: an inline margin collapses too tight against
   Persian numerals in RTL, where the high and low ran together. */
.day-t {
  width: 84px; flex: none; font-family: var(--display); font-size: 1rem;
  display: flex; justify-content: flex-end; gap: 9px;
}
.day-t b { font-weight: 600; }
.day-t span { color: var(--ink-dim); font-weight: 400; }

/* ---------- content sections ---------- */

section { padding: 46px 0 0; }
section > h2 {
  font-size: clamp(1.5rem, 5.5vw, 2rem); letter-spacing: -0.02em; margin-bottom: 8px;
}
section > .sub { color: var(--ink-dim); margin: 0 0 22px; max-width: 56ch; }

.feats { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.feat { padding: 18px; background: var(--tile-2); border: 1px solid var(--line); border-radius: var(--r); }
.feat svg { width: 28px; height: 28px; color: var(--gold); }
.feat h3 { font-size: 1.05rem; margin: 10px 0 5px; }
.feat p { margin: 0; font-size: 0.93rem; color: var(--ink-dim); }

.origin {
  padding: 20px; background: var(--tile-2);
  border: 1px solid var(--line); border-inline-start: 3px solid var(--gold);
  border-radius: var(--r);
}
.origin p { margin: 0 0 10px; color: var(--ink-dim); }
.origin p:last-child { margin: 0; }

.cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 12px;
  font-family: var(--body); font-size: 15px; font-weight: 600; text-decoration: none;
}
.btn-primary { background: var(--gold); color: #1a2333; }
.btn-primary:hover { background: #ffdf85; color: #1a2333; }
.btn-ghost { border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--tile-2); color: var(--ink); }

pre {
  margin: 16px 0 0; padding: 14px 16px; overflow-x: auto;
  background: rgba(0, 0, 0, 0.26); border: 1px solid var(--line); border-radius: 12px;
  font-family: var(--mono); font-size: 13px; line-height: 1.7;
}
code { font-family: var(--mono); font-size: 0.92em; }

footer {
  margin-top: 56px; padding: 24px 0 34px;
  border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-dim);
}
footer p { margin: 0; }

/* ---------- breakpoints ---------- */

@media (min-width: 640px) {
  .shell { padding: 0 32px; }
  .hero { padding: 34px 0 10px; }
  #wx-tiles { grid-template-columns: repeat(4, 1fr); }
  #wx-icon { width: 92px; height: 92px; }
  #wx-temp { font-size: 4.4rem; }
  .wx-panel { padding: 30px 28px 26px; }
  .feats { grid-template-columns: repeat(2, 1fr); }
  section { padding: 62px 0 0; }
}

@media (min-width: 1024px) {
  .hero { padding: 44px 0 12px; }
  .feats { grid-template-columns: repeat(3, 1fr); }
  /* Headline and the live panel sit side by side only when both get real room.
     The headline column is the narrower of the two, so its type steps down here
     rather than up — at 3.6rem it broke "Weather, wherever you point it." across
     four lines. */
  .hero-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 36px; align-items: start; }
  /* Grid items default to min-width:auto, so the 12-column hourly strip pushed
     its own track past the viewport and `overflow-x: auto` never got to scroll.
     min-width:0 lets the track shrink and hands the overflow back to the strip. */
  .hero-grid > * { min-width: 0; }
  .hero-grid .hero { padding-top: 30px; }
  .hero-grid .hero h1 { font-size: 2.9rem; }
  .hero-grid .eyebrow { white-space: nowrap; }
}

/* ---------- Persian / RTL ---------- */

[dir="rtl"] {
  --display: 'Vazirmatn', system-ui, sans-serif;
  --body: 'Vazirmatn', system-ui, sans-serif;
  --mono: 'Vazirmatn', ui-monospace, monospace;
}
[dir="rtl"] body { line-height: 1.85; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.45; letter-spacing: 0; }
[dir="rtl"] .hero h1 { letter-spacing: 0; }
[dir="rtl"] #wx-temp, [dir="rtl"] #wx-clock { letter-spacing: 0; }
/* Latin-only strings (commands, URLs) must stay LTR inside an RTL page. */
[dir="rtl"] pre, [dir="rtl"] code { direction: ltr; text-align: left; }
[dir="rtl"] .eyebrow, [dir="rtl"] .tile dt, [dir="rtl"] .wx-time span { letter-spacing: 0; }