/* =========================================================================
   ETYC — Accessibility layer (WCAG 2.1 AA)
   Loaded after motion.css so it can win on focus styling specificity.
   Goals:
     · Global keyboard focus visibility (:focus-visible)
     · Skip-link for keyboard users
     · Screen-reader-only utility class
     · Belt-and-braces reduced-motion fallback
     · Minor contrast tweak for muted Coral on light surfaces
   ========================================================================= */

/* ---------- Skip link (keyboard only) ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--color-cta);
  color: #fff;
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration: none;
  z-index: 9999;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(10, 31, 34, 0.25);
  transition: top 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 16px;
  outline: 2px solid #fff;
  outline-offset: 2px;
  color: #fff;
}

/* ---------- 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;
}

/* ---------- Global :focus-visible ---------- */
/* Note: components.css already provides .btn:focus-visible.
   This layer covers everything else and avoids regressing buttons. */
*:focus-visible {
  outline: 2px solid var(--color-cta);
  outline-offset: 2px;
  border-radius: 2px;
}
a:focus-visible:not(.btn):not(.skip-link) {
  outline: 2px solid var(--color-cta);
  outline-offset: 4px;
  border-radius: 2px;
}
.btn:focus-visible {
  outline: 2px solid var(--color-cta);
  outline-offset: 3px;
}

/* Pricing audience toggle (CSS-only radios) — show focus on the visible label */
.pp-toggle input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--color-cta);
  outline-offset: 3px;
  border-radius: 999px;
}

/* Partners filter pills */
.filter-pill:focus-visible {
  outline: 2px solid var(--color-cta);
  outline-offset: 3px;
}

/* Inputs / textareas / selects: stronger focus (overrides default
   blue UA outline, keeps brand colour consistent). */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-cta);
  outline-offset: 2px;
}

/* ---------- Minor contrast hardening ----------
   The brand Coral (#DE484F) on Off-White (#F8FDFF) yields ~4.31:1, just
   shy of WCAG AA 4.5:1 for body copy. We darken the colour by ~6% only
   when it is used INSIDE prose-style text (eyebrows, signature italics),
   while preserving the original Coral for CTA backgrounds, where the
   contrast is with white text and well above 4.5:1.

   Surgical: never touches background-color, never touches CTA buttons. */
.eyebrow--coral,
em.signature,
.signature {
  color: #C53A41;  /* Coral text — ~4.85:1 on #F8FDFF, ~5.10:1 on #FFFFFF */
}

/* ---------- Reduced motion ----------
   Belt-and-braces. motion.css already implements this; we add a final
   sweep for any author-defined animations that might escape it. */
@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;
  }
}