/* ==========================================================================
   toegankelijkheid.css — 1.1.0
   Auteur: Rik Spreen
   Laatste update: 11-01-2026
   ========================================================================== */

body.grayscale-mode #popup_toegankelijkheid {
  left: 0 !important;
  right: 0 !important;
}

.dyslexic-mode * {
  font-family: 'Lexend', Arial, sans-serif !important;
}

.dyslexic-mode {
  letter-spacing: 0.02rem;
  word-spacing: 0.15rem;
  line-height: 1.8;
}

.dyslexic-mode h2.titel,
.dyslexic-mode #delen-huidige-pagina,
.dyslexic-mode #delen-home-pagina{
	line-height: 1 !important;
	padding: .5rem 1rem;
}

.dyslexic-mode .sidebar.inhoud p{
  text-align: left !important;
}

.dyslexic-mode i,
.dyslexic-mode .fa,
.dyslexic-mode .fas,
.dyslexic-mode .far,
.dyslexic-mode .fab,
.dyslexic-mode .fa-solid,
.dyslexic-mode .fa-regular,
.dyslexic-mode .fa-brands {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
}

.toggle-titel {
  cursor: pointer;
  outline: none;
  font-size: larger;
  margin-bottom: 2rem;
}

.toggle-titel:focus {

}

.arrow {
  display: inline-block;
  transition: transform 0.3s ease;
  margin-right: 8px;
  font-size: medium;
}

.arrow.open {
  transform: rotate(180deg);
}

#toegankelijkheidsverklaring li,
#toegankelijkheidsverklaring-simpel li {
    list-style: disc;
    font-size: large;
    margin: 0 0 .5rem 1.2rem;
}

#toegankelijkheidsbeleid,
#toegankelijkheidsbeleid-simpel{
	margin: 0 -1rem;
    padding: 0 1rem;
}

#accessibility-menu{
	font-size: larger;
}

#accessibility-title{
	font-weight: 800;
    margin-bottom: 1rem;
}

ul.accessibility-list li{
	margin-bottom: .8rem;
}

.grayscale-mode body::before,
.grayscale-mode #wrapper,
.grayscale-mode #inner,
.grayscale-mode #content {
  filter: grayscale(100%) !important;  
}

 html.grayscale-mode{
  scrollbar-color: #aaaaaa #3b3b3b !important;
  background-color: #3b3b3b !important;
  scrollbar-gutter: stable !important;
}


.dark-mode #inner,
.dark-mode #content,
.dark-mode .inhoud,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode p,
.dark-mode .sticky-titel,
.dark-mode ::before,
.dark-mode #header-menu,
.dark-mode .navigatie{
		
  /*background-color: #121212 !important;
  color: #ffd5e5 !important;
  background-image: none !important;*/
}

.dark-mode a {
  color: #ff99cc !important;
}

.dark-mode button,
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
  background-color: ;
  color:;
  border-color:;
}

.dark-mode .inhoud{
	
}

.soft-contrast-mode #inner,
.soft-contrast-mode #content,
.soft-contrast-mode .inhoud,


.high-contrast-mode #inner,
.high-contrast-mode #content,
.high-contrast-mode .inhoud {
  background-color: #121212 !important;
  color: #f5f5f5 !important;
}


.high-contrast-mode a {
  color: #0ff !important;
}
.high-contrast-mode {
  background-color: #000 !important;
  color: #ff0 !important;
}

/* Menu mag NIET meeveranderen met modi */
.dark-mode #accessibility-menu,
.soft-contrast-mode #accessibility-menu,
.high-contrast-mode #accessibility-menu,
.dark-mode #accessibility-menu *,
.soft-contrast-mode #accessibility-menu *,
.high-contrast-mode #accessibility-menu * {
  color: #000 !important;
}