/* ============================================================================
   snk-footer.css — Snacknap fat-sitemap footer.
   Token-driven, theme-aware, self-contained. Namespace: .snk-ft-*
   Depends only on tokens from snk-theme.css (+ --snk-brand as the gold
   signature, mirroring the nav). Explicit line-heights everywhere so the
   public body{line-height:26px} never bleeds in. Source of truth for the
   design: docs/superpowers/plans/2026-07-09-footer-redesign.md + the mockup
   at /_mockups/footer/. Keep this byte-identical to the approved mock.
   ============================================================================ */

.snk-ft{
  position:relative;
  margin-top:64px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--snk-brand) 7%, transparent) 0%, transparent 42%),
    var(--snk-surface);
  border-top:1px solid var(--snk-border);
  color:var(--snk-ink-600);
  font-size:.9rem;
  line-height:1.5;
}
[data-bs-theme=dark] .snk-ft{
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--snk-brand) 6%, transparent) 0%, transparent 45%),
    var(--snk-surface-3);
}
/* gold signature line — echoes the floating nav's ::before glow */
.snk-ft::before{
  content:""; position:absolute; left:8%; right:8%; top:-1px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--snk-brand), transparent);
  opacity:.6; pointer-events:none;
}

/* inner width matches the site's default tier via bootstrap .container.
   .snk-ft-inner is a fallback container for the standalone/gallery use. */
.snk-ft-inner{ width:100%; max-width:var(--snk-w-default,1140px); margin-inline:auto; padding-inline:1.5rem; }

/* ---------- main grid: brand/CTA block + 4 sitemap columns ---------- */
.snk-ft-main{
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1fr 1fr;
  gap:2.4rem 1.7rem;
  padding:3.1rem 0 2.4rem;
}

/* ---------- brand + community block ---------- */
.snk-ft-brand{ display:flex; flex-direction:column; gap:1rem; }
.snk-ft-brandrow{ display:flex; align-items:center; gap:.55rem; }
.snk-ft-brandrow img{ height:34px; width:34px; border-radius:9px; display:block; }
.snk-ft-wordmark{ font-weight:800; letter-spacing:-.02em; font-size:1.16rem; color:var(--snk-text); line-height:1.1; }
.snk-ft-dot{ width:7px; height:7px; border-radius:50%; background:var(--snk-brand);
  box-shadow:0 0 8px color-mix(in srgb, var(--snk-brand) 75%, transparent); }
.snk-ft-tag{ font-size:.86rem; line-height:1.55; color:var(--snk-ink-500); max-width:34ch; margin:0; }

/* Telegram community CTA — the footer's eye-catcher.
   Grid so it stays tidy in the narrow brand column: [icon][title+sub] on row 1,
   the Join pill on its own row below. Never cramps regardless of column width. */
.snk-ft-cta{
  display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ic txt" "go go";
  align-items:start; gap:.6rem .8rem;
  padding:.95rem 1rem; border-radius:15px; text-decoration:none;
  background:color-mix(in srgb, var(--snk-accent) 9%, var(--snk-surface));
  border:1px solid color-mix(in srgb, var(--snk-accent) 24%, transparent);
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.snk-ft-cta:hover{ transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--snk-accent) 45%, transparent);
  box-shadow:0 8px 22px color-mix(in srgb, var(--snk-accent) 18%, transparent); }
