/* ==========================================================================
   Footer — gemeten: vier banen.
   1) crème CTA-baan met tekst links (Montserrat 38/600 lh57) en beeld rechts
   2) witte baan met logo, menu en telefoonnummer + Instagram-icoon
   3+4) twee crème regels van 50px hoog
   ========================================================================== */

/* --- 1. CTA ------------------------------------------------------------ */
.footer__cta {
  background: var(--kleur-creme);
  padding-inline: 142px;         /* gemeten op 1425px breed */
}
.footer__cta-grid {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.footer__cta-tekst {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ruimte-md);
  align-items: flex-start;
  padding-block: var(--ruimte-lg);
}
.footer__cta-kop {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  line-height: 1.5;              /* gemeten 57px op 38px */
  color: var(--kleur-zwart);
}
.footer__cta-beeld {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.footer__cta-beeld img { width: 500px; height: 300px; object-fit: cover; }

/* --- 2. Midden --------------------------------------------------------- */
.footer__midden {
  background: var(--kleur-wit);
  padding: 40px var(--rand-zij);
}
.footer__rij {
  display: flex;
  align-items: center;
  gap: var(--ruimte-md);
  padding-bottom: 30px;
}
.footer__logo { flex: 0 1 auto; min-width: 0; }
.footer__logo img { width: 144px; height: auto; }

/* Gemeten: op tablet blijft de rij horizontaal, maar het menu breekt af en
   de kolommen krimpen mee. Daarom min-width:0 en flex-wrap op de lijst. */
.footer__nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.footer__nav .nav__lijst { flex-wrap: wrap; justify-content: center; }
/* Gemeten: footermenu gebruikt Inter 17/500 — een ander font dan het hoofdmenu */
.nav__lijst--footer .nav__link {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
}

.footer__telefoon {
  flex: 0 1 auto;
  min-width: 0;
  text-align: end;
}
.footer__telefoon a {
  font-family: var(--font-knop);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.footer__social { display: flex; justify-content: flex-end; }
.footer__social a { display: block; padding: 4px; }
.footer__social svg {
  width: 35px;
  height: 35px;
  fill: rgb(105, 114, 125);       /* gemeten kleur van het icoon */
  transition: fill var(--transitie);
}
@media (hover: hover) and (min-width: 1025px) {
  .footer__social a:hover svg { fill: var(--kleur-taupe); }  /* gemeten hover */
}

/* --- 3+4. Onderregels -------------------------------------------------- */
.footer__onder {
  background: var(--kleur-creme);
  padding-inline: var(--rand-zij);
}
.footer__onder-regel {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 10px;
  font-size: var(--tekst-body);
  text-align: center;
}
.footer__onder-regel strong { font-weight: 700; }
/* "ForwardX" staat naast de link en is bewust géén link, maar wel vet —
   in het origineel staan beide woorden in een <strong>. */
.footer__merk { font-weight: 700; }
.footer__onder-regel a { text-decoration: none; }
@media (hover: hover) and (min-width: 1025px) {
  .footer__onder-regel a:hover { text-decoration: underline; }
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
  .footer__cta { padding-inline: var(--rand-zij); }
  .footer__cta-kop { font-size: 30px; }
  .footer__cta-beeld img { width: 100%; height: auto; }
}
@media (max-width: 767px) {
  .footer__cta-grid { flex-direction: column; gap: var(--ruimte-md); }
  .footer__cta-tekst { align-items: center; text-align: center; }
  .footer__cta-kop { font-size: 27px; }
  .footer__cta-beeld { justify-content: center; }
  .footer__rij { flex-direction: column; padding-bottom: var(--ruimte-md); }
  .footer__nav .nav__lijst { flex-direction: column; text-align: center; }
  .footer__telefoon { text-align: center; }
  .footer__social { justify-content: center; }
  .footer__onder-regel { flex-wrap: wrap; }
}