@charset "utf-8";
/* ================================================================
   Get Me Automated — Accessibility layer (WCAG 2.1 AA)
   ----------------------------------------------------------------
   Loaded immediately after global.css in includes/header.php.
   Kept in its own file so global.css stays untouched.

   Every contrast ratio below was measured against the live token
   values in assets/css/global.css, not eyeballed. If you retune a
   brand token, re-measure — several of these are close to the line.
   ================================================================ */

/* ----- 1. Contrast: retune two brand tokens -------------------- */
:root {
  --teal-dk:   #007A84; /* was #008B96 — 3.85:1 on cream, now 4.80:1.
                           Fixes a:hover, .nav-logo:hover, .blog-card h3 a:hover,
                           .icon-teal-dk, .is-teal-dk, and the tick glyphs. */
  --yellow-dk: #8B6F0A; /* was #D9AC0F — 2.00:1 on cream, now 4.51:1.
                           Used by .hero h1 .accent-yellow. */
}

/* Cream text on mid-brand fills fails badly. Black passes everywhere:
     cream on --teal   #00C7CF =  1.96:1   ink =  10.07:1
     cream on --tomato #F20000 =  4.13:1   ink =   4.78:1
   .btn-teal and .form-success carry real text, so these are 1.4.3
   failures, not just cosmetic. */
.btn-teal,
.form-success,
.icon-teal,
.icon-tomato,
.card .icon-lg.is-teal,
.card .icon-lg.is-tomato,
.photo-card-1.photo-fallback,
.photo-card-1.photo-fallback .photo-fallback-label { color: var(--ink); }

/* .hero h1 .accent was var(--teal) on cream = 1.96:1. Large text
   still needs 3.0:1; --teal-dk above gives 4.80:1. */
.hero h1 .accent { color: var(--teal-dk); }

/* ----- 2. Visible focus — 2.4.7, 2.4.11 ------------------------ */
/* global.css defines no :focus-visible anywhere, so keyboard users
   currently have no visible focus indicator on any page. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Invert on dark surfaces, where a black ring is invisible. */
.dark-section :focus-visible,
.pricing-card.is-featured :focus-visible,
.skip-link:focus-visible { outline-color: var(--yellow); }

/* global.css line ~559 sets `outline: 0` on every field. Put it back. */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: var(--shadow-sm);
}

/* Focused and anchored elements must clear the 76px sticky header. */
html { scroll-padding-top: 96px; }
#main:focus { outline: none; }

/* ----- 3. Reduced motion — 2.3.3 ------------------------------- */
/* global.css sets `scroll-behavior: smooth` with no guard. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .btn:active { transform: none; }
}

/* ----- 4. Screen-reader-only utility --------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}