/* ==========================================================================
   C4 · cs — De eigen toestemmingslaag
   v2.0 · 2026-10-01 (R4) · Natuurlijk Gezonder / B&B Gezond aan Zee
   (v1.0, 2026-08-31, stuurde de markup van een externe cookieplugin; die komt er niet.)
   --------------------------------------------------------------------------
   Prefix: cs-. Laadt op elke pagina. De markup maakt `consent.js`.

   Een balk onderaan, geen venster over de pagina: de site blijft bruikbaar
   zolang er niet gekozen is. De twee knoppen zijn dezelfde knop — zelfde
   maat, zelfde kleur, naast elkaar. Dat is geen vormkeuze maar de eis:
   weigeren mag niet moeilijker zijn dan toestaan.
   ========================================================================== */

.cs {
  position: fixed;
  left: var(--ng-s-3);
  right: var(--ng-s-3);
  bottom: var(--ng-s-3);
  z-index: var(--ng-z-overlay);
  max-width: 34rem;
  margin-inline: auto 0;
  padding: var(--ng-s-4) var(--ng-s-5) var(--ng-s-5);
  background: var(--ng-grond);
  color: var(--ng-tekst);
  border: 1px solid var(--ng-lijn-sterk);
  border-radius: var(--ng-radius);
  box-shadow: var(--ng-schaduw-zwevend);
}

/* Op een smal scherm staat onderaan de boekbalk; de vraag komt erboven te staan. */
@media (max-width: 61.99rem) {
  .cs { bottom: calc(4.5rem + env(safe-area-inset-bottom)); max-width: none; }
}

.cs__kop {
  margin: 0 0 var(--ng-s-2);
  font-family: var(--ng-font-display);
  font-size: var(--ng-t-h3);
  font-weight: var(--ng-w-medium);
  line-height: var(--ng-lh-kop);
  color: var(--ng-kop);
}
.cs__kop:focus { outline: none; }
.cs__kop:focus-visible { outline: var(--ng-focus-breedte) solid var(--ng-focus-kleur); outline-offset: var(--ng-focus-offset); }

.cs__tekst {
  margin: 0 0 var(--ng-s-3);
  font-size: var(--ng-t-klein);
  line-height: var(--ng-lh-klein);
  color: var(--ng-tekst);
}
.cs__meer { color: var(--ng-actie); text-decoration: underline; text-underline-offset: .18em; }
.cs__meer:hover { color: var(--ng-actie-hover); }
/* R5 (02-10-2026): de link staat op een eigen regel en was 18 px hoog. Sinds
   het container-ID op de site staat, verschijnt de balk op elke pagina en
   vond de tikvlaktoets hem 17 keer. Breed: 24 px (WCAG 2.5.8); op een smal
   scherm, waar met een vinger wordt getikt: 44 px. */
.cs__meer { display: inline-block; padding-block: .1875rem; }
@media (max-width: 61.99rem) {
  .cs__meer { padding-block: .8125rem; }
}

.cs__knoppen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ng-s-3);
  margin-top: var(--ng-s-4);
}
.cs__knoppen:has(> :only-child) { grid-template-columns: 1fr; }

/* Eén knopvorm voor beide keuzes. */
button.cs__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .625rem var(--ng-s-4);
  border: 1px solid var(--ng-groen-900);
  border-radius: var(--ng-radius);
  background: var(--ng-grond);
  color: var(--ng-groen-900);
  font-size: var(--ng-t-klein);
  font-weight: var(--ng-w-half);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
button.cs__knop:hover,
button.cs__knop:focus { background: var(--ng-munt-050); color: var(--ng-groen-900); }
/* In het voorkeurenpaneel: de huidige keuze is te zien, zonder dat de andere knop kleiner of valer wordt. */
button.cs__knop[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ng-groen-900); }

@media (prefers-reduced-motion: no-preference) {
  .cs { animation: cs-op .2s ease-out; }
  @keyframes cs-op { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
}