/* ============================================================
   OmniResume — Accessibility styles
   Covers: skip links, focus visibility, reduced motion,
   high-contrast, screen reader utilities, keyboard hints.
   ============================================================ */

/* ---------- Screen reader utilities ---------- */

.visually-hidden,
.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;
}

.visually-hidden-focusable:focus,
.visually-hidden-focusable:active,
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: var(--space-2) var(--space-4) !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: #ffffff;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: top var(--transition-fast);
}

.skip-link:focus,
.skip-link:focus-visible {
  top: var(--space-4);
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  color: #ffffff;
}

/* ---------- Focus visibility ---------- */

:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
  outline: none;
}

.skip-link:focus-visible,
.story-tap-left:focus-visible,
.story-tap-right:focus-visible {
  outline: 3px solid #ffffff;
}

/* On dark backgrounds, use a light focus ring */
.on-dark :focus-visible,
.story-root :focus-visible,
.builder-header :focus-visible {
  outline-color: #ffffff;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .scroll-reveal,
  .fade-in,
  .slide-up,
  .builder-preview-page,
  .story-slide,
  .story-progress-fill {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .pwa-offline-dot {
    animation: none !important;
  }
}

/* ---------- High contrast preferences ---------- */

@media (prefers-contrast: more) {
  :root {
    --color-border: #000000;
    --color-border-strong: #000000;
    --color-text: #000000;
    --color-text-muted: #1a1a1a;
    --color-text-soft: #2a2a2a;
    --color-primary: #0033cc;
    --color-primary-hover: #002199;
    --color-focus: #000000;
  }

  .btn-primary {
    background: #000000;
    color: #ffffff;
    border: 2px solid #ffffff;
  }

  .btn-secondary {
    border: 2px solid #000000;
  }

  .gallery-card,
  .dash-card,
  .blog-card,
  .example-card,
  .resource-card,
  .feature-card,
  .category-card {
    border: 2px solid #000000;
  }

  .resume-tag,
  .gallery-card-meta-tag,
  .blog-card-category {
    border: 1px solid #000000;
  }
}

/* ---------- Forced colors (Windows high contrast) ---------- */

@media (forced-colors: active) {
  .btn,
  .btn-primary,
  .btn-secondary,
  .gallery-card-btn,
  .dash-card-btn {
    forced-color-adjust: auto;
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .btn-primary,
  .gallery-card-btn-use,
  .dash-card-btn-primary {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }

  :focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  .resume-tag,
  .gallery-card-meta-tag {
    border: 1px solid CanvasText;
  }

  .skip-link {
    background: Highlight;
    color: HighlightText;
  }
}

/* ---------- Accessible form errors ---------- */

[aria-invalid="true"] {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.12);
}

.editor-error,
.form-error,
.field-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-danger);
  font-weight: 500;
}

.editor-error[hidden],
.form-error[hidden],
.field-error[hidden] {
  display: none;
}

[aria-busy="true"] {
  cursor: progress;
}

[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}

/* ---------- Touch target sizing ---------- */

@media (pointer: coarse) {
  .btn,
  .gallery-card-btn,
  .dash-card-btn,
  .gallery-page-btn,
  .pwa-update-apply,
  .pwa-update-dismiss,
  .nav-toggle,
  .modal-close,
  .builder-icon-btn,
  .builder-header-btn,
  .builder-preview-btn,
  .editor-item-btn,
  .editor-section-btn {
    min-height: 44px;
    min-width: 44px;
  }

  .nav-list a,
  .mobile-nav-list a,
  .footer-col a,
  .breadcrumbs a,
  .blog-category-pill,
  .examples-chip,
  .gallery-filter-option,
  .gallery-checkbox {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .gallery-category-list,
  .gallery-style-list {
    gap: var(--space-2);
  }
}

/* ---------- Keyboard-only visible hints ---------- */

body.using-keyboard .nav-list a:focus,
body.using-keyboard .mobile-nav-list a:focus {
  background: var(--color-bg-muted);
}

/* ---------- Focus within (card focus) ---------- */

.gallery-card:focus-within,
.dash-card:focus-within,
.blog-card:focus-within,
.example-card:focus-within {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* ---------- Landmark region labels (screen readers) ---------- */

[role="region"][aria-label]:not(:focus):not(:hover) {
  /* Nothing visual, aria-label is enough for SRs */
}

/* ---------- Print: hide skip links ---------- */

@media print {
  .skip-link,
  .visually-hidden,
  .sr-only {
    display: none !important;
  }
}