.dlpa-footer {
  background: var(--sec-bg, var(--dlpa-zacht-grijs));
}

.dlpa-footer__offices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding-block: 40px;
}

.dlpa-office__name, 
.dlpa-office__address p {
  font-size: 13px;
  font-weight: var(--dlpa-font-weight-light);
  line-height: 140%;
  letter-spacing: -0.13px;
  color: var(--dlpa-grijs-tekst);
}

.dlpa-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px clamp(14px, 1.8vw, 26px);
  padding-top: 40px;
  font-size: 10px;
  font-weight: var(--dlpa-font-weight-regular);
  line-height: 1.3;
  letter-spacing: -0.1px;
  color: var(--dlpa-grijs-tekst);
  text-align: center;
}

/* Legal fields are rich-text: editing one wraps it in <p>. Keep that <p>
   (and any other block child) at the small legal styling instead of the
   theme's default paragraph size/margins. */
.dlpa-footer__legal-item p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Links in the legal row sit quietly (grey, like the text) and reveal a
   hover state. Works for editor-entered links too (Comma, voorwaarden,
   privacy). */
.dlpa-footer__legal a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.dlpa-footer__legal a:hover,
.dlpa-footer__legal a:focus-visible {
  color: var(--dlpa-blauw);
}

/* Keep "Website by" (entered as <em>) matching the other legal items: upright,
   and the same grey — the base theme's `em { color: #929292 }` is darker. */
.dlpa-footer__legal em,
.dlpa-footer__legal i {
  font-style: normal;
  color: inherit;
}

@media (max-width: 760px) {
  .dlpa-footer__offices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .dlpa-footer__offices {
    grid-template-columns: 1fr;
  }
}

/* Phones: stack the legal row vertically, left-aligned. */
@media (max-width: 600px) {
  .dlpa-footer__legal {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    text-align: left;
  }
}