/* ═══════════════════════════════════════════════════════════════════════════
   contrast-goud.css — het merkgoud leesbaar maken zonder het merk te veranderen
   [CONTRAST-GOUD-20260920]
   ───────────────────────────────────────────────────────────────────────────
   Gemeten 20-09-2026 met een echte browser over drie sites (safesanitair.nl,
   veiligbaden.nl, sanisafebadkamers.nl): 130 contrastfouten, waarvan vier teksten
   met EXACT dezelfde kleur als hun eigen achtergrond — waaronder een kop van 29px
   ("Zie uw nieuwe badkamer in 30 seconden") die dus nooit iemand heeft gezien.

   Eén misverstand zat erachter. #e3bd5f is de kleur uit SaniSafelogo.svg: prachtig
   op donker, maar te licht om witte tekst te dragen (1,79:1) en te licht om zelf op
   een lichte pagina te lezen (1,61:1). Die kleur was via klant-config.json als
   `primary` én — via klant-brand-vars.php, dat --cta uit `primary_logo` afleidt —
   als knopkleur in gebruik.

   De kern is daarom in de GEGEVENS opgelost (klant-config.json):
       primary   #856326   tekst op licht 4,95:1 · wit erop 5,51:1
       accent    #8F6124   stuurt --cta aan  · wit erop 5,38:1
       secondary #9A6A2C   einde van de koptekst-gradient · wit erop 4,70:1
       logo      #e3bd5f   ONGEMOEID, en beschikbaar als --goud-op-donker
   Dit bestand doet de rest: losse plekken waar een kleur hard in de CSS of in een
   inline stijl staat.

   🪤 WAAROM EEN EIGEN BESTAND: design-system.css zegt in zijn kop "wordt geladen NA
      andere stylesheets zodat het wint", maar in includes/head.php staat hij júist
      vóór styles.css. Regels met gelijke gewichten verloren daardoor stilletjes.
      Dit bestand wordt wél als laatste ingeladen; verplaats het niet naar voren.
   🪤 Meet na ELKE wijziging opnieuw: `node stijl-meet.mjs <url>`. Bij het maken
      hiervan sloegen twee regels door naar donker-op-donker doordat de achtergrond
      intussen zelf donker was geworden. Redeneren is hier niet genoeg.
   ─────────────────────────────────────────────────────────────────────────── */

/* Merkgoud op een DONKER vlak. Gebruik dit token zodra de achtergrond donker is
   en var(--primary) zodra hij licht is — dan kan deze fout niet terugkomen. */
