/* ═══════════════════════════════════════════════════════════════════════════════════
   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; }

/* ─── Openingsblok: minder dode ruimte boven de tekst ──────────────────────────────── */
/* site.css maakt het openingsblok precies één scherm hoog en zet de tekst onderin. De
   lege bovenkant groeit dan mee met het venster: 177 px op een laptop, 202 px op een
   telefoon en ruim 350 px op een scherm van 1080 px hoog. Het blok is nu zo hoog als zijn
   eigen inhoud en houdt een vaste afstand tot de balk bovenaan (84 px), zodat de ruimte
   boven de tekst op elk scherm gelijk blijft. De ondergrens houdt het blok royaal genoeg
   als er weinig tekst in staat. */
.hero { min-height: 32rem; }
.hero-content { padding-top: calc(84px + 2.5rem); }
@media (max-width: 640px) {
  .hero-content { padding-top: calc(84px + 2rem); }
}

/* ─── Een verwijzing in een activiteitenkaart ──────────────────────────────── */
/* De podcastkaart verwijst naar Spotify. site.css kleurt alleen de links in het menu en de
   voettekst, dus zonder deze regel krijgt die verwijzing de onderstreepte standaardkleur van
   de browser midden in een zandkleurige kaart. */
.act-card p a { color: var(--kp-link); font-weight: 500; text-decoration: underline; }
.act-card p a:hover { color: var(--kp-link-hover); }

/* ─── Het logo in de kop: zo groot als de balk toelaat ─────────────────────────────── */
/* site.css perste het logo in een vierkant van 76 bij 76 px. Het aangeleverde logo is liggend
   (300 bij 200 px) en heeft brede witranden, dus "contain" schaalde het naar 76 bij 51 px en
   van het beeldmerk bleef er 29 px over: een vlekje naast de naam. Nu stuurt de HOOGTE en
   volgt de breedte het beeld zelf. De balk blijft precies even hoog (84 px) en het logo wordt
   niet breder dan het vierkant dat er stond, dus aan de rest van de site verschuift niets.
   De max-breedte vangt een liggend logo op dat een beheerder later kiest: dat blijft binnen
   200 px en duwt het menu dus niet weg. */
.logo-svg { width: auto; height: 72px; max-width: 200px; }

@media (max-width: 640px) {
  /* Deze regel moet er staan: site.css zet in dezelfde media-query 64 bij 64 px, en zonder
     een eigen mobiele regel wint de regel hierboven (hij staat later) ook op de telefoon. */
  .logo-svg { width: auto; height: 64px; max-width: 150px; }
}