/* AccessifyAI critical stylesheet.
   Referenced from the theme app extension's block schema, so Shopify injects
   it as a render-blocking <link> on EVERY page view of every shop that has the
   embed switched on. As of 2026-08-20 that is every shop on every plan, not
   just Pro, so what is in here is what the whole install base pays for on
   first paint. Lighthouse costs this file at ~151 ms on a simulated slow 4G
   connection and it is the widget's ONLY render-blocking resource; the script
   beside it is deferred by Shopify.

   So the rule for this file is narrow: a selector belongs here only if the
   LOADER applies it before anyone has touched anything. That is the skip link,
   the focus outlines, and the three classes the loader sets from the
   merchant's own defaults (reduced motion, high contrast, large text).

   Everything a visitor can only reach by opening the panel now lives in
   accessify-a11y-panel.css, which is fetched on that click. That includes the
   floating button's own styling, which looks like it belongs here and does
   not: the loader draws the button with inline cssText and never sets
   .accessify-widget-trigger, so those rules only ever mattered once the panel
   had loaded and restyled it. Measured before moving, not assumed. */

/* ── Skip link (WCAG 2.4.1) ──────────────────────────────────────────── */
.accessify-skip-link{position:absolute;top:-100%;left:0;z-index:999999;padding:14px 28px;background:#1a1a2e;color:#fff;font-size:16px;font-weight:600;text-decoration:none;border:3px solid var(--accessify-focus-color,#6366f1);border-radius:0 0 8px 0;transition:top .15s ease;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.accessify-skip-link:focus{top:0;outline:none}

/* ── Focus outlines on the storefront ────────────────────────────────── */
/* The halo used to be a hardcoded indigo that ignored the merchant's own
   focus colour. It is now derived from that colour, with a neutral
   fallback for browsers without color-mix so the halo never disappears. */
.accessify-focus-active *:focus-visible{outline:var(--accessify-focus-width,3px) var(--accessify-focus-style,solid) var(--accessify-focus-color,#4f46e5)!important;outline-offset:2px!important;box-shadow:0 0 0 4px rgba(0,0,0,.18)!important}
@supports (color:color-mix(in srgb,red 25%,transparent)){.accessify-focus-active *:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--accessify-focus-color,#4f46e5) 30%,transparent)!important}}

/* ── Visitor-selected storefront adjustments ─────────────────────────── */
@media (prefers-reduced-motion:reduce){.accessify-reduced-motion *,.accessify-reduced-motion *::before,.accessify-reduced-motion *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.accessify-high-contrast{filter:contrast(1.4)}
/* WHY 2026-09-24 large text is zoom: a 120% root font-size with font-size:inherit
   on text flattened headings to body size. zoom grows each top-level block the
   way browser zoom does. The panel's own text size, when a visitor sets one,
   replaces this factor. */
.accessify-large-text body>:not([class*="accessify-"]):not(#accessify-fab):not(script):not(style){zoom:1.2}

/* The skip link's own slide-in, switched off for visitors who asked their OS
   to stop animating things. The button's equivalent moved to the panel
   stylesheet with the rest of its styling. */
@media (prefers-reduced-motion:reduce){.accessify-skip-link{transition:none!important}}