/*
 * footer.css — full-width site footer. Sits below the layout body so
 * sidebar + article stack above it; the footer itself spans the entire
 * window width.
 *
 * Padding matches the header's px-3 sm:px-6 rhythm so brand-mark left
 * edge + links right edge align vertically with the header above.
 */

.site-footer {
  border-top: 1px solid hsl(var(--border));
  margin-top: var(--space-20);
}

.site-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-3);
}
@media (min-width: 640px) {
  .site-footer-inner {
    flex-direction: row;
    align-items: center;
    padding: var(--space-8) var(--space-6);
  }
}

.site-footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}
.site-footer-brand img {
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0.8;
}

.site-footer-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}
.site-footer-links a {
  transition: color 150ms ease;
}
.site-footer-links a:hover {
  color: hsl(var(--foreground));
}