/*
 * Cloche Accessibility Stylesheet
 * WCAG 2.1 AA compliance fixes
 * Task #939845 — Accessibility audit
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. SKIP LINK
   Injected into every page by accessibility.js
   Visible only on keyboard focus — hidden off-screen otherwise
───────────────────────────────────────────────────────────────────────────── */
.a11y-skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 99999;
  padding: 12px 20px;
  background: var(--sage-deep, #2A4A24);
  color: #FFFFFF;
  font-family: 'Outfit', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.1s ease;
  white-space: nowrap;
}

.a11y-skip-link:focus {
  top: 0;
  outline: 3px solid #FFFFFF;
  outline-offset: -3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. FOCUS VISIBLE — stronger than cloche-polish.css default
   The 50%-opacity green ring is too faint. Replace with solid, high-contrast ring.
───────────────────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid #2A4A24 !important;  /* --sage-deep: 7.5:1 on white/cream */
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* Buttons and links get a slightly more prominent ring */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #2A4A24 !important;
  outline-offset: 3px !important;
  border-radius: 6px;
}

/* Remove default focus ring (only show :focus-visible) */
:focus:not(:focus-visible) {
  outline: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. COLOR CONTRAST FIXES
   Critical failures:
   - --moss (#82A677) on cream = 2.26:1 ❌  → use --sage (#4A7244) = 4.23:1 for large/bold
   - --text-light (#9A9490) on cream = 2.42:1 ❌ → upgrade small detail text
   - --terracotta (#A66348) on cream = 3.84:1 ❌ for small text
───────────────────────────────────────────────────────────────────────────── */

/* Section titles use --moss which fails. Use --sage for large serif headings. */
.section-title,
.section-label,
.card-section-title,
.group-label {
  color: var(--sage, #4A7244) !important;
}

/* Feed detail text (0.78rem) uses --text-light which fails. Upgrade to --text-muted. */
.feed-detail,
.plant-detail,
.card-detail,
.item-detail,
.task-detail,
.hint-text,
.helper-text,
.sub-label,
.meta-text,
.timestamp,
.time-label,
.date-label {
  color: var(--text-muted, #6B6560) !important;  /* 4.66:1 on cream ✅ */
}

/* Placeholder text — can be lighter under WCAG (decorative) but improve usability */
::placeholder {
  color: var(--text-muted, #6B6560) !important;
  opacity: 0.7 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. TOUCH TARGET MINIMUM SIZES (Apple HIG: 44×44px)
───────────────────────────────────────────────────────────────────────────── */
button,
[role="button"],
a.btn,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
select {
  min-height: 44px;
  min-width: 44px;
}

/* Icon-only buttons — use padding instead of min-width to avoid layout shift */
.icon-btn,
.btn-icon,
.close-btn,
.dismiss-btn,
[aria-label]:not([class*="text"]):not(a):not(input):not(select):not(textarea) {
  /* Already sized by icon, add padding to expand tap area */
  padding: max(8px, var(--space-2, 8px));
}

/* Bottom nav tabs — ensure adequate tap area */
.bw-tab {
  min-height: 56px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. NAVIGATION LANDMARKS
   Ensure nav elements have visible accessible names
───────────────────────────────────────────────────────────────────────────── */
nav:not([aria-label]):not([aria-labelledby]) {
  /* Catch-all for unlabeled navs — logged in console by accessibility.js */
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. LIVE REGIONS — prevent layout shift on announcement
───────────────────────────────────────────────────────────────────────────── */
.a11y-announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. REDUCED MOTION — additional specific overrides
   style.css and cloche-polish.css already cover * selector.
   These are targeted fixes for elements that animate via JS class toggles.
───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Page transition curtains from bottom-nav.js */
  .bw-curtain,
  .bw-page-transition {
    display: none !important;
  }

  /* Skeleton shimmer */
  .skeleton,
  .cp-skeleton,
  [class*="skeleton"] {
    animation: none !important;
    background: var(--cream-dark, #E5DDD0) !important;
  }

  /* Pull-to-refresh spinner */
  .ptr-spinner,
  .refresh-spinner,
  [class*="spinner"] {
    animation: none !important;
  }

  /* Chat message entrance */
  .msg-row {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Feed item animations */
  .feed-item,
  .plant-card,
  .card {
    animation: none !important;
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. HIGH CONTRAST MODE SUPPORT (Windows/forced-colors)
───────────────────────────────────────────────────────────────────────────── */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid ButtonText !important;
  }

  .btn,
  button {
    border: 2px solid ButtonText;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. FORM ACCESSIBILITY
───────────────────────────────────────────────────────────────────────────── */

/* Error state — ensure error messages are clearly visible */
.error-message,
.field-error,
.input-error,
[role="alert"] {
  color: var(--error, #A84040);
  font-weight: 500;
}

/* Required field indicator */
label.required::after,
label[data-required]::after {
  content: " *";
  color: var(--error, #A84040);
  aria-hidden: true;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. VISUALLY HIDDEN UTILITY (for screen-reader-only text)
───────────────────────────────────────────────────────────────────────────── */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}