/* ============================================================
   CHA CHI VERSACI — site-brede opmaak (header, footer, subpagina's)

   Bewust terughoudend. De kleuren van de losse Elementor-widgets
   zijn in de database omgezet (zie _local/remap-kleuren.php), dus
   hier staat alleen wat CSS beter kan: typografie en knoppen.

   Er staat expres GEEN blanket-regel op .elementor-section zijn
   achtergrond — dat zou het licht/donker-ritme van de subpagina's
   platslaan.
   ============================================================ */

body{
  font-family:'Nunito',sans-serif;
  font-weight:600;
  color:var(--text);
}

h1,h2,h3,h4,h5,h6,
.elementor-heading-title{
  font-family:'Fredoka',sans-serif;
  font-weight:600;
}

/* Knoppen krijgen de "indrukbare" look uit de sandbox: een pil met een
   massieve schaduw eronder die bij het indrukken wegzakt.

   LET OP: --on-accent is berekend uit de echte helderheid van het
   groen. Bij #5AEA01 is dat DONKERE tekst, niet wit — wit is op
   dit groen onleesbaar. Niet handmatig op #fff zetten.

   De schaduw staat bewust in een halfdoorzichtig donker in plaats van een
   vaste kleur: zo werkt hij op een witte knop, een groene knop én op de
   groene banden, zonder per geval een uitzondering. */
.elementor-button,
.elementor-button-link,
.elementor-button-wrapper .elementor-button{
  font-family:'Fredoka',sans-serif;
  font-weight:500;
  border-radius:var(--r-pill);
  box-shadow:0 5px 0 rgba(20,33,10,.22);
  transition:transform .22s cubic-bezier(.2,.9,.3,1.4),box-shadow .22s ease;
}
.elementor-button:hover,
.elementor-button-wrapper .elementor-button:hover{
  transform:translateY(3px);
  box-shadow:0 2px 0 rgba(20,33,10,.22);
}
.elementor-button:active,
.elementor-button-wrapper .elementor-button:active{
  transform:translateY(5px);
  box-shadow:0 0 0 rgba(20,33,10,.22);
}

/* Op een diepe sectie mag de schaduw wat dieper, anders valt hij weg. */
.ccv-deep .elementor-button{box-shadow:0 5px 0 rgba(0,0,0,.38)}
.ccv-deep .elementor-button:hover{box-shadow:0 2px 0 rgba(0,0,0,.38)}

/* Focus zichtbaar houden in de nieuwe kleuren */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible{
  outline:3px solid var(--pop);
  outline-offset:3px;
  border-radius:8px;
}

/* ============================================================
   CCV Media Archief — één geheel, geen losse blokken

   Stond hiervoor in themes/hello-elementor/style.css, dus in het
   ouder-thema zelf. Daar wordt het bij elke Hello Elementor-update
   overschreven; vandaar dat het hier staat.

   Kleuren omgezet naar het logo-palet, en Cinzel/Inter vervangen
   door Fredoka/Nunito zodat het bij de rest van de site past.
   ============================================================ */

.ccv-archive-list{
  max-width:880px;
  margin:0 auto;
  background:var(--deep-bg);
  border:1px solid rgba(124,242,36,.18);
  border-radius:var(--r-md);
  overflow:hidden;
}

.ccv-archive-item{
  display:block;
  padding:28px 32px;
  border-bottom:1px solid rgba(246,236,255,.08);
  color:var(--deep-text);
  text-decoration:none;
  transition:background .25s ease,padding-left .25s ease;
}
.ccv-archive-item:last-child{border-bottom:none}
.ccv-archive-item:hover{
  background:rgba(124,242,36,.05);
  padding-left:40px;
  color:var(--deep-text);
}

.ccv-archive-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:12px;
}

.ccv-cat{
  font-family:'Nunito',sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:var(--r-pill);
  border:1px solid;
  background:transparent;
}

.ccv-outlet,
.ccv-date,
.ccv-excerpt{
  font-family:'Nunito',sans-serif;
  color:var(--deep-muted);
}
.ccv-outlet{font-size:10px;letter-spacing:.15em;text-transform:uppercase}
.ccv-date{font-size:10px;margin-left:auto;letter-spacing:.05em}
.ccv-excerpt{font-size:14px;margin:0 0 12px;line-height:1.65}

