/* ============================================================
   RIET QUADEN MAKELAARS — chrome: header, menu-melding, footer

   Header: klassiek gecentreerd (logo boven, menuregel eronder, rode bies).
   Bij scrollen condenseert hij naar één rij (logo links, menu rechts).
   De hoogtes staan hier als variabelen; de kinderen hangen aan de BOVENkant
   van de balk, zodat hun eindpositie niet meebeweegt met de hoogte-animatie
   (chrome.js meet ze en animeert het verschil weg — FLIP).
   ============================================================ */

:root {
  --kop-rust: 140px;    /* twee rijen, boven aan de pagina */
  --kop-compact: 68px;  /* één rij, tijdens scrollen */
  --kop-pad: 24px;
  --link-pad: 6px;      /* verticale ruimte in het klikvlak van een menu-item */
  --link-comp: -2px;    /* zelfde ruimte weer uit de layout gehaald */
}

/* ---------- vaste balk + gereserveerde ruimte (geen CLS, geen sprong) ---------- */
.kop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  background: var(--wit);
  transition: box-shadow 0.45s var(--ease-luxe);
}
.kop.is-compact {
  box-shadow: 0 12px 28px -22px rgba(24, 22, 23, 0.55);
}

/* de ruimte die de vaste balk inneemt: altijd de RUSThoogte, zodat het
   condenseren de pagina nooit verschuift */
.kop__ruimte {
  height: var(--kop-rust);
}

.kop__balk {
  position: relative;
  height: var(--kop-rust);
}
.kop.is-compact .kop__balk {
  height: var(--kop-compact);
}

/* dunne rode bies onder de balk */
.kop__balk::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--rood);
}

.kop__binnen {
  position: relative;
  height: 100%;
  max-width: 1180px;
  margin-inline: auto;
}

/* ---------- logo ---------- */
.kop__logo-houder {
  position: absolute;
  top: 22px;
  left: var(--kop-pad);
  right: var(--kop-pad);
  display: flex;
  justify-content: center;
}
.kop.is-compact .kop__logo-houder {
  top: 17px;
  justify-content: flex-start;
}
.kop__logo {
  display: block;
  border-radius: 3px;
}
.kop__logo img {
  height: 54px;
  width: auto;
}
.kop.is-compact .kop__logo img {
  height: 34px;
}
.kop__logo:focus-visible {
  outline: 2px solid var(--zwart);
  outline-offset: 4px;
}

/* ---------- mailadres in de balk ----------
   In de ruststand staat het logo gecentreerd en is de rechterkant van de
   bovenste rij leeg: daar past een smalle contactregel zonder te dringen.
   Zodra de balk condenseert schuiven logo en menu naar links en rechts en
   is die ruimte er niet meer, dus dan verdwijnt de regel (visibility, niet
   alleen opacity, zodat hij ook uit de tabvolgorde valt). Onder 900px is
   er te weinig breedte; het adres staat dan nog steeds in #contact en in
   de footer. */
.kop__contact {
  position: absolute;
  top: 38px;
  right: var(--kop-pad);
  display: none;
  font-size: var(--fs-klein);
  color: var(--steungrijs);
  transition:
    opacity 0.25s var(--ease-luxe),
    visibility 0.25s var(--ease-luxe);
}
@media (min-width: 900px) {
  .kop__contact { display: block; }
}
.kop.is-compact .kop__contact {
  opacity: 0;
  visibility: hidden;
}
.kop__mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
.kop__mail:hover {
  color: var(--zwart);
  border-bottom-color: var(--rood);
}
.kop__mail:focus-visible {
  outline: 2px solid var(--zwart);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- haarlijn tussen de twee rijen ---------- */
.kop__lijn {
  position: absolute;
  top: 95px;
  left: var(--kop-pad);
  right: var(--kop-pad);
  height: 1px;
  background: rgba(24, 22, 23, 0.12);
  transition: opacity 0.3s var(--ease-luxe);
}
.kop.is-compact .kop__lijn {
  opacity: 0;
}

/* ---------- menu ---------- */
.kop__nav {
  position: absolute;
  top: 107px;
  left: var(--kop-pad);
  right: var(--kop-pad);
  display: flex;
  justify-content: center;
}
.kop.is-compact .kop__nav {
  top: 25px;
  justify-content: flex-end;
}

.kop__lijst {
  display: flex;
  align-items: center;
  gap: 20px;
}
.kop__lijst li {
  display: flex;
  align-items: center;
  gap: 20px;
}
/* rode scheidingsstip tussen de items */
.kop__lijst li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--rood);
  opacity: 0.6;
  flex: none;
}

