/* =========================================================
   WildRoute - Site Footer
   Location: assets/css/css-front/footer.css

   All classes prefixed "sf-" (site footer) to avoid collisions.
   ========================================================= */

/* =========================================================
   01. TOKENS
   ========================================================= */
:root{
  --sf-bg:#0b0b0d;
  --sf-bg-soft:#141418;
  --sf-ink:#ffffff;
  --sf-ink-2:rgba(255,255,255,.72);
  --sf-ink-3:rgba(255,255,255,.5);
  --sf-line:rgba(255,255,255,.10);
  --sf-line-2:rgba(255,255,255,.06);
  --sf-accent:#e8244f;
  --sf-accent-glow:rgba(232,36,79,.45);
  --sf-ease:cubic-bezier(.22,.8,.2,1);
}

/* =========================================================
   02. BASE  (full-bleed, no white edges)
   ========================================================= */
.site-footer{
  position:relative;
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  margin-top: clamp(40px, 6vw, 80px);
  padding:0;
  background:var(--sf-bg);
  color:var(--sf-ink);
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  isolation:isolate;
  overflow:hidden;                 /* clip the top accent line cleanly */
  box-sizing:border-box;
}
.site-footer *,
.site-footer *::before,
.site-footer *::after{ box-sizing:border-box; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer h3{ margin:0; }
.site-footer p{ margin:0; }
.site-footer a{
  color:inherit;
  text-decoration:none;
  transition:color .18s ease;
}

/* Kill any default body/html whitespace that can peek through */
html, body{ margin:0; padding:0; }
body{ background:var(--sf-bg, #0b0b0d); }   /* prevents white gutter behind footer */

/* Decorative top accent line */
.site-footer::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(232,36,79,.55) 50%,
    transparent 100%);
}

/* =========================================================
   03. FOOTER WRAP
   ========================================================= */
.sf-footer-wrap{
  width:min(1240px, 100% - 32px);
  margin-inline:auto;
  padding: clamp(40px, 6vw, 80px) 0 clamp(20px, 3vw, 32px);
}

.sf-footer-top{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 2fr);
  gap: clamp(32px, 5vw, 72px);
  align-items:start;
}

/* =========================================================
   04. BRAND COLUMN
   ========================================================= */
.sf-footer-brand{
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
}

.sf-footer-logo{
  display:inline-flex;
  align-items:baseline;
  width:fit-content;
  text-decoration:none;
}

.sf-footer-wordmark{
  font-family:'Inter', system-ui, sans-serif;
  font-size:1.75rem;
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1;
  color:#fff;
  transition:color .18s ease;
}
.sf-footer-logo:hover .sf-footer-wordmark{ color:var(--sf-accent); }

.sf-footer-tagline{
  margin:0;
  max-width:34ch;
  font-size:.95rem;
  line-height:1.6;
  color:var(--sf-ink-2);
}

/* =========================================================
   05. NAV COLUMNS
   ========================================================= */
.sf-footer-nav{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

.sf-footer-col{ min-width:0; }

.sf-footer-heading{
  margin:0 0 14px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--sf-ink-3);
}

.sf-footer-col ul{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sf-footer-col li{ line-height:1.4; }

.sf-footer-col a{
  display:inline-block;
  font-size:.92rem;
  font-weight:500;
  color:var(--sf-ink-2);
  padding:2px 0;
  word-break:break-word;
}
.sf-footer-col a:hover{ color:#fff; }
.sf-footer-col a:focus-visible{
  outline:3px solid var(--sf-accent);
  outline-offset:3px;
  border-radius:6px;
}

.sf-footer-muted{
  display:inline-block;
  font-size:.92rem;
  color:var(--sf-ink-3);
}

/* =========================================================
   06. BOTTOM BAR
   ========================================================= */
.sf-footer-bottom{
  margin-top: clamp(32px, 5vw, 60px);
  padding-top: clamp(18px, 2.6vw, 26px);
  border-top:1px solid var(--sf-line-2);
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.sf-footer-bottom p{
  margin:0;
  font-size:.85rem;
  color:var(--sf-ink-3);
  line-height:1.5;
}

/* =========================================================
   07. SCROLL-TO-TOP BUTTON
   ========================================================= */
.scroll-top{
  position:fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index:950;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:0;
  border-radius:50%;
  background:var(--sf-bg-soft, #141418);
  color:#fff;
  cursor:pointer;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.55);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px) scale(.9);
  pointer-events:none;
  -webkit-tap-highlight-color:transparent;
  transition:
    opacity .25s ease,
    transform .25s var(--sf-ease, cubic-bezier(.22,.8,.2,1)),
    visibility .25s ease,
    background .2s ease;
}
.scroll-top.show{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}
.scroll-top:hover{
  background:var(--sf-accent, #e8244f);
  box-shadow:0 18px 34px -12px rgba(232,36,79,.55);
}
.scroll-top:active{ transform:scale(.92); }
.scroll-top svg{
  width:22px;
  height:22px;
}
.scroll-top:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}

@media (max-width:768px){
  .scroll-top{
    bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================================================
   08. RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .sf-footer-top{
    grid-template-columns:1fr;
    gap: clamp(28px, 4vw, 44px);
  }
  .sf-footer-nav{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 36px);
  }
  .sf-footer-tagline{ max-width:52ch; }
}

@media (max-width:600px){
  .sf-footer-wrap{
    width:calc(100% - 32px);
    padding-block: clamp(32px, 8vw, 48px) clamp(18px, 4vw, 26px);
  }
  .sf-footer-wordmark{ font-size:1.5rem; }
  .sf-footer-tagline{ font-size:.9rem; }
  .sf-footer-heading{ margin-bottom:10px; }
  .sf-footer-col a,
  .sf-footer-muted{ font-size:.9rem; }
  .sf-footer-col ul{ gap:8px; }
}

@media (max-width:380px){
  .sf-footer-nav{
    grid-template-columns:1fr;
    gap:22px;
  }
}

/* =========================================================
   09. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .site-footer *,
  .scroll-top{
    transition-duration:.01ms !important;
  }
}

/* =========================================================
   10. FORCE FULL-BLEED DARK BACKGROUND (no white edges)
   ========================================================= */
.site-footer,
body .site-footer,
body.page-index .site-footer,
body.page-safaris .site-footer {
  background: #0b0b0d !important;
  color: #fff !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
}

body .site-footer a,
body .sf-footer-col a,
body .sf-footer-muted,
body .sf-footer-bottom p {
  color: inherit;
}

body .sf-footer-col a           { color: rgba(255,255,255,.72); }
body .sf-footer-col a:hover     { color: #fff; }
body .sf-footer-muted           { color: rgba(255,255,255,.5); }
body .sf-footer-heading         { color: rgba(255,255,255,.5); }
body .sf-footer-bottom p        { color: rgba(255,255,255,.5); }
body .sf-footer-tagline         { color: rgba(255,255,255,.72); }
body .sf-footer-wordmark        { color: #fff; }