/* ============================================================
   CANONICAL FOOTER STYLES — applied to every public HTML page.
   Loaded AFTER per-page <style> so this wins.
   Uses a 'cf-' namespace to avoid clashes with any legacy footer CSS.
   Spec source: V1 launch design system (iter 26).
   ============================================================ */

footer.cf {
  background: #0A3040 !important;
  color: #ffffff !important;
  font-family: 'Instrument Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  padding: 56px 24px 0 !important;
  margin-top: 0 !important;
}
footer.cf * { box-sizing: border-box; }

footer.cf .cf-w {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Medical disclaimer */
footer.cf .cf-disc {
  font-size: 11.5px !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 24px !important;
  margin-bottom: 36px !important;
}
footer.cf .cf-disc strong { color: rgba(255, 255, 255, 0.85) !important; font-weight: 600; }

/* Four-column grid */
footer.cf .cf-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr !important;
  gap: 48px !important;
  margin-bottom: 40px !important;
}
@media (max-width: 900px) {
  footer.cf .cf-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}
@media (max-width: 560px) {
  footer.cf .cf-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* Column 1 — brand (Great Vibes SVG logo, same as nav, slightly larger) */
footer.cf .cf-brand-wrap {
  display: block !important;
  margin: 0 0 10px !important;
}
footer.cf .cf-brand-svg {
  display: block !important;
  height: 56px !important;
  width: auto !important;
  max-width: 220px !important;
}
footer.cf .cf-brand-tag {
  font-family: 'Instrument Sans', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #C8A054 !important;
  margin: 0 0 18px !important;
}
footer.cf .cf-bio {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin: 0 0 18px !important;
  line-height: 1.7 !important;
}
footer.cf .cf-bio strong { color: #fff !important; font-weight: 600; }

/* Social icons */
footer.cf .cf-socials {
  display: flex !important;
  gap: 10px !important;
  margin-top: 14px !important;
}
footer.cf .cf-social {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}
footer.cf .cf-social:hover {
  background: #E07A5F !important;
  transform: translateY(-2px);
}
footer.cf .cf-social svg { display: block; }

/* Column heading */
footer.cf .cf-title {
  font-family: 'Instrument Sans', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  margin: 0 0 18px !important;
}

/* Column link list */
footer.cf .cf-links { display: flex !important; flex-direction: column !important; gap: 10px !important; }
footer.cf .cf-links a {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  line-height: 1.5 !important;
}
footer.cf .cf-links a:hover { color: #E07A5F !important; }

/* Reset Nutrition column */
footer.cf .cf-rn-badge {
  display: inline-block !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #C8A054 !important;
  background: rgba(200, 160, 84, 0.12) !important;
  border: 1px solid rgba(200, 160, 84, 0.4) !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  margin-bottom: 14px !important;
}
footer.cf .cf-rn-tag {
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 0 16px !important;
  line-height: 1.5 !important;
  font-style: italic !important;
}
footer.cf .cf-rn-all {
  color: #C8A054 !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
}

/* Disclaimer + compliance block (above bottom bar) */
footer.cf .cf-compliance {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 24px 0 !important;
  font-size: 11.5px !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.55) !important;
}
footer.cf .cf-compliance strong { color: rgba(255, 255, 255, 0.85) !important; font-weight: 600; }
footer.cf .cf-compliance .cf-pipe { color: rgba(255, 255, 255, 0.25) !important; margin: 0 8px; }

/* Bottom bar */
footer.cf .cf-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 20px 0 24px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.55) !important;
}
footer.cf .cf-copy { margin: 0 !important; }
footer.cf .cf-legal {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
}
footer.cf .cf-legal a {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  font-size: 12px !important;
  transition: color 0.2s ease !important;
}
footer.cf .cf-legal a:hover { color: #E07A5F !important; }