/* ███████╗ ██████╗  ██████╗ ████████╗███████╗██████╗  */
/* ██╔════╝██╔═══██╗██╔═══██╗╚══██╔══╝██╔════╝██╔══██╗ */
/* █████╗  ██║   ██║██║   ██║   ██║   █████╗  ██████╔╝ */
/* ██╔══╝  ██║   ██║██║   ██║   ██║   ██╔══╝  ██╔══██╗ */
/* ██║     ╚██████╔╝╚██████╔╝   ██║   ███████╗██║  ██║ */
/* ╚═╝      ╚═════╝  ╚═════╝    ╚═╝   ╚══════╝╚═╝  ╚═╝ */
/*  ██████╗███████╗███████╗                            */
/* ██╔════╝██╔════╝██╔════╝                            */
/* ██║     ███████╗███████╗                            */
/* ██║     ╚════██║╚════██║                            */
/* ╚██████╗███████║███████║                            */
/*  ╚═════╝╚══════╝╚══════╝                            */
/**************************************************************
 * FIXED FOOTER STYLES
 * Persistent footer bar for horizontally scrolling pages.
 * Sits at the bottom of the viewport above safe area insets.
 **************************************************************/
/* ==========================================================
   FOOTER CONTAINER
   Fixed at bottom, styled in pixel-art theme.
   ========================================================== */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;               /* always above main content */
  pointer-events: auto;        /* clickable links inside */
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--dark-pink);
  border: 3px solid var(--black);
  box-shadow: 6px -6px 0 var(--black);
  padding: 8px 16px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom)); /* iOS safe-area */
}
/**************************************************************
 * FOOTER BRANDING BLOCK
 * Typically displays name or site brand at footer start.
 **************************************************************/
.foot-brand {
  font-weight: 900;
  font-size: 14px;
  background: var(--neon-blue);
  height: var(--btn-nav-h);
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 3px solid var(--black);
  box-shadow: var(--shadow);
  color: var(--text);
}
/**************************************************************
 * FOOTER LINK GROUP
 * Inline list for navigation or social media links.
 **************************************************************/
.foot-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* ==========================================================
   REUSE
   The .btn-nav class (from navbar) can be used inside footer
   for consistent button style and hover effects.
   ========================================================== */
/**************************************************************
 * FOOTER SPACING OFFSET
 * Ensures page content does not overlap the fixed footer.
 **************************************************************/
:root {
  --footer-h: calc(var(--btn-nav-h) + 22px);
}
body {
  padding-bottom: var(--footer-h);
}
/**************************************************************
 * RESPONSIVE BEHAVIOR
 * Hide footer entirely when viewport height is too small.
 **************************************************************/
@media (max-height: 500px) {
  .footer {
    display: none;
  }
}