/* Divine Foods, LLC. — shared site footer styles
   Footer markup itself lives in exactly one place: js/footer.js, which
   injects it into <div id="site-footer"></div>. Load this file alongside
   that script — see js/footer.js to configure the footer content. */

.site-footer { background: var(--df-near-black); color: var(--df-peach); padding: 72px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 48px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--df-white); font-family: var(--font-body); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1.1rem; }
.site-footer li { margin-bottom: 0.65rem; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--df-white); }
.site-footer p { color: var(--df-caramel); }
.footer-logo { height: 48px; margin-bottom: 1rem; }
.footer-socials { display: flex; gap: 0.7rem; margin-top: 1.2rem; }
.footer-bottom {
  border-top: 1px solid rgba(254, 223, 185, 0.14);
  padding: 22px 0 26px;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--df-caramel);
}