/* Ulysses Universe - shared site footer.
   Markup is stamped from _partials/nav.json by scripts/build_nav.py.

   Everything is scoped under .site-footer so it cannot collide with the
   per-page <footer> styles that still exist on some pages. */

footer.site-footer {
  background: var(--void-black, #0a0a0f);
  border-top: 1px solid var(--border, rgba(244, 236, 216, 0.12));
  margin-top: 64px;
  padding: 56px 20px 32px;
  font-family: var(--font-ui, 'Rajdhani', system-ui, sans-serif);
  box-sizing: border-box;
}
footer.site-footer * {
  box-sizing: border-box;
}
footer.site-footer .sf-wrap {
  max-width: 1200px;
  margin: 0 auto;
}
footer.site-footer .sf-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  /* Several game pages set text-align:center on a wrapper and the columns
     inherited it, centring every link under its heading. The shared chrome has
     to look the same regardless of the host page, so pin the alignment. */
  text-align: left;
}
footer.site-footer .sf-heading {
  font-family: var(--font-ui, 'Rajdhani', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #d4af37);
  margin: 0 0 14px;
}
footer.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer.site-footer li {
  margin: 0 0 9px;
}
footer.site-footer a {
  color: var(--grey, rgba(244, 236, 216, 0.6));
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.03em;
  transition: color 0.15s;
}
footer.site-footer a:hover,
footer.site-footer a:focus-visible {
  color: var(--gold, #d4af37);
}

footer.site-footer .sf-social {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid rgba(244, 236, 216, 0.08);
  text-align: left;
}
footer.site-footer .sf-social a {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}

footer.site-footer .sf-bottom {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(244, 236, 216, 0.08);
  text-align: center;
}
footer.site-footer .sf-legal {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--grey-2, rgba(244, 236, 216, 0.35));
}
footer.site-footer .sf-legal a {
  font-size: 13px;
}
footer.site-footer .sf-copy {
  margin: 0;
  font-size: 13px;
  color: var(--grey-2, rgba(244, 236, 216, 0.35));
}
footer.site-footer .sf-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--grey-2, rgba(244, 236, 216, 0.35));
}

@media (max-width: 860px) {
  footer.site-footer {
    padding: 40px 18px 28px;
  }
  footer.site-footer .sf-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }
}
@media (max-width: 460px) {
  footer.site-footer .sf-cols {
    grid-template-columns: 1fr;
  }
  footer.site-footer .sf-social {
    gap: 16px;
  }
}