:root { --goud-op-donker: #E3BD5F; }          /* 7,4:1 op #362f24 */

/* ── 1. De hoofdknop ──────────────────────────────────────────────────────── */
/* Het oude verloop eindigde op #B8843E: wit haalde daar 3,28:1. Nu 5,38 → 4,70. */
html body .btn-cta,
html body a.btn-cta,
html body button.btn-cta {
    background: linear-gradient(135deg, #8F6124 0%, #9A6A2C 100%) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: #8F6124 !important;
}
html body .btn-cta:hover,
html body a.btn-cta:hover,
html body button.btn-cta:hover {
    background: linear-gradient(135deg, #7d5420 0%, #8F6124 100%) !important;
    color: #fff !important;
}

/* ── 2. Kleine vlakken in een merkkleur dragen WITTE tekst ─────────────────── */
/* Sinds de kleurcorrectie zijn alle merkvlakken donkerbrons, dus de regel is
   eenduidig. Eerder stond hier donkere inkt, berekend op het lichte logogoud. */
html body .werkwijze-num,
/* 🪤 styles.css bevat een eerdere reparatieregel `.viz-cta-badge.viz-cta-badge`
   (twee klassen) die zwaarder weegt dan `html body .viz-cta-badge`. Bij gelijke
   !important wint het zwaarste gewicht, niet de laatste regel. Daarom hier ook
   de klasse verdubbeld. */
html body .viz-cta-badge.viz-cta-badge, html body span.viz-cta-badge.viz-cta-badge,
html body #chatbotBadge, html body span#chatbotBadge,
html body .lead-social-avatars span,
html body .lead-urgency-bar,
html body .ph-btn-secondary, html body a.ph-btn-secondary,
html body #before-after > .container > div > a {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
html body #before-after > .container > div > a {
    background: linear-gradient(135deg, #8F6124 0%, #9A6A2C 100%) !important;
    border-color: #8F6124 !important;
}

/* De garantiebadges stonden op #d9a05a, en wit haalt daar 2,30:1. Kleur ALLEEN
   aanpassen helpt niet, want het vlak verschilt per site. Daarom hier vlak én tekst
   samen vastgelegd: dan is de uitkomst op alle drie de sites dezelfde 5,38:1. */
html body .garantie-badge, html body div.garantie-badge {
    background: #8F6124 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ── 3. Merkgoud als TEKST op een lichte achtergrond ───────────────────────── */
/* #856326 haalt 4,95:1 op het lichte vlak #f6f2ee en 5,51:1 op wit. */
html body .btn-outline, html body a.btn-outline, html body button.btn-outline,
html body .btn-white, html body a.btn-white,
html body .link-arrow, html body a.link-arrow,
html body .brands-strip__kicker,
html body .form-trust,
html body .js-counter-num, html body .js-counter-rest,
html body .trust-content strong, html body .trust-item strong,
html body #before-after > .container > div > span,
html body #before-after .section-kicker,
html body .cookie-banner a, html body .cookie-consent a, html body #cookieBanner a {
    color: #856326 !important;
    -webkit-text-fill-color: #856326 !important;
}
html body .btn-outline, html body a.btn-outline, html body button.btn-outline {
    border-color: #856326 !important;
}

/* Het benadrukte woord in koppen stond in goud op bijna-wit (2,33:1). */
html body h1 em, html body h2 em, html body h3 em,
html body .section-title em, html body .ph-head h2 em {
    color: #856326 !important;
    -webkit-text-fill-color: #856326 !important;
    font-style: normal;                       /* het is een accent, geen citaat */
}

/* ── 4. Vlakken met een eigen achtergrond ─────────────────────────────────── */
/* `.ps-label` ligt op de crème kaart (--accent), dus donkere tekst: 15,7:1.
   🪤 Dit label is drie keer van kleur gewisseld tijdens het repareren, omdat zijn
   achtergrond meeveranderde. Meet hem opnieuw voor je hem aanpast. */
html body .ps-label, html body .ps-label-green,
html body div.ps-label.ps-label-green {
    color: #1a1715 !important;
    -webkit-text-fill-color: #1a1715 !important;
}

/* "Geheel vrijblijvend • Binnen 24 uur reactie" stond in grijs op het bruine
   prijsvlak en viel daar exact mee samen: ratio 1,00. */
html body .pricing-note, html body p.pricing-note {
    color: #f9f6f1 !important;                /* 5,06:1 op #7a6652 */
    -webkit-text-fill-color: #f9f6f1 !important;
    opacity: 1 !important;                    /* stond op .8 */
}
html body .pricing-label, html body span.pricing-label {
    color: #1a1715 !important;                /* 4,6:1 op #8e7d6c */
    -webkit-text-fill-color: #1a1715 !important;
}

/* "Zie uw nieuwe badkamer in 30 seconden" — 29px in exact de kleur van de donkere
   banner eronder. */
html body .viz-cta-banner h2, html body .viz-cta-text h2 {
    color: #f9f6f1 !important;                /* 12,7:1 op #312d29 */
    -webkit-text-fill-color: #f9f6f1 !important;
}
html body .viz-cta-banner p, html body .viz-cta-text p { color: rgba(249,246,241,.88) !important; }

/* De paginakop-ondertitel stond op rgba(255,255,255,.85): 3,90:1 op het brons. */
html body .page-hero p, html body .page-header p {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Het hulpblok onder elk blogartikel staat op var(--secondary), nu brons. */
html body .blog-cta-block, html body .blog-cta-block h3, html body .blog-cta-block p,
html body section > .reveal > div[style*="--secondary"] h3,
html body section > .reveal > div[style*="--secondary"] p {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Projectlabels op het resultatenblok: wit op een groen dat 5,5:1 haalt. */
html body .ba-project-card span, html body .ba-project-card .ba-badge, html body .ba-badge {
    background: #047857 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ── 5. De hero ───────────────────────────────────────────────────────────── */
/* 🪤 De gouden kop is GEEN gewone tekst: hij wordt gevuld met een verloop via
   background-clip:text met een doorzichtige text-fill. Een `color` erop doet dus
   niets — dat kostte een hele ronde. Het verloop liep van #C4873B via wit naar
   #C4873B, en juist die uiteinden vielen weg tegen de foto: gemeten 2,78:1 in
   echte pixels, terwijl 3,0 de norm is bij 51px. Met lichtere uiteinden: 7,3:1.
   De gloed eromheen stond in hetzelfde brons en maakte het waziger; een donkere
   schaduw zet de letters juist af tegen de foto. */
html body .hero-highlight, html body .hero-title .hero-highlight {
    background-image: linear-gradient(90deg, #E8C478 0%, #F7E3B4 40%, #ffffff 50%, #F7E3B4 60%, #E8C478 100%) !important;
    filter: drop-shadow(0 2px 7px rgba(0,0,0,.58)) !important;
}
/* Sluier over de herofoto, zodat de tekst ook klopt waar de foto licht uitvalt. */
html body .hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(28,24,20,.42) 0%, rgba(28,24,20,.28) 45%, rgba(28,24,20,.50) 100%);
    pointer-events: none;
}

/* ── 6. Grijstinten die net te licht waren ────────────────────────────────── */
html body .muted-sm, html body .help-text, html body .form-hint, html body .counter-sub {
    color: #5c5750 !important;                /* was #9ca3af: 2,54:1 */
}
/* Slate-grijs #64748b staat in tientallen INLINE stijlen van gegenereerde pagina's
   en haalt 4,20–4,27:1 — net onder de 4,5 die normale tekst nodig heeft. Een
   attribuutselector vangt precies die, zonder andere grijstinten te raken. */
html body [style*="color:#64748b"], html body [style*="color: #64748b"],
html body [style*="color:#64748B"], html body [style*="color: #64748B"] {
    color: #5b6472 !important;                /* 5,3:1 */
    -webkit-text-fill-color: #5b6472 !important;
}

/* ── Naloop 21-09 bij PRIJZEN-UIT-PAGINACODE-20260921 ──────────────────────
   collectie.php zat niet in de ronde van 20-09. Op veiligbaden staat de
   collectiekaart op een DONKER vlak, en daar viel het donkere merkgoud in weg. */
/* 🪤 Hier stond een regel die .collectie-tag op het lichte logogoud zette. Dat was fout:
   collectie.php bepaalt de chipkleur ZELF al goed — een donkere kaart krijgt wit-op-donker,
   een lichte kaart de pakketkleur als tekst op een getinte achtergrond. Mijn regel maakte van
   de drie lichte kaarten goud-op-licht (1,46:1). Eerst kijken of de pagina het al regelt. */
/* Stapteller van de keuzehulp: 4,25:1 bij 13px, net onder de norm. */
html body #khStepLabel { color: #c9c7c4 !important; }   /* 7,2:1 op #3b3834 */

/* 🪤 design-system.css heeft een regel `.section-kicker, .section-tag, … [class*="tag"]`
   die met !important var(--primary-dark) oplegt. Die vangt ook `.collectie-tag`, en wint
   daarmee van de INLINE stijl die collectie.php zelf zet. Gevolg: de Luxe-chip, die bewust
   wit-op-donker is, kreeg donkergoud op donkerbruin (1,8:1). Hier gericht teruggezet:
   alleen het chipje dat zichzelf een donkere achtergrond geeft. */
html body .collectie-tag[style*="background:#312d29"] {
    color: #fff !important;                     /* 13,2:1 op #312d29 */
    -webkit-text-fill-color: #fff !important;
}