/* ============================================================================
   wf-consent.css — de cookiemelding op de publieke site.

   Stond als inline <style> in _SiteCookieConsent.cshtml. Nu een eigen bestand,
   conform de CSS-architectuur, en met vier dingen rechtgezet die de toestemming
   juridisch waardeloos maakten:

   1. De vinkjes stonden VOORAF AAN. Toestemming die je moet uitzetten is geen
      toestemming — de AVG en de EDPB-richtsnoeren zijn daar expliciet over. Ze
      beginnen nu leeg (zie wf-consent.js).
   2. "Alles accepteren" was een gekleurde knop en "Alleen noodzakelijk" een grijze.
      Weigeren moet even makkelijk en even zichtbaar zijn als accepteren; beide
      knoppen hebben nu exact dezelfde vorm, grootte en gewicht.
   3. Een gemaakte keuze was NIET meer te wijzigen. Intrekken hoort net zo simpel
      te zijn als geven — vandaar de discrete knop linksonder, die pas verschijnt
      nadat de bezoeker gekozen heeft.
   4. Op een donkere site stond er een felwitte balk.

   Kleuren komen uit de merkvariabelen die _SiteLayout.cshtml per klant zet, dus de
   melding past zich vanzelf aan de huisstijl aan.
   ========================================================================== */

.wfcc {
    position: fixed;
    right: 16px;
    bottom: 16px;
    left: auto;
    z-index: 21000;
    width: calc(100vw - 32px);
    max-width: 520px;
    padding: 22px;
    /*  Volgt de hoekafronding die de klant koos (Overige instellingen). De stuurlaag in _SiteLayout
        drukt die sitebreed door, maar mikt op `.box-layout` — en deze melding staat daarbuiten
        (position: fixed, buiten de pagina-schil). Daardoor bleef de cookiemelding op élke site op
        14px staan, ook bij een klant die 30px had ingesteld. Nu leest hij de variabele zelf.
        Zonder klantkeuze bestaat de variabele niet en blijft 14px staan. (Jenny 10-08-2026.) */
    border-radius: var(--wf-radius-card, 14px);
    background: #fff;
    color: #1f2937;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
    font-family: var(--brand-font, system-ui, sans-serif);
}

