/* ============================================================================
   sitefoot.css — global footer for Sargazo Watch
   Shared across the map app, Forecast, Blog, Destinations and the legal pages
   (Privacy / Terms / Disclaimer / Contact / About). Loaded after the page's own
   stylesheet so it inherits the same design tokens (--accent, --ink, --line …).
   Markup: <footer class="site-footer"> … </footer>  (see any legal page).
   ============================================================================ */

.site-footer {
  margin-top: 64px;
  border-top: 1px solid var(--line, rgba(12,29,40,.10));
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(248,251,252,.6));
  font-family: var(--font, "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
}
.site-footer .sf-inner {
  max-width: 1180px; margin: 0 auto; padding: 38px 24px 26px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
}

/* brand block */
.site-footer .sf-brand { display: flex; align-items: flex-start; gap: 12px; max-width: 340px; }
.site-footer .sf-dot {
  width: 26px; height: 26px; border-radius: 8px; flex: none; margin-top: 1px;
  background: radial-gradient(120% 120% at 30% 20%, var(--accent-bright, #18a8c9), var(--accent, #006d99) 70%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45);
}
.site-footer .sf-name { font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--ink, #0c1d28); line-height: 1.1; }
.site-footer .sf-tag { margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint, #7d8a93); font-weight: 600; }

/* link columns */
.site-footer .sf-cols { display: flex; gap: 54px; flex-wrap: wrap; }
.site-footer .sf-col { display: flex; flex-direction: column; gap: 9px; }
.site-footer .sf-col h4 {
  margin: 0 0 3px; font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint, #7d8a93);
}
.site-footer .sf-col a {
  font-size: 13.5px; font-weight: 650; color: var(--ink-soft, #41525d);
  text-decoration: none; transition: color .15s; line-height: 1.2;
}
.site-footer .sf-col a:hover { color: var(--accent, #006d99); text-decoration: none; }

/* base bar */
.site-footer .sf-base {
  max-width: 1180px; margin: 0 auto; padding: 16px 24px 30px;
  border-top: 1px solid var(--line, rgba(12,29,40,.10));
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
}
.site-footer .sf-copy { font-size: 12px; font-weight: 700; color: var(--ink-soft, #41525d); }
.site-footer .sf-meta { font-size: 11.5px; font-weight: 600; color: var(--ink-faint, #7d8a93); }
.site-footer .sf-meta b { color: var(--ink-soft, #41525d); font-weight: 700; }

@media (max-width: 760px) {
  .site-footer { margin-top: 44px; }
  .site-footer .sf-inner { padding: 30px 18px 22px; gap: 26px; }
  .site-footer .sf-cols { gap: 36px; }
  .site-footer .sf-base { padding: 14px 18px 26px; }
  .site-footer .sf-meta { order: 2; }
}

/* ---- map-app integration: the React shell renders the footer inside the
   scrollable "below deck" area; remove the extra top margin there since the
   section above already provides spacing. ---- */
.below .site-footer { margin-top: 8px; }