.ccv-archive-item h3{
  font-family:'Fredoka',sans-serif;
  font-size:clamp(16px,2.2vw,20px);
  font-weight:600;
  color:var(--deep-text);
  margin:0 0 10px;
  line-height:1.4;
  transition:color .25s ease;
}
.ccv-archive-item:hover h3{color:var(--accent-bright)}

.ccv-read-more{
  font-family:'Nunito',sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--deep-accent);
  transition:color .25s ease;
}
.ccv-archive-item:hover .ccv-read-more{color:var(--accent-bright)}

/* ============================================================
   Diepe secties (.ccv-deep)

   Elke landingspagina heeft één diep paarse sectie als accent. Koppen en
   tekst die daar geen eigen kleur hebben, erven de donkere inkt van de
   lichte basis — en dat is op paars onleesbaar. Hier krijgen ze de lichte
   set als standaard.

   Widgets MET een eigen kleur winnen hiervan: Elementor zet die met een
   hogere specificiteit (.elementor-1583 .elementor-element-x .titel).
   Daardoor houden witte kaarten binnen zo'n sectie hun donkere tekst.
   ============================================================ */

.ccv-deep h1,
.ccv-deep h2,
.ccv-deep h3,
.ccv-deep h4,
.ccv-deep h5,
.ccv-deep h6,
.ccv-deep .elementor-heading-title{
  color:var(--deep-text);
}
.ccv-deep p,
.ccv-deep li,
.ccv-deep .elementor-widget-text-editor,
.ccv-deep .elementor-icon-list-text{
  color:var(--deep-muted);
}
.ccv-deep a:not(.elementor-button){color:var(--deep-accent)}
.ccv-deep a:not(.elementor-button):hover{color:var(--accent-bright)}

/* Kaarten binnen een diepe sectie blijven licht met donkere tekst. */
.ccv-deep .elementor-element[class*="elementor-element-"] > .elementor-widget-wrap[style*="background-color: #FFF" i]{color:var(--ink)}

/*
 * Rijtjes met kleine icoonkaartjes (bv. de activiteiten bij de vakantiewoning)
 * vielen uiteen in 7 + 1. Op breed scherm passen ze op één rij; daaronder
 * schalen ze netjes mee in plaats van er eentje los te laten hangen.
 */
@media(min-width:1100px){
  .ccv-deep > .elementor-container,
  .ccv-icon-rij > .elementor-container{
    flex-wrap:nowrap !important;
  }
  .ccv-deep > .elementor-container > .elementor-column,
  .ccv-icon-rij > .elementor-container > .elementor-column{
    flex:1 1 0 !important;
    min-width:0;
  }
}
@media(max-width:1099px){
  .ccv-deep > .elementor-container > .elementor-column,
  .ccv-icon-rij > .elementor-container > .elementor-column{
    flex:1 1 clamp(150px, 22%, 240px) !important;
  }
}

/* ============================================================
   Productkaarten (WooCommerce + Essential Addons)

   De productlijst kwam met een eigen zwarte kaart en een felgroen
   binnenvlak — dat vocht met de rest van de site. Hier krijgt hij
   dezelfde witte kaart met zachte schaduw als de kaarten op de
   homepage, en een groene knop.
   ============================================================ */

.eael-product-list-wrapper,
.eael-product-list-wrapper .eael-product-list-item,
.woocommerce ul.products li.product,
.wc-block-grid__product{
  background:var(--card) !important;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.eael-product-list-wrapper{box-shadow:none;background:transparent !important}

.eael-product-list-wrapper .eael-product-list-item{padding:20px}

.eael-product-list-title,
.eael-product-list-title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Fredoka',sans-serif;
  color:var(--ink) !important;
}
.eael-product-list-price,
.woocommerce ul.products li.product .price{
  color:var(--accent-deep) !important;
  font-weight:700;
}

/* De knop volgt de sandbox: groene pil met donkere tekst. */
.eael-product-list-add-to-cart-button a,
.woocommerce ul.products li.product .button,
.wc-block-grid__product-add-to-cart .wp-block-button__link{
  background:var(--accent) !important;
  color:var(--on-accent) !important;
  font-family:'Fredoka',sans-serif !important;
  border-radius:var(--r-pill) !important;
  box-shadow:0 5px 0 var(--accent-deep);
  text-transform:none !important;
  letter-spacing:.01em !important;
}
.eael-product-list-add-to-cart-button a:hover,
.woocommerce ul.products li.product .button:hover{
  transform:translateY(3px);
  box-shadow:0 2px 0 var(--accent-deep);
}

