/* =========================================================
   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;
    }
}