/* ==========================================================================
   ChefQuote — accessibility layer
   --------------------------------------------------------------------------
   Target: WCAG 2.1 Level AA, which is the standard US courts apply to
   private-business sites under ADA Title III (there is no codified Title III
   technical rule; 2.1 AA is the working benchmark in litigation and
   settlements). Selected WCAG 2.2 criteria are included where they are cheap
   and clearly beneficial — notably 2.5.8 target size.

   Load LAST, after brand.css / mobile.css / editor.css:
       <link rel="stylesheet" href="a11y.css">
       <script src="a11y.js" defer></script>

   This file changes appearance only where an accessibility failure exists.
   ========================================================================== */


/* --------------------------------------------------------------------------
   2.4.1 Bypass blocks — skip link
   Injected by a11y.js. Visually hidden until focused, then clearly visible.
   -------------------------------------------------------------------------- */
.cq-skip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  padding: 12px 18px;
  background: #141414;
  color: #fff;
  font: 700 0.95rem/1.2 Inter, "Segoe UI", Arial, sans-serif;
  text-decoration: none;
  border-radius: 0 0 9px 0;
}

.cq-skip:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  left: 0;
  outline: 3px solid #fff;
  outline-offset: -6px;
}


/* --------------------------------------------------------------------------
   2.4.7 Focus visible / 1.4.11 Non-text contrast
   A focus ring that is visible on both light and dark surfaces. Two rings:
   a dark inner and a light outer, so one of them always has contrast.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid #141414 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9) !important;
  border-radius: 4px;
}

/* Dark surfaces need the inverse */
[class*="dark"] :focus-visible,
.cq-editbar :focus-visible,
.cq-secnav :focus-visible {
  outline-color: #fff !important;
  box-shadow: 0 0 0 6px rgba(20, 20, 20, 0.9) !important;
}

/* Never remove focus for keyboard users, even if a page tries */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline-style: solid !important;
}


/* --------------------------------------------------------------------------
   2.5.8 Target size (minimum) — WCAG 2.2 AA, 24x24 CSS px
   Applied via a pseudo-element so layout is not disturbed: the hit area
   grows without the visible control changing size.
   -------------------------------------------------------------------------- */
a[href],
button,
[role="button"],
[role="tab"],
input[type="checkbox"],
input[type="radio"],
summary {
  position: relative;
}

a[href]::after,
button::after,
[role="button"]::after,
[role="tab"]::after,
summary::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  min-width: 24px;
  min-height: 24px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  z-index: 0;
}

/* Do not let the hit-area pseudo cover real content or break icon buttons */
a[href] > *,
button > * {
  position: relative;
  z-index: 1;
}

/* Elements that already use ::after for visual purposes are exempt */
.cq-nav-toggle::after,
.brand-mark::after,
header::after,
.mark::after {
  content: none !important;
}


/* --------------------------------------------------------------------------
   1.4.3 Contrast (minimum)
   Muted greys used for captions and helper text were the recurring failure.
   #686868 on #f3f3f0 is roughly 4.7:1 and passes; lighter greys used in a
   few places do not. These raise the failing values to the AA threshold
   without changing the monochrome design language.
   -------------------------------------------------------------------------- */
.cq-a11y-fixed {
  color: #5c5c5c;
}

/* Placeholder text is frequently below threshold by default */
::placeholder {
  color: #5f5f5f;
  opacity: 1;
}

/* Small helper text that sat at the light end of the grey scale */
.glabel,
.timer,
.flag,
.tile .c,
.sv .feeds,
.q .qm,
.row .hid {
  color: #5c5c5c;
}


/* --------------------------------------------------------------------------
   1.4.4 Resize text / 1.4.10 Reflow
   Content must remain usable at 200% zoom and at 320 CSS px width without
   two-dimensional scrolling.
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 400px) {
  html, body { overflow-x: hidden; }
  * { max-width: 100%; }
}


/* --------------------------------------------------------------------------
   1.4.12 Text spacing
   Content must not clip when users override spacing.
   -------------------------------------------------------------------------- */
p, li, td, th, dd, h1, h2, h3, h4, h5, h6, label, button, a {
  overflow-wrap: break-word;
}


/* --------------------------------------------------------------------------
   1.4.13 Content on hover / 2.3.3 Animation from interactions
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   1.3.1 Info and relationships — visually hidden helper
   Used by a11y.js to supply names to screen readers without visual change.
   -------------------------------------------------------------------------- */
