/* ============================================================
   accessibility.css — WCAG 2.1 AA / ADA compliance layer
   Loaded AFTER the page's primary stylesheet so it can override.
   ============================================================ */

/* ----------------------------------------------------------------
   Brighter red variant for SMALL TEXT only.
   Brand red #D0140F has ~3.4:1 contrast against #0E0E11 (passes AA
   for large text 3:1, but fails normal text 4.5:1). #E83434 hits
   ~4.55:1 — preserves brand feel, meets AA for normal text. We keep
   brand --red for buttons, dots, bars, headlines.
   ---------------------------------------------------------------- */
:root {
  --red-text:   #E83434;
  --steel-text: var(--steel); /* already passes AA */
  --jade-text:  var(--jade);  /* already passes AA */
}

/* Practice-area aware text colors */
[data-pa="csd"] { --pa-text: var(--red-text); }
[data-pa="sm"]  { --pa-text: var(--steel-text); }
[data-pa="aia"] { --pa-text: var(--jade-text); }

/* Override small-text usages of --red and --pa */
.eyebrow,
.tw-eyebrow,
.callout .co-eyebrow,
.legal-cta-row .lcr-eyebrow,
.pa-card .pa-label,
.build-tabs .tabs-nav button .pa-label,
.build-stacked .row .pa-label,
.method-map .node .prevents,
.stage-card .sc-prevents .ind,
.sc-inputs .ii .ii-label,
.frac-grid .fc .fc-num,
.cost-math .cm-op,
.method-list .step .num,
.fn-step.is-this .fn-num,
.leave.us .leave-tag,
.cover .cover-num,
.cover .cover-tag,
.signal .sig-num,
.doc-row .dr-num,
.doc-stamp .stamp-mark,
.legal-toc ol li a:hover .toc-num,
.legal-content p a:hover {
  color: var(--red-text);
}

/* Practice-area scoped overrides */
[data-pa] .eyebrow,
[data-pa] .pa-section-head .eyebrow,
[data-pa] .deliverables .service .meta .index,
[data-pa] .deliverables .service .example .ex-outcome .ind,
[data-pa] .work-frame .signals .item .tag,
[data-pa] .pa-breadcrumb .stage.is-current .num,
[data-pa] .pa-breadcrumb .stage.is-current .tag,
[data-pa] .btn-text {
  color: var(--pa-text);
}

/* Corner mark dot + small mono captions referencing --red */
.corner-mark { color: var(--text-muted); }

/* Tweaks UI: eyebrow + small labels need brighter red */
.tweaks-toggle { color: var(--text-secondary); }

/* ----------------------------------------------------------------
   Skip-to-main-content link — first focusable element on the page
   ---------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  background: #F5F5F5;
  color: #0E0E11;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
  text-decoration: none;
  border: 2px solid #0E0E11;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: top 0.18s ease-out;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 16px;
  outline: 3px solid #E83434;
  outline-offset: 2px;
}

/* ----------------------------------------------------------------
   Visible focus indicators (keyboard accessibility)
   Uses :focus-visible so mouse-clicks don't show a ring,
   but tab navigation does.
   ---------------------------------------------------------------- */
*:focus { outline: none; } /* base reset, kept */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid #E83434;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Buttons with their own dark backgrounds get an inset ring instead */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-pa:focus-visible,
.btn-jade:focus-visible,
.btn-steel:focus-visible {
  outline: 3px solid #F5F5F5;
  outline-offset: -5px;
}

/* Nav links: tighter offset since they sit close to siblings */
.nav-links a:focus-visible,
.nav-marker:focus-visible,
.footer .col ul a:focus-visible {
  outline-offset: 4px;
}

/* ----------------------------------------------------------------
   Reduced motion — honor prefers-reduced-motion: reduce
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .skip-link {
    transition: none !important;
  }
}

/* ----------------------------------------------------------------
   Screen-reader only utility
   ---------------------------------------------------------------- */
.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;
}

/* ----------------------------------------------------------------
   Min hit target on small interactive controls (WCAG 2.5.5 target size)
   ---------------------------------------------------------------- */
.btn,
.nav-links a,
.nav-marker,
.footer .col ul a {
  min-height: 24px;
}