/* ==========================================================================
   Turbo Link Studio — the shared site footer
   --------------------------------------------------------------------------
   Companion to tls-topbar.css. Same contract, same reasoning:

     - ONE footer on all 14 marketing pages. Layout, type, spacing, the brand
       lockup, the "Who it's for" column and the base bar are IDENTICAL
       everywhere. Only the colour skin changes, and only the contents of the
       "Explore" column change (see below).
     - Fully self-scoped: every colour reads from a --tlfoot-* property
       declared HERE. The vertical pages each define their own --ink / --muted /
       --text / --hairline with different meanings, so the footer must not
       inherit any of them.
     - No bare-element selectors. Everything hangs off .site-footer.

   The EXPLORE column is the one contextual slot. It always exists, always sits
   in the same place, always looks the same — but it lists what is worth reading
   next FROM THIS PAGE (photography surfaces on the photography pages, the demo
   set elsewhere). That preserves the deep links the old per-vertical footers
   carried instead of flattening them away.

   Themes — put ONE on the <footer> alongside .site-footer. The names match the
   TOOLBAR modifiers so a page carries a consistent pair (.tl-bar--dark with
   .tl-foot--dark); they name the page's WORLD, not the footer's own colour,
   which is dark in all three.
     .tl-foot--paper      ignition navy    index, pricing, get-a-demo,
                                           social-studio, tattoo
     .tl-foot--dark       steel black      the 7 photography pages
     .tl-foot--cream      plum             for-salons
     .tl-foot--tile       navy             for-barbers
     .tl-foot--blueprint  blueprint navy   the contractor pages
   ========================================================================== */

/* ---------- Theme: paper world ---------- */
.site-footer,
.site-footer.tl-foot--paper{
  --tlfoot-bg: #0B0E15;
  --tlfoot-ink: #F4F3EF;
  --tlfoot-link: rgba(244,243,239,0.58);
  --tlfoot-link-hover: #F4F3EF;
  --tlfoot-key: rgba(244,243,239,0.58);
  --tlfoot-legal: rgba(244,243,239,0.45);
  --tlfoot-hairline: rgba(244,243,239,0.14);
  --tlfoot-accent: #FF5B36;
}

/* ---------- Theme: photography ---------- */
.site-footer.tl-foot--dark{
  --tlfoot-bg: #0B0C0F;
  --tlfoot-ink: #F4F2EC;
  --tlfoot-link: #B7BAC2;
  --tlfoot-link-hover: #FFB066;
  --tlfoot-key: #8A8E98;
  --tlfoot-legal: #9A9EAA;
  --tlfoot-hairline: rgba(255,255,255,0.09);
  --tlfoot-accent: #FF7A1E;
}

/* ---------- Theme: salon ---------- */
.site-footer.tl-foot--cream{
  --tlfoot-bg: #2E1F28;
  --tlfoot-ink: #F8EFE6;
  --tlfoot-link: rgba(244,233,223,0.75);
  --tlfoot-link-hover: #D9B06C;
  --tlfoot-key: rgba(244,233,223,0.66);
  --tlfoot-legal: rgba(244,233,223,0.55);
  --tlfoot-hairline: rgba(244,233,223,0.15);
  --tlfoot-accent: #B98A4E;
}

/* ---------- Theme: stack (the brand family, v2) ---------- */
.site-footer.tl-foot--stack{
  --tlfoot-bg: #070910;
  --tlfoot-ink: #EFF4FB;
  --tlfoot-link: rgba(239,244,251,0.66);
  --tlfoot-link-hover: #9BF0FF;
  --tlfoot-key: rgba(239,244,251,0.58);
  --tlfoot-legal: rgba(239,244,251,0.5);
  --tlfoot-hairline: rgba(176,198,255,0.12);
  --tlfoot-accent: #4FD8F0;
}

/* ---------- Theme: parchment (the tattoo family) ---------- */
.site-footer.tl-foot--parchment{
  --tlfoot-bg: #14110F;
  --tlfoot-ink: #F4EFE6;
  --tlfoot-link: rgba(244,239,230,0.68);
  --tlfoot-link-hover: #D8565C;
  --tlfoot-key: rgba(244,239,230,0.58);
  --tlfoot-legal: rgba(244,239,230,0.5);
  --tlfoot-hairline: rgba(244,239,230,0.14);
  --tlfoot-accent: #B32127;
}

/* ---------- Theme: ledger (the homepage) ---------- */
.site-footer.tl-foot--ledger{
  --tlfoot-bg: #0A251C;
  --tlfoot-ink: #F2EDDC;
  --tlfoot-link: rgba(242,237,220,0.72);
  --tlfoot-link-hover: #E6C878;
  --tlfoot-key: rgba(242,237,220,0.6);
  --tlfoot-legal: rgba(242,237,220,0.55);
  --tlfoot-hairline: rgba(230,200,120,0.16);
  --tlfoot-accent: #C9A445;
}

/* ---------- Theme: barber ---------- */
.site-footer.tl-foot--tile{
  --tlfoot-bg: #16202B;
  --tlfoot-ink: #F4F7F8;
  --tlfoot-link: rgba(244,247,248,0.75);
  --tlfoot-link-hover: #E2A0A3;
  --tlfoot-key: rgba(244,247,248,0.6);
  --tlfoot-legal: rgba(244,247,248,0.55);
  --tlfoot-hairline: rgba(244,247,248,0.15);
  --tlfoot-accent: #B08A3E;
}

