/* _footer.css */

/* Optional tokens specific to footer (kept local to this file) */
:root {
  --footer-h: 76px;                 /* set a stable height so layout decisions are predictable */
  --footer-bg: rgba(18, 18, 18, .92);
  --footer-border: rgba(255, 255, 255, .08);
  --footer-text: rgba(255, 255, 255, .86);
  --footer-text-muted: rgba(255, 255, 255, .62);
}

/*
  FIXED OVERLAY FOOTER
  - sits above content (content can scroll behind it)
  - always visible
*/
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  min-height: var(--footer-h);
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0.75rem 1.25rem;

  background: var(--footer-bg);
  color: var(--footer-text);

  border-top: 1px solid var(--footer-border);

  /* readable over busy content */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* strong separation + subtle top fade so content behind doesn't clash */
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
  z-index: 3000; /* above most site elements */
}

/* Typical footer content styling */
.site-footer a {
  color: var(--footer-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.site-footer a:hover {
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

.site-footer .muted {
  color: var(--footer-text-muted);
}

/*
  OPTIONAL: If you want the very last lines of content to be readable
  (instead of being fully covered by the overlay footer),
  you can add this helper class to your main content wrapper.

  This does NOT stop the overlay behavior; it just gives the content
  a bit of "breathing room" so the last paragraph/button isn't hidden.
*/
.main-content.footer-safe {
  padding-bottom: calc(var(--footer-h) + 1rem);
}

@media (max-width: 700px) {
  :root {
    --footer-h: 56px; /* smaller than 88px */
  }

  .site-footer {
    padding: 0.5rem 0.75rem;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.28); /* less heavy */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .site-footer small {
    font-size: 0.85rem;
    opacity: 0.85; /* less attention-grabbing */
  }
}