/* S10 — Footer (navy-950). Harde seam met S9 via 1px navy-700 bovenrand.
   Drie kolommen (1.4fr 1fr 1fr) met verticale scheidingslijnen gecentreerd
   in de gap; op tablet/mobiel stapelen de kolommen en worden de lijnen
   horizontaal. Kleur uitsluitend via tokens. */

.footer {
  background: var(--surface-deep);
  border-top: var(--border-inv);
  color: var(--text-body-inv);
  padding-block: 72px 48px;
}

/* ---------- Grid + scheidingslijnen ---------- */

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  column-gap: var(--gap-lg);
}

.footer-col {
  position: relative;
  min-width: 0;
}

/* Verticale lijn, gecentreerd in de kolom-gap; loopt de volle rijhoogte mee */
.footer-col + .footer-col::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gap-lg) / -2);
  width: 1px;
  background: var(--line-inv);
}

/* ---------- Kolom 1: merk ---------- */

.footer-logo {
  height: 40px;
  width: auto;
}

.footer-tagline {
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-body-inv);
}

.footer .footer-pill { margin-top: 26px; }

.footer-copy {
  margin-top: 22px;
  font-size: 12px;
  color: var(--text-muted-inv);
}

/* Juridische regel (2026-08-11): links naar privacyverklaring.html en
   algemene-voorwaarden.html. Bewust NIET in de hoofdnavigatie maar onder het
   copyright, in dezelfde maat en kleur als .footer-copy, zodat het de stilste
   regel van de footer blijft. Onderstreping is hier nodig omdat base.css
   sitebreed a{text-decoration:none} zet en deze links dezelfde kleur als de
   tekst eromheen dragen; zonder streep zijn ze niet als link herkenbaar.
   Er stond hier geen regel, dus geen oude waarde. */
.footer-legal {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted-inv);
}

.footer-legal a {
  color: var(--text-muted-inv);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .18s ease;
}
.footer-legal a:hover { color: var(--text-strong-inv); }


/* AFBREEKKANS BIJ HET SCHEIDINGSTEKEN (Timo, 23 augustus 2026)
   SEO-audit 23 augustus 2026: op 320px loopt de pagina horizontaal over.
   Nagemeten met Chrome op viewport 320: scrollWidth 322 tegen clientWidth 320
   op /, /over-ons, /rpo, /kennisbank, /cases en /contact, en op alle zes is er
   precies EEN element dat buiten beeld valt, de laatste link van deze regel
   (rect left 220,53 right 321,52).
   OORZAAK. De regel is geschreven zonder spaties rond het scheidingsteken
   (...</a><span class="footer-legal-sep">.</span><a...>), dus voor de
   regelafbreker is "voorwaarden.Cookieverklaring.Cookievoorkeuren" EEN woord
   van 297,5px in een tekstkolom van 272px. Er is nergens om te breken, dus het
   steekt eruit. De margin-inline hierboven maakt geen afbreekkans.
   FIX. Een zero width space (U+200B) als gegenereerde inhoud achter het teken:
   per definitie een afbreekkans, onzichtbaar, nul breedte, en in ::after zodat
   het punt bij de voorgaande link blijft. De span draagt al aria-hidden.
   Nagemeten na deze regel: scrollWidth 320 op alle zes, dus nul overloop.
   Er stond hier geen afbreekregel, dus geen oude waarde. */
.footer-legal .footer-legal-sep { margin-inline: 6px; }
.footer-legal .footer-legal-sep::after { content: "\200B"; }

@media (prefers-reduced-motion: reduce) {
  .footer-legal a { transition: none; }
}

/* ---------- Kolomkoppen (override op h3-basisstijl) ---------- */

.footer .footer-heading {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.4;
  color: var(--text-muted-inv);
  margin: 6px 0 24px;
}

/* ---------- Kolom 2: oplossingen ---------- */

.footer-links {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.footer-links a {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body-inv);
  transition: color .18s ease;
}
.footer-links a:hover { color: var(--text-strong-inv); }

.footer-arrow {
  display: inline-flex;
  align-items: center;
  margin-top: 22px;
  color: var(--orange-500);
  transition: transform .18s ease;
}
.footer-arrow:hover { transform: translateX(4px); }

/* ---------- Kolom 3: contact ---------- */

.footer-contact { font-style: normal; }

.footer-contactlist {
  display: grid;
  gap: 16px;
}

/* BESLISSING Timo 2026-08-11: Google-ratingregel toegevoegd aan de homepage-footer; stond op alle
   zeventien andere pagina's wel en juist niet op de meest bezochte pagina. Deze twee regels zijn
   het s10-equivalent van .oa-footer-stars uit css/over-ons/o11.css regel 163-174, waarden verbatim
   overgenomen zodat beide footerfamilies er identiek uitzien. */
.footer-stars {
  display: inline-flex;
  gap: 2px;
  flex: none;
  color: var(--orange-500);
}

.footer-stars svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* Google-rating is sinds 2026-08-24 een link naar de reviews van de Google-vermelding
   (search.google.com/local/reviews?placeid=...). Sterren en tekst zitten nu samen IN dat anker
   in plaats van los in de li, dus de 12px die de li-gap ertussen zette moet het anker zelf
   meebrengen. Verder verandert er niets: de kleur- en hoverbehandeling komt uit de generieke
   .footer-contactlist a-regels hierboven. Er stond hier nog geen linkregel, dus geen oude waarde. */
.footer-ratinglink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}


.footer-contactlist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body-inv);
}

.footer-contactlist .footer-ico {
  color: var(--text-muted-inv);
  flex: none;
}

.footer-contactlist a { transition: color .18s ease; }
.footer-contactlist a:hover { color: var(--text-strong-inv); }

@media (prefers-reduced-motion: reduce) {
  .footer-links a,
  .footer-contactlist a,
  .footer-arrow { transition: none; }
}

/* ---------- Tablet: kolommen stapelen, lijnen horizontaal ---------- */

@media (max-width: 880px) {
  .footer { padding-block: 56px 44px; }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 44px;
  }

  .footer-col + .footer-col::before {
    top: -22px;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
  }

  .footer .footer-heading { margin-top: 0; }
}

/* ---------- Mobiel ---------- */

@media (max-width: 560px) {
  .footer { padding-block: 48px 36px; }

  .footer-grid { row-gap: 36px; }

  .footer-col + .footer-col::before { top: -18px; }

  .footer-logo { height: 36px; }
}