/* ============================================================================
   Beyond This — accessibility layer
   ----------------------------------------------------------------------------
   Loaded LAST, after every other stylesheet, so it can adjust without any
   existing rule being deleted. Removing this one <link> reverts everything.

   Scope of this file:
     1. Atkinson Hyperlegible for body text
     2. Touch targets at 44px minimum
     3. Reduced-motion support
     4. Form fields at 16px (stops iOS zooming on focus)
     5. Bottom navigation on mobile, for one-handed reach
     6. Consistent focus visibility

   NOT in scope: colour. Every colour referenced here is an existing brand
   variable already defined in colors.css. No hex value is introduced or
   altered by this file.
   ========================================================================= */


/* ── 1. Typeface ──────────────────────────────────────────────────────────
   Atkinson Hyperlegible was designed by the Braille Institute to keep
   characters distinguishable from one another at low vision. Display type
   (Young Serif, Barlow Condensed) is deliberately left alone — this is a
   body-text change, not a rebrand. */

body,
p, li, td, th, dd, dt,
label, input, select, textarea, button,
.db-nav-link, .btn, .form-group label, .field-error,
.db-stat-label, .section-heading, .password-hint {
    font-family: 'Atkinson Hyperlegible', 'Roboto', system-ui, -apple-system,
                 'Segoe UI', sans-serif;
}

body {
    font-size: 17px;
    line-height: 1.65;
}

/* Long-form reading measure. Prevents full-width lines on wide screens,
   which are hard to track back from for readers with visual or cognitive
   fatigue. */
.content-section p,
.auth-header p {
    max-width: 70ch;
}


/* ── 2. Touch targets ─────────────────────────────────────────────────────
   WCAG 2.5.5 asks for 44x44 CSS px. Measured before this file:
   .btn ≈ 40px, .btn-sm ≈ 31px, mobile nav links ≈ 38px, hamburger ≈ 32px. */

.btn,
.btn-sm,
.submit-btn,
.google-btn,
.db-nav-link,
.db-menu-toggle,
button,
input[type="submit"],
input[type="button"] {
    min-height: 44px;
}

.btn,
.submit-btn,
.google-btn {
    padding: 12px 22px;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-sm {
    padding: 11px 18px;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.db-menu-toggle {
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

/* Spacing between adjacent targets matters as much as their size — adjacent
   44px buttons with no gap still produce mis-taps. */
.btn + .btn,
.btn-sm + .btn-sm {
    margin-left: 8px;
}


/* ── 3. Reduced motion ────────────────────────────────────────────────────
   Motion sensitivity is common after brain injury and stroke. The setting
   already exists on every phone and laptop; the site simply wasn't reading
   it. Animation is near-eliminated rather than set to 0s, because some
   scripts listen for transitionend and would stall on a true zero. */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ── 4. Form fields ───────────────────────────────────────────────────────
   iOS zooms the viewport whenever a focused input is under 16px, which
   forces a pinch to zoom back out — a two-handed gesture. 16px prevents it. */

input,
select,
textarea {
    font-size: 16px;
    min-height: 44px;
}

textarea {
    min-height: 96px;
    line-height: 1.6;
}

/* Labels are tap targets too — tapping one focuses its field, which gives a
   much larger effective hit area than the field alone. */
label {
    display: inline-block;
    padding: 3px 0;
    cursor: pointer;
}

/* Checkboxes and radios are the smallest controls on any form. */
input[type="checkbox"],
input[type="radio"] {
    min-height: 24px;
    min-width: 24px;
    width: 24px;
    height: 24px;
}


/* ── 5. One-handed mobile navigation ──────────────────────────────────────
   The portal's only navigation on mobile is a hamburger in the top-right
   corner — the furthest point from the thumb of the hand holding the phone.
   For a user with hemiparesis, that is the entire navigation placed in the
   least reachable spot on the screen.

   This adds a bottom bar in the thumb zone. The existing hamburger stays,
   so nothing is taken away; a second, easier route is added. */

.thumb-nav {
    display: none;
}

@media (max-width: 768px) {

    .thumb-nav {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9998;
        background: var(--color-offwhite-350);
        border-top: 1px solid var(--color-border-soft);
        box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.09);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .thumb-nav a {
        min-height: 58px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 4px;
        text-decoration: none;
        color: var(--color-text-secondary);
        font-family: 'Atkinson Hyperlegible', sans-serif;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1;
        text-align: center;
    }

    .thumb-nav a[aria-current="page"] {
        color: var(--color-secondary);
    }

    .thumb-nav a[aria-current="page"] .thumb-ico {
        stroke: var(--color-secondary);
    }

    .thumb-nav a:active {
        background: var(--color-offwhite-200);
    }

    .thumb-ico {
        width: 23px;
        height: 23px;
        stroke: var(--color-text-tertiary);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Keep page content clear of the fixed bar. */
    body.db-body,
    body.public-body {
        padding-bottom: 76px;
    }

    /* An icon alone is ambiguous; the word makes the hamburger legible and
       widens the target at the same time. */
    .db-menu-toggle::after {
        content: "Menu";
        font-size: 13px;
        font-weight: 700;
        margin-left: 7px;
    }
}

/* Never print the bar. */
@media print {
    .thumb-nav { display: none !important; }
}


/* ── 6. Focus visibility ──────────────────────────────────────────────────
   Focus styling existed on some controls and not others. This applies the
   same treatment everywhere, using the brand colour already defined in
   colors.css. :focus-visible keeps the ring off mouse clicks. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Windows High Contrast Mode strips author colours; without this, the ring
   disappears for the users who most need it. */
@media (forced-colors: active) {
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 3px solid Highlight;
    }
}


/* ── 7. Screen-reader-only utility ────────────────────────────────────────
   Used by the bottom bar and by form labels that are visually redundant but
   still needed by assistive technology. */

.sr-only:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}