/* ---------------------------------------------------------------------------
 * sx-footer.css
 * Sigrix-shell site footer chrome (components/sx_footer.html).
 *
 * These rules live here — and are loaded globally from base.html — rather
 * than in css/sx-home.css so EVERY page that renders the footer gets it
 * styled, including the moderator/admin shells and product/detail pages
 * that never opt into sx-home.css. This mirrors css/sx-nav-actions.css,
 * which holds the global top-bar chrome for the same reason.
 *
 * The footer wraps its content in `.sx-container`; that class only ships
 * with css/sx-home.css, so the `.sx-footer .sx-container` rule below
 * restates the same box model (max-width / centring / gutter) so the
 * footer stays centred on pages that don't load it. Likewise `.sx-footer a`
 * sets `text-decoration: none` directly instead of leaning on the `.sx a`
 * reset that only ships with sx-home.css.
 * --------------------------------------------------------------------------- */

.sx-footer {
  padding: 64px 0 32px;
  border-top: 1px solid var(--sx-line);
  margin-top: 80px;
}
.sx-footer .sx-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.sx-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; }
.sx-footer h4 { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sx-text-3); font-weight: 600; margin-bottom: 14px; }
.sx-footer h4 a { color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; }
.sx-footer h4 a:hover { color: var(--sx-text); }
.sx-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sx-footer a { color: var(--sx-text-2); font-size: 14px; text-decoration: none; }
.sx-footer a:hover { color: var(--sx-text); }
.sx-footer-bottom {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--sx-line);
  display: flex; justify-content: space-between; align-items: center;
  color: var(--sx-text-3); font-size: 12px;
  flex-wrap: wrap; gap: 12px;
}
.sx-footer-bottom code { font-family: var(--sx-font-mono); font-size: 12px; }

/* Social row — sits under the brand description in column 1 of the footer grid */
.sx-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.sx-social a {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sx-text-2);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.sx-social a:hover {
  color: var(--sx-brand-ink);
  background: var(--sx-brand);
  box-shadow: 0 0 0 1px rgba(91, 124, 255, 0.6) inset, 0 1px 0 rgba(255, 255, 255, 0.25) inset;
  transform: translateY(-1px);
}
.sx-social a:focus-visible {
  outline: 2px solid var(--sx-brand);
  outline-offset: 2px;
}
.sx-social svg { width: 15px; height: 15px; display: block; }
[data-theme="dark"] .sx-social a { color: var(--sx-text-3); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .sx-footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sx-footer-grid { grid-template-columns: 1fr; }
  .sx-footer .sx-container { padding: 0 20px; }
}