/* ============================================================
   De witte balk met het logo, boven de footer

   Het logo stond eerst als los vlak in de linkerkolom. Als brede
   witte band leest het rustiger en komt het kleurenlogo beter uit
   tegen het paars eronder.
   ============================================================ */

.ccv-footer-balk{
  background:#fff;
  padding:26px 20px;
  text-align:center;
}
.ccv-footer-balk img{
  display:inline-block;
  width:auto;
  max-width:min(300px,72vw);
  height:auto;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.4);
}
.ccv-footer-balk a:hover img{transform:translateY(-3px) rotate(-2deg)}

/* ============================================================
   Socials in de footer — dezelfde tegels als op de homepage

   De footer had drie verschillende socials-rijen: grote cirkels, een
   losse rij in de linkerkolom en nog een set eronder. Nu één blok,
   met handle en platform erbij zodat je ziet waar je heen gaat.
   ============================================================ */

.ccv-footer-socials{padding:52px 0 44px;font-family:'Nunito',sans-serif;text-align:center}
.ccv-footer-socials .wrap{max-width:1000px;margin:0 auto;padding:0 26px}
.ccv-footer-socials .eyebrow{
  display:inline-block;font-family:'Fredoka',sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--deep-bg);background:var(--deep-accent);
  padding:6px 15px;border-radius:var(--r-pill);margin-bottom:14px;
}
.ccv-footer-socials h3{
  font-family:'Fredoka',sans-serif;font-size:clamp(22px,3vw,32px);font-weight:700;
  color:var(--deep-text);margin:0 0 26px;letter-spacing:-.01em;
}
.ccv-footer-socials .soc-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;
}
.ccv-footer-socials .soc{
  display:block;background:var(--card);border-radius:var(--r-lg);
  padding:22px 14px;text-align:center;text-decoration:none;
  box-shadow:var(--shadow);
  transition:transform .32s cubic-bezier(.2,.9,.3,1.4),box-shadow .32s ease;
}
.ccv-footer-socials .soc:hover{transform:translateY(-7px) rotate(calc(var(--tilt) * 1.4))}
.ccv-footer-socials .soc .si{
  width:52px;height:52px;margin:0 auto 12px;border-radius:18px;
  display:grid;place-items:center;font-size:22px;
  background:var(--accent);color:var(--on-accent);
  box-shadow:0 4px 0 var(--accent-deep);
}
.ccv-footer-socials .soc:nth-child(even) .si{background:var(--pop);color:var(--on-pop);box-shadow:0 4px 0 var(--pop-deep)}
.ccv-footer-socials .soc .cnt{
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;color:var(--ink);
  word-break:break-word;
}
.ccv-footer-socials .soc .plat{font-size:12.5px;color:var(--muted);font-weight:700;margin-top:2px}

@media(max-width:820px){
  .ccv-footer-socials .soc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:520px){
  .ccv-footer-socials .soc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   Nieuwsbriefblok in de footer
   ============================================================ */

.ccv-footer-nieuwsbrief{
  background:var(--deep-bg);
  padding:56px 0 60px;
}
/* Boven uitlijnen, niet centreren: het formulier is een stuk hoger dan de
   tekst, waardoor de kop anders halverwege de velden bleef hangen. */
.ccv-footer-nieuwsbrief .wrap{
  max-width:1180px;margin:0 auto;padding:0 26px;
  display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start;
}
.ccv-footer-nieuwsbrief .nb-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Fredoka',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--deep-bg);background:var(--deep-accent);
  padding:6px 14px;border-radius:var(--r-pill);margin-bottom:14px;
}
.ccv-footer-nieuwsbrief h3{
  font-family:'Fredoka',sans-serif;font-size:clamp(24px,3.2vw,34px);font-weight:700;
  color:var(--deep-text);margin:0 0 10px;letter-spacing:-.01em;line-height:1.14;
}
.ccv-footer-nieuwsbrief p{
  font-family:'Nunito',sans-serif;font-size:15.5px;line-height:1.7;
  color:var(--deep-muted);margin:0;
}
.ccv-footer-nieuwsbrief .nb-punten{
  list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;
}
.ccv-footer-nieuwsbrief .nb-punten li{
  display:flex;align-items:flex-start;gap:11px;
  font-family:'Nunito',sans-serif;font-size:14.5px;line-height:1.55;color:var(--deep-text);
}
.ccv-footer-nieuwsbrief .nb-punten i{
  color:var(--deep-accent);font-size:13px;width:18px;text-align:center;margin-top:3px;flex-shrink:0;
}
.ccv-footer-nieuwsbrief .nb-klein{
  display:flex;align-items:center;gap:8px;
  margin-top:20px;font-size:12.5px;color:var(--deep-muted);
}
.ccv-footer-nieuwsbrief .nb-klein i{color:var(--deep-accent);font-size:11px}

