/* a11y.css: accessibility layer shared by every page (WCAG 2.2 AA).
   Loaded last so it can correct contrast and focus without touching each component. */

/* ── Skip link: first thing a keyboard user reaches ───────────────────────── */
.skip-link {
  position: fixed; left: 16px; top: -100px; z-index: 10000;
  padding: 12px 18px; border-radius: 4px;
  background: #0A0A0A; color: #F2F0EC; border: 2px solid #E5484D;
  font: 500 15px/1.2 'Inter Tight', system-ui, sans-serif; text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus, .skip-link:focus-visible { top: 12px; }
main:focus { outline: none; }

/* ── Screen-reader-only text ──────────────────────────────────────────────── */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Focus: one strong ring that reads on light and dark (3.9:1 and 5.1:1) ─ */
:focus-visible { outline: 3px solid #E5484D !important; outline-offset: 3px; }
a:focus-visible, button:focus-visible { border-radius: 2px; }

/* ── Contrast on dark surfaces (cases, notes, shared footer) ──────────────── */
.footer h2 em,
.hero h1 em,
#practice .section-head h2 em,
.notes-hero em { color: #C9212B; } /* large text: 3.7:1, brand red */
.hero-meta .item > span,
.hero-meta .item > span span,
.notes-hero .note-tag { color: #E5484D; } /* small text: 5.1:1 */
.notes-hero .note-tag::after { background: #E5484D; }
.footer-base,
.footer .col-h,
.case-meta-label { color: rgba(242, 240, 236, 0.62); }
.note-card-meta { color: #6B6A66; }

/* ── Footer credits: coffee line + accessibility line ─────────────────────── */
.footer-credits { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.footer-a11y { display: inline-flex; align-items: center; gap: 8px; }
.footer-a11y a { color: #F2F0EC; text-decoration: underline; text-decoration-color: #E5484D; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.footer-a11y a:hover { color: #E5484D; }
@media (max-width: 720px) {
  .footer-credits { align-items: flex-start; text-align: left; }
}

/* ── Back to top ──────────────────────────────────────────────────────────── */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
  background: #0A0A0A; color: #F2F0EC; border: 1.5px solid #8A8A87;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background .25s ease, border-color .25s ease;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: #8B1A1F; border-color: #8B1A1F; }
.to-top svg { display: block; }
@media (max-width: 720px) { .to-top { right: 16px; bottom: 16px; width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* ── Home: pause control for the case cover videos ───────────────────────── */
.vid-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid rgba(0, 0, 0, .22); background: transparent; color: #0E0E0E;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.vid-toggle:hover { background: #0E0E0E; color: #F2F0EC; border-color: #0E0E0E; }
.vid-toggle-row { display: flex; justify-content: flex-end; margin: -12px 0 28px; }

/* ── Comfortable targets for small links (WCAG 2.5.8 AA, aiming for 44px) ── */
.footer ul a, .footer-a11y a { display: inline-block; padding: 4px 0; }
.notes-filters button { min-height: 44px; }