@font-face {
    font-family: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    font-display: swap;
    src: url("/assets/fonts/atkinson-hyperlegible/atkinson-hyperlegible-400.ttf")
        format("truetype");
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 700;
    font-stretch: normal;
    font-display: swap;
    src: url("/assets/fonts/atkinson-hyperlegible/atkinson-hyperlegible-700.ttf")
        format("truetype");
}

.a11y-dyslexic {
    --a11y-dyslexic-font:
        "Atkinson Hyperlegible", "Noto Sans", system-ui, -apple-system,
        sans-serif;
}

.a11y-dyslexic,
.a11y-dyslexic button,
.a11y-dyslexic input,
.a11y-dyslexic select,
.a11y-dyslexic textarea {
    font-family: var(--a11y-dyslexic-font) !important;
}

.a11y-dyslexic :where(
    p,
    a,
    li,
    dt,
    dd,
    label,
    span,
    strong,
    em,
    small,
    blockquote,
    figcaption,
    caption,
    td,
    th,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    button,
    input,
    select,
    textarea
) {
    font-family: var(--a11y-dyslexic-font) !important;
}

.a11y-dyslexic :where(
    p,
    li,
    dt,
    dd,
    label,
    blockquote,
    figcaption,
    caption,
    td,
    th,
    input,
    select,
    textarea
) {
    line-height: 1.85 !important;
    letter-spacing: 0.012em !important;
    word-spacing: 0.06em !important;
}

.a11y-dyslexic :where(h1, h2, h3, h4, h5, h6, a, button) {
    letter-spacing: 0.01em !important;
}

.a11y-dyslexic :where(
    .fa,
    .fa-brands,
    .fa-classic,
    .fa-regular,
    .fa-sharp,
    .fa-solid,
    .fab,
    .far,
    .fas
) {
    font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
}

.a11y-dyslexic :where(.fa-brands, .fab) {
    font-family: "Font Awesome 6 Brands" !important;
}

.a11y-dyslexic :where(.swiper-button-next, .swiper-button-prev)::after {
    font-family: swiper-icons !important;
}