/* =============================================================================
   footer.css — 3-column footer with dark-mode toggle
   ============================================================================ */
.site-footer { background: var(--color-bg-inverse); color: var(--color-text-inverse); margin-top: var(--space-8); }
.site-footer a { color: color-mix(in srgb, var(--color-text-inverse) 78%, transparent); }
.site-footer a:hover { color: var(--color-text-inverse); }

.footer-grid {
  display: grid; gap: var(--space-7);
  grid-template-columns: 1.4fr 1fr 1fr;
  padding-block: var(--space-7);
}
.footer-brand .brand { color: var(--color-text-inverse); }
.footer-brand .brand__mark { background: var(--color-accent-primary); }
.footer-brand p { margin-top: var(--space-3); color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent); max-width: 34ch; font-size: var(--font-size-sm); }

.footer-col h4 { color: var(--color-text-inverse); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); margin-bottom: var(--space-3); }
.footer-col ul { display: grid; gap: var(--space-2); }
.footer-col a { font-size: var(--font-size-sm); }

.footer-bar {
  border-top: 1px solid color-mix(in srgb, var(--color-text-inverse) 14%, transparent);
  padding-block: var(--space-4);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.footer-bar small { color: color-mix(in srgb, var(--color-text-inverse) 60%, transparent); }
.footer-bar .footer-legal { display: flex; gap: var(--space-4); }

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .footer-grid { grid-template-columns: 1fr; }
}