/* ==========================================================================
   De Schouw — footer huisstijl  (prototype)
   Veilig herstylen: zelfde live markup (.footer-container.group, .footerblocks,
   .footer-trustmarks, #scrollup). Scoped onder body.dsw-modhead.
   Zelfstandig: eigen tokens, zodat de footer ook werkt zonder dsw-header.css.
   ========================================================================== */

body.dsw-modhead .footer-container {
  /* tokens (zelfstandig) */
  --ds:       #3b3b71;
  --ds-deep:  #25254a;
  --ds-green: #25d366;   /* whatsapp */
  --ds-maxw:  1400px;

  background: var(--ds-deep);
  color: #c4c4dd;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 14px; line-height: 1.95;
  -webkit-font-smoothing: antialiased;

  display: grid;
  grid-template-columns: 1.05fr 1.15fr 1fr 1.1fr;
  gap: 0 46px;
  /* horizontale padding centreert de inhoud naar max-breedte (geen extra wrapper nodig) */
  padding: 56px max(24px, calc((100% - 1400px) / 2)) 40px;
}
body.dsw-modhead .footer-container * { box-sizing: border-box; }

/* HARD neutraliseren: de live styles.css legt een vaste smalle breedte / float op de
   footer-kolommen, waardoor de tekst woord-voor-woord afbreekt en er enorme gaten
   ontstaan. Forceer de kolommen terug naar hun volle grid-track-breedte. */
body.dsw-modhead .footer-container > div {
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  float: none !important;
  margin: 0 !important;
}

body.dsw-modhead .footer-container h3 {
  margin: 0 0 14px; color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: .2px;
}
body.dsw-modhead .footer-container a {
  color: #c4c4dd; text-decoration: none; transition: color .12s;
}
body.dsw-modhead .footer-container a:hover { color: #fff; }
body.dsw-modhead .footerblocks a strong { color: #fff; font-weight: 700; }

/* social-icoonrij niet nodig — links onder elkaar via <br> (line-height regelt spacing) */
body.dsw-modhead .footer-container .fontsizetel22 a { font-size: 17px; font-weight: 700; color: #fff; }

/* Font-Awesome icoontjes fallback (prototype heeft geen FA; live wel) */
body.dsw-modhead .footer-container .fa { font-style: normal; }
body.dsw-modhead .footer-container .fa::before {
  content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 6px;
  vertical-align: -2px; background: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
body.dsw-modhead .footer-container .fa-envelope-o::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M3 5h18v14H3zM3 6l9 7 9-7'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M3 5h18v14H3zM3 6l9 7 9-7'/%3E%3C/svg%3E");
}
body.dsw-modhead .footer-container .fa-phone::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11 11 0 0 0 3.4.55 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11 11 0 0 0 .55 3.4 1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11 11 0 0 0 3.4.55 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11 11 0 0 0 .55 3.4 1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
}

/* ---- keurmerken-band (volle breedte onder de kolommen) ---- */
body.dsw-modhead .footer-trustmarks {
  grid-column: 1 / -1;
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
body.dsw-modhead .footer-trustmarks img { width: 62px; height: 62px; object-fit: contain; background:#fff; border-radius: 8px; padding: 4px; }
body.dsw-modhead .footer-trustmarks .review-block { color: #c4c4dd; line-height: 1.5; }
body.dsw-modhead .footer-trustmarks .review-score { color: #ffd166; font-weight: 700; font-size: 15px; }
body.dsw-modhead .footer-trustmarks small { color: #9a9ac0; }

/* ---- zwevende WhatsApp-knop ---- */
body.dsw-modhead #scrollup {
  position: fixed; right: 22px; bottom: 22px; z-index: 950;
}
body.dsw-modhead #scrollup a {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ds-green); color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); text-decoration: none;
}
body.dsw-modhead #scrollup a::before {
  content: ""; width: 32px; height: 32px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 0 0-8.6 15l-1.4 5 5.1-1.3A10 10 0 1 0 12 2zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 1 1 12 20zm4.4-6c-.2-.1-1.4-.7-1.6-.8s-.4-.1-.5.1-.6.8-.8 1-.3.2-.5.1a6.5 6.5 0 0 1-1.9-1.2 7.2 7.2 0 0 1-1.3-1.7c-.1-.2 0-.4.1-.5l.4-.4.2-.4v-.4c0-.1-.5-1.3-.7-1.8s-.4-.4-.5-.4h-.5a1 1 0 0 0-.7.3A2.8 2.8 0 0 0 6.5 9a4.9 4.9 0 0 0 1 2.6 11.2 11.2 0 0 0 4.3 3.8c.6.3 1.1.4 1.5.5a3.5 3.5 0 0 0 1.6.1 2.6 2.6 0 0 0 1.7-1.2 2.1 2.1 0 0 0 .2-1.2c0-.1-.2-.2-.4-.3z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 0 0-8.6 15l-1.4 5 5.1-1.3A10 10 0 1 0 12 2zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 1 1 12 20zm4.4-6c-.2-.1-1.4-.7-1.6-.8s-.4-.1-.5.1-.6.8-.8 1-.3.2-.5.1a6.5 6.5 0 0 1-1.9-1.2 7.2 7.2 0 0 1-1.3-1.7c-.1-.2 0-.4.1-.5l.4-.4.2-.4v-.4c0-.1-.5-1.3-.7-1.8s-.4-.4-.5-.4h-.5a1 1 0 0 0-.7.3A2.8 2.8 0 0 0 6.5 9a4.9 4.9 0 0 0 1 2.6 11.2 11.2 0 0 0 4.3 3.8c.6.3 1.1.4 1.5.5a3.5 3.5 0 0 0 1.6.1 2.6 2.6 0 0 0 1.7-1.2 2.1 2.1 0 0 0 .2-1.2c0-.1-.2-.2-.4-.3z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  body.dsw-modhead .footer-container {
    grid-template-columns: 1fr 1fr; gap: 8px 32px; padding: 44px 24px 32px;
  }
}
@media (max-width: 560px) {
  body.dsw-modhead .footer-container { grid-template-columns: 1fr; gap: 4px; }
  body.dsw-modhead .footer-trustmarks { gap: 16px; }
  body.dsw-modhead #scrollup a { width: 52px; height: 52px; }
}