/* === PVM: color-only patch (zet dit helemaal onderaan) =================== */
:root{
  /* Z/W defaults */
  --pvm-text: #fff;
  --pvm-text-dark: #000;
  --pvm-bg: #ccc;

  /* Grijsfallbacks (iets lichter) */
  --pvm-dark:  #333;
  --pvm-dark-mc:  #333;
  --pvm-mid:   #555;
  --pvm-light: #777;

  /* UI tokens die je code al gebruikt */
  --pvm-border-dark: #999;

  /* Deze twee werden elders aangeroepen maar ontbraken nu */
  --pvm-base-font-size: 16px;
  --pvm-line-height: 1.55;
}

/* Typo fix + alleen de properties die al naar tokens verwijzen */
html { font-size: var(--pvm-base-font-size); }

body {
  color: var(--pvm-text);
  background: var(--pvm-bg);
  line-height: var(--pvm-line-height);
}

/* Alleen kleur-gerelateerd, geen spacing/layout */
hr { border-top: 1px dotted var(--pvm-border-dark); }

/* Als je .zwart-helper bewust lichter wilt houden */
.zwart { background-color: #333; }


.border-dotted {
  border: 2px dotted var(--pvm-border-dark);
}

address.sans p {
  font-family: 'Noto Sans', sans-serif !important;
}

div.sans p,
div.sans ul,
div.sans ol,
div.sans li {
  font-family: 'Noto Sans', sans-serif !important;
}

div.serif p {
  font-family: 'Noto Serif', serif !important; /* regular */
}

.sans ol {
  list-style: decimal;
  list-style-position: outside;
  margin-left: 0.7rem;
  padding-left: 0.7rem;
  margin-bottom: 0; /* standaard geen bottom margin */
  margin-top: 0rem;
}

.sans p  +  ol {
  margin-top: 1rem;
}

.sans ol + p {
  margin-bottom: 1rem;
}

ol li::marker {
  font-weight: 700 !important;     /* nummers vet */
}

.sans li { 
  display: list-item; /* vangt rare resets af */
}

/* Maak de hele card visueel “klikbaar” */
a.card-link {
  text-decoration: none; /* verwijder underline van tekst */
  display: block;
  color: inherit;
}

a.card-link:hover,
a.card-link:focus-visible {
  outline: 2px solid var(--pvm-border-dark);
  outline-offset: 2px;
  text-decoration: none;
}

/* Trek de fixed header gegarandeerd tegen de bovenkant */
.site-header .navbar.fixed-top{
  position: fixed;
  top: 0; left: 0; right: 0;
  margin-top: 0;
  border-top: 0;
  z-index: 1030;                 /* boven de content */
  background-color: var(--pvm-bg, #000); /* geen transparant randje */
  transform: translateZ(0);      /* compositor fix */
  backface-visibility: hidden;
  will-change: transform;
}

/* Vul de Safari safe-area boven de navbar met dezelfde achtergrond */
@supports (padding-top: env(safe-area-inset-top)) {
  .site-header .navbar.fixed-top::before{
    content:"";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top);
    background: inherit;
    z-index: -1;
  }
}

/* Legacy “grijs” classes laten de nieuwe tokens pakken */
.donker-grijs { background-color: var(--pvm-dark) !important;  color: var(--pvm-text) !important; }
.medium-grijs { background-color: var(--pvm-mid) !important;   color: var(--pvm-text) !important; }
.licht-grijs  { background-color: var(--pvm-light) !important; color: var(--pvm-text) !important; }
.donker-grijs a, .medium-grijs a, .licht-grijs a { color: var(--pvm-text) !important; }

.hr-grijs        { border-top: 1px dotted var(--pvm-border-dark) !important; }

.hr-zwart        { border-top: 1px dotted #fff !important; }


.tekst-donker-grijs { color: var(--pvm-dark) !important; }

/* BLAUW */
body.theme--blauw {
  --pvm-dark:  #1ec0f8;
  --pvm-dark-mc:  #000;
  --pvm-bg:    #fff;
  --pvm-text:  #000;   /* leesbaar op licht */
  .zwart { background-color: #000; }
  .hr-zwart        { border-top: 1px dotted #000 !important; }

}

/* GEEL */
body.theme--geel {
  --pvm-dark:  #f1c714;
  --pvm-dark-mc:  #000;
  --pvm-bg:    #fff;
  --pvm-text:  #000;
  .zwart { background-color: #000; }
  .hr-zwart        { border-top: 1px dotted #000 !important; }

}

/* ROOD */
body.theme--rood {
  --pvm-dark:  #ff6042;
  --pvm-dark-mc:  #000;
  --pvm-bg:    #fff;
  --pvm-text:  #000;
  .zwart { background-color: #000; }
  .hr-zwart        { border-top: 1px dotted #000 !important; }

}

/* ROOD */
body.theme--magenta {
  --pvm-dark:  #f072ef;
  --pvm-dark-mc: #000;
  --pvm-bg:    #fff;
  --pvm-text:  #000;
  .zwart { background-color: #000; }
  .hr-zwart        { border-top: 1px dotted #000 !important; }

}

body.theme--groen {
  --pvm-dark:  #46ed4b;
  --pvm-dark-mc: #000; 
  --pvm-bg:    #fff;
  --pvm-text:  #000;
  .zwart { background-color: #000; }
  .hr-zwart        { border-top: 1px dotted #000 !important; }

}

/* Basis van het vierkantje */
#selection .pvm-square {
  width: 15px; 
  height: 15px;
  border: 2px solid var(--pvm-border-dark);
  background: transparent;                 /* leeg standaard */
  display: inline-block;
  margin-right: .5rem;
  vertical-align: -2px;                    /* lijnt met tekst */
  transition: background .15s ease, border-color .15s ease;
}

/* Hover / focus → mid-tint invullen */
#selection .selector .btn-link:hover .pvm-square,
#selection .selector .btn-link:focus-visible .pvm-square {
  background: var(--pvm-mid);
  border-color: var(--pvm-border-dark);
}

/* Actief → dark-tint invullen */
#selection .btn-link.active .pvm-square {
  background: var(--pvm-dark);
  border-color: var(--pvm-border-dark);
}

/* Knopje zelf (alleen binnen #selection), geen schaduw/achtergrond */
#selection .selector .btn-link{
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: inherit;
  cursor: pointer;
  text-decoration: none;                   /* underline alleen op label */
}

/* Alleen in de selectie-buttons */
#selection .btn-link .serif,
#selection .btn-link .serif strong {
  font-family: 'Noto Serif', serif !important;
}

/* Duidelijke focusring (alleen hier) */
#selection .selector .btn-link:focus-visible {
  outline: var(--pvm-focus-outline);
  outline-offset: 2px;
}

/* Underline alleen op de tekst, met nette offset */
#selection .selector .btn-link .readmore {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}

/* Ankers in dit blok krijgen geen extra underline */
#selection .selector {
  text-decoration: none;
}

/* Kaart-links: verwijder standaard rand/hover-stijl */
a.card-link {
  text-decoration: none;   /* geen underline */
  outline: none;           /* geen dun focusrandje */
  box-shadow: none;        /* geen Bootstrap shadow */
  color: inherit;          /* tekstkleur uit blok erven */
  display: block;          /* hele link is klikbaar */
}

/* Hover alleen via achtergrondkleur of cursor, geen rand */
a.card-link:hover {
  text-decoration: none;
  outline: none;
  box-shadow: none;
}

/* Focus (toetsenbord) krijgt een toegankelijke ring */
a.card-link:focus-visible {
  outline: 2px solid var(--pvm-focus-ring); /* jouw themakleur */
  outline-offset: 3px;                      /* ring buiten de kaart */
}