/*
 * Accessibility overrides
 * Loaded after app.css so these win without editing the compiled Tailwind
 * output. Keep this file limited to site-wide WCAG fixes (color contrast,
 * focus, etc.) that cannot be expressed per-template.
 */

/* --------------------------------------------------------------------------
   Tailwind ring-utility reset (focus-visible support)

   The vendored, prebuilt app.css was generated without Tailwind's universal
   base layer, so the `--tw-ring-*` / `--tw-shadow` custom properties are only
   defined on form controls. As a result `focus:ring-*`, `focus:ring-offset-*`,
   and `ring-*` utilities render nothing on arbitrary elements (the box-shadow
   they emit references undefined variables).

   Re-declare the defaults on every element — exactly what Tailwind's own base
   layer does — so the ring utilities work site-wide for keyboard focus rings.
   -------------------------------------------------------------------------- */
*,
::before,
::after {
  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(48 115 241 / 0.5); /* primary @ 50% */
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
}

/* --------------------------------------------------------------------------
   Missing `ring-inset` utility

   The prebuilt app.css emits `.ring-1` / `.ring-2` and `focus:ring-*` but not
   the `ring-inset` modifier, which draws the ring inside the element's border
   box. This matters for focusable items inside an `overflow: hidden/auto`
   scroll container (e.g. the open-carts nav panel), where a normal outset ring
   is clipped. Re-create the utility exactly as Tailwind would.
   -------------------------------------------------------------------------- */
.ring-inset {
  --tw-ring-inset: inset;
}

.focus\:ring-inset:focus {
  --tw-ring-inset: inset;
}

/* --------------------------------------------------------------------------
   Disclosure caret rotation (status-history panel)

   The prebuilt app.css does not include the `transition-transform` /
   `motion-reduce:*` utilities, so the collapsible-caret animation is defined
   here. The caret points right when collapsed and rotates 90deg to point down
   when the panel is expanded (`aria-expanded="true"` on the toggle button).
   Motion is suppressed for users who prefer reduced motion.
   -------------------------------------------------------------------------- */
.disclosure-caret {
  display: inline-block;
  transition: transform 200ms ease;
  transform-origin: center;
}

[aria-expanded="true"] .disclosure-caret {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .disclosure-caret {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Contrast-fixed primary (WCAG 1.4.3)
   The brand primary (#3073F1) only reaches 4.33:1 on white, just under the
   4.5:1 minimum for normal-size text. This darkened variant (#256AE6,
   ≈4.9:1 on white) preserves the hue while meeting contrast. Defined once
   here and reused by any site-wide a11y rule that needs it.
     --color-primary-contrast          hex form (backgrounds, borders)
     --color-primary-contrast-rgb      space-separated channels for
                                       Tailwind's `rgb(... / <opacity>)` form
   -------------------------------------------------------------------------- */
:root {
  --color-primary-contrast: #256ae6;
  --color-primary-contrast-rgb: 37 106 230;
}

/* Darken *text* usage of the primary. Background/fill uses of `bg-primary`
   are intentionally left unchanged. */
.text-primary {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-contrast-rgb) / var(--tw-text-opacity));
}

/* Dark mode keeps its own lighter primary (defined in dark-mode.css). */

/* --------------------------------------------------------------------------
   Skip navigation link (WCAG 2.4.1 — Bypass Blocks)
   Visually hidden until it receives keyboard focus, then it appears at the
   top-left so keyboard/AT users can jump past the sidebar + topbar straight
   to the main content.
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  padding: 0.75rem 1rem;
  background: var(--color-primary-contrast);
  color: #ffffff;
  font-weight: 600;
  border-radius: 0 0 0.375rem 0;
  transform: translateY(-150%);
  transition: transform 0.15s ease-in-out;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Respect users who prefer reduced motion — appear instantly. */
@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}