/* --- 1. GLOBAL BASE STYLES --- */
:root {
    --accent: #00e0b0;
    --card-bg: #ffffff;
    --card-text: #050505;
    --card-shadow: #000000;
    --card-border: #050505;
    --card-primary: #ff3e00;
}

html, body {
    font-family: 'Iosevka Charon', monospace;
    font-weight: 700;
    font-size: 18px;
    background: #fff;
    color: var(--card-text);
    margin: 0;
    padding: 0;
}

/* Base text override (Replaces the wildcard * !important) */
p, span, h1, h2, h3, h4, h5, h6, button, div {
    font-family: 'Iosevka Charon', monospace !important;
}

/* --- 2. NEOBRUTALIST COMPONENTS --- */
.card {
    background: var(--card-bg);
    color: var(--card-text);
    border: 0.35em solid var(--card-border);
    box-shadow: 0.7em 0.7em 0 var(--card-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card-title-area {
    background: var(--card-border);
    color: var(--card-bg);
    padding: 10px;
}

/* --- ENHANCED ACCESSIBILITY MENU --- */
.a11y-menu {
    width: 350px !important;
    max-height: 80vh;
    overflow-y: auto;
    padding: 1rem;
    gap: 15px;
}

.a11y-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid #000;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.a11y-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.a11y-group h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    margin: 15px 0 8px 0;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    display: inline-block;
}

/* --- CONTENT OVERRIDES --- */
body.large-text {
    font-size: 30px !important;
}

body.line-height {
    line-height: 2.5 !important;
}

body.letter-spacing {
    letter-spacing: 0.3em !important;
}

body.hide-images img {
    opacity: 0 !important;
    visibility: hidden !important;
}

body.highlight-headings h1, body.highlight-headings h2, body.highlight-headings h3 {
    background: yellow !important;
    color: black !important;
    outline: 4px solid black;
}

body.text-align * {
    text-align: left !important;
}

body.enlarge-buttons button {
    transform: scale(1.1);
    margin: 10px;
}

/* --- COLOR OVERRIDES --- */
body.invert {
    filter: invert(1);
}

body.grayscale {
    filter: grayscale(1);
}

body.high-sat {
    filter: saturate(4);
}

body.low-sat {
    filter: saturate(0.2);
}

body.dark-contrast {
    background: #000 !important;
    color: #00ff00 !important;
}

    body.dark-contrast * {
        color: #00ff00 !important;
        border-color: #00ff00 !important;
    }

body.light-contrast {
    background: #fff !important;
    color: #000 !important;
}

/* --- NAVIGATION TOOLS --- */
body.big-cursor {
    cursor: crosshair !important;
}

    body.big-cursor a, body.big-cursor button {
        cursor: pointer !important;
    }

body.stop-animations * {
    animation: none !important;
    transition: none !important;
}

body.highlight-links a {
    outline: 4px solid #ff3e00 !important;
    background: #fff !important;
    color: #000 !important;
    font-weight: 900;
}

/* Reading Line */
body.reading-line::after {
    content: "";
    position: fixed;
    top: 50%;
    left: 0;
    width: 100%;
    height: 6px;
    background: red;
    z-index: 999999;
    pointer-events: none;
}

/* Reading Mask */
.a11y-mask {
    position: fixed;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 999998;
    display: none;
    pointer-events: none;
}

body.reading-mask .a11y-mask {
    display: block;
}

#a11y-mask-top {
    top: 0;
    height: 40%;
}

#a11y-mask-bottom {
    bottom: 0;
    top: 60%;
}
/* --- 3. ACCESSIBILITY WIDGET (The Toggle) --- */
.a11y-widget {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 10000; /* Ensure it stays on top of everything */
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.a11y-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--accent);
    border: 4px solid #000;
    box-shadow: 6px 6px 0 #000;
    cursor: pointer;
    border-radius: 50%;
    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

    .a11y-trigger:hover {
        transform: translate(-3px, -3px);
        box-shadow: 9px 9px 0 #000;
    }

    /* CRITICAL: Force SVG visibility */
    .a11y-trigger svg {
        width: 32px !important;
        height: 32px !important;
        stroke: #000 !important;
        stroke-width: 2.5;
        display: block !important;
    }

/* --- 4. ACCESSIBILITY MENU --- */
.a11y-menu {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 450px !important;
    background: #fff;
    border: 4px solid #000;
    box-shadow: 10px 10px 0 #000;
    padding: 1.5rem;
    display: none; /* Controlled by Checkbox */
    flex-direction: column;
    gap: 12px;
}

#a11y-toggle:checked ~ .a11y-menu {
    display: flex;
}

.a11y-btn {
    background: #fff;
    border: 3px solid #000;
    padding: 12px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 4px 4px 0 #000;
    transition: 0.1s;
}

    .a11y-btn:active {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0 #000;
    }

    .a11y-btn.reset {
        background: #ff3e00;
        color: #fff;
    }

/* --- 5. THEME OVERRIDES (States) --- */

