/*
 * Inclusive settings from the footer (html[data-a11y-*], set by theme-boot.js / show.js).
 * They must win over any site theme, so declarations are !important, like a user stylesheet.
 */

/* Text size: the base design is sized in rem */
html[data-a11y-text="large"] {
    font-size: 112.5% !important;
}

html[data-a11y-text="larger"] {
    font-size: 125% !important;
}

/* Readable font: one highly legible system sans with Cyrillic everywhere except code */
html[data-a11y-font] body,
html[data-a11y-font] body :where(:not(pre, code, kbd, samp, pre *, code *)) {
    font-family: Verdana, "Noto Sans", "Segoe UI", Tahoma, sans-serif !important;
    font-style: normal !important;
    text-transform: none !important;
}

html[data-a11y-font] .docs-content :is(h1, h2, h3, h4) {
    letter-spacing: normal !important;
}

/* Wider spacing (WCAG 1.4.12 text spacing) */
html[data-a11y-spacing] .docs-content :is(p, li, td, th, dd, blockquote),
html[data-a11y-spacing] .docs-nav,
html[data-a11y-spacing] .docs-toc {
    line-height: 1.8 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}

html[data-a11y-spacing] .docs-content p {
    margin-bottom: 2em !important;
}

/* Underlined links */
html[data-a11y-links] .docs-content a,
html[data-a11y-links] .docs-page-meta,
html[data-a11y-links] .site-footer__link,
html[data-a11y-links] .docs-breadcrumbs__link {
    text-decoration: underline !important;
    text-decoration-thickness: 0.1em !important;
    text-underline-offset: 0.18em !important;
}

/* No animations: also stops theme decorations (snow, rain, cursors) and smooth scrolling */
html[data-a11y-motion],
html[data-a11y-motion] *,
html[data-a11y-motion] *::before,
html[data-a11y-motion] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* Visible focus: a thick two-colour ring readable on light and dark themes */
html[data-a11y-focus] :focus-visible {
    outline: 0.1875rem solid #ffbf47 !important;
    outline-offset: 0.125rem !important;
    box-shadow: 0 0 0 0.375rem #0b0c0c !important;
}

/*
 * Contrast modes: black on white / white on black for every theme. Colours, borders and backgrounds of all
 * elements are forced; theme decorations (gradients, overlays, shadows, glow) are dropped.
 */
html[data-a11y-contrast="black-on-white"] {
    --a11y-background: #ffffff;
    --a11y-text: #000000;
    --a11y-link: #0000cc;
    color-scheme: light;
}

html[data-a11y-contrast="white-on-black"] {
    --a11y-background: #000000;
    --a11y-text: #ffffff;
    --a11y-link: #ffff00;
    color-scheme: dark;
}

html[data-a11y-contrast],
html[data-a11y-contrast] *:not(img, svg, svg *, video, picture, canvas),
html[data-a11y-contrast] *::before,
html[data-a11y-contrast] *::after {
    background-color: var(--a11y-background) !important;
    background-image: none !important;
    color: var(--a11y-text) !important;
    border-color: var(--a11y-text) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    opacity: 1;
}

html[data-a11y-contrast] svg {
    color: var(--a11y-text) !important;
}

/* full-screen theme decorations: snow, digital rain, scanlines, wallpapers */
html[data-a11y-contrast]::before,
html[data-a11y-contrast]::after,
html[data-a11y-contrast] body::before,
html[data-a11y-contrast] body::after,
html[data-a11y-contrast] .docs-layout::before,
html[data-a11y-contrast] .docs-layout::after {
    display: none !important;
}

html[data-a11y-contrast] a,
html[data-a11y-contrast] a * {
    color: var(--a11y-link) !important;
    text-decoration: underline !important;
}

/* active and chosen items: inverted */
html[data-a11y-contrast] .is-active,
html[data-a11y-contrast] .is-active *,
html[data-a11y-contrast] [aria-current="true"],
html[data-a11y-contrast] [aria-current="page"],
html[data-a11y-contrast] [aria-pressed="true"],
html[data-a11y-contrast] .docs-a11y__size-option:has(input:checked),
html[data-a11y-contrast] .docs-a11y__size-option:has(input:checked) * {
    background-color: var(--a11y-text) !important;
    color: var(--a11y-background) !important;
}

html[data-a11y-contrast] .docs-callout,
html[data-a11y-contrast] .docs-content pre,
html[data-a11y-contrast] .docs-content table,
html[data-a11y-contrast] .docs-content th,
html[data-a11y-contrast] .docs-content td,
html[data-a11y-contrast] .docs-content blockquote,
html[data-a11y-contrast] .docs-content :not(pre) > code {
    border: 0.125rem solid var(--a11y-text) !important;
}

html[data-a11y-contrast] .docs-diff__line--added,
html[data-a11y-contrast] .docs-change__block--added {
    border-left: 0.375rem solid var(--a11y-text) !important;
    font-weight: 700;
}

html[data-a11y-contrast] .docs-diff__line--removed,
html[data-a11y-contrast] .docs-change__block--removed {
    border-left: 0.375rem dashed var(--a11y-text) !important;
    text-decoration: line-through !important;
}

html[data-a11y-contrast] .docs-brand__logo,
html[data-a11y-contrast] .docs-breadcrumbs__home img {
    filter: grayscale(1) contrast(1.6) !important;
}

html[data-a11y-contrast="white-on-black"] .docs-brand__logo,
html[data-a11y-contrast="white-on-black"] .docs-breadcrumbs__home img {
    filter: grayscale(1) invert(1) contrast(1.6) !important;
}

html[data-a11y-contrast] :focus-visible {
    outline: 0.1875rem solid var(--a11y-text) !important;
    outline-offset: 0.125rem !important;
}

/* Read aloud: the block being read and the floating player */
.docs-content .is-speaking {
    outline: 0.1875rem solid #ffbf47 !important;
    outline-offset: 0.25rem;
    background-color: rgba(255, 191, 71, 0.18) !important;
    border-radius: 0.25rem;
}

.docs-speech-bar {
    position: fixed;
    right: 4.75rem;
    bottom: 1rem;
    z-index: 2000;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 0.125rem solid #0b0c0c;
    border-radius: 0.75rem;
    background: #ffffff;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
}

@media (max-width: 40rem) {
    .docs-speech-bar {
        right: 4.25rem;
        bottom: 0.75rem;
        left: 0.75rem;
        justify-content: center;
    }
}

.docs-speech-bar[hidden] {
    display: none !important;
}

.docs-speech-bar__button {
    min-height: 2.5rem;
    padding: 0.375rem 0.875rem;
    border: 0.125rem solid #0b0c0c;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #0b0c0c;
    font: 600 0.95rem/1.2 system-ui, sans-serif;
    cursor: pointer;
}

.docs-speech-bar__button[aria-pressed="true"] {
    background: #0b0c0c;
    color: #ffffff;
}

.docs-speech-bar__button:focus-visible {
    outline: 0.1875rem solid #ffbf47;
    outline-offset: 0.125rem;
}