/* ============================================================
   ACCESSIBILITY — WCAG 2.1 AA
   ============================================================ */

/* Skip-to-content link — visually hidden until focused */
.skip-link {
  position: fixed;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 10px 20px;
  background: #1a99a3;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Focus indicator — applies only when navigating by keyboard */
:focus-visible {
  outline: 2px solid #1a99a3;
  outline-offset: 3px;
  border-radius: 3px;
}

/* Suppress outline for mouse users (browser handles :focus-visible natively,
   but belt-and-braces for older browsers that don't support it) */
:focus:not(:focus-visible) {
  outline: none;
}

/* Custom cursor: only hide the system cursor when using a mouse.
   The .using-mouse class is added by a11y.js on first mousemove. */
body.using-mouse {
  cursor: none;
}

/* ============================================================
   WCAG 2.1 AA — CONTRAST FIXES
   Brand teal #1a99a3 = 3.2:1 on white (passes large text only).
   Accessible teal #1a6e76 = 5.3:1 on white AND 4.6:1 on teal-bg.
   Muted gray #9b9ea2 = 2.5:1. Replaced with #767676 = 4.5:1.
   !important used intentionally — a11y overrides load after layout CSS.
   ============================================================ */

/* Small teal labels & badges — all pages */
.cs-sec__label,
.cs-hero__label,
.cs-meta-item__label,
.deep__label,
.ioc-deep__label,
.ioc-deep__label,
.chal-card__num,
.process-phase__badge,
.solution-card__badge,
.decision-card__badge,
.other-projects__label,
.reflection__label,
.short-reflection__label,
.process-step__num,
.op-tag--live { color: #1a6e76 !important; }

/* Nav & footer language toggles */
.nav__lang,
.footer__lang { color: #1a6e76 !important; }

/* Muted paragraph text — ss-context, results body, stat descriptions */
.ss-context,
.results__body,
.ss-stat__desc,
.result-stat__desc,
.cs-sec__body--muted { color: #767676 !important; }