/* O11 — Footer over-ons (navy-950). Spiegel van css/sections/s10.css onder de
   oa-footer-klassefamilie, omdat de over-ons shell s10.css niet laadt.
   Drie kolommen (1.4fr 1fr 1fr) met verticale scheidingslijnen gecentreerd
   in de gap; op tablet/mobiel stapelen de kolommen en worden de lijnen
   horizontaal. Nieuw t.o.v. s10: adresregel (meerregelig, icoon lijnt op de
   eerste regel) en de Google-rating-regel met vijf sterren. Kleur uitsluitend
   via tokens. */

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

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

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

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

/* Verticale lijn, gecentreerd in de kolom-gap; loopt de volle rijhoogte mee */
.oa-footer-col + .oa-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 ---------- */

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

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

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

.oa-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 .oa-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. Identiek recept aan .footer-legal in css/sections/s10.css.
   Er stond hier geen regel, dus geen oude waarde. */
.oa-footer-legal {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted-inv);
}

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


/* AFBREEKKANS BIJ HET SCHEIDINGSTEKEN (Timo, 23 augustus 2026)
   Zelfde ingreep en zelfde reden als .footer-legal-sep::after in
   css/sections/s10.css; de volledige meting en onderbouwing staat daar. Kort:
   de regel heeft geen spaties rond het scheidingsteken, dus de drie laatste
   links vormen samen EEN onbreekbaar woord dat op 320px 1,5px buiten het scherm
   steekt. De U+200B hieronder is de afbreekkans die daar ontbreekt.
   Er stond hier geen afbreekregel, dus geen oude waarde. */
.oa-footer-legal .oa-footer-legal-sep { margin-inline: 6px; }
.oa-footer-legal .oa-footer-legal-sep::after { content: "\200B"; }

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

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

.oa-footer .oa-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 ---------- */

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

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

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

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

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

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

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

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

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

/* Adresregel kan over twee regels lopen: icoon lijnt op de eerste tekstregel */
.oa-footer-contactlist .oa-footer-addr {
  align-items: flex-start;
}
.oa-footer-contactlist .oa-footer-addr .oa-footer-ico {
  margin-top: 3px;
}

/* Google-rating: vijf kleine sterren + regel, sterren in oranje vulling */
.oa-footer-stars {
  display: inline-flex;
  gap: 2px;
  flex: none;
  color: var(--orange-500);
}

.oa-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
   .oa-footer-contactlist a-regels hierboven. Er stond hier nog geen linkregel, dus geen oude waarde. */
.oa-footer-ratinglink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

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

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

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

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

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

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

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

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

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

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

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