/* =========================================================
   footer.css — site-wide fixed footer

   --footer-height is declared here and consumed by global.css
   to add matching padding-bottom to the page body.
   ========================================================= */

:root {
  --footer-height: 3rem;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--footer-height);
  background-color: #0d0d12;
  border-top: 1px solid rgba(0, 229, 255, 0.18);
  padding-inline: var(--content-gutter);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text);
  display: flex;
  align-items: center;
  transition: opacity 300ms ease;
}

.footer--hidden {
  opacity: 0;
  pointer-events: none;
}

/* No max-width — links always sit flush against the right padding edge */
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

/* ---------------------------------------------------------
   Links — right-aligned
   --------------------------------------------------------- */
.footer__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__link {
  color: #ac5ef6;
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: color var(--transition-fast);
}

.footer__link:hover,
.footer__link:focus-visible {
  color: #00e5ff;
}

/* ---------------------------------------------------------
   Mobile — stack centered, tight padding
   --------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --footer-height: 3.5rem;
  }

  .footer {
    height: var(--footer-height);
    padding-block: var(--space-2);
  }

  .footer__inner {
    justify-content: center;
  }

  .footer__links {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
  }
}