/* --link-pad maakt het klikvlak ≥ 24px hoog (WCAG 2.5.8); --link-comp haalt
   diezelfde ruimte weer uit de layout, zodat de menuregel niet verschuift */
.kop__link {
  position: relative;
  display: block;
  padding: var(--link-pad) 1px;
  margin-block: var(--link-comp);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--zwart);
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.25s var(--ease-luxe);
}
.kop__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* het lijntje blijft 4px onder de tekst, los van hoe groot het klikvlak is */
  bottom: calc(var(--link-pad) - 4px);
  height: 1px;
  background: var(--rood);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s var(--ease-luxe);
}
.kop__link:hover::after,
.kop__link:focus-visible::after,
.kop__link[aria-current="page"]::after {
  transform: scaleX(1);
}
.kop__link:focus-visible {
  outline: 2px solid var(--zwart);
  outline-offset: 5px;
}

/* ---------- skiplink ---------- */
.kop__spring {
  position: absolute;
  left: var(--kop-pad);
  top: 10px;
  transform: translateY(-180%);
  z-index: 2;
  padding: 10px 18px;
  border-radius: 6px;
  background: var(--zwart);
  color: var(--wit);
  font-size: var(--fs-klein);
  font-weight: 600;
  transition: transform 0.25s var(--ease-luxe);
}
.kop__spring:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--rood);
  outline-offset: 2px;
}

/* ---------- mobiel: blijft twee rijen, alleen compacter ---------- */
@media (max-width: 720px) {
  :root {
    --kop-rust: 110px;
    --kop-compact: 84px;
    --kop-pad: 20px;
  }
  .kop__logo-houder { top: 14px; }
  .kop.is-compact .kop__logo-houder { top: 12px; justify-content: center; }
  .kop__logo img { height: 38px; }
  .kop.is-compact .kop__logo img { height: 34px; }
  .kop__lijn { top: 66px; }
  .kop__nav { top: 78px; left: 8px; right: 8px; }
  .kop.is-compact .kop__nav { top: 54px; justify-content: center; }
  .kop__lijst,
  .kop__lijst li { gap: 12px; }
  .kop__link { font-size: 11.5px; letter-spacing: 0.08em; }
}

@media (max-width: 420px) {
  :root { --link-pad: 7px; --link-comp: -3px; }
  .kop__lijst,
  .kop__lijst li { gap: 9px; }
  .kop__link { font-size: 10.5px; letter-spacing: 0.05em; }
}

/* ============================================================
   MENU-MELDING (modaal kaartje)
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
/* expliciet: [hidden] verliest het van display:flex (LESSEN) */
.modal[hidden] {
  display: none;
}
/* tijdens het dichtvallen mag het kaartje geen klikken meer opvangen */
.modal:not(.is-open) {
  pointer-events: none;
}

.modal__waas {
  position: absolute;
  inset: 0;
  background: rgba(24, 22, 23, 0.5);
  opacity: 0;
  transition: opacity 0.3s var(--ease-luxe);
}
.modal.is-open .modal__waas { opacity: 1; }

.modal__kaart {
  position: relative;
  width: min(100%, 460px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 34px 32px 30px;
  background: var(--wit);
  border-radius: var(--radius);
  box-shadow: var(--schaduw), 0 40px 80px -40px rgba(24, 22, 23, 0.5);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition:
    opacity 0.35s var(--ease-luxe),
    transform 0.45s var(--ease-luxe);
}
.modal.is-open .modal__kaart {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.modal__kaart:focus { outline: none; }
/* rode bies bovenop het kaartje: zelfde familie als de header */
.modal__kaart::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--rood);
}

.modal__sluit {
  position: absolute;
  top: 14px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--steungrijs);
  transition: background-color 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe);
}
.modal__sluit:hover { background: var(--warmgrijs); color: var(--zwart); }
.modal__sluit:focus-visible { outline: 2px solid var(--zwart); outline-offset: 2px; }
.modal__sluit svg { width: 16px; height: 16px; }

.modal__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rood-diep);
  margin-bottom: 10px;
}
.modal__kop {
  font-size: var(--fs-h3);
  margin-bottom: 12px;
}
.modal__tekst {
  color: var(--steungrijs);
  margin-bottom: 8px;
}
.modal__tekst:last-of-type { margin-bottom: 0; }

