/* =============================================================
   SM Footer Kolommen
   Footer naar de OpenClaw-opzet: brede merk-kolom (logo, korte
   regel, noot, rij sociale icoontjes) + drie linkkolommen, en
   daaronder een smalle onderbalk in het mono-lettertype.
   Licht en donker via de band-keuze; op de concept-pagina klapt
   hij mee met de thema-knop via de brug in sm-boog-hero.css.
   ============================================================= */

.sm-ftk {
  /* licht is de standaard */
  --ftk-bg: #f4f6f5;
  --ftk-ink: #0d1512;
  --ftk-tekst: rgba(13, 21, 18, .75);
  --ftk-stil: rgba(13, 21, 18, .62);
  --ftk-rand: rgba(13, 21, 18, .13);
  --ftk-vlak: rgba(13, 21, 18, .04);
  --ftk-accent: #0f8f74;
  --ftk-mono: ui-monospace, "SF Mono", "Fira Code", "JetBrains Mono", Menlo, monospace;

  box-sizing: border-box;
  background: var(--ftk-bg);
  color: var(--ftk-ink);
  transition: background .4s ease, color .4s ease;
  font-family: "Google Sans", "Product Sans", Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sm-ftk *, .sm-ftk *::before, .sm-ftk *::after { box-sizing: inherit; }

.sm-ftk--donker {
  --ftk-bg: #0a0909;
  --ftk-ink: #ffffff;
  --ftk-tekst: rgba(255, 255, 255, .72);
  --ftk-stil: rgba(255, 255, 255, .58);
  --ftk-rand: rgba(255, 255, 255, .10);
  --ftk-vlak: rgba(255, 255, 255, .04);
  --ftk-accent: #3DC78F;
}

/* Deze footer hoort in de footer-template van de site, net als de kopbalk
   in de header-template. Daarom staat hier GEEN regel meer die de
   footer-locatie dichtzet: dan zou hij zichzelf verbergen. */

/* de groene lijn boven de footer: de sm-balk uit de videokaart-module,
   verloop van groen naar lime */
.sm-ftk-lijn {
  display: block; width: 100%;
  height: var(--ftk-lijn-h, 3px);
  background-image: linear-gradient(-90deg, var(--sm-groen, #10b981) 0%, var(--sm-lime, #d2f65a) 100%);
}
/* de lopende variant: zelfde recept als sm-balk-loop uit de videokaart-
   module (vier kleurstops, 300% breed, 14s lineair rond) */
.sm-ftk-lijn--loop {
  background-image: linear-gradient(90deg,
    var(--sm-groen, #10b981), var(--sm-lime, #d2f65a),
    var(--sm-groen, #10b981), var(--sm-lime, #d2f65a));
  background-size: 300% 100%;
  animation: sm-ftk-balk-schuif 14s linear infinite;
}
@keyframes sm-ftk-balk-schuif { from { background-position: 0 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sm-ftk-lijn--loop { animation: none; } }

/* ---------- de neonbuis ----------
   Zelfde dunne lijn op precies dezelfde plek, maar dan als neon: een
   donkergroene buis die zacht gloeit, met een lichtje dat er steeds
   doorheen trekt. De gekleurde gloed is hier het effect zelf, geen
   schaduw; daarom staat hij er bewust op.
   ::before = de gloed rond de buis (ademt rustig)
   ::after  = het lichtje dat langsloopt */
.sm-ftk-lijn--neon {
  position: relative; overflow: visible;
  background-image: none;
  background-color: var(--ftk-neon-buis, color-mix(in srgb, var(--sm-groen, #10b981) 42%, #04140e));
}
.sm-ftk-lijn--neon::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: 0 0 6px var(--sm-groen, #10b981),
              0 0 16px var(--sm-groen, #10b981),
              0 0 34px var(--sm-groen, #10b981);
  opacity: calc(var(--ftk-neon-kracht, 55) / 100);
  animation: sm-ftk-neon-adem 3.6s ease-in-out infinite;
}
.sm-ftk-lijn--neon::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 26%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--sm-lime, #d2f65a), transparent);
  filter: blur(1px) drop-shadow(0 0 7px var(--sm-lime, #d2f65a));
  animation: sm-ftk-neon-loop var(--ftk-neon-tempo, 5s) linear infinite;
}
@keyframes sm-ftk-neon-loop {
  from { transform: translateX(-130%); }
  to   { transform: translateX(500%); }
}
@keyframes sm-ftk-neon-adem {
  0%, 100% { opacity: calc(var(--ftk-neon-kracht, 55) / 100); }
  50%      { opacity: calc(var(--ftk-neon-kracht, 55) / 145); }
}
@media (prefers-reduced-motion: reduce) {
  .sm-ftk-lijn--neon::before { animation: none; }
  .sm-ftk-lijn--neon::after { animation: none; opacity: .5; }
}

/* ---------- bovenste deel: merk + kolommen ---------- */
.sm-ftk-top {
  max-width: 1180px; margin: 0 auto;
  padding: var(--sm-sectie-ruimte) var(--sm-sectie-zij) 48px;
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 36px 24px;
}

.sm-ftk-logo { display: inline-block; text-decoration: none; }
/* LET OP de dubbele klasse: Elementor zet zelf `.elementor img { height: auto }`
   en dat is even zwaar als een enkele klasse, waardoor het logo op ware grootte
   sprong. Met .sm-ftk ervoor wint onze regel. */
.sm-ftk .sm-ftk-logo img { height: var(--ftk-logo-h, 30px); width: auto; display: block; }
.sm-ftk-logo span {
  font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--ftk-ink);
}

.sm-ftk-credit {
  margin: 22px 0 0; max-width: 400px;
  font-size: var(--sm-tekst, 16px); line-height: 1.65; color: var(--ftk-tekst);
}
.sm-ftk-credit b, .sm-ftk-credit strong { color: var(--ftk-ink); font-weight: 600; }
.sm-ftk-credit a { color: var(--ftk-ink); text-decoration: underline; text-decoration-color: var(--ftk-accent); text-underline-offset: 3px; }
.sm-ftk-noot { margin: 12px 0 0; max-width: 400px; font-size: var(--sm-tekst, 16px); line-height: 1.65; color: var(--ftk-stil); }

/* de rij icoontjes: klein en rustig, licht op bij hover */
.sm-ftk-socials { display: flex; align-items: center; gap: 20px; padding-top: 34px; margin-top: auto; }
.sm-ftk-socials a {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; color: var(--ftk-stil);
  transition: color .2s ease, transform .2s ease;
}
.sm-ftk-socials a:hover { color: var(--ftk-accent); transform: translateY(-2px); }
.sm-ftk-socials svg { width: 18px; height: 18px; fill: currentColor; display: block; }

.sm-ftk-merk { display: flex; flex-direction: column; align-items: flex-start; }

/* de linkkolommen */
.sm-ftk-groep { display: flex; flex-direction: column; gap: 14px; }
.sm-ftk-groep h4 {
  font-family: var(--ftk-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ftk-stil); margin: 4px 0 6px;
}
.sm-ftk-groep a {
  font-size: .95rem; color: var(--ftk-tekst); text-decoration: none;
  width: fit-content; transition: color .2s ease;
}
.sm-ftk-groep a:hover { color: var(--ftk-accent); }

/* ---------- onderbalk: mono, drie zones ---------- */
.sm-ftk-legal {
  border-top: 1px solid var(--ftk-rand);
  font-family: var(--ftk-mono); font-size: .72rem; line-height: 1.5;
  color: var(--ftk-stil); letter-spacing: .02em;
}
.sm-ftk-legal-in {
  max-width: 1180px; margin: 0 auto; padding: 18px 28px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 24px; align-items: center;
}
.sm-ftk-legal .midden { text-align: center; }
.sm-ftk-legal nav { display: flex; gap: 18px; justify-content: flex-end; }
.sm-ftk-legal a { color: var(--ftk-stil); text-decoration: none; transition: color .2s ease; }
.sm-ftk-legal a:hover { color: var(--ftk-ink); }

/* ---------- smaller: kolommen stapelen ---------- */
@media (max-width: 980px) {
  .sm-ftk-top { grid-template-columns: 1fr 1fr; }
  .sm-ftk-merk { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sm-ftk-top { grid-template-columns: 1fr; gap: 0; padding-bottom: 24px; }
  .sm-ftk-merk { padding-bottom: 28px; }
  .sm-ftk-groep { border-top: 1px solid var(--ftk-rand); padding: 24px 0; gap: 12px; }
  .sm-ftk-legal-in {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  }
  .sm-ftk-legal .midden { text-align: left; }
  .sm-ftk-legal nav { justify-content: flex-start; }
}

/* korte tekst van twee of drie regels: gelijk verdelen, geen staartje van twee woorden */
.sm-ftk-credit { text-wrap: balance; }