/* Talevara Step 29 accessibility hardening. Shared, presentation-neutral rules. */
:root { --a11y-focus: #8f331f; --a11y-focus-contrast: #fff; }

:focus-visible {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 3px !important;
}

[aria-invalid="true"] {
  border-color: #a22f22 !important;
  box-shadow: 0 0 0 2px rgba(162,47,34,.16) !important;
}

.a11y-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Keep modal/off-canvas content out of pointer interaction while hidden. */
[aria-hidden="true"].reader-drawer { visibility: hidden; }
[aria-hidden="false"].reader-drawer { visibility: visible; }

/* Primary controls should remain comfortably targetable without inflating inline text links. */
button,
.button,
input[type="button"],
input[type="submit"],
input[type="reset"],
select,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea {
  min-block-size: 40px;
}

@media (pointer: coarse) {
  button,
  .button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea,
  .reader-icon-button,
  .drawer-close,
  .reader-annotation-close,
  .vn-hotspot {
    min-block-size: 44px;
    min-inline-size: 44px;
  }
}

/* Focus must never be hidden under sticky headers/drawers. */
:target,
[id] { scroll-margin-top: 96px; }

/* Forced-colour users must retain state/focus boundaries. */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight !important; }
  [aria-pressed="true"], [aria-selected="true"], [aria-current="page"] { outline: 2px solid Highlight; }
  .choice-card, .story-card, .review-card, .comment-card, .support-case-item { border: 1px solid CanvasText; }
}

/* System motion preferences always win over decorative motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}