/*
 * Footer
 */

.footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
  /* Vertical rhythm only here — mobile bottom inset is set in utilities/responsive.css */
  /* Spacing above footer was margin-top; padding keeps the gap inside this surface so the page
     canvas stays continuous between main and footer. */
  padding-top: calc(var(--space-8) + var(--space-12));
  padding-left: 0;
  padding-right: 0;
  padding-bottom: var(--space-8);
  margin-top: 0;
  color: var(--footer-fg);
}

.footer-copy,
.footer .text-muted {
  color: var(--footer-fg) !important;
}

.footer a,
.footer-link,
button.footer-link {
  color: var(--footer-link-fg);
  transition: color var(--transition-fast);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
}

.footer a:hover,
.footer-link:hover,
button.footer-link:hover {
  color: var(--footer-link-hover-fg);
}

/* Profiler button — reset <button> defaults to match footer link style */
.footer-profiler-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

/* Mobile footer — avoid `padding` shorthand so responsive.css can set padding-bottom alone */
@media (max-width: 768px) {
  .footer {
    padding-top: calc(var(--space-6) + var(--space-12));
    padding-left: 0;
    padding-right: 0;
    padding-bottom: var(--space-6);
    font-size: 0.875rem;
  }
}

/*
 * Desktop-class pointer devices: match footer to the green chrome substrate so Safari
 * has a consistent lower sampling region during Turbo transitions.
 */
@media (hover: hover) and (pointer: fine) {
  .footer {
    background-color: var(--bg-secondary) !important;
    background-image: none !important;
    border-top-color: var(--nav-border);
    color: var(--nav-fg);
  }

  .footer-copy,
  .footer .text-muted {
    color: var(--nav-fg) !important;
  }

  .footer a,
  .footer-link,
  button.footer-link {
    color: var(--nav-fg-emphasis);
  }

  .footer a:hover,
  .footer-link:hover,
  button.footer-link:hover {
    color: var(--nav-fg-emphasis);
    opacity: 0.9;
  }
}