/* OpenDyslexic (SIL-OFL, see /fonts/opendyslexic/OFL.txt). Activated by body.dyslexia-font,
   toggled in Settings > Accessibility. */

@font-face {
    font-family: 'OpenDyslexic';
    src: url('../fonts/opendyslexic/OpenDyslexic-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OpenDyslexic';
    src: url('../fonts/opendyslexic/OpenDyslexic-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OpenDyslexic';
    src: url('../fonts/opendyslexic/OpenDyslexic-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'OpenDyslexic';
    src: url('../fonts/opendyslexic/OpenDyslexic-Bold-Italic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

/* !important required: Syncfusion sets an explicit font-family on .e-control/.e-input,
   and the UI module sets 'Inter' on home/blog — body-level cascade doesn't reach them.
   Targets elements only, so ::before glyph rules that declare their own font-family
   (bootstrap-icons, Syncfusion glyphs, Froala) keep working. */
body.dyslexia-font,
body.dyslexia-font * {
    font-family: 'OpenDyslexic', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* Syncfusion puts font-family:'e-icons' on the element (its ::before inherits it), so the
   blanket rule above would garble grid/dropdown/datepicker icons without this. */
body.dyslexia-font .e-icons,
body.dyslexia-font .e-icons::before,
body.dyslexia-font .e-btn-icon::before {
    font-family: 'e-icons' !important;
}

/* Defensive — the CDN bootstrap-icons css already !importants its ::before. */
body.dyslexia-font .bi,
body.dyslexia-font .bi::before,
body.dyslexia-font [class^="bi-"]::before,
body.dyslexia-font [class*=" bi-"]::before {
    font-family: 'bootstrap-icons' !important;
}

/* OpenDyslexic's bottom-weighted letterforms sit taller; avoid descender clipping. */
body.dyslexia-font {
    line-height: 1.5;
}