/* Het formulier op een eigen kaart, zodat het loskomt van het paars. */
.ccv-footer-nieuwsbrief .nb-formulier{
  background:rgba(255,255,255,.06);
  border:1px solid var(--deep-border);
  border-radius:var(--r-lg);
  padding:28px 26px;
}

/* Op het paars zijn de labels licht en de velden blijven wit.
   De specificiteit moet hier hoger dan die van de site-brede labelregel
   verderop, anders wint de donkere inkt en lees je niets meer. */
body .ccv-footer-nieuwsbrief .gform_wrapper .gform_fields .gfield .gfield_label,
body .ccv-footer-nieuwsbrief .gform_wrapper .gfield_label,
.ccv-footer-nieuwsbrief .gform_wrapper .gfield_label{
  color:var(--deep-text) !important;
}
body .ccv-footer-nieuwsbrief .gform_wrapper .gfield .gfield_description,
body .ccv-footer-nieuwsbrief .gform_wrapper .gfield_consent_label,
.ccv-footer-nieuwsbrief .gform_wrapper .gfield_description,
.ccv-footer-nieuwsbrief .gform_wrapper .gfield_consent_label{
  color:var(--deep-muted) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
.ccv-footer-nieuwsbrief .gform_wrapper .gform_fields{gap:12px}

@media(max-width:860px){
  .ccv-footer-nieuwsbrief .wrap{grid-template-columns:1fr;gap:24px}
}

/* ============================================================
   Gravity Forms in de huisstijl

   De formulieren kwamen met hun eigen grijze velden en blauwe knop.
   Hier krijgen ze dezelfde vormtaal als de rest: zachte velden met een
   groene rand bij focus, en de groene pil-knop uit de sandbox.
   ============================================================ */

.gform_wrapper form{margin:0}
.gform_wrapper .gform_fields{gap:16px}

/* De oude thema-CSS zette labels op groene kapitalen met !important;
   daarom staat dat hier ook zo. */
.gform_wrapper .gfield_label,
body .gform_wrapper .gform_fields .gfield .gfield_label{
  font-family:'Fredoka',sans-serif !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  color:var(--ink) !important;
  text-transform:none !important;
  letter-spacing:.01em !important;
  margin-bottom:6px;
}

/* Sublabels (Voornaam / Achternaam onder één veld) stonden nog in groene
   kapitalen uit de oude huisstijl. */
.gform_wrapper .gform-field-label--type-sub,
body .gform_wrapper .ginput_complex label,
body .gform_wrapper .gfield .gform-field-label--type-sub{
  font-family:'Nunito',sans-serif !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  color:var(--muted) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}

/* Beschrijvingen zijn geen invoervelden: geen kader eromheen. */
.gform_wrapper .gfield_description,
body .gform_wrapper .gfield .gfield_description{
  border:0 !important;
  background:transparent !important;
  padding:4px 0 0 !important;
  font-family:'Nunito',sans-serif !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}

.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=number],
.gform_wrapper input[type=date],
.gform_wrapper select,
.gform_wrapper textarea{
  width:100%;
  font-family:'Nunito',sans-serif !important;
  font-size:15px !important;
  font-weight:600;
  color:var(--ink) !important;
  background:var(--card) !important;
  border:2px solid var(--border) !important;
  border-radius:var(--r-md) !important;
  padding:13px 16px !important;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus{
  outline:none !important;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 4px var(--pill) !important;
}
.gform_wrapper ::placeholder{color:var(--muted);opacity:1}

.gform_wrapper .gfield_consent_label,
.gform_wrapper .gfield_description{
  font-size:13.5px;
  color:var(--muted);
  line-height:1.5;
}
.gform_wrapper input[type=checkbox],
.gform_wrapper input[type=radio]{accent-color:var(--accent);width:18px;height:18px}

.gform_wrapper .gform_footer{margin-top:18px;padding:0}
/* De oude thema-CSS zette knoppen met !important in kapitalen. */
body .gform_wrapper .gform_footer input[type=submit],
body .gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform_button,
.gform_wrapper input[type=submit]{
  font-family:'Fredoka',sans-serif !important;
  font-size:16px !important;
  font-weight:500 !important;
  text-transform:none !important;
  letter-spacing:.01em !important;
  background:var(--accent) !important;
  color:var(--on-accent) !important;
  border:0 !important;
  border-radius:var(--r-pill) !important;
  padding:14px 30px !important;
  text-transform:none !important;
  letter-spacing:.01em !important;
  cursor:pointer;
  box-shadow:0 6px 0 var(--accent-deep);
  transition:transform .22s cubic-bezier(.2,.9,.3,1.4),box-shadow .22s ease;
}
.gform_wrapper .gform_button:hover,
.gform_wrapper input[type=submit]:hover{
  transform:translateY(3px);
  box-shadow:0 3px 0 var(--accent-deep),var(--glow-accent);
}

.gform_wrapper .gfield_required{color:var(--pop)}
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea{border-color:var(--pop) !important}
.gform_wrapper .validation_message{
  font-size:13px;color:var(--pop-deep);
  background:transparent;border:0;padding:4px 0 0;
}
.gform_confirmation_message{
  font-family:'Fredoka',sans-serif;
  color:var(--accent-deep);
  background:var(--pill);
  border-radius:var(--r-md);
  padding:16px 20px;
}

/* Op een diepe sectie draait het contrast om. */
.ccv-deep .gform_wrapper .gfield_label{color:var(--deep-text) !important}
.ccv-deep .gform_wrapper .gfield_description,
.ccv-deep .gform_wrapper .gfield_consent_label{color:var(--deep-muted)}

.ccv-archive-leeg{
  font-family:'Nunito',sans-serif;
  color:var(--muted);
  text-align:center;
  padding:40px 0;
}

@media(max-width:768px){
  .ccv-archive-item{padding:20px}
  .ccv-archive-item:hover{padding-left:26px}
  .ccv-date{margin-left:0}
}

/* ============================================================
   Cijferstrook op de samenwerkpagina

   Verving de tellers die het aantal samenwerkende partijen en
   mediavermeldingen noemden — getallen die niemand kan nachecken.
   Wat overblijft: volgers, give-aways en de media in woorden.
   ============================================================ */

.ccv-cijfers{font-family:'Nunito',sans-serif}
.ccv-cijfers .wrap{max-width:1080px;margin:0 auto;padding:0 26px}
.ccv-cijfers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ccv-cijfer{
  background:var(--card);border-radius:var(--r-lg);padding:28px 26px;text-align:center;
  box-shadow:var(--shadow);border-bottom:4px solid var(--accent);
}
.ccv-cijfer .getal{
  display:block;font-family:'Fredoka',sans-serif;font-weight:700;
  font-size:clamp(34px,4.4vw,50px);line-height:1;color:var(--ink);letter-spacing:-.02em;
}
.ccv-cijfer .getal .u{color:var(--accent-deep);font-size:.55em;margin-left:2px}
.ccv-cijfer .getal-tekst{font-size:clamp(26px,3.2vw,36px);color:var(--accent-deep)}
.ccv-cijfer .label{
  display:block;margin-top:10px;font-family:'Fredoka',sans-serif;font-size:15px;
  font-weight:600;color:var(--ink);
}
.ccv-cijfer .noot{display:block;margin-top:6px;font-size:12.5px;line-height:1.55;color:var(--muted)}

@media(max-width:820px){.ccv-cijfers-grid{grid-template-columns:1fr}}

/* ============================================================
   Mediaoverzicht

   Was een lijst met alleen tekst; nu kaarten met de voorpagina
   van het artikel of een still uit de uitzending.
   ============================================================ */

.ccv-mediagrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;
  max-width:1180px;margin:0 auto;font-family:'Nunito',sans-serif;
}
.ccv-mediakaart{
  display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-lg);
  overflow:hidden;text-decoration:none;box-shadow:var(--shadow);
  transition:transform .32s cubic-bezier(.2,.9,.3,1.35),box-shadow .32s ease;
}
.ccv-mediakaart:hover{transform:translateY(-6px);box-shadow:0 26px 48px -22px rgba(70,150,0,.45)}
/* De beelden zijn schermafdrukken en zenderlogo's van sterk uiteenlopende
   verhoudingen. Bijsnijden hakt er letters af, dus ze passen zich in het
   vlak in plaats van het te vullen. */
