/* Accessibility Widget Styles */

:root {
    --access-primary: #0056b3;
    --access-bg: #ffffff;
    --access-text: #333333;
    --access-border: #cccccc;
}

/* Toggle Button */
#access-toggle-btn {
    position: fixed;
    top: 17%;
    left: 0;
    transform: translateY(-50%);
    background-color: var(--access-primary);
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    padding: 5px;
    cursor: pointer;
    z-index: 10000;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    font-size: 16px;
    transition: left 0.3s;
}

#access-toggle-btn:hover {
    background-color: #004494;
}

#access-toggle-btn:focus {
    outline: 2px solid yellow;
}

/* Accessibility Menu */
#access-menu {
    position: fixed;
    top: 50%;
    left: -600px;
    transform: translateY(-50%);
    width: 280px;
    background-color: var(--access-bg);
    border: 1px solid var(--access-border);
    border-radius: 0 8px 8px 0;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transition: left 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    padding: 20px;
    font-family: Arial, sans-serif;
}

#access-menu.open {
    left: 0;
}

/* When menu is open, move button */
#access-menu.open~#access-toggle-btn {
    left: 400px;
}

#access-menu h2 {
    margin-top: 0;
    font-size: 1.2rem;
    color: var(--access-text);
    border-bottom: 2px solid var(--access-primary);
    padding-bottom: 10px;
    margin-bottom: 15px;
    text-align: center;
}

.access-btn {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    text-align: center;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1rem;
    transition: background 0.2s;
}

.access-btn:hover {
    background-color: #e0e0e0;
}

.access-btn.active {
    background-color: var(--access-primary);
    color: white;
    border-color: var(--access-primary);
}

/* Accessibility Modes */

/* High Contrast */
body.access-high-contrast {
    filter: contrast(1.5);
    background-color: black !important;
    color: yellow !important;
}

body.access-high-contrast * {
    background-color: black !important;
    color: yellow !important;
    border-color: yellow !important;
}

body.access-high-contrast img {
    filter: invert(1);
}

/* Large Font */
/* Large Font */
body.access-large-font,
body.access-large-font p,
body.access-large-font h1,
body.access-large-font h2,
body.access-large-font h3,
body.access-large-font h4,
body.access-large-font h5,
body.access-large-font h6,
body.access-large-font span,
body.access-large-font div,
body.access-large-font a,
body.access-large-font li,
body.access-large-font td,
body.access-large-font th,
body.access-large-font button,
body.access-large-font input,
body.access-large-font select,
body.access-large-font textarea {
    font-size: 110% !important;
}

/* Extra Large for body to scale rems if possible, or just specific override */
body.access-large-font {
    font-size: 120% !important;
}

/* Small Font */
/* Small Font */
body.access-small-font,
body.access-small-font p,
body.access-small-font h1,
body.access-small-font h2,
body.access-small-font h3,
body.access-small-font h4,
body.access-small-font h5,
body.access-small-font h6,
body.access-small-font span,
body.access-small-font div,
body.access-small-font a,
body.access-small-font li,
body.access-small-font td,
body.access-small-font th,
body.access-small-font button,
body.access-small-font input,
body.access-small-font select,
body.access-small-font textarea {
    font-size: 90% !important;
}

body.access-small-font {
    font-size: 80% !important;
}

/* Grayscale */
body.access-grayscale {
    filter: grayscale(100%);
}

/* Big Cursor */
body.access-big-cursor {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewport="0 0 48 48" style="fill:black;stroke:white;stroke-width:2px;"><path d="M10 40 L10 10 L35 25 L20 25 Z"/></svg>') 10 10, auto !important;
}

body.access-big-cursor a,
body.access-big-cursor button,
body.access-big-cursor input {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewport="0 0 48 48" style="fill:black;stroke:white;stroke-width:2px;"><path d="M10 40 L10 10 L35 25 L20 25 Z"/></svg>') 10 10, pointer !important;
}

/* Reading Guide */
#access-guide-line {
    position: fixed;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: rgba(255, 255, 0, 0.5);
    border-top: 2px solid red;
    border-bottom: 2px solid red;
    pointer-events: none;
    z-index: 2147483647;
    /* Max z-index */
    transform: translateY(-50%);
    display: none;
}

body.access-reading-guide #access-guide-line {
    display: block;
}

/* Highlight Links */
body.access-highlight-links a {
    text-decoration: underline !important;
    background-color: yellow !important;
    color: black !important;
    font-weight: bold !important;
}

/* Readable Font */
body.access-readable-font {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Reset Button */
#access-reset {
    margin-top: 10px;
    background-color: #d9534f;
    color: white;
    border: none;
}

#access-reset:hover {
    background-color: #c9302c;
}