/* S-07 — accessibility basics (3.2 S9; Rule 6). The settings arrive as attributes on
   <html> (services/accessibility.html_attrs): data-text-size, data-contrast, data-font.
   Self-hosted only: no third-party requests (Privacy Policy). */

/* Atkinson Hyperlegible (Braille Institute; SIL OFL 1.1, licence beside the files).
   Declared here; a browser fetches a face only when an element uses it, so these
   ~24 KB files load only while the readable font is on. */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('../fonts/atkinson-hyperlegible/AtkinsonHyperlegible-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('../fonts/atkinson-hyperlegible/AtkinsonHyperlegible-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('../fonts/atkinson-hyperlegible/AtkinsonHyperlegible-Italic.woff2') format('woff2');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('../fonts/atkinson-hyperlegible/AtkinsonHyperlegible-BoldItalic.woff2') format('woff2');
    font-weight: 700; font-style: italic; font-display: swap;
}

html[data-font="readable"] {
    --font-primary: 'Atkinson Hyperlegible', Arial, sans-serif;
    --bs-body-font-family: 'Atkinson Hyperlegible', Arial, sans-serif;
}
html[data-font="readable"] body,
html[data-font="readable"] h1, html[data-font="readable"] h2, html[data-font="readable"] h3,
html[data-font="readable"] h4, html[data-font="readable"] h5, html[data-font="readable"] h6,
html[data-font="readable"] .btn, html[data-font="readable"] .form-control,
html[data-font="readable"] .form-select, html[data-font="readable"] textarea {
    font-family: 'Atkinson Hyperlegible', Arial, sans-serif;
    letter-spacing: 0.01em;
}

/* Text size: Bootstrap sizes in rem, so the root size scales the whole page. */
html[data-text-size="large"] { font-size: 112.5%; }
html[data-text-size="larger"] { font-size: 125%; }

/* Keyboard: the skip link, and a focus ring that is always visible. */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    padding: 0.5rem 1rem; background: #000; color: #fff; font-weight: 700; border-radius: 0 0 0.5rem 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
main:focus { outline: none; }

/* High contrast: near-black on white (white on black in dark mode), stronger
   borders, underlined links, no faint text, a bold focus ring. */
html[data-contrast="high"] {
    --genz-bg: #ffffff; --genz-text: #000000; --genz-text-muted: #1a1a1a; --genz-dark: #000000;
    --genz-card-bg: #ffffff; --genz-surface: #ffffff; --genz-surface-hover: #f0f0f0;
    --genz-primary: #1d1aa8; --genz-primary-hover: #12107a;
    --input-bg: #ffffff; --input-border: #000000;
    --bs-body-color: #000000; --bs-body-bg: #ffffff; --bs-secondary-color: #1a1a1a;
    --bs-tertiary-color: #1a1a1a; --bs-border-color: #000000; --bs-link-color: #1d1aa8;
    --bs-primary: #1d1aa8; --bs-success: #0b6b1f; --bs-orange: #a34700;
}
html[data-contrast="high"][data-theme="dark"] {
    --genz-bg: #000000; --genz-text: #ffffff; --genz-text-muted: #f0f0f0; --genz-dark: #ffffff;
    --genz-card-bg: #000000; --genz-surface: #000000; --genz-surface-hover: #1a1a1a;
    --genz-primary: #9fb4ff; --genz-primary-hover: #c6d3ff;
    --input-bg: #000000; --input-border: #ffffff;
    --bs-body-color: #ffffff; --bs-body-bg: #000000; --bs-secondary-color: #f0f0f0;
    --bs-tertiary-color: #f0f0f0; --bs-border-color: #ffffff; --bs-link-color: #9fb4ff;
    --bs-primary: #9fb4ff; --bs-success: #7ee28f; --bs-orange: #ffb36b;
}
html[data-contrast="high"] body { background: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; }
html[data-contrast="high"] a:not(.btn):not(.nav-link):not(.dropdown-item) { text-decoration: underline; }
html[data-contrast="high"] .text-muted, html[data-contrast="high"] .text-secondary,
html[data-contrast="high"] .small.text-muted { color: var(--bs-secondary-color) !important; }
html[data-contrast="high"] .glass-card, html[data-contrast="high"] .card,
html[data-contrast="high"] .list-group-item, html[data-contrast="high"] .form-control,
html[data-contrast="high"] .form-select, html[data-contrast="high"] .table {
    border: 2px solid var(--bs-border-color) !important; background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important; box-shadow: none !important; backdrop-filter: none !important;
}
html[data-contrast="high"] .btn { border-width: 2px; }
html[data-contrast="high"] :focus-visible { outline: 4px solid #ffbf00; outline-offset: 2px; }

/* Contrast fixes found by the S-07 pass (WCAG 2.1 AA, 4.5:1 for text). The light
   theme's muted text is fixed in style.css (#656676). In dark mode the brand purple
   (#7F73E6) is 3.8:1 on cards, so text links use a lighter purple (5.5:1 or more);
   buttons keep the brand colour. */
[data-theme="dark"] a:not(.btn):not(.et-btn):not(.nav-link):not(.dropdown-item) { color: #9d93ee; }
[data-theme="dark"] a:not(.btn):not(.et-btn):not(.nav-link):not(.dropdown-item):hover { color: #c3bdf6; }