/* =============================================================================
   kleurvlak-c.css — ronde 3: drie uitwerkingen van menu C (Gesplitst).
   Laadt NA intro.css en kleurvlak.css. Variant via klasse op <body>:
     .c1  navy tekstblok · blokken recht, label + titel boven de vouw · witte pillen
     .c2  blauwe tekstregels · blokken recht, label + titel boven de vouw · witte pillen
     .c3  alleen schaduw · alleen de bloktitels boven de vouw · navy pillen
   ========================================================================== */

:root {
  --schuin: 4vw;        /* hoogteverschil van de schuine onderrand */
  --piek: 192px;        /* blok-top tot onderkant kop = 32 + 24 + 16 + 2×44 = 160, + 16 marge + 16 lucht */
}

/* ------------------------------------------------- geen verloop op de foto */
.hero2::after { display: none; }
.hero2__media img { object-position: 50% 30%; }

/* ---------------------------------------------- de vouw: hero + rand + blokken */
.vouw--c { display: block; min-height: 0; }
.vouw--c .hero2 {
  height: calc(100svh - var(--piek));
  min-height: 480px;
  padding: 150px var(--goot) calc(var(--schuin) + 48px);
  /* De schuine onderrand uit de eerste ronde */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schuin)), 0 100%);
}
.vouw--c .hero-rand .regenboog {
  top: calc(var(--schuin) * -1); height: calc(var(--schuin) + 6px);
}
.vouw--c .blokken { margin-top: 16px; padding-bottom: 96px; }
.vouw--c .blok { box-shadow: none; }

/* ------------------------------------------------ menu C: effen pillen */
.sitekop--c .hoofdnav .pil,
.sitekop--c .kop-acties .pil--zoek,
.sitekop--c .utilitybalk a {
  background: #fff; color: var(--kop);
  outline: 0; backdrop-filter: none;
  box-shadow: 0 1px 2px rgb(0 30 60 / .08), 0 6px 18px -8px rgb(0 30 60 / .3);
}
.sitekop--c .hoofdnav .pil:hover,
.sitekop--c .kop-acties .pil--zoek:hover,
.sitekop--c .utilitybalk a:hover { background: var(--primary-100); color: var(--kop); }

/* ================================================================= C1
   Titel op een effen navy blok. */
/* Het blok krimpt tot de breedte van de langste titelregel + padding */
.c1 .hero2__tekstblok {
  display: block; width: fit-content; max-width: 100%;
  padding: 28px 40px 36px;
  background: var(--primary-800); border-radius: var(--r-400);
}
.c1 .hero2 h1 { max-width: none; }
@media (min-width: 761px) {
  /* Elke regel blijft heel, zodat er rechts geen loze ruimte in het blok ontstaat */
  .c1 .hero2 h1 span { white-space: nowrap; }
}
.c1 .hero2__eyebrow { color: var(--primary-100); }

/* ================================================================= C2
   Elke titelregel krijgt een eigen blauwe strook; eyebrow als rood label. */
.c2 .hero2__eyebrow {
  display: inline-block; margin-bottom: 16px; padding: 8px 14px;
  background: var(--rood); color: #fff; border-radius: 8px;
}
.c2 .hero2 h1 { color: #fff; line-height: 1.12; }
.c2 .hero2 h1 span {
  background: var(--primary-500); padding: 0 .18em;
  border-radius: 12px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ================================================================= C3
   Geen vlak, alleen schaduw achter de tekst. Alleen de bloktitels boven de vouw. */
.c3 .hero2__eyebrow,
.c3 .hero2 h1 {
  text-shadow:
    0 1px 2px rgb(0 20 40 / .55),
    0 2px 12px rgb(0 20 40 / .55),
    0 8px 40px rgb(0 20 40 / .7);
}
/* Navy pillen voor het hoofdmenu, utility blijft wit (alleen de eerste C3) */
.c3:not(.c3b) .sitekop--c .hoofdnav .pil,
.c3:not(.c3b) .sitekop--c .kop-acties .pil--zoek { background: var(--primary-800); color: #fff; }
.c3:not(.c3b) .sitekop--c .hoofdnav .pil:hover,
.c3:not(.c3b) .sitekop--c .kop-acties .pil--zoek:hover { background: var(--primary-500); color: #fff; }

/* ================================================================ C3b
   C3 met het witte menu van C2; de blokken schuiven een stuk over de foto. */
.c3b { --overlap: 72px; --piek: 104px; } /* 160 − 72 overlap + 16 lucht */
.c3b .vouw--c .hero2 { padding-bottom: calc(var(--schuin) + 48px + var(--overlap)); }
.c3b .vouw--c .blokken { position: relative; z-index: 3; margin-top: calc(var(--overlap) * -1); }

/* ========================================================= LOGO-HOEK
   C2b en C3b: de witte logotegel zit vast in de linkerbovenhoek van het
   venster — geen afronding aan de kanten die de browserrand raken, alleen
   rechtsonder. */
.logo-hoek .sitekop--c .logo-tegel {
  height: 112px; margin: -20px 0 0 calc(var(--goot) * -1);
  padding: 0 36px 0 var(--goot);
  border-radius: 0 0 16px 0;
}
@media (max-width: 1080px) {
  .logo-hoek .sitekop--c .logo-tegel {
    height: 72px; margin-top: -16px;
    padding: 0 20px 0 var(--goot);
    border-radius: 0 0 16px 0;
  }
}

/* Zonder utility-rij: de menurij lijnt uit op het midden van de logotegel */
@media (min-width: 1081px) {
  .logo-hoek.zonder-utility .kopcluster { margin-top: 12px; }
}

/* Proefbalk met drie schakelaars: de gekozen stand per schakelaar oplichten */
.proefbalk a[aria-current="true"] { background: #fff; color: #111; }

/* ------------------------------------------------------------ mobiel */
@media (max-width: 760px) {
  :root { --schuin: 6vw; }
  .vouw--c .hero2 { height: 72svh; min-height: 0; padding-top: 120px; }
  .c1 .hero2__tekstblok { padding: 20px 24px 24px; }
  .vouw--c .blokken { margin-top: 12px; }
  .c3b { --overlap: 48px; }
}

/* Proefbalk past op een telefoon */
@media (max-width: 760px) {
  .proefbalk { max-width: calc(100vw - 16px); }
  .proefbalk a, .proefbalk button { padding: 0 10px; }
}
@media (max-width: 400px) {
  .proefbalk [data-opnieuw] { font-size: 0; }
  .proefbalk [data-opnieuw]::before { content: "\21BB"; font-size: 16px; }
}