/* /assets/css/site-footer.css */

/* Uses your site variables if present, otherwise safe fallbacks */
:root{
  --footer-bg: var(--bg-body, #0b1220);
  --footer-panel: var(--panel, rgba(255,255,255,.06));
  --footer-text: var(--text, rgba(226,232,240,.95));
  --footer-muted: var(--muted, rgba(148,163,184,.9));
  --footer-border: rgba(148,163,184,.18);
  --footer-accent: var(--accent, #38bdf8);

  --footer-radius: 18px;
  --footer-max: 1200px;

  --mobile-nav-h: 64px; /* match the fixed bottom nav */
}

/* Visibility helpers */
.mobile-only{display:none;}
.desktop-only{display:block;}

@media (max-width:860px){
  .mobile-only{display:block;}
  .desktop-only{display:none;}
}

/* Ensure main content isn't hidden behind the mobile fixed nav */
@media (max-width:860px){
  .front-main-content{
    padding-bottom: calc(var(--mobile-nav-h) + 18px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------------------------
   Mobile bottom navigation
--------------------------- */
.front-mobile-nav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:var(--mobile-nav-h);
  padding:8px 10px;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:6px;
  z-index:9999;

  background:color-mix(in srgb, var(--footer-bg) 86%, #000 14%);
  border-top:1px solid var(--footer-border);

  /* iOS safe area */
  padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px));
  backdrop-filter:blur(10px);
}

.front-mobile-nav-link{
  text-decoration:none;
  color:var(--footer-muted);
  border-radius:14px;
  padding:8px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:12px;
  line-height:1;
  user-select:none;
}

.front-mobile-icon{
  font-size:18px;
  line-height:1;
}

.front-mobile-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.2px;
  opacity:.95;
}

.front-mobile-nav-link.is-active{
  color:var(--footer-text);
  background:color-mix(in srgb, var(--footer-panel) 70%, transparent 30%);
  outline:1px solid color-mix(in srgb, var(--footer-border) 60%, transparent 40%);
}

/* ---------------------------
   Footer wrapper
--------------------------- */
.site-footer{
  background:var(--footer-bg);
  color:var(--footer-text);
  border-top:1px solid var(--footer-border);
  margin-top:34px;
}

.site-footer-inner{
  max-width:var(--footer-max);
  margin:0 auto;
  padding:34px 18px 0;
}

/* ---------------------------
   Footer top (desktop)
--------------------------- */
.site-footer-top{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:24px;
  align-items:start;
}

.footer-brand{
  padding:18px;
  border-radius:var(--footer-radius);
  background:color-mix(in srgb, var(--footer-panel) 74%, transparent 26%);
  border:1px solid var(--footer-border);
}

.footer-logo-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.site-logo-svg{
  display:block;
}

.footer-desc{
  margin:12px 0 14px;
  color:var(--footer-muted);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:14px;
  line-height:1.55;
}

.footer-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.footer-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--footer-border);
  background:color-mix(in srgb, var(--footer-bg) 70%, transparent 30%);
  color:var(--footer-text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
}

.footer-col h4{
  margin:6px 0 15px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:14px;
  font-weight:950;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:rgba(245,40,145,0.86);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}

.footer-col ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:center;
}

.footer-col a{
  text-decoration:none;
  color:var(--footer-muted);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.15px;
}

.footer-col a:hover{
  color:var(--footer-text);
}

/* Divider */
.site-footer-divider{
  height:1px;
  background:var(--footer-border);
  margin:22px 0 0;
}

/* ---------------------------
   Footer bottom bar
--------------------------- */
.site-footer-bottom{
  margin-top:16px;
  padding:14px 0 18px;
}

.site-footer-bottom-inner{
  max-width:var(--footer-max);
  margin:0 auto;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.footer-bottom-left{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--footer-muted);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:13px;
  font-weight:700;
}

.footer-dot{
  width:4px;
  height:4px;
  border-radius:999px;
  background:color-mix(in srgb, var(--footer-muted) 55%, transparent 45%);
  display:inline-block;
}

.footer-note{
  color:color-mix(in srgb, var(--footer-muted) 90%, transparent 10%);
  font-weight:700;
}

.footer-bottom-right{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--footer-muted);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:13px;
  font-weight:800;
}

.footer-mini-link{
  text-decoration:none;
  color:var(--footer-muted);
}

.footer-mini-link:hover{
  color:var(--footer-text);
}

.footer-mini-dot{
  opacity:.6;
}

/* ---------------------------
   Mobile layout fixes
--------------------------- */
@media (max-width:860px){
  html,
  body{
    padding-bottom: calc(var(--mobile-nav-h) + 26px + env(safe-area-inset-bottom, 0px));
  }

  .page-frame{
    padding-bottom: calc(var(--mobile-nav-h) + 26px + env(safe-area-inset-bottom, 0px));
  }

  .front-main-content{
    padding-bottom: calc(var(--mobile-nav-h) + 18px + env(safe-area-inset-bottom, 0px));
  }

  .site-footer{
    margin-top:22px;
    margin-bottom: calc(var(--mobile-nav-h) + 22px + env(safe-area-inset-bottom, 0px));
  }

  .site-footer-inner{
    padding:22px 14px 0;
  }

  .site-footer-bottom{
    padding:14px 0 calc(22px + env(safe-area-inset-bottom, 0px));
  }

  .site-footer-bottom-inner{
    padding:0 14px;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:nowrap;
  }

  .footer-bottom-left,
  .footer-bottom-right{
    flex-wrap:nowrap;
    white-space:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .footer-bottom-left::-webkit-scrollbar,
  .footer-bottom-right::-webkit-scrollbar{
    display:none;
  }

  .footer-note{
    display:none;
  }
}