/* ============================================================================
 * Footer — the canonical site/app footer (brand lockup, grouped link columns,
 * legal/copyright row, optional social icons + theme/accent switcher slot).
 * Three variants: full (marketing), slim (single legal row), app (in-product).
 * Local --footer-* tokens map to the global scale, so it re-themes across every
 * accent + light/dark and a host can override just the footer if it needs to.
 * ========================================================================== */

.ui-footer {
  --footer-surface: transparent;
  --footer-border: var(--border);
  --footer-link: var(--text);
  --footer-link-hover: var(--strong);
  --footer-title: var(--strong);
  --footer-text: var(--text);

  background: var(--footer-surface); /* code-bg: inherit — transparent footer inherits; the app variant composes its opaque surface. */
  border-top: 1px solid var(--footer-border);
  color: var(--footer-text);
  font-family: var(--font-sans);
}
.ui-footer__in {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px clamp(14px, 2.4vw, 26px) 30px;
}

/* Top block: brand + tagline + social on the left, link columns on the right. */
.ui-footer__top {
  display: flex;
  justify-content: space-between;
  gap: 40px 60px;
  flex-wrap: wrap;
  padding-bottom: 30px;
}
/* Under --panel-sm, and deliberately: this is a flex TRACK in a wrapping
   row, not a panel and not a paragraph — its width is what decides when the
   footer breaks into columns, so it answers to the row rather than to a
   scale. The one width below the floor the measure gate draws. See #208. */
.ui-footer__brand { max-width: 300px; }
.ui-footer .ui-footer__brand .brand { font-size: calc(var(--text-base) + 0.5px); }
.ui-footer__tagline {
  margin: 12px 0 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--footer-text);
}

/* Social row */
.ui-footer__socials { display: flex; gap: 10px; margin-top: 16px; }
.ui-footer__social {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--footer-border);
  color: var(--footer-link);
  background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */
  transition:
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.ui-footer__social:hover { color: var(--accent); transform: translateY(-1px); }
/* The hover edge steps aside under the band: an accent edge one pixel inside an
   accent band is the second band #578 round r34 took off the focus rules, and a
   pointer resting on a focused control would put it back. One indicator, which is
   what the kit's rows already chose. why: docs/foundations.md#the-focus-ring */
.ui-footer__social:hover:not(:focus-visible) { border-color: var(--accent); }
.ui-footer__social:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
.ui-footer__social svg { width: 17px; height: 17px; display: block; }

/* Link columns */
.ui-footer__nav {
  display: grid;
  flex: 1 1 400px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 30px 40px;
}
.ui-footer__col-title {
  /* rank: label */
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--footer-text);
  margin: 0 0 14px;
}
.ui-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ui-footer__links a {
  font-size: calc(var(--text-sm) + 0.5px);
  color: var(--footer-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.ui-footer__links a:hover { color: var(--footer-link-hover); }
.ui-footer__links a:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: var(--radius-xs); }

/* Legal bar — shared by every variant */
.ui-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 22px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--footer-border);
  font-size: var(--text-sm);
  color: var(--footer-link);
}
.ui-footer__legal { color: var(--footer-link); }
.ui-footer__legal-links { display: flex; gap: 22px; flex-wrap: wrap; }
.ui-footer__legal-links a { color: var(--footer-link); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.ui-footer__legal-links a:hover { color: var(--footer-link-hover); }
.ui-footer__legal-links a:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: var(--radius-xs); }
.ui-footer__switcher { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }

/* slim — a single legal row, no divider above it. */
.ui-footer--slim .ui-footer__in { padding-top: 24px; padding-bottom: 24px; }
.ui-footer--slim .ui-footer__bar { padding-top: 0; border-top: 0; }

/* app — compact, in-product: surface background + tighter padding. */
.ui-footer--app {
  --footer-surface: var(--surface);
  border-top: 1px solid var(--footer-border);
}
.ui-footer--app .ui-footer__in { max-width: none; padding: 12px clamp(14px, 2.4vw, 22px); }
.ui-footer--app .ui-footer__bar { padding-top: 0; border-top: 0; font-size: calc(var(--text-sm) - 0.5px); }

/* Responsive — columns collapse to a stacked layout on narrow screens. Two of
   the kit's three steps, and the second one is the phone step rather than a
   fourth value of the footer's own: docs/foundations.md#breakpoints. */
@media (max-width: 720px) {
  .ui-footer__top { flex-direction: column; gap: 30px; }
  .ui-footer__nav { flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 30px; }
  .ui-footer__brand { max-width: none; }
}
@media (max-width: 560px) {
  .ui-footer__nav { grid-template-columns: 1fr; }
  .ui-footer__bar { flex-direction: column; align-items: flex-start; }
  .ui-footer__switcher { margin-left: 0; }
}