/* ============================================================================
   footer.css — the site footer's rules, travelling with js/footer.js.

   ⚠ THESE LIVED IN home.css AND THAT SHIPPED AN UNSTYLED FOOTER. The markup
   became an injected module and reached the forecast and account pages; the
   CSS did not, because home.css is loaded by index.html alone. The result was
   a footer present on every page and styled on one — three columns stacking
   into a single run, `h2` headings at document heading size rather than the
   0.14em small caps they are meant to be, and unstyled links.

   ⚠ MOVED, NOT COPIED. A second block in forecast.css would be byte-identical
   duplication, which this repo has removed twice already (nav, search
   overlay). One component, one stylesheet, loaded wherever the component
   mounts — the same shape as nav.css, overlay.css and auth.css.

   Depends on two things it deliberately does NOT restate: `.wrap` from
   base.css and `.brand` / `.brand__word` from nav.css. Both are loaded by
   every document that loads this one — checked, not assumed.
   ========================================================================== */

.footer {
  padding: var(--sp-16) 0 var(--sp-12);
  border-top: 1px solid var(--line);
  background: var(--bg);
  /* ⚠ PINNED, NOT INHERITED — a shared component may not change shape with the
     prose settings of whatever page mounts it. base.css sets 1.6 on <body> and
     every page agreed until the legal pages started mounting this footer:
     `.legal-body` sets line-height 1.75 for its prose, the footer inherited it,
     and the SAME footer rendered 316px on /privacy against 309px everywhere
     else (measured 2026-09-09 — brand paragraph 24 -> 26.25px, bottom bar
     20.8 -> 22.75px). Nothing was wrong with either page; the component simply
     had no opinion. footer-check now compares line-height against home like
     every other computed property, so a future host page cannot reshape it. */
  line-height: 1.6;
}
.footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-10);
}
.footer__brand { max-width: 300px; }
.footer__brand .brand { margin-bottom: var(--sp-3); }
.footer__brand p { color: var(--text-muted); font-size: var(--fs-sm); }

.footer__cols { display: flex; flex-wrap: wrap; gap: var(--sp-16); }
.footer__col h2 {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer__col a,
.footer__col button {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  text-align: left;
  transition: color var(--dur-fast) var(--ease);
}
.footer__col a:hover,
.footer__col button:hover { color: var(--accent-text); }

/* ── Store badges (js/footer.js storeBadgesHtml) ────────────────────────────
   The store badge shape — black plate, white two-line label, store glyph —
   drawn in CSS so no trademarked artwork is checked in. Fixed dark in BOTH
   themes on purpose: a store badge is the store's mark, not ours, and it
   does not take the page's palette. */
.badges { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.footer__col--app .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  padding: 6px 12px 6px 10px;
  min-height: 40px;
  color: #fff;
  background: #000;
  border: 1px solid #a6a6a6;
  border-radius: 8px;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.footer__col--app .badge:hover { color: #fff; border-color: #fff; transform: translateY(-1px); }
.badge__ic { display: grid; place-items: center; width: 22px; height: 22px; }
.badge__ic svg { width: 22px; height: 22px; }
.badge__text { display: grid; gap: 2px; text-align: left; }
.badge__text small { font-size: 10px; letter-spacing: 0.02em; opacity: 0.9; }
.badge__text strong { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.footer__bottom .tag { color: var(--accent-text); font-weight: var(--fw-medium); }

@media (max-width: 640px) {
  .footer__cols { gap: var(--sp-10); }