.ccv-mediakaart-beeld{
  aspect-ratio:16/10;overflow:hidden;background:#ffffff;
  border-bottom:3px solid var(--accent);
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.ccv-mediakaart-beeld img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;
  transition:transform .5s cubic-bezier(.2,.9,.3,1.2);
}
.ccv-mediakaart:hover .ccv-mediakaart-beeld img{transform:scale(1.05)}
.ccv-mediakaart-beeld.is-leeg{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--deep-bg),var(--pop-deep));
}
.ccv-mediakaart-beeld.is-leeg span{
  font-family:'Fredoka',sans-serif;font-size:19px;font-weight:600;
  color:var(--deep-accent);letter-spacing:.04em;text-align:center;padding:0 18px;
}
.ccv-mediakaart-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.ccv-mediakaart-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.ccv-mediakaart-meta .soort{
  font-family:'Fredoka',sans-serif;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-deep);background:var(--pill);
  padding:4px 10px;border-radius:var(--r-pill);
}
.ccv-mediakaart-meta .outlet{
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pop-deep);
}
.ccv-mediakaart-meta .datum{margin-left:auto;font-size:12px;color:var(--muted)}
.ccv-mediakaart h3{
  font-family:'Fredoka',sans-serif;font-size:18px;font-weight:600;line-height:1.32;
  color:var(--ink);margin:0 0 9px;
}
.ccv-mediakaart p{font-size:14px;line-height:1.62;color:var(--muted);margin:0 0 16px;flex:1}
.ccv-mediakaart-link{
  display:inline-flex;align-items:center;gap:8px;font-family:'Fredoka',sans-serif;
  font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-deep);
}
.ccv-mediakaart:hover .ccv-mediakaart-link{color:var(--pop-deep)}
.ccv-media-leeg{text-align:center;padding:40px;color:var(--muted)}

