/*
 * WCAG Accessibility Fixes - Custom Styles
 * Provides high contrast and utility classes for accessibility.
 */

/* High contrast checkbox styles */
input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border: 2px solid #222 !important;
    width: 18px !important;
    height: 18px !important;
    background-color: #fff !important;
    cursor: pointer !important;
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    margin-right: 5px !important;
}

/* Restore the checkmark for checked state */
input[type="checkbox"]:checked::after {
    content: '✔' !important;
    position: absolute !important;
    top: -2px !important;
    left: 2px !important;
    font-size: 14px !important;
    color: #222 !important;
}

/* Screen-reader-only utility class */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Darken the borders of text areas and inputs */
input[type="text"],
textarea {
    border: 1.5px solid #767676 !important;
}

/* Ensure radio button custom styling has enough contrast */
input[type="radio"] {
    border: 2px solid #595959;
}
/* Use this class to provide text to screen readers without showing it on screen */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}