.modal__hier {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-bottom: 2px;
  font-weight: 600;
  border-bottom: 1px solid var(--rood);
  transition: gap 0.3s var(--ease-luxe);
}
.modal__hier:hover { gap: 12px; }
.modal__hier:focus-visible { outline: 2px solid var(--zwart); outline-offset: 4px; }
.modal__hier[hidden] { display: none; }

/* Het blok waar de melding naartoe scrolt krijgt de focus (chrome.js), zodat
   het toetsenbord verdergaat waar de bezoeker landt in plaats van weer bovenaan.
   Zo'n sectie is zelf niets bedienbaars, dus geen focusring om het hele blok
   (de standaard skiplink-praktijk). Echte knoppen en links houden hun ring. */
main[tabindex="-1"]:focus,
section[tabindex="-1"]:focus { outline: none; }

.modal__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.modal__knoppen .knop { flex: 1 1 180px; }

/* achtergrond stil zetten zolang de melding open staat */
body.modal-open {
  overflow: hidden;
  padding-right: calc(env(safe-area-inset-right, 0px) + var(--scrollbar-comp, 0px));
}
body.modal-open .kop { padding-right: var(--scrollbar-comp, 0px); }

@media (prefers-reduced-motion: reduce) {
  .modal__waas,
  .modal__kaart { transition: none; }
  .modal__kaart { transform: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */

.voet {
  background: var(--warmgrijs);
  border-top: 2px solid var(--rood);
  padding-block: 56px 0;
  font-size: 0.9375rem;
}
.voet a { transition: color 0.25s var(--ease-luxe); }
.voet a:hover { color: var(--rood-diep); }
.voet a:focus-visible { outline: 2px solid var(--zwart); outline-offset: 3px; border-radius: 2px; }

/* ---------- Facebook-tip ---------- */
.voet__tip {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: var(--wit);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(24, 22, 23, 0.05);
}
.voet__tip-badge {
  flex: none;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 4px;
  background: var(--rood-vlak);
  color: var(--wit);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.voet__tip p { margin: 0; }
.voet__tip-kop {
  font-family: var(--font-kop);
  font-size: 1.0625rem;
  font-weight: 600;
}
.voet__tip-link {
  margin-left: auto;
  flex: none;
  font-weight: 600;
  border-bottom: 1px solid var(--rood);
  padding-bottom: 2px;
}

/* ---------- kolommen ---------- */
.voet__raster {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.9fr 0.8fr;
  gap: 40px 36px;
  padding-block: 48px 40px;
}
.voet__kop {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steungrijs);
  margin-bottom: 16px;
}
.voet__logo { height: 52px; width: auto; margin-bottom: 18px; }
.voet__kernwoorden {
  font-family: var(--font-kop);
  font-size: 1.0625rem;
  color: var(--zwart);
  margin-bottom: 12px;
}
.voet__kernwoorden b { color: var(--rood-diep); font-weight: 600; }
.voet__dienst {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.voet__dienst::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rood);
  flex: none;
}

/* Label boven de waarde in plaats van ernaast. Reden: de waarden zijn hier
   lang (IBAN "NL76 RABO 0190 4696 33", de telefoonnummers met icoontje,
   het mailadres met kopieerknopje). Naast een labelkolom van 62px past de
   IBAN niet in de smalste footerkolom en viel "33" op een tweede regel.
   Zo krijgt elke waarde de volle kolombreedte en breekt er niets af, ook
   niet op 360px. Het label is klein en grijs (geen tweede rij hoofdletters
   naast de kolomkop) zodat de regels rustig blijven. */
.voet__lijst li { margin-bottom: 14px; }
.voet__lijst li:last-child { margin-bottom: 0; }
.voet__lijst .voet__label {
  display: block;
  color: var(--steungrijs);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.voet__waarde {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--zwart);
}
.voet__mailregel {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  /* het knopje mag onder het adres vallen op zeer smalle schermen */
  flex-wrap: wrap;
}
.voet__pagina-knop {
  font: inherit;
  color: inherit;
  text-align: left;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
.voet__pagina-knop:hover { color: var(--rood-diep); border-bottom-color: var(--rood); }
.voet__pagina-knop:focus-visible { outline: 2px solid var(--zwart); outline-offset: 3px; }

/* ---------- sponsor SVM ---------- */
.voet__sponsor {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: center;
  gap: 28px;
  max-width: 880px;
  margin-inline: auto;
  padding: 22px;
  background: var(--wit);
  border-radius: var(--radius);
}
.voet__sponsor figure { margin: 0; }
.voet__sponsor img {
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 399;
  object-fit: cover;
  border-radius: 10px;
}
.voet__sponsor-kop {
  font-family: var(--font-kop);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.voet__sponsor p { color: var(--steungrijs); margin: 0; }

/* ---------- partners ---------- */
.voet__partners {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding-block: 32px;
  border-top: 1px solid rgba(24, 22, 23, 0.1);
  margin-top: 34px;
}
.voet__partners-kop { margin-bottom: 0; flex: none; }
.voet__partner-rij {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
/* witte tegels: de logobestanden hebben allemaal een eigen (witte) rand,
   op een tegel valt dat weg en staat de rij netjes in het gelid.
   Alle drie de tegels zijn links naar het profiel van het kantoor bij die
   partner (Funda, Pararius, Facebook), dus ze horen allemaal hetzelfde
   klik- en focusgedrag te hebben. */
.voet__tegel {
  display: grid;
  place-items: center;
  width: 190px;
  height: 72px;
  padding-inline: 18px;
  background: var(--wit);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.3s var(--ease-luxe), transform 0.3s var(--ease-luxe);
}
.voet__tegel:hover,
.voet__tegel:focus-visible {
  box-shadow: 0 10px 24px -16px rgba(24, 22, 23, 0.5);
  transform: translateY(-1px);
}
/* de generieke footer-focusregel (.voet a:focus-visible) zet border-radius
   op 2px; op een tegel moet de ring de tegelvorm volgen, vandaar de
   zwaardere selector */
.voet a.voet__tegel:focus-visible {
  border-radius: 10px;
  outline-offset: 4px;
}
/* de logo-bestanden hebben veel witruimte om het merk heen; funda en
   pararius zijn bijgesneden, het facebook-bestand wordt hier door een
   vaste doos met object-fit: cover op maat gebracht */
.voet__partner {
  height: 32px;
  width: auto;
  max-width: 100%;
  opacity: 0.78;
  filter: saturate(0.85);
  transition: opacity 0.3s var(--ease-luxe), filter 0.3s var(--ease-luxe);
}
.voet__partner--fb {
  width: 152px;
  height: 30px;
  object-fit: cover;
}
.voet__tegel:hover .voet__partner,
.voet__tegel:focus-visible .voet__partner { opacity: 1; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .voet__tegel,
  .voet__tegel:hover,
  .voet__tegel:focus-visible { transition: none; transform: none; }
}

/* ---------- voorwaarden + slotregel ---------- */
.voet__voorwaarden {
  padding-block: 30px 26px;
  color: var(--steungrijs);
  font-size: var(--fs-klein);
  line-height: 1.7;
  /* 78ch mat op ~88 tekens per regel (de ch-eenheid rekent met de smalle "0"),
     ruim boven de huisnorm van 60-75. 62ch komt uit op ~72 tekens. */
  max-width: 62ch;
}
.voet__onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 20px 26px;
  border-top: 1px solid rgba(24, 22, 23, 0.1);
  font-size: var(--fs-klein);
  color: var(--steungrijs);
}
.voet__onder-lijst {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.voet__onder-lijst li { display: flex; align-items: center; gap: 18px; }
.voet__onder-lijst li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--rood);
  opacity: 0.6;
  flex: none;
}

@media (max-width: 980px) {
  .voet__raster { grid-template-columns: 1fr 1fr; gap: 34px; }
  .voet__merk { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .voet { padding-block: 40px 0; }
  .voet__tip { flex-wrap: wrap; gap: 14px; }
  .voet__tip-link { margin-left: 0; }
  .voet__raster { grid-template-columns: 1fr; gap: 34px; padding-block: 38px; }
  .voet__sponsor { grid-template-columns: 1fr; gap: 16px; }
  .voet__partners { gap: 18px; margin-top: 26px; }
  .voet__partner-rij { gap: 22px; }
  .voet__onder { justify-content: flex-start; }
  /* bij afbreken zou een scheidingsstip aan het begin van een regel komen */
  .voet__onder-lijst { gap: 6px 18px; }
  .voet__onder-lijst li { gap: 0; }
  .voet__onder-lijst li + li::before { display: none; }
}