/* ===========================================================
   RRE shared site footer — one footer design, sitewide.
   Namespaced (.site-footer / .sf-*) so legacy per-page footer
   CSS (element-level `footer { ... }` rules, old .footer-inner
   flex one-liners) cannot restyle it. Markup lives in each page;
   this file is the single source of truth for footer styling.
   Matches the homepage footer design exactly.
   =========================================================== */

footer.site-footer {
  /* explicit resets — legacy pages set flex/centering on `footer` */
  display: block;
  text-align: left;
  padding: 3rem 2rem 1.5rem;
  background: var(--ink, #413B34);
  color: rgba(252, 248, 240, 0.6);
  border-top: 1px solid rgba(252, 248, 240, 0.1);
  border-bottom: none;
  max-width: none;
  margin: 0;
}

.site-footer .sf-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2rem;
}

.site-footer .sf-brand { color: var(--cream, #FCF8F0); }

.site-footer .sf-logo {
  height: 38px;
  width: auto;
  display: block;
  margin-bottom: 0.25rem;
}

.site-footer .sf-brand p {
  color: rgba(252, 248, 240, 0.5);
  font-size: 0.9rem;
  margin-top: 1.5rem;
  max-width: 280px;
  line-height: 1.6;
}

.site-footer .sf-col h5 {
  font-family: var(--sans, 'Jost', 'Helvetica Neue', sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream, #FCF8F0);
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.site-footer .sf-col ul { list-style: none; margin: 0; padding: 0; }
.site-footer .sf-col li { margin-bottom: 0.75rem; }

.site-footer .sf-col a {
  color: rgba(252, 248, 240, 0.6);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.3s ease;
}
.site-footer .sf-col a:hover { color: var(--bronze-soft, #DFCDB4); }

/* Coming-soon variant for offering links whose pages don't exist yet */
.site-footer .sf-col a.is-coming {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
.site-footer .sf-col a.is-coming:hover { color: rgba(252, 248, 240, 0.55); }
.site-footer .sf-col a.is-coming::after {
  content: ' · soon';
  font-style: italic;
  opacity: 0.7;
  font-size: 0.78rem;
}

.site-footer .sf-social { display: flex; align-items: center; gap: 0.6rem; }
.site-footer .sf-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(252, 248, 240, 0.22);
  color: rgba(252, 248, 240, 0.55);
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}
.site-footer .sf-social a:hover,
.site-footer .sf-social a:focus-visible {
  color: #413B34; background-color: #BFA485; border-color: #BFA485;
}

.site-footer .sf-base {
  max-width: 1180px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(252, 248, 240, 0.1);
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(252, 248, 240, 0.4);
}

@media (max-width: 900px) {
  .site-footer .sf-inner { grid-template-columns: 1fr 1fr; }
  footer.site-footer { padding: 3rem 1.75rem 1.5rem; }
}

@media (max-width: 640px) {
  footer.site-footer { padding: 2.5rem 1.25rem 1.25rem; }
  .site-footer .sf-inner { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2rem; }
  .site-footer .sf-base { flex-direction: column; gap: 0.5rem; }
}