/* ============================================================
   ACCESSIBILITY OVERRIDES
   ============================================================ */

/* ── Grayscale ── */
html.a11y-grayscale {
    filter: grayscale(100%) !important;
}

/* ── High Contrast ── */
html.a11y-high-contrast {
    filter: contrast(135%) saturate(160%) !important;
}

/* ── Font Scale ── */
:root {
    --a11y-font-scale: 100%;
}

html.a11y-custom-font body,
html.a11y-custom-font p,
html.a11y-custom-font span:not(.rn-lang-code):not(.rn-lang-native):not(.mel-avatar-letter),
html.a11y-custom-font li,
html.a11y-custom-font a,
html.a11y-custom-font label,
html.a11y-custom-font button:not(.mel-trigger-btn):not(.rn-lang-trigger),
html.a11y-custom-font input,
html.a11y-custom-font textarea,
html.a11y-custom-font select,
html.a11y-custom-font h1,
html.a11y-custom-font h2,
html.a11y-custom-font h3,
html.a11y-custom-font h4,
html.a11y-custom-font h5,
html.a11y-custom-font h6 {
    font-size: var(--a11y-font-scale) !important;
}

/* ── Emphasise Links ── */
html.a11y-emphasize-links a,
html.a11y-emphasize-links [role="link"] {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
    outline: 2px solid rgba(245, 130, 32, 0.55) !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
    background-color: rgba(245, 130, 32, 0.06) !important;
}

/* ── Emphasise Headings ── */
html.a11y-emphasize-headings h1,
html.a11y-emphasize-headings h2,
html.a11y-emphasize-headings h3,
html.a11y-emphasize-headings h4,
html.a11y-emphasize-headings h5,
html.a11y-emphasize-headings h6 {
    border-left: 4px solid #F58220 !important;
    padding-left: 10px !important;
    background: rgba(245, 130, 32, 0.07) !important;
    border-radius: 0 4px 4px 0 !important;
    margin-left: -14px !important;
}

/* ── Screen Reader Focus Ring ── */
html.a11y-screen-reader *:focus,
html.a11y-screen-reader *:hover {
    outline: 2.5px solid #F58220 !important;
    outline-offset: 3px !important;
    border-radius: 3px !important;
}

html.a11y-large-text {
    font-size: 115% !important;
}
/* ============================================================
   ACCESSIBILITY SVG PRECISION ALIGNMENT
   ============================================================ */
.a11y-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 0 !important;
}

    .a11y-btn svg {
        margin: 0 !important;
        display: block !important;
        flex-shrink: 0 !important;
        /* If the icon still looks slightly high/low, use this precision nudge: */
        /* transform: translateY(1px); */
    }