/* OpenDyslexic laden */
@font-face {
  font-family: "OpenDyslexic";
  src: url("/wp-content/themes/veldsink/assets/fonts/Opendyslexic/OpenDyslexic-Regular.woff2")
       format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
html.dyslexia-font {
  font-size: 90%;
}
body.dyslexia-enabled .is-style-action-button .wp-element-button {
  font-size:13px;
}

body.dyslexia-enabled body {
  font-family: "OpenDyslexic", sans-serif!important;

  
}
/* DYSLEXIE AAN */
body.dyslexia-enabled .has-default-font-family,
body.dyslexia-enabled h1,
body.dyslexia-enabled h2,
body.dyslexia-enabled h3,
body.dyslexia-enabled h4,
body.dyslexia-enabled h5,
body.dyslexia-enabled h6,
body.dyslexia-enabled .gform-body,
body.dyslexia-enabled p,
body.dyslexia-enabled,
body.dyslexia-enabled p strong {
  font-family: "OpenDyslexic", sans-serif!important;
  
}

.hero-title .title-magenta {
  display: block;
  color: var(--wp--preset--color--magenta);
}
body.dyslexia-enabled h2.has-xx-large-font-size{
  font-size:3.3rem!important;
}
/* ========================================
   ACCESSIBILITY MENU
   ======================================== */

.accessibility-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.accessibility-menu p:first-of-type {
  margin:0;
}

/* Tandwielknop */
.accessibility-toggle {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: white;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.accessibility-toggle:hover {
    color:#e1e1e1;
}

.accessibility-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Dropdown */
.accessibility-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;

    width: 250px;
    padding: 14px;

    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);

    z-index: 9999;

    /* Standaard verborgen */
    display: none;
}

/* Alleen zichtbaar wanneer geopend */
.accessibility-dropdown.is-open {
    display: block;
}

/* Klein pijltje boven dropdown */
.accessibility-dropdown::before {
    content: "";
    position: absolute;

    top: -6px;
    right: 14px;

    width: 11px;
    height: 11px;

    background: #fff;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    border-top: 1px solid rgba(0, 0, 0, 0.12);

    transform: rotate(45deg);
}

/* Titel */
.accessibility-title {
    margin-bottom: 10px;

    font-size: 14px;
    font-weight: 700;
    color: #222;
}

/* Dyslexie knop */
.dyslexia-toggle {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 10px 12px;

    border: 1px solid #ddd;
    border-radius: 8px;

    background: #f7f7f7;
    color: #222;

    font-size: 14px;
    text-align: left;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}


.dyslexia-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Aan/uit tekst */
.dyslexia-status {
    font-weight: 700;
    font-size: 12px;
    opacity: 0.65;
}

/* Actieve status */
html.dyslexia-font .dyslexia-status {
    opacity: 1;
}
html.dyslexia-font .stars-wrapper {
    width: 50%;
}

/* Filtermenu */
.accessibility {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 300px;
  margin-bottom: 20px;
}

.accessibility select {
  padding: 12px;
  border: 1px solid #888;
  border-radius: 8px;
  font-size: 16px;
}

/* SVG-filters onzichtbaar houden */
.color-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Kleurweergave */
#site-container.mode-protan {
  filter: url(#protan);
}

#site-container.mode-deutan {
  filter: url(#deutan);
}

#site-container.mode-tritan {
  filter: url(#tritan);
}

/* Hoog contrast */
#site-container.mode-contrast {
  filter: contrast(1.5);
}

/* Voorkom onbedoelde overgangen */
#site-container {
  transition: filter 0.2s ease;
}

.accessibility-colorblind {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0;
}

.accessibility-colorblind label {
    font-size: 14px;
}

.accessibility-colorblind select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
}


/* =========================================================
   ACCESSIBILITY MENU
   ========================================================= */

.accessibility-menu {
    position: relative;
    display: inline-block;
}

/* Toggle button */

.accessibility-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: white;

    cursor: pointer;
}




.accessibility-toggle i {
    font-size: 20px;
}

.accessibility-modes-menu {
    position: relative;
    display: inline-block;
}



/* =========================================================
   DROPDOWN
   ========================================================= */

.accessibility-modes-dropdown {
    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    z-index: 99999;

    width: 280px;
    padding: 20px;

    box-sizing: border-box;

    background: #ffffff;
    color: #222222;

    border-radius: 10px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-8px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}


/* Open state */

.accessibility-modes-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}


/* =========================================================
   TITLE
   ========================================================= */

.accessibility-title {
    margin-bottom: 16px;

    font-size: 18px;
    font-weight: 700;
}


/* =========================================================
   DYSLEXIA BUTTON
   ========================================================= */

.dyslexia-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 10px 12px;

    margin: 0 0 16px;

    border: 1px solid #cccccc;
    border-radius: 6px;

    background: #f7f7f7;
    color: #222222;

    cursor: pointer;

    text-align: left;
}


.dyslexia-status {
    font-weight: 600;
}


/* =========================================================
   COLOR MODE
   ========================================================= */

.accessibility-colorblind {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.accessibility-colorblind label {
    font-weight: 600;
}

.accessibility-colorblind select {
    width: 100%;

    padding: 9px 10px;

    border: 1px solid #cccccc;
    border-radius: 6px;

    background: #ffffff;
    color: #222222;

    font: inherit;
}


/* =========================================================
   FOCUS
   ========================================================= */

.accessibility-toggle:focus-visible,
.dyslexia-toggle:focus-visible,
.accessibility-colorblind select:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}


/* =========================================================
   DYSLEXIA FONT
   ========================================================= */

/*
 * Vervang 'OpenDyslexic' eventueel door jouw eigen
 * font-family als je die al gebruikt.
 */

body.dyslexia-enabled {
    font-family: "OpenDyslexic", sans-serif;
}


/* =========================================================
   HIGH CONTRAST
   ========================================================= */

body.accessibility-high-contrast {
    background: #000000 !important;
    color: #ffffff !important;
}

body.accessibility-high-contrast a {
    color: #ffff00 !important;
}

body.accessibility-high-contrast button,
body.accessibility-high-contrast select,
body.accessibility-high-contrast input {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .accessibility-modes-dropdown {
        transition: none;
    }
}