/* Aanvullingen die alleen in WordPress nodig zijn. De opmaak zelf staat in styles.css en cluster.css. */

/* Achtergrond per sectie, te kiezen in de editor */
.is-bg-wit { background: var(--white); }
.is-bg-wit .eyebrow:not(.eyebrow-dark) { background: var(--light-green); }
.is-bg-lichtgroen { background: var(--background); }
.is-bg-lichtgroen .eyebrow:not(.eyebrow-dark) { background: var(--white); }

/* De vaste navigatie schuift onder de WordPress-balk als je bent ingelogd */
.admin-bar .nav-bar { top: 32px; }
@media (max-width: 782px) { .admin-bar .nav-bar { top: 46px; } }

/* Pagina zonder secties: gewone tekst uit de editor */
.page-content { background: var(--white); }

/* Contactformulier: verborgen veld tegen spam en de melding na verzenden */
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-melding { margin: 0 0 24px; padding: 16px 20px; border-radius: 12px; background: var(--performance); color: var(--white); font-family: var(--font-head); font-weight: 600; font-size: 15px; line-height: 1.45; }
.ct-melding.is-fout { background: var(--white); color: var(--primary); }
.ct-form { position: relative; }

/* Werkwijze: illustraties in plaats van foto's. Schaalt mee met het vak (container query), kleuren uit de merkkleuren. */
.ww-shot { container-type: size; }
.ww-illu {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 8%;
  font-family: var(--font-head);
  font-size: clamp(8px, min(2.5cqw, 3.4cqh), 15px);
  background:
    radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--performance) 22%, transparent) 0, transparent 45%),
    var(--secondary);
}
.illu-card {
  width: 100%; max-width: 30em;
  padding: 1.6em;
  border-radius: calc(var(--radius) * .85);
  background: var(--white);
  color: var(--dark);
  box-shadow: 0 1.5em 3em color-mix(in srgb, var(--dark) 28%, transparent);
}
.illu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.3em; }
.illu-top b { font-weight: 700; font-size: 1.25em; }
.illu-pill { padding: .35em .9em; border-radius: 99px; background: var(--light-green); color: var(--secondary); font-weight: 600; font-size: .8em; }
.illu-float {
  position: absolute; right: 6%; bottom: 7%;
  display: flex; align-items: center; gap: .6em;
  padding: .75em 1.1em; border-radius: 99px;
  background: var(--primary); color: var(--white);
  font-weight: 600; font-size: .9em;
  box-shadow: 0 .8em 2em color-mix(in srgb, var(--dark) 30%, transparent);
}
.illu-live { width: .6em; height: .6em; border-radius: 50%; background: var(--performance); box-shadow: 0 0 0 .3em color-mix(in srgb, var(--performance) 30%, transparent); }
.illu-rows, .illu-lines, .illu-form, .illu-variant { display: grid; gap: .8em; list-style: none; margin: 0; padding: 0; }
.illu-rows li { display: grid; grid-template-columns: 1.3em 1fr 38%; align-items: center; gap: .7em; font-size: .92em; font-weight: 500; }
.illu-rows i { width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--performance); }
.illu-rows .is-let i { background: var(--light-green); box-shadow: inset 0 0 0 .2em var(--secondary); }
.illu-rows em, .illu-lines em, .illu-variant em { display: block; height: .6em; border-radius: 99px; background: linear-gradient(90deg, var(--secondary) var(--w), var(--light-green) var(--w)); }
.illu-rows .is-ok em { background: linear-gradient(90deg, var(--performance) var(--w), var(--light-green) var(--w)); }
.illu-plan { display: grid; grid-template-columns: 7.5em repeat(3, 1fr); align-items: center; gap: .8em .4em; font-size: .9em; font-weight: 500; }
.illu-plan small { font-size: .8em; color: var(--secondary); font-weight: 600; }
.illu-plan > span { grid-column: 1; }
.illu-plan em { display: block; height: 1.4em; border-radius: .5em; }
.illu-bar-1 { background: var(--primary); }
.illu-bar-2 { background: var(--performance); }
.illu-bar-3 { background: color-mix(in srgb, var(--secondary) 55%, var(--light-green)); }
.illu-browser { padding: 0; overflow: hidden; }
.illu-chrome { display: flex; align-items: center; gap: .4em; padding: .8em 1em; background: var(--light-green); }
.illu-chrome i { width: .65em; height: .65em; border-radius: 50%; background: color-mix(in srgb, var(--secondary) 45%, var(--light-green)); }
.illu-chrome span { margin-left: .8em; padding: .3em .9em; border-radius: 99px; background: var(--white); font-size: .75em; color: var(--secondary); }
.illu-page { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.4em; padding: 1.6em; }
.illu-lines em { height: 1em; background: var(--dark); width: var(--w); }
.illu-lines em.is-thin, .illu-variant em.is-thin { height: .5em; background: var(--light-green); width: var(--w); }
.illu-btn { justify-self: start; margin-top: .4em; padding: .6em 1em; border-radius: .6em; background: var(--performance); color: var(--white); font-size: .75em; font-weight: 600; }
.illu-form { align-content: start; padding: 1em; border-radius: .7em; background: var(--background); }
.illu-form em { display: block; height: 1.6em; border-radius: .4em; background: var(--white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--secondary) 20%, transparent); }
.illu-form .illu-btn { justify-self: stretch; text-align: center; }
.illu-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.illu-variant { padding: 1em; border-radius: .7em; background: var(--background); gap: .6em; }
.illu-variant small { font-size: .8em; font-weight: 600; color: var(--secondary); }
.illu-variant em { background: var(--dark); width: var(--w); height: .8em; }
.illu-variant.is-win { box-shadow: inset 0 0 0 .15em var(--performance); }
.illu-meter { display: block; height: .5em; margin-top: .4em; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--secondary) 55%, var(--light-green)) var(--w), var(--white) var(--w)); }
.is-win .illu-meter { background: linear-gradient(90deg, var(--performance) var(--w), var(--white) var(--w)); }
.illu-chart { display: block; width: 100%; height: 4em; margin-top: 1.2em; }
.illu-chart polyline { fill: none; stroke: var(--performance); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* Cursorpreview: dezelfde illustratie, verkleind */
.ww-preview .ww-illu { width: 140px; aspect-ratio: 588 / 476; height: auto; border-radius: 12px; overflow: hidden; container-type: size; box-shadow: 0 6px 20px color-mix(in srgb, var(--dark) 30%, transparent); }
.ww-preview .illu-float { display: none; }

/* Footer: knop die eruitziet als de juridische links (Cookie-instellingen van Complianz) */
.footer-knop { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; transition: color .2s var(--ease); }
.footer-knop:hover { color: var(--white); }
.footer-knop:focus-visible { outline: 2px solid var(--performance); outline-offset: 2px; }

/* Cookiemelding (Complianz) in de huisstijl: kleuren uit de merkkleuren, dus ook aan te passen via ACF.
   Accepteren en weigeren even prominent, zoals de AP aanbeveelt. */
.cmplz-cookiebanner, #cmplz-manage-consent {
  --cmplz_banner_background_color: var(--white);
  --cmplz_banner_border_radius: var(--radius);
  --cmplz_text_color: var(--dark);
  --cmplz_hyperlink_color: var(--secondary);
  --cmplz_text_font_size: 13px;
  --cmplz_link_font_size: 13px;
  --cmplz_title_font_size: 16px;
  --cmplz_button_font_size: 15px;
  --cmplz_button_border_radius: calc(var(--radius) * .75);
  --cmplz_button_accept_background_color: var(--primary);
  --cmplz_button_accept_border_color: var(--primary);
  --cmplz_button_accept_text_color: var(--white);
  --cmplz_button_deny_background_color: var(--primary);
  --cmplz_button_deny_border_color: var(--primary);
  --cmplz_button_deny_text_color: var(--white);
  --cmplz_button_settings_background_color: var(--light-green);
  --cmplz_button_settings_border_color: var(--light-green);
  --cmplz_button_settings_text_color: var(--primary);
  --cmplz_category_header_always_active_color: var(--secondary);
  --cmplz_slider_active_color: var(--performance);
  --cmplz_slider_inactive_color: color-mix(in srgb, var(--dark) 45%, var(--white));
  font-family: var(--font-body);
}
.cmplz-cookiebanner .cmplz-title, .cmplz-cookiebanner .cmplz-btn, .cmplz-cookiebanner .cmplz-category-title { font-family: var(--font-head); font-weight: 600; }
.cmplz-cookiebanner .cmplz-btn:focus-visible { outline: 2px solid var(--performance); outline-offset: 2px; }
.cmplz-cookiebanner { box-shadow: 0 1.5em 3em color-mix(in srgb, var(--dark) 22%, transparent) !important; }

/* Alleen voor schermlezers (standaardklasse van WordPress, o.a. gebruikt door Complianz) */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Reviews: sterren afgesneden op de score, en rijen van drie kaarten */
.dg-sterren { display: inline-block; overflow: hidden; vertical-align: middle; line-height: 0; }
.dg-sterren img { display: block; max-width: none; }
.rv-score .dg-sterren { display: block; }
.rv-card .dg-sterren { align-self: flex-start; }
.rv-card.rv-span-4 { grid-column: span 4; }
.rv-card.rv-span-6 { grid-column: span 6; }
.rv-card.rv-span-12 { grid-column: span 12; }
@media (max-width: 1100px) {
  .rv-card.rv-span-4 { grid-column: span 6; }
}
@media (max-width: 900px) {
  .rv-card.rv-span-4, .rv-card.rv-span-6, .rv-card.rv-span-12 { grid-column: auto; }
}