/**
 * HerbariumIQ Accessibility & WCAG 2.2 AA Stylesheet
 *
 * Implements:
 * - Visually hidden utility with :focus-within/:active opt-out for skip links
 * - High-contrast :focus-visible rings with outline-offset and forced-colors fallback
 * - Minimum 24x24px (48x48px on coarse pointers) interactive touch targets
 * - Reduced motion custom property pattern (--animation-reduced)
 * -Centralized live announcer support
 */

/* 1. Visually Hidden Utility (Screen-reader accessible, focusable opt-out) */
.visually-hidden:where(:not(:focus-within, :active)),
.screen-reader-text:where(:not(:focus-within, :active)) {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* Skip to main content link when focused */
.skip-link:focus-visible,
.skip-link:active {
  position: fixed !important;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 10000;
  background-color: var(--herbariumiq-forest);
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(20, 51, 38, 0.35);
  outline: 3px solid var(--herbariumiq-amber-pop);
  outline-offset: 3px;
}

/* 2. High-Contrast Focus Indicators (:focus-visible, never bare outline:none) */
:where(a:any-link, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--herbariumiq-teal-pop);
  outline-offset: 3px;
}

@media (forced-colors: active) {
  :where(a:any-link, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 3px;
  }
}

/* 3. WCAG 2.5.8 AA Touch Target Sizing */
:where(button, .herbariumiq-btn, .herbariumiq-supplier-cta, input[type="checkbox"], input[type="radio"], select, summary) {
  min-block-size: 36px;
  min-inline-size: 36px;
}

:where(.herbarium-nav-link, .herbarium-drawer-close, .herbariumiq-primary-btn, input[type="text"], input[type="search"], input[type="email"]) {
  min-block-size: 48px;
}

@media (pointer: coarse) {
  :where(button, .herbariumiq-btn, .herbariumiq-supplier-cta, .herbarium-nav-link, input[type="text"], input[type="search"], input[type="email"], select) {
    min-block-size: 52px;
  }
}

/* 4. Reduced Motion Support via Registered Custom Property */
@property --animation-reduced {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

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

/* 5. Native Switch Control Styling & Fallback */
input[type="checkbox"][switch] {
  accent-color: var(--herbariumiq-teal-pop);
  margin: 0;
  cursor: pointer;
  min-inline-size: 44px;
  min-block-size: 24px;
}

input[type="checkbox"][switch]:focus-visible {
  outline: 3px solid var(--herbariumiq-amber-pop);
  outline-offset: 4px;
}

/* 6. Non-Intrusive Form Validation (:invalid:user-invalid) */
input:invalid:user-invalid,
select:invalid:user-invalid,
textarea:invalid:user-invalid {
  border-color: var(--herbariumiq-terracotta-pop);
  background-color: #fff8f6;
}