.wfcc h4 {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.wfcc p {
    margin: 0 0 1rem;
    font-size: .9rem;
    line-height: 1.5;
    color: #4b5563;
}

.wfcc a.wfcc-link {
    color: var(--brand-primary, #2563eb);
    text-decoration: underline;
}

/* ── Voorkeuren ───────────────────────────────────────────────────────────── */
.wfcc-prefs {
    display: none;
    margin: 0 0 1rem;
    padding-top: .75rem;
    border-top: 1px solid #eee;
}

.wfcc.is-prefs .wfcc-prefs { display: block; }

.wfcc-prefs label {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .45rem 0;
    font-size: .88rem;
    color: #1f2937;
    cursor: pointer;
}

.wfcc-prefs input {
    width: 18px;
    height: 18px;
    margin-top: 0;
    flex-shrink: 0;
    accent-color: var(--brand-primary, #2563eb);
}

/*  De titelregel krijgt exact de hoogte van het vakje (18px), zodat kopje en vakje op dezelfde
    middenlijn staan. Met de standaard regelhoogte zakte de titel een paar pixels weg en leek de
    lijst scheef te staan. De uitleg eronder houdt zijn eigen, ruimere regelhoogte. (Jenny 28-08.) */
.wfcc-prefs label > span {
    line-height: 18px;
}

.wfcc-prefs .wfcc-locked {
    color: #6b7280;
    cursor: not-allowed;
}

.wfcc-prefs small {
    display: block;
    margin-top: .25rem;
    font-size: .78rem;
    line-height: 1.4;
    color: #6b7280;
}

/* ── "Uw keuze is bewaard" ────────────────────────────────────────────────────
   Elke wijziging in de vinkjes wordt meteen vastgelegd (zie wf-consent.js). Zonder
   bevestiging voelt dat als "er gebeurt niets"; deze regel is bewust klein en rustig
   en verdwijnt weer vanzelf.                                                     */
.wfcc-saved {
    margin: 0 0 .75rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--brand-primary, #2563eb);
    transition: opacity .2s;
}

.wfcc-saved[hidden] { display: none; }
.wfcc-saved.is-fading { opacity: 0; }

/* ── "U koos voor: …" ─────────────────────────────────────────────────────────
   Bij het opnieuw openen via de cookieknop: de bewaarde keuze bovenin, rustig in een
   licht vlak, met de voorkeuren eronder open om te wijzigen (zie wf-consent.js).   */
.wfcc .wfcc-keuze {
    margin: 0 0 .9rem;
    padding: .6rem .8rem;
    border-radius: 8px;
    background: #f3f4f6;
    color: #1f2937;
    font-size: .85rem;
}
.wfcc .wfcc-keuze b { font-weight: 700; color: inherit; }
.wfcc .wfcc-keuze[hidden] { display: none; }
/*  Donkere melding: de algemene regel voor p maakt de tekst daar lichtgrijs, dus het vlak moet mee donker
    worden. Eén laag gewicht meer dan [data-bs-theme="dark"] .wfcc p, anders wint die. */
[data-bs-theme="dark"] .wfcc .wfcc-keuze { background: rgba(255, 255, 255, .08); color: #e6eaf0; }

/* ── Knoppen ──────────────────────────────────────────────────────────────────
   Accepteren en weigeren zijn met opzet identiek van vorm: zelfde hoogte, zelfde
   letterdikte, zelfde breedte-gedrag. Alleen de kleur verschilt, en de weigerknop
   is niet lichter of kleiner gemaakt. Dat is geen smaak maar een eis.           */
.wfcc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.wfcc-btn {
    flex: 1 1 auto;
    min-height: 44px;
    padding: .65rem 1rem;
    border: 0;
    border-radius: var(--wf-radius-button, 9px);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .12s;
}

.wfcc-btn:hover { filter: brightness(.94); }

.wfcc-accept {
    background: var(--brand-primary, #2563eb);
    color: var(--brand-on-primary, #fff);
}

/* Weigeren: even zwaar en even groot, in een neutrale maar volwaardige kleur —
   niet het lichtgrijze "bijna onzichtbaar" van hiervoor. */
.wfcc-deny {
    background: #374151;
    color: #fff;
}

/* "Voorkeuren" is wél secundair: dat is geen keuze maar een tussenstap. */
.wfcc-prefs-toggle,
.wfcc-save {
    flex: 0 1 auto;
    background: transparent;
    color: #374151;
    box-shadow: inset 0 0 0 1px #d1d5db;
}

.wfcc-save {
    background: var(--brand-primary, #2563eb);
    color: var(--brand-on-primary, #fff);
    box-shadow: none;
    flex: 1 1 auto;
}

.wfcc.is-prefs .wfcc-prefs-toggle { display: none; }
.wfcc:not(.is-prefs) .wfcc-save   { display: none; }

/* ── Keuze wijzigen ───────────────────────────────────────────────────────────
   Verschijnt pas nadat er een keuze is gemaakt. Bewust klein en rustig: hij moet
   altijd bereikbaar zijn, maar niet de aandacht van de site opeisen.            */
.wfcc-reopen {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 20990;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /*  Een rond icoon van 44px, zonder tekst (Tom, 13-09-2026). De pil met "Cookies" erin was 87px
        breed en lag op een telefoon bij bijna elke scrollstand over een link of knop van de pagina;
        een rondje bedekt veel minder en is precies groot genoeg om te raken. Wat hij doet staat in
        zijn aria-label (wf-consent.js), dus schermlezers missen niets. Daarom ook altijd rond, en
        niet meer de knop-afronding van de klant: een vierkantje zonder tekst leest als een fout. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* Volgt de donkere huisstijlkleur van de klant. Dit was een vaste grijstint, waardoor het knopje
       op elke site los van het ontwerp lag. --brand-dark wordt door de gedeelde schil klaargezet voor
       élke template en is per definitie donker, dus witte tekst blijft leesbaar. De doorzichtigheid
       zit op het element zelf (opacity), niet in de kleur — anders werkt de variabele niet. */
    background: var(--brand-dark, #1f2937);
    color: #fff;
    font-family: var(--brand-font, system-ui, sans-serif);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s, background .15s;
}

.wfcc-reopen:hover,
.wfcc-reopen:focus-visible {
    opacity: 1;
}

.wfcc-reopen svg {
    width: 20px;
    height: 20px;
    flex: none;
}

/* Het woord "Cookies" staat nog in de knop (het script zet het erin), maar niet meer in beeld. */
.wfcc-reopen span { display: none; }

/* ── Donkere site ─────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .wfcc {
    background: #1c1f26;
    color: #e6eaf0;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
}

[data-bs-theme="dark"] .wfcc p,
[data-bs-theme="dark"] .wfcc-prefs small { color: #9aa7bd; }
[data-bs-theme="dark"] .wfcc-prefs        { border-top-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .wfcc-prefs label  { color: #e6eaf0; }
[data-bs-theme="dark"] .wfcc-prefs .wfcc-locked { color: #8190a8; }

[data-bs-theme="dark"] .wfcc-deny { background: #e6eaf0; color: #1c1f26; }

[data-bs-theme="dark"] .wfcc-prefs-toggle {
    color: #e6eaf0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

[data-bs-theme="dark"] .wfcc-reopen { background: rgba(230, 234, 240, .82); color: #1c1f26; }
[data-bs-theme="dark"] .wfcc-reopen:hover { background: rgba(230, 234, 240, .95); }

/* ── Klein scherm ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .wfcc {
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        padding: 18px;
    }
    .wfcc-btn { flex: 1 1 100%; }
    .wfcc-reopen { left: 8px; bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .wfcc-btn, .wfcc-reopen { transition: none; }
}

/* ── Ruimte voor de "Cookies"-pil in de footer ────────────────────────────────
   De pil zweeft linksonder mee en schuift onderaan de pagina net boven de onderste
   footerbalk (zie keepClearOfFooter in wf-consent.js). Op een telefoon staat daar de
   contactknop, en die twee liepen door elkaar heen. De footer houdt daarom onderin een
   strook vrij zodra er een pil is — dan staan beide knoppen los van elkaar.
   *:nth-last-child(2) = het inhoudsdeel boven de onderbalk; dezelfde opbouw waar het
   script van uitgaat. (Jenny 28-08-2026.)                                        */
@media (max-width: 991px) {
    body.wfcc-has-pill footer > *:nth-last-child(2) { padding-bottom: 62px; }
}