/* ============================================================
   site-shared.css
   Loaded LAST on every page (added by build_site.py).
   Contains: shared footer, section spacing, mobile fixes.
   Upload this file to /css/site-shared.css on the server.
   ============================================================ */

/* ===== Footer ===== */
.cf { background: #0d1117; color: #9aa4b2; padding: 64px 24px 28px; font-size: .9rem; line-height: 1.6; }
.cf-in { max-width: 1200px; margin: 0 auto; }
.cf-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.08); }
.cf-brand p { margin-top: 16px; max-width: 340px; line-height: 1.7; color: #9aa4b2; }
.cf-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.cf-logo .nav-logo-text { color: #fff; }
.cf h4 { color: #fff; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px; font-weight: 700; }
.cf-links a { display: block; color: #9aa4b2; text-decoration: none; padding: 5px 0; }
.cf-links a:hover, .cf-bottom a:hover { color: #e0b07a; }
.cf-links a.cf-all { color: #e0b07a; font-weight: 600; margin-top: 6px; }
.cf-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; font-size: .82rem; color: #9aa4b2; }
.cf-bottom a { color: #9aa4b2; text-decoration: none; margin-left: 20px; }

@media (max-width: 900px) {
  .cf-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .cf-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .cf { padding: 48px 20px 24px; }
  .cf-top { grid-template-columns: 1fr; gap: 28px; }
  .cf-bottom { flex-direction: column; }
  .cf-bottom a { margin-left: 0; margin-right: 16px; }
}

/* ===== Consistent section spacing ===== */
main > section.section,
main > section.fcc,
main > section.cx,
main > section.bl,
main > section.formula-section {
  padding-top: 72px;
  padding-bottom: 72px;
}
main > section.fcc + section.how-section,
main > section.how-section + section.cx,
main > section.how-section + section.fcc,
main > section.fcc + section.cx {
  padding-top: 0;
}
@media (max-width: 768px) {
  main > section.section,
  main > section.fcc,
  main > section.cx,
  main > section.bl,
  main > section.formula-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  main > section.fcc + section.how-section,
  main > section.how-section + section.cx,
  main > section.how-section + section.fcc,
  main > section.fcc + section.cx {
    padding-top: 0;
  }
}

/* ===== Mobile: calculator card must not overflow ===== */
.hero-inner > div { min-width: 0; }
.calc-card, .calc-body, .input-wrap { min-width: 0; max-width: 100%; }
.calc-input { min-width: 0; }
.calc-tabs { max-width: 100%; }
.hero-formula { max-width: 100%; flex-wrap: wrap; }
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .calc-card { width: 100%; max-width: 100%; }
}
@media (max-width: 480px) {
  .hero { padding: 48px 16px 40px; }
  .calc-body { padding: 20px 16px; }
  .calc-tabs { padding: 0 16px; }
}