/* =====================================================================
   RA accessibility layer (Cowork, 2026-08-31) — WCAG 2.2 AA
   v2: search boundary on the oval; pause button hardened against theme
   button styles (no grey box on click/focus).
   Enqueued by mu-plugins/ra-a11y.php, versioned by filemtime.
   Spec: 05_Internal/Design System/CLAUDE Masters/RA - CLAUDE (master).md
   ===================================================================== */

:root {
  --ra-focus: #7A2A24;                 /* oxblood ring — 8.6:1 on sand */
  --ra-line-input: rgba(26,23,20,0.45); /* form-control borders ≥ 3:1 (1.4.11) */
}

/* ---- Canonical focus indicator (2.4.7 / 2.4.11 / 2.4.13) ----
   Oxblood ring on light grounds; cream halo carries dark grounds.
   .ra-vpause is excluded — it sits on video and gets its own cream ring. */
a:focus-visible,
button:not(.ra-vpause):focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ra-focus, #7A2A24) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(251,248,242,0.85) !important;
}

/* ---- Form-control boundaries (1.4.11) ----
   Visible ≥3:1 border on text-entry controls. Hairline dividers keep --ra-line.
   The header search is excluded here and handled below: its input sits INSIDE
   an oval pill (the <form>), so a border on the input draws a rectangle within
   the oval. The boundary belongs on the pill itself. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=range]):not([type=search]):not(#ra-chrome-search):not([name="s"]),
select,
textarea {
  border: 1px solid var(--ra-line-input) !important;
}

/* ---- Search: boundary on the oval, not the input ---- */
.rapdp header nav form:has(#ra-chrome-search),
.rapdp header nav form:has(input[type=search]),
.raap header nav form:has(input[type=search]),
form.search-form:has(input[type=search]),
form[role="search"] {
  border: 1px solid var(--ra-line-input) !important;
  border-radius: 999px !important;
}
#ra-chrome-search,
input[type=search],
form[role="search"] input[name="s"],
form.search-form input[name="s"] {
  border: 0 !important;
  background: transparent !important;
}
form[role="search"]:focus-within,
.rapdp header nav form:has(#ra-chrome-search):focus-within {
  outline: 2px solid var(--ra-focus, #7A2A24) !important;
  outline-offset: 2px !important;
}
#ra-chrome-search:focus-visible,
input[type=search]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ---- Skip link (2.4.1) ---- */
.ra-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100000;
  background: #7A2A24; color: #FBF8F2 !important;
  padding: 12px 20px; border-radius: 0 0 8px 0; text-decoration: none;
  font: 600 15px/1 "Geist", "Inter", system-ui, sans-serif;
}
.ra-skip-link:focus { left: 0; }

/* ---- Video pause control (2.2.2) ----
   Media protection stays on img only; video must accept clicks. */
video { pointer-events: auto !important; }

/* Every state locked: themes style bare <button> with a dark fill, which
   showed as a grey box on click/focus. Nothing but the cream ring may paint. */
.ra-vpause,
.ra-vpause:hover,
.ra-vpause:focus,
.ra-vpause:focus-visible,
.ra-vpause:active {
  position: absolute; right: 10px; bottom: 10px; z-index: 6;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important; margin: 0 !important;
  border-radius: 999px !important;
  cursor: pointer;
  color: #FBF8F2 !important;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .2s ease;
  opacity: .85;
}
.ra-vpause::before {                        /* small outlined cream circle */
  content: ""; position: absolute; inset: 6px;
  border: 1.5px solid rgba(251,248,242,0.9); border-radius: 999px;
  background: transparent !important;
}
.ra-vpause:hover { opacity: 1; }
/* keyboard focus: brighten the cream ring instead of a box */
.ra-vpause:focus-visible { opacity: 1; }
.ra-vpause:focus-visible::before {
  border-color: #FBF8F2; border-width: 2.5px;
  box-shadow: 0 0 0 2px rgba(24,20,16,.55);
}
.ra-vpause svg {
  width: 13px; height: 13px; display: block; position: relative;
  fill: #FBF8F2; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}

/* ---- Windows High Contrast / forced colors ---- */
@media (forced-colors: active) {
  * { border-color: CanvasText; }
  .ra-vpause::before { border: 1.5px solid CanvasText; }
  .ra-vpause svg { fill: CanvasText; }
  hr { border-top: 1px solid CanvasText; }
}

/* ---- Terracotta-on-light safety net ----
   Live audit 2026-08-31 found ZERO terracotta text on light grounds; the
   spec now forbids it (terracotta = on-dark only, oxblood on light). */