/* ═══════════════════════════════════════════════════════════════════════════════════
   Aanvullingen op site.css. Laadt NA site.css en corrigeert dat blad; alles hier is
   ofwel een huisstijlkleur die vanuit /beheer instelbaar moet zijn, ofwel opmaak voor
   iets dat de oude site niet had (cookiemelding, overslaan-naar-inhoud, foutpagina).
   ⛔ Geen enkele regel hier zet een foto als achtergrond: elke foto op deze site is een
   echte <img> met een alt-tekst, gevoed uit de mediabibliotheek.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ─── Huisstijlkleuren die de oude site als losse waarde in de opmaak had ──────────── */
/* De oude site tekende deze als wit met een doorzichtigheid bovenop #1C1E1F. De vaste
   kleuren in BrandColors zijn exact diezelfde mengkleuren, dus er verandert niets aan
   het beeld; wel zijn ze nu alle zeven instelbaar. */
nav { background: var(--kp-header-bg); border-bottom-color: var(--kp-header-border); }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  nav { background: color-mix(in srgb, var(--kp-header-bg) 97%, transparent); }
}
.nav-links a { color: var(--kp-header-text); }
.nav-links a:hover { color: var(--kp-header-accent); }
.nav-cta { background: var(--kp-header-accent) !important; }

footer { background: var(--kp-footer-bg); }
.ft-name { color: var(--kp-footer-heading); }
.ft-brand p { color: var(--kp-footer-text); }
footer h5 { color: var(--kp-footer-subheading); }
footer ul a { color: var(--kp-footer-link); }
footer ul a:hover { color: var(--kp-footer-link-hover); }
.ft-bottom { color: var(--kp-footer-muted); }

@media (max-width: 640px) {
  .nav-links { background: var(--kp-mobile-menu-bg); }
}

/* ─── Openingsblok met een echte foto of film in plaats van het kleurverloop ───────── */
/* ⛔ Zet de beheerder een foto of film achter de openingstekst, dan is dat een echte
   <img> of <video> met een alt-tekst, nooit een background-image: die kan Google niet
   zien, een schermlezer niet voorlezen en een beheerder niet vervangen. */
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media img,
.hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─── Beeldstrook: evenveel kolommen als er tegels met een beeld over zijn ─────────── */
/* ⛔ Haalt een beheerder het beeld van een tegel weg, dan verdwijnt die tegel en telt de
   strook één kolom minder. Met de vaste vier kolommen van site.css bleef er een lege
   kolom staan, en dat is precies het layoutprobleem dat een verwijderbaar beeld niet mag
   veroorzaken. StripSection zet --strip-cols op het aantal zichtbare tegels. */
.strip { grid-template-columns: repeat(var(--strip-cols, 4), 1fr); }
@media (max-width: 640px) {
  /* Op de telefoon blijven het er twee; een oneven laatste tegel pakt de volle breedte,
     zodat er ook bij drie of vijf tegels geen gat naast staat. Die brede tegel krijgt wat
     meer hoogte en snijdt vanuit het midden bij: op 230 px hoog sneed hij de onderste
     helft van een staande tekening weg, en dan stond er een halve tekst op de site. */
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip-item:last-child:nth-child(odd) { grid-column: 1 / -1; height: 320px; }
  .strip-item:last-child:nth-child(odd) img { object-position: center; }
}

/* De tekening in een tegel past zich aan de tegel aan (meet); de rand die dan overblijft
   krijgt dezelfde kleur als de tekening, zodat de tegel één vlak blijft. */
.strip-item > svg { background: var(--mist); }

/* ─── Een beeld op een benoemde plek snijdt bij op ooghoogte ───────────────────────── */
/* site.css zet object-position op 'center top' voor de panelen naast Missie en Werkwijze.
   Dat klopt voor een portretfoto, maar een foto met een tafereel erin verliest dan op een
   telefoon juist het onderwerp: het paneel is daar breed en laag. 35% houdt de gezichten
   in beeld, zowel in het hoge paneel op de laptop als in de lage band op de telefoon. */
.mv-right img.kp-slot-image,
.werk-img img.kp-slot-image { object-position: center 35%; }

/* ⛔ Staat er een FOTO naast de Werkwijze, dan krijgt het kader de verhouding van die foto
   in plaats van de vaste 520 px van het ontwerp. Met die vaste hoogte snijdt de browser een
   liggende foto tot ruim de helft bij, en bij een gespreksfoto vallen juist de mensen aan de
   zijkanten eraf. De schemategening van het ontwerp houdt wel de oude maat. */
.werk-img.kp-slot-photo { height: auto; aspect-ratio: 3 / 2; }