.cq-sr {
  position: absolute !important;
  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;
}


/* --------------------------------------------------------------------------
   1.4.1 Use of colour
   Status in this product is coded by SHADE, not hue, which already satisfies
   this. Where a status bar is the only indicator, add a text equivalent.
   -------------------------------------------------------------------------- */
.tile::before,
.q::before {
  /* shade-coded bars remain, but a11y.js adds an off-screen text label */
}


/* --------------------------------------------------------------------------
   3.2.x Consistent identification — forced-colours / high-contrast mode
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .tile,
  .card,
  .q,
  .sv,
  .cq-pp {
    border: 1px solid CanvasText;
  }

  :focus-visible {
    outline: 3px solid Highlight !important;
  }
}


/* ==========================================================================
   WCAG 2.1 AA — remaining fixes found by full criterion audit
   ========================================================================== */

/* --------------------------------------------------------------------------
   1.4.11 Non-text Contrast (AA)
   Form-control borders measured at 1.58:1 against their background
   (rgb(206,206,202) on white). The criterion requires 3:1 for the visual
   boundary of a control. Darkened to the minimum that clears the threshold
   while staying inside the warm-grey palette — the field still reads as a
   quiet hairline, it is simply now perceivable to low-vision users.
   -------------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  border-color: #767671 !important;
}

/* Checkbox and radio indicators need the same boundary contrast */
input[type="checkbox"],
input[type="radio"] {
  outline: 1px solid #767671;
  outline-offset: 0;
}

/* Buttons that rely on a border rather than a fill */
button:not([class*="primary"]):not(.btn):not(.cta),
.button.secondary,
.xbtn,
.scale button,
.rail button {
  border-color: #767671 !important;
}

/* Custom control tracks and thumbs */
input[type="range"] {
  accent-color: #1d1d1d;
}


/* --------------------------------------------------------------------------
   2.4.7 Focus Visible (AA)
   workspace.html contains `.palette input:focus { outline:none; box-shadow:none }`,
   which removes the focus indicator entirely for keyboard users. Restored.
   Any future rule that suppresses focus is overridden by this block.
   -------------------------------------------------------------------------- */
.palette input:focus,
.palette input:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: 3px solid #141414 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9) !important;
}

/* Keyboard focus must never be suppressed anywhere */
*:focus-visible {
  outline-style: solid !important;
  outline-width: 3px !important;
}


/* --------------------------------------------------------------------------
   1.4.4 Resize Text (AA)
   Root font size must remain relative so browser text scaling works.
   -------------------------------------------------------------------------- */
html {
  font-size: 100%;
}


/* --------------------------------------------------------------------------
   3.2.3 Consistent Navigation (AA)
   Navigation repeated across pages must keep the same relative order.
   Enforced structurally by a11y.js; this keeps its presentation identical.
   -------------------------------------------------------------------------- */
.cq-toolstrip,
header .nav-actions,
.sitenav {
  /* order is set in markup; no visual reordering permitted here */
  flex-direction: row;
}


/* --------------------------------------------------------------------------
   2.4.7 Focus Visible — hard guarantee
   workspace.html suppresses the indicator with
   `.palette input:focus { outline:none; box-shadow:none }`.
   An equal-specificity override can lose depending on source order, so the
   indicator is restored on :focus as well as :focus-visible, and at higher
   specificity than the suppressing rule.
   -------------------------------------------------------------------------- */
html body .palette input:focus,
html body input:focus,
html body select:focus,
html body textarea:focus,
html body button:focus,
html body a:focus,
html body [role="tab"]:focus,
html body [role="button"]:focus,
html body summary:focus,
html body [tabindex]:focus {
  outline: 3px solid #141414 !important;
  outline-offset: 2px !important;
}

/* Keyboard users additionally get the halo for contrast on any surface */
html body *:focus-visible {
  outline: 3px solid #141414 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9) !important;
}


/* --------------------------------------------------------------------------
   1.4.11 Non-text Contrast — gradient-filled buttons
   A control whose boundary is a dark gradient fill against a light page does
   not rely on its border for perceivability; the light hairline on it is
   decorative. Its contrast comes from the fill. Made explicit so the
   boundary is unambiguous regardless.
   -------------------------------------------------------------------------- */
.btn,
.cta,
.cq-go,
.btn-next {
  border-color: rgba(20, 20, 20, 0.55) !important;
}