/* ============================================================================
   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);
}
.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); }

.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); }