/* The Montessori School — accessibility-widget brand overrides.
 * Injected AFTER the core Accessibility Mendol widget.css, so these win.
 *
 * Fixes:
 *  1. Toggle button uses brand navy with a WHITE wheelchair symbol
 *     (core sets `color: var(--color-dark)`, which is undefined in this
 *     bespoke theme, so the SVG `fill:currentColor` fell back to black).
 *  2. Positioning: core widget.css has a malformed @media wrapper whose
 *     opener is missing, leaking mobile-only rules (e.g. `.a11y-panel
 *     { right:-15px }`) to every screen size — which pushed the widget /
 *     panel off the right edge. Re-assert safe, viewport-bounded rules.
 */

/* ── Toggle button: brand navy + white symbol ── */
.a11y-toggle {
    background: var(--tms-navy);
    color: #ffffff;                 /* SVG fill:currentColor → white symbol */
}
.a11y-toggle:hover { background: var(--tms-navy-2); }
.a11y-toggle svg { color: #ffffff; }

/* ── Keep the button fully on-screen at every width (incl. notch safe area) ── */
.a11y-widget {
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    left: auto;
}

/* ── Panel: anchor to the button, never overflow the viewport ── */
.a11y-panel {
    right: 0;
    left: auto;
    width: min(320px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
}

@media (max-width: 640px) {
    .a11y-toggle { width: 48px; height: 48px; }
    .a11y-toggle svg { width: 24px; height: 24px; }
    .a11y-panel { width: calc(100vw - 32px); }
}