[R-10] Footer responsive layout — bottom bar, contrast, sponsor

[vmorps]

[R-10] Footer Responsive Layout — Comprehensive Fix

Severity: P1 (upgraded from P2 — custom CSS actively breaks built-in responsiveness)
Sprint: 2
Component: Footer
Spec: design/specs/responsive-layout-fixes.md § R-10

---

Current Behavior

Three issues compound in the footer on mobile:

Issue A — Bottom bar override conflict:
.footer__bottom explicitly sets flex-direction: row; flex: unset; text-align: unset; which disables Docusaurus/Infima's built-in responsive stacking. On mobile, copyright and license text are forced into a single row.

Issue B — Copyright text nearly invisible:
.footer__copyright uses #374151 on #0a0c10 footer background — approximately 2.2:1 contrast ratio, well below WCAG AA minimum of 4.5:1.

Issue C — Sponsor column visual orphan:
The 4th footer column (Sponsor) contains a paragraph of HTML text rather than a link list. On mobile, this creates visual disconnect.

Expected Behavior

1. Footer bottom bar stacks vertically on mobile with centered text
2. Copyright text is legible at all viewport widths (meet WCAG AA)
3. Sponsor column integrates visually with the link columns on mobile
4. Desktop footer layout is unchanged

File(s) Impacted

• src/css/custom.css

Implementation Approach

Step 1: Fix bottom bar — add mobile override only (keep existing desktop rules)

@media (max-width: 768px) {
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    justify-content: center;
  }
}

Step 2: Fix copyright contrast

/* Dark mode — upgrade from #374151 to #6b7280 (4.7:1 ratio on #0a0c10) */
.footer__copyright {
  font-size: 0.75rem;
  color: #6b7280;
}

/* Light mode */
html[data-theme='light'] .footer__copyright {
  color: #6b7280;
}

Step 3: Sponsor column mobile treatment

.footer__sponsor-text {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

Acceptance Criteria

• Footer bottom bar stacks vertically on mobile (≤ 768px)
• Copyright and license text centered and readable on mobile
• Copyright text contrast meets WCAG AA (≥ 4.5:1) in both dark and light modes
• Sponsor column text wraps within viewport on mobile
• Desktop footer layout is visually identical to current production
• Light mode footer is unaffected by these changes

---

Branch strategy: All responsive fixes will land on a single branch (fix/responsive-layout) with one PR against main. Commits grouped by sprint.