/* Krazy Stitcher site accessibility layer (Tier 1, 2026-10-10).
   Linked LAST on every page so it can override the page's own styles.
   Each rule names the WCAG 2.2 criterion it addresses. */

/* 2.4.11 Focus Not Obscured: the sticky navbar must not cover a focused element or an anchor target */
html { scroll-padding-top: 80px; }

/* 2.1.1 / 2.4.7: scrollable regions are keyboard focusable and show a ring */
[tabindex="0"]:focus-visible { outline: 3px solid var(--focus-ring, var(--accent, #d31938)); outline-offset: 2px; }
.ks-table-scroll { overflow-x: auto; max-width: 100%; }

/* 1.4.10 Reflow: long inline code wraps instead of forcing a sideways scroll at 320 px */
code { overflow-wrap: anywhere; }

/* 1.4.1 Use of Color: in-text links in FAQ answers are underlined, not colour-only */
.faq-a a, .faq-a a:visited { text-decoration: underline; text-underline-offset: 2px; }

/* 2.4.7 Focus Visible: rings inside overflow:hidden cards were clipped, so draw them inside */
.accordion-btn:focus-visible, .article-header:focus-visible { outline-offset: -3px; }

/* 1.4.11 Non-text Contrast: the red ring on the navy navbar measured 2.07:1, white is 14:1 */
.navbar a:focus-visible, .nav-toggle:focus-visible ~ .nav-toggle-label { outline: 3px solid #fff; outline-offset: 2px; }

/* 1.4.11 / 1.4.3: the grey cross in comparison tables measured 1.5:1 (#666 is 5.7:1 on white, 5.2:1 on the pink-tinted column) */
.cross { color: #666; }

/* 2.2.2 Pause, Stop, Hide: control for the rotating character (added by site-a11y.js) */
.ks-pause-btn { display: block; margin: 0 auto 14px; padding: 4px 14px; font: inherit; font-size: 14px; line-height: 1.4; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 6px; cursor: pointer; min-height: 28px; }
.ks-pause-btn:hover { text-decoration: underline; }
.ks-pause-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #1a1e2e; }

/* Trial page messages (class names added in KrazyStitcher-Trial.html) */
.msg-ok { color: #2e7d32; font-weight: 600; }
.msg-err { color: #c0392b; }

@media (prefers-color-scheme: dark) {
  /* 1.4.3: white on #f47a8e measured 2.62:1; dark navy on it is about 7:1 */
  .hero-badge { color: #1a1e2e; }
  .cross { color: #aab3c5; }
  .upgrade-table .u-check { color: #8fc9a0; }
  .upgrade-table .u-cross { color: #b4bccb; }
  .msg-ok { color: #8fc9a0; }
  .msg-err, .trial-status.expired { color: #ff9aa8; }
}