@media(max-width:640px){.ccv-mediagrid{grid-template-columns:1fr}}

/* ============================================================
   Chocolade — aankondiging

   De oude repen zijn uit de verkoop. Tot de nieuwe er is staat
   hier één kaart met wat er wél te melden valt.
   ============================================================ */

.ccv-choco{font-family:'Nunito',sans-serif}
.ccv-choco .wrap{max-width:1080px;margin:0 auto;padding:0 26px}
.ccv-choco-kaart{
  display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;
  background:var(--card);border-radius:var(--r-xl);padding:46px 46px;box-shadow:var(--shadow);
}
.ccv-choco .eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:'Fredoka',sans-serif;
  font-size:12.5px;font-weight:600;letter-spacing:.05em;color:var(--pop-deep);
  background:rgba(196,51,240,.12);padding:6px 14px;border-radius:var(--r-pill);margin-bottom:14px;
}
.ccv-choco h2{
  font-family:'Fredoka',sans-serif;font-size:clamp(27px,3.7vw,42px);font-weight:700;
  color:var(--ink);line-height:1.12;letter-spacing:-.01em;margin:0 0 14px;
}
.ccv-choco .squiggle{position:relative;display:inline-block;color:var(--accent-deep)}
.ccv-choco .squiggle::after{
  content:'';position:absolute;left:0;right:0;bottom:-.1em;height:.14em;
  border-radius:var(--r-pill);background:var(--accent);box-shadow:var(--glow-accent);
}
.ccv-choco p{font-size:16.5px;line-height:1.72;color:var(--text);margin:0 0 14px}
.ccv-choco .ccv-choco-klein{font-size:14px;color:var(--muted)}
.ccv-choco-knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.ccv-choco-knoppen a{
  display:inline-flex;align-items:center;gap:9px;font-family:'Fredoka',sans-serif;
  font-size:15.5px;font-weight:500;padding:14px 26px;border-radius:var(--r-pill);
  text-decoration:none;transition:transform .22s cubic-bezier(.2,.9,.3,1.4),box-shadow .22s ease;
}
.ccv-choco-knoppen .kn-groen{background:var(--accent);color:var(--on-accent);box-shadow:0 5px 0 var(--accent-deep)}
.ccv-choco-knoppen .kn-groen:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--accent-deep)}
.ccv-choco-knoppen .kn-rand{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--border)}
.ccv-choco-knoppen .kn-rand:hover{box-shadow:inset 0 0 0 2px var(--accent);transform:translateY(-2px)}
.ccv-choco-beeld{position:relative}
.ccv-choco-beeld img{
  width:100%;border-radius:var(--r-lg);display:block;
  box-shadow:0 22px 40px -22px rgba(20,33,10,.5);
  transform:rotate(calc(var(--tilt) * .8));
  transition:transform .4s cubic-bezier(.2,.9,.3,1.3);
}
.ccv-choco-beeld img:hover{transform:rotate(0deg)}
.ccv-choco-sticker{
  position:absolute;left:-10px;bottom:16px;background:var(--pop);color:var(--on-pop);
  font-family:'Fredoka',sans-serif;font-size:13px;font-weight:600;padding:8px 16px;
  border-radius:var(--r-pill);box-shadow:0 5px 0 var(--pop-deep);transform:rotate(-4deg);
}

