/* Check the Weather — shared styles. */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --bg-soft: #eef4fb;
  --fg: #1a1f26;
  --muted: #5a6573;
  --rule: #dde3ea;
  --link: #1d64c2;
  --accent: #1d64c2;
  --free: #4a7a0d;
  --premium: #4a7a0d;
  --premium-fg: #ffffff;
  --device-frame: #0b0d10;
  --accent-fg: #ffffff;
  --sky-top: #2c7be0;
  --sky-bottom: #5ea6f4;
  --on-sky: #ffffff;
  --on-sky-muted: rgb(255 255 255 / 0.85);
  --nav-bg: #1c5bb3;
  --card: #ffffff;
  --shadow: 0 2px 4px rgb(16 24 40 / 0.08), 0 16px 40px rgb(16 24 40 / 0.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111418;
    --bg-soft: #171c23;
    --fg: #e6eaef;
    --muted: #9aa5b2;
    --rule: #2a313a;
    --link: #74b1ff;
    --accent: #2f7ce0;
    --free: #a8d95a;
    --premium: #a8d95a;
    --premium-fg: #10200a;  /* dark text on the bright green */
    --device-frame: #c4c8ce;  /* light grey phone frames on the dark page; the island stays black */
    --sky-top: #0f2a4d;
    --sky-bottom: #1b4f8c;
    --nav-bg: #0a1d36;
    --card: #1a1f26;
    --shadow: 0 2px 4px rgb(0 0 0 / 0.3), 0 16px 40px rgb(0 0 0 / 0.4);
  }
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  /* The app's rounded type where the browser has it. */
  font: 17px/1.55 ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); }
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 42rem; margin: 0 auto; padding: 0 20px; }

/* Sky band: the header, plus the hero on the home page */

.top {
  background: linear-gradient(var(--sky-top), var(--sky-bottom));
  color: var(--on-sky);
}

/* A solid bar for the nav, like the headers on our other apps' sites. */
.site-header { background: var(--nav-bg); box-shadow: 0 1px 0 rgb(0 0 0 / 0.08); }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  min-height: 84px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 0.75rem; color: inherit; font-size: 1.2rem; font-weight: 700; text-decoration: none; }
/* The icon artwork has its own rounded shape, so shadow the shape rather than the box. */
.brand img { width: 64px; height: 64px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.25)); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.75rem; font-size: 1.08rem; }
.site-nav a { color: var(--on-sky-muted); text-decoration: none; padding: 0.2rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover, .menu summary:hover { color: var(--on-sky); }

/* "Our Other Apps" dropdown */

.menu { position: relative; }
.menu summary {
  list-style: none;
  cursor: pointer;
  color: var(--on-sky-muted);
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: "▾"; margin-left: 0.3rem; font-size: 0.8em; }
.menu[open] summary { color: var(--on-sky); }
.menu-list {
  /* Plain panel in the header's colour, like the menus on our other apps' sites. */
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  z-index: 10;
  margin: 0;
  padding: 0.5rem 1rem;
  list-style: none;
  background: var(--nav-bg);
  text-align: right;
}
.menu-list a {
  display: block;
  padding: 0.2rem 0;
  border: 0;
  color: var(--on-sky);
  white-space: nowrap;
}
.menu-list a:hover { color: var(--on-sky); text-decoration: underline; }
/* On phones the nav wraps and the menu lands near the left edge, so open it rightwards. */
@media (max-width: 600px) {
  .menu-list { left: 0; right: auto; text-align: left; }
}
.site-nav a[aria-current="page"] { color: var(--on-sky); border-bottom-color: currentColor; }

.hero .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
  padding-top: 43px;
}
/* Centred in the blue: the bottom padding matches the hero's top padding. */
.hero-text { align-self: center; padding-bottom: 43px; }
.hero h1 { font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1.05; margin: 0 0 0.75rem; letter-spacing: -0.02em; }
.hero .lede { font-size: clamp(1.15rem, 2.5vw, 1.4rem); color: var(--on-sky-muted); max-width: 30rem; margin: 0 0 1.75rem; }
.hero-phone { width: 284px; margin-bottom: -150px; }

.app-store-badge { display: inline-block; }
.app-store-badge img { height: 54px; width: auto; }

/* The frame is drawn outside the screenshot (content-box), so the whole screen shows;
   widths below are the screen's, 16px less than the phone's overall width. */
/* A phone: the <picture> holding a light/dark screenshot pair is the frame, drawn
   outside the screen (content-box) so the whole screenshot shows. Widths set elsewhere
   are the screen's, 16px less than the phone's overall width. */
.phone {
  position: relative;
  display: block;
  box-sizing: content-box;
  border-radius: 46px;
  border: 8px solid var(--device-frame);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--bg-soft);
  container-type: inline-size;
}
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 1206 / 2622; }
/* The Dynamic Island, which simulator screenshots leave out: an iPhone 17 Pro's, as a share of the screen's width. */
.phone::after {
  content: "";
  position: absolute;
  top: 2.75cqi;
  left: 50%;
  width: 31.2cqi;
  height: 9.2cqi;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}

@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: 1fr; text-align: center; gap: 0; padding-top: 29px; }
  .hero .lede { margin-left: auto; margin-right: auto; }
  .hero-text { padding-bottom: 36px; }
  .hero-phone { width: 214px; margin: 0 auto -40px; }
}