.snk-ft-cta-ic{ grid-area:ic; flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(180deg,#2ea6df,#1d8fce); color:#fff; box-shadow:0 4px 12px rgba(34,158,217,.4); }
.snk-ft-cta-ic svg{ width:21px; height:21px; }
.snk-ft-cta-txt{ grid-area:txt; min-width:0; }
.snk-ft-cta-txt b{ display:block; font-size:.92rem; font-weight:700; color:var(--snk-text); line-height:1.3; }
.snk-ft-cta-txt span{ display:block; font-size:.78rem; color:var(--snk-ink-500); line-height:1.4; margin-top:2px; }
.snk-ft-cta-go{ grid-area:go; justify-self:start; display:inline-flex; align-items:center; justify-content:center; gap:.32rem;
  margin-top:.25rem; font-weight:700; font-size:.82rem; color:#fff; text-decoration:none; padding:.48rem .9rem; border-radius:999px;
  background:linear-gradient(180deg, var(--snk-accent), color-mix(in srgb, var(--snk-accent) 80%, #000));
  box-shadow:0 4px 12px color-mix(in srgb, var(--snk-accent) 35%, transparent); white-space:nowrap; }
[data-bs-theme=dark] .snk-ft-cta-go{ color:#0f1216; }
.snk-ft-cta-go svg{ width:15px; height:15px; }

/* social chips — white brand glyphs need a dark chip in BOTH themes (icons are #fff).
   6-column grid (not flex-wrap) so all six always sit on one row and scale to the
   column width — never a lonely 5+1 wrap at in-between breakpoints. */
.snk-ft-socials{ display:grid; grid-template-columns:repeat(6, 1fr); gap:.5rem; max-width:288px; }
.snk-ft-social{
  width:100%; aspect-ratio:1; border-radius:11px; display:grid; place-items:center;
  background:#32414A; border:1px solid rgba(255,255,255,.06);
  transition:transform .15s, background .15s, box-shadow .15s;
}
[data-bs-theme=dark] .snk-ft-social{ background:var(--snk-surface-2); border-color:var(--snk-border); }
.snk-ft-social:hover{ transform:translateY(-2px);
  background:var(--snk-accent); box-shadow:0 6px 16px color-mix(in srgb, var(--snk-accent) 40%, transparent); }
.snk-ft-social img{ height:20px; width:20px; display:block; }
.snk-ft-social img.is-invert{ filter:invert(100%); }

/* app-install nudge — subtle ghost pill */
.snk-ft-app{
  display:inline-flex; align-items:center; gap:.5rem; width:fit-content;
  font-size:.82rem; font-weight:600; color:var(--snk-ink-600); text-decoration:none;
  padding:.48rem .8rem; border-radius:999px; border:1px dashed var(--snk-border-strong);
  background:var(--snk-surface-3); transition:.15s;
}
.snk-ft-app:hover{ color:var(--snk-accent); border-color:var(--snk-accent); border-style:solid; }
.snk-ft-app svg{ width:16px; height:16px; }

/* ---------- sitemap columns ---------- */
.snk-ft-col{ min-width:0; }
.snk-ft-col > summary{ list-style:none; }            /* kill default disclosure marker */
.snk-ft-col > summary::-webkit-details-marker{ display:none; }
.snk-ft-h{
  display:flex; align-items:center; gap:.45rem;
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em;
  color:var(--snk-ink-500); margin:0 0 1rem; line-height:1.3; cursor:default;
}
.snk-ft-h svg{ width:15px; height:15px; color:var(--snk-brand); }
.snk-ft-h .snk-ft-chev{ margin-left:auto; width:16px; height:16px; color:var(--snk-ink-300); display:none; transition:transform .18s; }
.snk-ft-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.62rem; }
.snk-ft-links a{
  display:inline-flex; align-items:center; gap:.4rem; width:fit-content;
  font-size:.9rem; font-weight:500; line-height:1.4; color:var(--snk-ink-600); text-decoration:none;
  transition:color .15s, transform .15s;
}
.snk-ft-links a:hover{ color:var(--snk-accent); transform:translateX(3px); }
.snk-ft-links a .tag{ font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--snk-accent); background:color-mix(in srgb, var(--snk-accent) 14%, transparent);
  padding:.05rem .32rem; border-radius:5px; line-height:1.4; }

/* ---------- bottom bar ---------- */
.snk-ft-disclaimer{ padding:1.4rem 0 1.2rem; border-top:1px solid var(--snk-border-subtle);
  font-size:.75rem; line-height:1.65; color:var(--snk-text-muted); }
.snk-ft-disclaimer strong{ color:var(--snk-ink-600); font-weight:700; }

.snk-ft-bottom{
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.3rem;
  padding:1.15rem 0 1.6rem; border-top:1px solid var(--snk-border-subtle);
}
.snk-ft-copy{ font-size:.82rem; color:var(--snk-ink-500); line-height:1.5; }
.snk-ft-copy b{ color:var(--snk-ink-700); font-weight:700; }
.snk-ft-legal{ display:flex; flex-wrap:wrap; gap:.35rem 1.05rem; }
.snk-ft-legal a{ font-size:.82rem; color:var(--snk-ink-500); text-decoration:none; line-height:1.5; transition:color .15s; }
.snk-ft-legal a:hover{ color:var(--snk-accent); }

/* data-freshness trust pill */
.snk-ft-fresh{ margin-left:auto; display:inline-flex; align-items:center; gap:.45rem;
  font-size:.76rem; font-weight:600; color:var(--snk-ink-600); line-height:1.4;
  background:var(--snk-surface-3); border:1px solid var(--snk-border); border-radius:999px; padding:.32rem .72rem; }
.snk-ft-fresh .dot{ width:8px; height:8px; border-radius:50%; background:var(--snk-success);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--snk-success) 22%, transparent); }
@media (prefers-reduced-motion: no-preference){
  .snk-ft-fresh .dot{ animation:snkFtPulse 2.4s ease-in-out infinite; }
  @keyframes snkFtPulse{ 0%,100%{ box-shadow:0 0 0 3px color-mix(in srgb, var(--snk-success) 22%, transparent); }
    50%{ box-shadow:0 0 0 5px color-mix(in srgb, var(--snk-success) 8%, transparent); } }
}

/* ---------- back-to-top (floating, reveals on scroll) ---------- */
.snk-ft-toplink{
  position:fixed; right:1.1rem; bottom:1.4rem; z-index:1025;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--snk-surface) 82%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--snk-border-strong); color:var(--snk-ink-700);
  box-shadow:0 10px 26px rgba(16,24,40,.16); cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .2s, transform .2s, visibility .2s;
}
.snk-ft-toplink.show{ opacity:1; visibility:visible; transform:none; }
.snk-ft-toplink:hover{ color:var(--snk-accent); border-color:var(--snk-accent); }
.snk-ft-toplink svg{ width:20px; height:20px; }
[data-bs-theme=dark] .snk-ft-toplink{ box-shadow:0 12px 30px rgba(0,0,0,.5); }
/* lift above the floating mobile tab bar */
@media (max-width:991.98px){
  .snk-ft-toplink{ bottom:calc(5.4rem + env(safe-area-inset-bottom)); right:.8rem; }
}

