/* ═══════════════════════════════════════════════════════════════════════════
   site-footer.css — the shared page footer, and the layout that keeps it down.

   THE BUG THIS FIXES
   Every footer on the site was a normal in-flow element with `margin-top: 48px`.
   On a page shorter than the viewport — an empty Feed, a channel with no shops,
   a fresh account's Events — the footer stopped wherever the content stopped and
   left a band of bare background below it. It read as a rendering fault.

   HOW IT'S FIXED
   The classic sticky-footer flexbox: the body is a full-height column and the
   footer takes `margin-block-start: auto`, so it is pushed to the bottom edge on
   short pages and simply follows the content on long ones. It is NOT
   position: fixed — it must scroll away, and on the social pages the bottom edge
   is already taken by the fixed .ax-dock.

   WHY :has() AND NOT A BODY CLASS
   No JS means no failure mode and no layout flash between paint and script. :has()
   is more widely supported than color-mix(), which dashboard.css already relies on.
   To opt a page out, give its body .sf-off.
   ═══════════════════════════════════════════════════════════════════════════ */

body:has(> .pg-footer, > .lg-footer, > .dl-footer):not(.sf-off) {
  /* Load-bearing. cyber.css and theme-linear.css do NOT set box-sizing globally —
     only points.css, dashboard.css and home.css do, and points.css does not reach
     legal or download. Without it, min-height:100dvh plus the bottom padding that
     .ax-dock-on reserves adds up to more than the viewport and every one of these
     pages gets a permanent scrollbar. */
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;   /* mobile browsers: excludes the collapsing URL bar */
  display: flex;
  flex-direction: column;
}

/* The push. Everything above the footer keeps its own layout; only the gap moves. */
body:has(> .pg-footer, > .lg-footer, > .dl-footer):not(.sf-off) > .pg-footer,
body:has(> .pg-footer, > .lg-footer, > .dl-footer):not(.sf-off) > .lg-footer,
body:has(> .pg-footer, > .lg-footer, > .dl-footer):not(.sf-off) > .dl-footer {
  margin-block-start: auto;
}

/* ── The footer itself (built by /shared/site-footer.js) ──────────────────────
   Four link columns over a base row. The element keeps .pg-footer so the credit
   injector, the neo skin override and realms' immersive-mode hide all keep
   matching it — see the note at the top of site-footer.js. Base .pg-footer rules
   live in cyber.css; these add the column layout on top. */
.sf-footer {
  display: block;                    /* overrides cyber.css's single-row flex */
  padding: 34px clamp(16px, 5vw, 48px) 22px;
  text-align: start;
}
.sf-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 22px 28px;
  max-width: 1180px; margin: 0 auto 26px;
}
.sf-col-head {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyber-dim, #7d7d86); margin-bottom: 10px;
}
.sf-col-links { display: flex; flex-direction: column; gap: 7px; }
.sf-col-links a {
  font-size: .84rem; color: var(--cyber-text-dim, #9b9ba3); text-decoration: none;
  transition: color var(--lin-dur-1, .14s) var(--lin-ease, ease);
}
.sf-col-links a:hover { color: var(--cyber-fg, #f7f8f8); }

.sf-base {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 18px;
  max-width: 1180px; margin: 0 auto;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--cyber-border, rgba(255,255,255,.08));
  font-size: .78rem; color: var(--cyber-muted-fg, #9b9ba3);
}
.sf-copy { color: var(--cyber-muted-fg, #9b9ba3); }

@media (min-width: 760px) {
  .sf-base { justify-content: space-between; }
}
@media (max-width: 560px) {
  .sf-footer { padding: 26px 16px 18px; }
  .sf-cols { gap: 18px 20px; margin-bottom: 20px; }
  .sf-base { justify-content: center; text-align: center; }
}