/* accessibility.css — Needle brand accessibility baseline.
   Drop-in stylesheet for any Needle product surface. Provides focus-visible
   outlines, reduced-motion overrides, high-contrast mode improvements, and
   notranslate protection for icon ligatures.                                */

/* ---------------------------------------------------------------------------
   Focus-visible outlines
   Show a clear keyboard-focus ring whenever :focus-visible fires.
   Uses the semantic focus border color when available, otherwise falls back to
   a system blue.
   --------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--border-focus, #2563eb);
  outline-offset: 2px;
}

/* Pill / fully-rounded elements keep the ring shape consistent. */
[class*="pill"]:focus-visible,
[style*="border-radius: 999"]:focus-visible {
  outline-offset: 3px;
}


/* ---------------------------------------------------------------------------
   Reduced motion
   Disable transitions, animations, and smooth scrolling when the user
   prefers reduced motion.  Individual properties can opt back in with
   the --allow-motion custom property if strictly necessary.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;   /* near-zero keeps JS listeners */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---------------------------------------------------------------------------
   High contrast (prefers-contrast: more)
   Strengthen visual boundaries so UI is legible in high-contrast mode.
   --------------------------------------------------------------------------- */

@media (prefers-contrast: more) {
  :root {
    --border-subtle: #666;
    --border-strong: #222;
    --shadow-subtle: none;
    --shadow-panel: none;
    --shadow-floating: none;
  }

  /* Ensure minimum text contrast */
  body {
    color: #000;
  }

  /* Strengthen card and panel borders */
  [class*="card"],
  [class*="panel"],
  [class*="pill"] {
    border-width: 2px;
    border-style: solid;
  }

  /* Stronger focus ring */
  :focus-visible {
    outline-width: 3px;
    outline-offset: 2px;
  }
}


/* ---------------------------------------------------------------------------
   Forced colors (High Contrast Mode)
   Let the OS palette control foreground / background. Ensure custom
   decorations (box-shadow, gradients) degrade gracefully.
   --------------------------------------------------------------------------- */

@media (forced-colors: active) {
  * {
    forced-color-adjust: auto;
  }

  /* Remove decorative shadows — they render as opaque boxes */
  [class*="card"],
  [class*="panel"],
  [class*="pill"] {
    box-shadow: none;
  }

  /* Ensure links remain distinguishable */
  a {
    text-decoration: underline;
  }

  /* Force visible borders on interactive elements */
  button,
  [role="button"],
  input,
  select,
  textarea {
    border: 1px solid ButtonText;
  }
}


/* ---------------------------------------------------------------------------
   notranslate — protect icon ligatures
   Machine-translation services (especially Google Translate) will mangle
   Material Symbols ligature text ("close" → "cerrar"). Mark icon elements
   with class="notranslate" and translate="no" to prevent this.
   --------------------------------------------------------------------------- */

.notranslate,
[translate="no"] {
  /* These are marker selectors — no visual style needed.
     The translate attribute and class prevent translation tools from
     touching the element's text content. */
}

/* Material Symbols font class — always mark as notranslate */
.material-icon-preview {
  /* Already inherits notranslate from parent if set, but this ensures
     any standalone usage is also protected. */
}