/* ============================================================================
   Responsive
   ============================================================================ */
/* tablet: brand spans full width, columns go 2-up */
@media (max-width:991.98px){
  .snk-ft-main{ grid-template-columns:1fr 1fr; gap:1.8rem 1.5rem; padding:2.4rem 0 1.8rem; }
  .snk-ft-brand{ grid-column:1 / -1; }
  /* clear the floating mobile tab bar */
  .snk-ft-bottom{ padding-bottom:calc(5.6rem + env(safe-area-inset-bottom)); }
}

/* phone: single column; sitemap columns collapse into accordions (<details>) */
@media (max-width:575.98px){
  .snk-ft-main{ grid-template-columns:1fr; gap:.2rem; }
  .snk-ft-brand{ margin-bottom:1.2rem; }
  .snk-ft-col{ border-top:1px solid var(--snk-border-subtle); }
  .snk-ft-col > summary{ cursor:pointer; }
  .snk-ft-h{ margin:0; padding:1rem .2rem; }
  .snk-ft-h .snk-ft-chev{ display:block; }
  details.snk-ft-col[open] .snk-ft-chev{ transform:rotate(180deg); }
  .snk-ft-links{ padding:0 .2rem 1.1rem; gap:.85rem; }
  .snk-ft-links a{ padding:.1rem 0; }               /* larger tap targets */
  .snk-ft-bottom{ flex-direction:column; align-items:flex-start; }
  .snk-ft-fresh{ margin-left:0; }
}
/* desktop/tablet: force <details> open + non-interactive summary (accordion is mobile-only) */
@media (min-width:576px){
  details.snk-ft-col > .snk-ft-links{ display:flex !important; }
  details.snk-ft-col > summary{ pointer-events:none; }
}

@media (prefers-reduced-motion: reduce){
  .snk-ft-cta, .snk-ft-social, .snk-ft-links a, .snk-ft-toplink, .snk-ft-chev{ transition:none !important; }
}