/* ============================================================
   Fleet behaviour + accessibility layer  v2.0
   ------------------------------------------------------------
   Seven live small-business sites, all bespoke, all different eras.
   The brief was explicitly NOT to impose one visual identity, so
   this layer is additive only.

   v1 was too broad and was rejected in review. Removed since:

     global `overflow-x: clip` on html+body
        `clip` forbids scrolling BY ANY MECHANISM, so it can strand an
        off-canvas menu or carousel and turn visible overflow into lost
        content — a WCAG 1.4.10 Reflow failure, not a fix. savepower
        has exactly such a toggle. The sticky repair is now applied
        per-site, only where sticky is measurably broken.

     generic wide-table wrapping
        It never measured width, and no guard reliably separates a
        LAYOUT table from a data one. Two of these sites are
        table-laid-out; wrapping their layout table reparents it and
        breaks `body > table` selectors. Deferred to per-site work.

     tap-target padding
        Overwrote existing padding with a smaller value, and flipped
        block links to inline-block, changing wrapping and widths.
        WCAG 2.2 AA is 24x24 (44x44 is AAA), which these mostly meet.

     img { max-width; height: auto }
        `height:auto` beats the width/height presentational hints, so once
        an image loads its NATURAL ratio wins. Verified live on
        homebackuppower: 8 `dot_clear.gif width="1" height="20"` spacers,
        which collapse to 1px and take the layout-table column with them.
        Both halves are held for per-site work after a 390px audit.

   What remains is genuinely additive: a skip link and focus rings
   where there were none, plus two narrowly-scoped mobile fixes.
   ============================================================ */

:root {
    --a11y-accent: #1d4ed8;
    --a11y-accent-contrast: #ffffff;
}

/* ---- Skip link --------------------------------------------------------
   Off-screen until focused: invisible to mouse users, first stop for
   keyboard users. Missing on all seven sites. */
.a11y-skip-link {
    position: absolute;
    left: 8px;
    top: -64px;
    z-index: 100000;
    display: inline-block;
    padding: 10px 16px;
    background: var(--a11y-accent);
    color: var(--a11y-accent-contrast);
    font: 600 15px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    transition: top 0.15s ease-out;
}

.a11y-skip-link:focus {
    top: 0;
    color: var(--a11y-accent-contrast);
    outline: 3px solid var(--a11y-accent);
    outline-offset: 2px;
}

/* The skip target gets tabindex="-1" so focus can land on it; that would
   otherwise draw a focus ring around a whole content block. */
[tabindex="-1"]:focus {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .a11y-skip-link { transition: none; }
}

/* ---- Focus -----------------------------------------------------------
   :focus-visible only, so mouse users see no change at all. None of the
   seven sites had any focus styling. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    /* Two-tone. A single accent ring measures 2.38:1 against a #222
       background — under the 3:1 WCAG 1.4.11 requires of a focus
       indicator. The white halo guarantees contrast on dark hosts
       (savepower is dark green), the accent ring on light ones. */
    outline: 3px solid var(--a11y-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--a11y-accent-contrast);
    border-radius: 3px;
}

/* ---- iOS zoom ---------------------------------------------------------
   Safari zooms the page when a focused control is under 16px. Restricted
   to text-entry controls: buttons, checkboxes, radios, files and dates
   are not affected, and an absolute length is used because several of
   these sites shrink the root font-size on small screens. */
@media (max-width: 820px) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="number"],
    input:not([type]),
    select,
    textarea {
        font-size: 16px;
    }
}