/* Home: feature rows (text beside a screenshot, alternating) */

.row { padding: 79px 0; }
.row.alt { background: var(--bg-soft); }
.row .wrap {
  display: grid;
  grid-template-columns: 1fr 260px;
  align-items: center;
  gap: 32px 72px;
}
.row.flip .wrap { grid-template-columns: 260px 1fr; }
.row.flip .row-text { order: 2; }
.row h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.15; margin: 0 0 0.75rem; }
.row p { margin: 0 0 1rem; color: var(--muted); font-size: 1.05rem; }
.row p:last-child { margin-bottom: 0; }
.row .phone { width: 244px; }

@media (max-width: 760px) {
  .row { padding: 58px 0; }
  .row:first-of-type { padding-top: 86px; }
  .row .wrap, .row.flip .wrap { grid-template-columns: 1fr; }
  .row.flip .row-text { order: 0; }
  .row .phone { width: 204px; margin: 0 auto; }
}

.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
  /* Premium: solid blue. Free overrides this below with a hollow green outline. */
  border: 1px solid var(--premium);
  background: var(--premium);
  color: var(--premium-fg);
}
.tag.free { background: none; border-color: currentColor; color: var(--free); }

/* Home: more features grid */

.more { padding: 79px 0; }
.section-title { text-align: center; font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 0.5rem; }
.section-lede { text-align: center; color: var(--muted); max-width: 34rem; margin: 0 auto 2.5rem; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 1.25rem 1.25rem 1.1rem; }
.feature .icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-fg);
  margin-bottom: 0.85rem;
}
/* Icons are copied inline from the SVG files in assets/icons; they take the text colour. */
.glyph { display: block; width: 24px; height: 24px; }
.feature h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }
.feature p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* Phones: two cards per row, a little more compact. */
@media (max-width: 600px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .feature { padding: 0.9rem 0.85rem 0.85rem; border-radius: 14px; }
  .feature .icon { width: 34px; height: 34px; border-radius: 9px; margin-bottom: 0.6rem; }
  .feature .icon .glyph { width: 20px; height: 20px; }
  .feature h3 { font-size: 0.95rem; line-height: 1.25; }
  .feature p { font-size: 0.82rem; line-height: 1.45; }
}

/* Home: Free and Premium */

.plans { padding: 0 0 79px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; max-width: 52rem; margin: 0 auto; }
.plan { border: 1px solid var(--rule); border-radius: 18px; padding: 1.4rem 1.5rem 0.6rem; background: var(--card); }
.plan.premium { border-color: var(--free); box-shadow: 0 0 0 1px var(--free); }
.plan h3 { margin: 0 0 0.75rem; font-size: 1.2rem; }
.plan ul { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--muted); }
.plan li { margin-bottom: 0.4rem; }

/* Home: privacy band + closing CTA */

.promise { padding: 79px 0; text-align: center; background: var(--bg-soft); }
.promise .section-lede { margin-bottom: 0; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; padding: 0; margin: 1.75rem 0 0; }
.pills li { padding: 0.5rem 1.1rem; border-radius: 999px; background: var(--card); border: 1px solid var(--rule); font-weight: 600; }


/* Document pages (Help, Privacy, Terms) */

.doc { padding: 43px 0 22px; }
.doc { line-height: 1.65; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.5rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.35rem; }
/* Section headings in the brand blue, with a hairline, to break up the long pages. */
.doc h2 {
  font-size: 1.45rem;
  line-height: 1.25;
  color: var(--link);
  margin: 2.6rem 0 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}
.doc h3 { font-size: 1.1rem; font-weight: 650; line-height: 1.35; margin: 1.6rem 0 0.35rem; }
.doc p, .doc ul { margin: 0 0 1rem; }
.doc ul { padding-left: 1.25rem; }
.doc li { margin-bottom: 0.4rem; }
.doc a { overflow-wrap: anywhere; }
.doc .updated { color: var(--muted); margin-bottom: 2rem; }

/* The radar coverage map, full width under its answer. */
.coverage { margin: 0.25rem 0 1.5rem; }
.coverage img { width: 100%; border-radius: 12px; border: 1px solid var(--rule); }

.contact { margin: 1.25rem 0 0.5rem; padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: 16px; }
.contact p { margin: 0 0 0.75rem; color: var(--muted); }

.button {
  display: inline-block;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
  text-decoration: none;
}

/* Footer: same colour as the nav bar, laid out like our other apps' sites */

.site-footer {
  background: var(--nav-bg);
  color: var(--on-sky);
  padding: 50px 0 25px;
}
.footer-main { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 40px; }
.footer-brand { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.footer-brand picture img { width: 112px; height: 112px; filter: drop-shadow(0 6px 14px rgb(0 0 0 / 0.25)); }
.footer-brand .app-store-badge img { height: 40px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.footer-cols h2 {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; font-size: 0.95rem; }
.footer-cols li { margin-bottom: 0.45rem; }
.footer-cols a { color: var(--on-sky); }
.copyright { margin: 48px 0 0; text-align: center; font-size: 0.85rem; color: var(--on-sky-muted); }

@media (max-width: 600px) {
  .footer-main { flex-direction: column; align-items: center; text-align: center; }
  .footer-cols { justify-content: center; }
}