/* ---------- Theme: blueprint world (contractors) ---------- */
.site-footer.tl-foot--blueprint{
  --tlfoot-bg: #0A1622;
  --tlfoot-ink: #EAF2F8;
  --tlfoot-link: rgba(234,242,248,0.72);
  --tlfoot-link-hover: #FFC64B;
  --tlfoot-key: rgba(234,242,248,0.6);
  --tlfoot-legal: rgba(234,242,248,0.54);
  --tlfoot-hairline: rgba(234,242,248,0.14);
  --tlfoot-accent: #FFC64B;
}

/* ==========================================================================
   SHELL
   ========================================================================== */
.site-footer{
  background: var(--tlfoot-bg);
  color: var(--tlfoot-link);
  padding: clamp(44px, 6vw, 64px) 0 0;

  /* owned locally: the vertical pages define --ease differently */
  --tlfoot-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.site-footer .foot-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px clamp(28px, 5vw, 64px);
  align-items: start;
  padding-bottom: clamp(36px, 5vw, 52px);
}

/* ---------- Brand block ---------- */
.site-footer .foot-brand{ display: block; }
.site-footer .foot-lockup{
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
  text-transform: none;
  color: var(--tlfoot-ink);
  white-space: nowrap;
}
.site-footer .foot-mark{ width: 26px; height: 26px; flex: none; display: inline-block; line-height: 0; }
.site-footer .foot-mark svg{ display: block; width: 100%; height: 100%; overflow: visible; }
/* Stroked in the footer's own ink rather than an inverted <img>, so the mark is
   correct in every theme — the same fix the toolbar got. */
.site-footer .foot-mark .ink{ fill: none; stroke: var(--tlfoot-ink); }
.site-footer .foot-mark .loop{ stroke-dasharray: 100; stroke-dashoffset: 0; }
.site-footer .foot-mark .wk{ opacity: 1; }

.site-footer .foot-desc{
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  color: var(--tlfoot-link);
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 38ch;
  margin: 12px 0 0;
}

/* ---------- Link columns ---------- */
.site-footer .foot-col{ display: flex; flex-direction: column; align-items: flex-start; }
.site-footer .foot-k{
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tlfoot-key);
  margin: 0 0 14px;
}
.site-footer .foot-col a{
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--tlfoot-link);
  padding: 6px 0;
  transition: color 180ms var(--tlfoot-ease);
}
.site-footer .foot-col a:hover{ color: var(--tlfoot-link-hover); }
.site-footer .foot-col a[aria-current="page"]{ color: var(--tlfoot-ink); }

/* ---------- Base bar ---------- */
.site-footer .foot-base{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 24px;
  border-top: 1px solid var(--tlfoot-hairline);
  padding-top: 18px; padding-bottom: 22px;
}
.site-footer .foot-legal{
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 0.8rem; color: var(--tlfoot-legal); margin: 0;
}
.site-footer .foot-base-links{ display: flex; align-items: center; gap: 24px; }
.site-footer .foot-base-links a{
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 500; font-size: 0.85rem; letter-spacing: 0; text-transform: none;
  text-decoration: none;
  color: var(--tlfoot-link);
  transition: color 180ms var(--tlfoot-ease);
}
.site-footer .foot-base-links a:hover{ color: var(--tlfoot-link-hover); }

/* ---------- Focus ---------- */
.site-footer a:focus-visible{
  outline: 2px solid var(--tlfoot-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Responsive ----------
   1000px: the two link columns sit side by side under the brand block.
   560px:  everything stacks, and the base bar goes to two lines. */
@media (max-width: 1000px){
  .site-footer .foot-grid{
    grid-template-columns: 1fr 1fr;
    gap: 30px clamp(24px, 5vw, 48px);
  }
  .site-footer .foot-brand{ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .site-footer .foot-grid{ grid-template-columns: 1fr; gap: 26px; }
  .site-footer .foot-base{ justify-content: flex-start; }
  .site-footer .foot-desc{ max-width: none; }
}

/* ==========================================================================
   STACK WORLD TYPEFACES. Grep marker: tl-stack-chrome-typeface
   --------------------------------------------------------------------------
   ADDITIVE OVERRIDE, scoped to .tl-foot--stack only. The base footer keeps
   Bricolage Grotesque and Hanken Grotesk for every other theme, which is
   deliberate: the verticals are meant to look different from one another.

   On the five Stack pages the chrome joins that world's one-family system.
   Everything that reads as running text becomes Schibsted Grotesk. The one
   exception is .foot-k, the column key: it is 11.5px, uppercase, tracked at
   0.13em, which is the Stack world's .mono treatment (tls-stack.css sets
   .mono to var(--f-mono) at 11.5px / 0.14em / uppercase), so it takes Geist
   Mono rather than the sans.
   ========================================================================== */
.site-footer.tl-foot--stack .foot-lockup,
.site-footer.tl-foot--stack .foot-desc,
.site-footer.tl-foot--stack .foot-col a,
.site-footer.tl-foot--stack .foot-legal,
.site-footer.tl-foot--stack .foot-base-links a{
  font-family: var(--f-sans, "Schibsted Grotesk", system-ui, -apple-system, sans-serif);
}
.site-footer.tl-foot--stack .foot-k{
  font-family: var(--f-mono, "Geist Mono", ui-monospace, SFMono-Regular, monospace);
}