/* <site-footer> — quiet by design.
   It carries the links people go looking for when something has gone wrong or
   they want to know what they agreed to. It should be findable, not loud. */

site-footer {
  display: block;
  margin-top: var(--space-16);
  border-top: 1px solid var(--clr-border);
  background: var(--clr-bg-surface, var(--clr-bg-base));
}

.site-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
}

.site-footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-footer-name {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--clr-text-secondary);
}

.site-footer-beta {
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-neon-cyan);
  border: 1px solid color-mix(in srgb, var(--clr-neon-cyan) 40%, transparent);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-left: auto;
}

.site-footer-links a {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--clr-text-secondary);
  text-decoration: none;
  /* A real tap target on a phone, not a 12px word. */
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.site-footer-links a:hover,
.site-footer-links a:focus-visible {
  color: var(--clr-neon-cyan);
  border-bottom-color: var(--clr-neon-cyan);
}

.site-footer-legal {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--clr-text-muted);
  max-width: 72ch;
}

@media (max-width: 700px) {
  .site-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .site-footer-links { margin-left: 0; }
}

/* The mobile dock is fixed to the bottom of the viewport; without this the
   last line of the footer sits underneath it and cannot be read or tapped. */
@media (max-width: 900px) {
  site-footer { padding-bottom: 72px; }
}

@media print {
  site-footer { display: none; }
}