/* High Contrast Mode */
body.high-contrast {
    background: #000 !important;
    color: #fff !important;
    --card-bg: #000;
    --card-text: #fff;
    --card-border: #fff;
    --card-shadow: #fff;
    --card-primary: #fff;
    --accent: #fff;
}

    body.high-contrast .a11y-trigger {
        background: #fff !important;
        border-color: #fff !important;
        box-shadow: 6px 6px 0 #444;
    }

        body.high-contrast .a11y-trigger svg {
            stroke: #000 !important;
        }

    body.high-contrast .a11y-menu {
        background: #000;
        border-color: #fff;
        box-shadow: 10px 10px 0 #444;
    }

    body.high-contrast .a11y-btn {
        background: #000;
        color: #fff;
        border-color: #fff;
        box-shadow: 4px 4px 0 #444;
    }

/* Large Text Mode */
body.large-text {
    font-size: 24px;
}

    body.large-text .card-title-area h3 {
        font-size: 1.5em;
    }

/* Dyslexic Font Mode */
body.dyslexic,
body.dyslexic *,
body.dyslexic .a11y-menu h3 {
    font-family: 'OpenDyslexic', sans-serif !important;
}

/* --- 6. UTILITIES & BLAZOR DEFAULTS --- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

/* Make sure the focus is EXTREMELY visible when using keyboard */
body.highlight-links *:focus {
    outline: 5px dashed #ff3e00 !important;
    outline-offset: 4px !important;
    background: rgba(255, 255, 0, 0.2);
}

/* Grid Background Pattern */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 0.5em 0.5em;
    pointer-events: none;
    z-index: -1;
    opacity: 0.5;
}

body.high-contrast::before {
    opacity: 0.1;
    filter: invert(1);
}

/* --- RESPONSIVE MOBILE ADJUSTMENTS --- */

/* For screens smaller than 576px (Mobile) */
@media (max-width: 576px) {
    .a11y-menu {
        width: calc(100vw - 40px) !important; /* Full width minus margins */
        right: -10px; /* Shift slightly to center better */
        bottom: 75px;
        max-height: 75vh;
        padding: 1rem;
    }

    .a11y-grid {
        /* Keep 2 columns, but make sure they don't squash text */
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .a11y-btn {
        padding: 10px 5px;
        font-size: 0.75rem; /* Slightly smaller text to fit buttons */
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 50px; /* Better for thumbs */
    }

    .a11y-header h3 {
        font-size: 1rem;
    }

    /* Adjust the trigger size for mobile touch */
    .a11y-trigger {
        width: 55px;
        height: 55px;
    }
}

/* For very small screens (under 360px) */
@media (max-width: 360px) {
    .a11y-grid {
        grid-template-columns: 1fr; /* Stack buttons in a single column */
    }
}

/* Ensure the widget doesn't get covered by mobile browser nav bars */
.a11y-widget {
    bottom: max(25px, env(safe-area-inset-bottom));
    right: max(25px, env(safe-area-inset-right));
}
.a11y-info-box {
    background: #ffff00;
    border: 3px solid #000;
    padding: 10px;
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: bold;
}


#keyboard-container {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 800px;
    background: #fff;
    border: 4px solid #000;
    border-bottom: none;
    box-shadow: 0 -10px 0 rgba(0,0,0,0.1);
    z-index: 20002;
    padding: 15px;
    transition: transform 0.3s ease;
}

.keyboard-hidden {
    transform: translate(-50%, 100%) !important;
}

.keyboard-header {
    display: flex;
    justify-content: space-between;
    font-weight: 900;
    margin-bottom: 10px;
    text-transform: uppercase;
}

#keyboard-keys {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: 5px;
}

.kb-key {
    background: #fff;
    border: 2px solid #000;
    padding: 10px 5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 2px 2px 0 #000;
}

    .kb-key:active {
        transform: translate(1px, 1px);
        box-shadow: 1px 1px 0 #000;
    }

    /* Make Space and Backspace wider */
    .kb-key:nth-last-child(1) {
        grid-column: span 3;
        background: var(--accent);
    }

    .kb-key:nth-child(11) {
        grid-column: span 1;
        background: #ff3e00;
        color: #fff;
    }

@media (max-width: 600px) {
    #keyboard-keys {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* --- TEXT MAGNIFIER MODE --- */
/* When active, any element the mouse touches will scale up */
body.text-magnifier p, 
body.text-magnifier span, 
body.text-magnifier h1, 
body.text-magnifier h2, 
body.text-magnifier h3, 
body.text-magnifier li,
body.text-magnifier button:not(.a11y-btn) {
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
    cursor: zoom-in !important;
}


    body.text-magnifier p:hover,
    body.text-magnifier span:hover,
    body.text-magnifier h1:hover,
    body.text-magnifier h2:hover,
    body.text-magnifier h3:hover,
    body.text-magnifier li:hover {
        /* 1.05 is a very subtle 5% zoom. 1.1 is a 10% zoom. */
        transform: scale(1.05);
        /* Change origin to center to prevent the text from "jumping" to the left */
        transform-origin: center center;
        /* Optional: Remove the background if the zoom is small enough 
       so it doesn't cover other words */
        background: rgba(255, 255, 255, 0.8);
        position: relative;
        z-index: 10000;
    }
body.text-magnifier *:hover {
    outline: 3px solid var(--accent) !important;
    background: #ffff00 !important; /* Classic yellow highlighter */
    color: #000 !important;
}