/* ============================================================================
   ADA / WCAG 2.1 AA helper stylesheet — link into EVERY portal page:
   <link rel="stylesheet" href="/a11y.css">
   Covers the cross-cutting accessibility requirements so each Stitch page only
   needs semantic markup (labels, landmarks, alt text) on top of this.
   ========================================================================== */

/* 1) Skip link — first focusable element; jumps past nav to <main id="main">. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;
  background:#0051d5;color:#fff;padding:10px 18px;border-radius:0 0 8px 0;
  font:600 14px Inter,system-ui,sans-serif;text-decoration:none}
.skip-link:focus{left:0}

/* 2) Visible focus on ALL interactive elements (WCAG 2.4.7).
      Never remove outlines without a replacement. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible{
  outline:3px solid #0051d5;outline-offset:2px;border-radius:4px}

/* 3) Minimum 44×44px touch targets for buttons/links acting as controls
      (WCAG 2.5.5 / target-size). */
button,[role="button"],.btn,input[type="submit"],input[type="button"]{
  min-height:44px}

/* 4) Screen-reader-only utility (label icon-only controls, give context). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 5) Respect reduced-motion (WCAG 2.3.3) — kill animation for users who ask. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* 6) Required-field indicator that is NOT color-only (WCAG 1.4.1). */
label .req{color:#ba1a1a;font-weight:700}
label .req::after{content:" (required)";font-size:.85em;color:#45464d;font-weight:400}

/* 7) Error styling pairs an icon/text with color, never color alone. */
.field-error{color:#93000a;font-size:13px;font-weight:600;display:flex;gap:6px;align-items:center;margin-top:4px}
.field-error::before{content:"⚠";font-size:14px}

/* 7b) Links inside text blocks must not rely on color alone (WCAG 1.4.1) — underline
   links within paragraphs/list items so they're distinguishable without color. */
main p a, main li a, footer a { text-decoration: underline; }

/* 8) Ensure form inputs meet contrast + have a non-placeholder label.
      (Markup must still place a <label for> above each field.) */
input,select,textarea{font-size:16px} /* 16px avoids iOS zoom + aids low vision */