/* Spalding Publishing — bespoke accessibility-widget overrides
 *
 * Auto-injected by InjectAccessibilityWidget middleware AFTER the core
 * widget CSS, so any rule here wins on conflict. The core widget already
 * reads var(--color-primary), which the theme overrides to #cf2e2e in
 * theme.css. This file:
 *   - moves the toggle + panel to bottom-LEFT (default is bottom-right)
 *   - constrains the panel to a small fixed size that scrolls if needed
 *   - polishes contrast and typography to match the bespoke theme
 */

/* Bottom-left positioning */
.a11y-widget {
    left: 20px;
    right: auto;
    z-index: 100;
}

/* White icon on the red toggle reads cleaner than the default dark icon. */
.a11y-toggle { color: #ffffff; }
.a11y-toggle svg { stroke: #ffffff; fill: none; }

/* Panel: anchor to the LEFT of the toggle (since toggle is bottom-left),
   constrain width and height so it never spans the page. */
.a11y-panel {
    left: 0 !important;
    right: auto !important;
    width: 280px !important;
    max-width: calc(100vw - 40px);
    max-height: 70vh;
    overflow-y: auto;
}

/* Match bespoke theme's system sans-serif stack so the widget doesn't
   look stylistically out of place against the rest of the site. */
.a11y-panel,
.a11y-panel * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}

/* Mobile: same bottom-left, slightly smaller offsets. */
@media (max-width: 768px) {
    .a11y-widget { left: 15px !important; right: auto !important; bottom: 80px; }
    .a11y-panel  { width: 280px !important; left: 0 !important; right: auto !important; }
}

/* Tighter focus ring color tweaked for the Spalding red */
html.a11y-keyboard-focus *:focus {
    box-shadow: 0 0 0 6px rgba(207, 46, 46, 0.25) !important;
}