@media(max-width:880px){
  .ccv-choco-kaart{grid-template-columns:1fr;gap:28px;padding:30px 24px}
  .ccv-choco-beeld{max-width:320px;margin:0 auto}
}

/* ============================================================
   Het logo in de header

   Was de site-logo-widget van Elementor, die een bijlage-ID leest. Bij een
   verhuizing bestaat dat bestand niet meer en levert de widget een gebroken
   afbeelding op. Een gebroken afbeelding heeft geen eigen hoogte, dus de
   balk klapte open tot een witte lap over het halve scherm.

   Nu een gewone afbeelding uit het thema, met een vaste maximumhoogte zodat
   de balk niet meer van het beeld afhangt.
   ============================================================ */

.ccv-headerlogo{
  display:inline-flex;align-items:center;line-height:0;
  max-height:86px;overflow:hidden;
}
.ccv-headerlogo img{
  max-height:86px;width:auto;height:auto;display:block;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.3);
}
.ccv-headerlogo:hover img{transform:scale(1.04)}

@media(max-width:767px){
  .ccv-headerlogo,
  .ccv-headerlogo img{max-height:52px}
}

/* De header op één regel houden: logo links, menu in het midden, knop
   rechts.

   De vaste kolomverdeling van Elementor (20/60/20) klopt niet meer zodra er
   een menu-item bij of af gaat: het menu breekt af of de knop schuift over
   het laatste item heen. Daarom bepalen de kolommen hier hun eigen breedte
   en pakt alleen het menu de resterende ruimte. */
.ccv-header > .elementor-container{
  flex-wrap:nowrap !important;
  align-items:center;
  gap:18px;
}
.ccv-header > .elementor-container > .elementor-column:first-child,
.ccv-header > .elementor-container > .elementor-column:last-child{
  width:auto !important;
  flex:0 0 auto !important;
}
.ccv-header > .elementor-container > .elementor-column:nth-child(2){
  width:auto !important;
  flex:1 1 auto !important;
  min-width:0;
}
.ccv-header .elementor-nav-menu--main > .elementor-nav-menu{flex-wrap:nowrap}
.ccv-header .elementor-nav-menu--main > .elementor-nav-menu > li > a{white-space:nowrap}

/* De knop mag niet over het laatste menu-item vallen en niet afbreken. */
.ccv-header .elementor-button{white-space:nowrap}

@media(max-width:1100px){
  .ccv-header > .elementor-container{gap:10px}
}

/* ============================================================
   Iconen die eerst emoji waren

   De kaartjes op contact, Spanje en de dienstenpagina's hadden een
   emoji als icoon. Die zijn vervangen door Font Awesome, omdat emoji
   vier bytes zijn en bij het minste tekensetprobleem uit elkaar
   vallen - op de doelomgeving stond er "🤝" waar een handdruk hoorde.

   Een emoji brengt zijn eigen kleur mee, een icoon niet. Vandaar het
   accent, zodat de kaartjes er hetzelfde uitzien als eerst.
   ============================================================ */

.em > .fa-solid,
.em > .fa-brands,
.ccv-ruimte > .fa-solid{
  color:var(--accent-deep);
}

/* Binnen een gekleurd vierkantje volgt het icoon de kleur van dat
   vierkantje; die is daar al gezet. */
.si > .fa-solid,
.si > .fa-brands{color:inherit}

/* In een diepe sectie mag het icoon het lichte accent pakken. */
.ccv-deep .em > .fa-solid,
.ccv-deep .em > .fa-brands{color:var(--deep-accent)}