/* ─── Overslaan naar de inhoud (toetsenbord en schermlezer) ────────────────────────── */
.kp-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 400;
  background: var(--ocean-d); color: #fff; padding: .7rem 1.2rem;
  border-radius: 0 0 .6rem 0; font-size: .9rem; text-decoration: none;
}
.kp-skip-link:focus { left: 0; }

/* ─── Taalkiezer: knoppen die er niet zijn nemen geen ruimte in ────────────────────── */
.lang-sw a[hidden] { display: none; }

/* ─── Cookiemelding ───────────────────────────────────────────────────────────────── */
/* Simpel en altijd weg te klikken. Statistieken en kaart laden hoe dan ook, precies
   zoals de oude site het deed; deze melding vertelt dat alleen. */
.kp-cookie {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 300;
  background: var(--white); border: 1px solid var(--sand-d); border-radius: 1rem;
  box-shadow: 0 10px 40px rgba(0,0,0,.16);
  padding: 1rem 1.2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .88rem; color: var(--text);
}
.kp-cookie[hidden] { display: none; }
.kp-cookie-buttons { display: flex; gap: .6rem; flex-shrink: 0; }
.kp-cookie button {
  font-family: 'Outfit', sans-serif; font-size: .85rem; font-weight: 600;
  padding: .55rem 1.3rem; border-radius: 2rem; cursor: pointer; border: 1.5px solid var(--ocean);
}
.kp-cookie .kp-cookie-accept { background: var(--ocean); color: #fff; }
.kp-cookie .kp-cookie-accept:hover { background: var(--ocean-d); border-color: var(--ocean-d); }
.kp-cookie .kp-cookie-decline { background: none; color: var(--ocean-d); }
.kp-cookie .kp-cookie-decline:hover { background: var(--mist); }
@media (max-width: 640px) {
  .kp-cookie { left: .6rem; right: .6rem; bottom: .6rem; flex-direction: column; align-items: stretch; }
  .kp-cookie-buttons { justify-content: stretch; }
  .kp-cookie button { flex: 1; }
}

/* ─── Tekstpagina's en de pagina die niet gevonden is ─────────────────────────────── */
.kp-text-page { padding: 10rem 6rem 6rem; max-width: 900px; }
.kp-text-page h1 {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(2.1rem, 3.3vw, 3.1rem);
  font-weight: 700; line-height: 1.2; color: var(--text); margin-bottom: 1.2rem;
}
.kp-text-page p { color: var(--muted); font-weight: 300; line-height: 1.85; margin-bottom: 1rem; }
.kp-text-page a { color: var(--kp-link); }
.kp-text-page a:hover { color: var(--kp-link-hover); }
@media (max-width: 640px) { .kp-text-page { padding: 7rem 1.4rem 4rem; } }

/* ─── Foto en document uit een shortcode ──────────────────────────────────────────── */
.kp-figure { margin: 1.6rem 0; }
.kp-figure img { width: 100%; height: auto; border-radius: 1rem; display: block; }
.kp-figure figcaption { font-size: .82rem; color: var(--muted); margin-top: .5rem; font-style: italic; }
.kp-document {
  display: inline-block; background: var(--sand); border-radius: .6rem;
  padding: .6rem 1.1rem; color: var(--ocean-d); text-decoration: none; font-weight: 500;
}
.kp-document:hover { background: var(--sand-d); }
.kp-missing-media {
  display: inline-block; background: #FBEAE5; color: #A23A1E;
  border: 1px dashed #F2C9BC; border-radius: .5rem; padding: .4rem .8rem; font-size: .85rem;
}

/* ─── Contactgegevens: echte links in plaats van losse tekst ──────────────────────── */
.cd-row a { color: inherit; text-decoration: none; }
.cd-row a:hover { color: var(--ocean); text-decoration: underline; }
.cd-names { display: flex; flex-direction: column; gap: .15rem; }

/* ─── Kaart in het contactblok (alleen als er een adres is ingevuld) ──────────────── */
.kp-map { margin-top: 1.6rem; border-radius: 1rem; overflow: hidden; border: 1px solid var(--sand-d); }
.kp-map iframe { display: block; width: 100%; height: 300px; border: 0; }

/* ─── Sociale iconen in de footer (alleen als er een adres is ingevuld) ───────────── */
.ft-social { display: flex; gap: .8rem; margin-top: 1.2rem; }
.ft-social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.ft-social a:hover { background: var(--ocean); }
.ft-social svg { width: 18px; height: 18px; fill: var(--kp-footer-link); }
.ft-social a:hover svg { fill: #fff; }