/**
 * Sienna accessibility widget — theme-agnostic overrides.
 *
 * Sienna injects its CSS at runtime via JS (after the theme stylesheet),
 * and its `.asw-menu *` rule uses !important. To win the cascade we bump
 * specificity with `html …` (0,1,2 vs Sienna's 0,1,1) and keep !important.
 *
 * font-family is read from the theme's --font-base token (with a generic
 * fallback) so this file stays theme-independent — any host theme that
 * defines --font-base in :root automatically restyles the widget.
 */

html .asw-menu-btn {
    /* Same size as the right-corner buttons (announcements FAB /
       scroll-to-top are 48px desktop, 44 on mobile) so this sits on the
       exact same baseline, mirrored to the LEFT. */
    width: 48px !important;
    height: 48px !important;
    /* Same box model as the right-corner buttons (scroll-to-top / FAB:
       border-box, no padding, 1px border) so 48px is the real outer size
       — Sienna otherwise adds its own padding/box-sizing and the button
       comes out larger. */
    box-sizing: border-box !important;
    padding: 0 !important;
    /* No outer edge at all — Sienna draws a 2px white border AND a 5px blue
       outline ring; remove both so the button is a clean square like the
       right-corner buttons. */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    /* Square corners — the theme is fully square (Sienna defaults to a circle). */
    border-radius: 0 !important;
    /* Pin the toggle to the bottom-LEFT corner (announcements FAB owns the
       right). Sienna applies its position via inline styles, so !important is
       required to win. Mirror the FAB offsets. The announcements modal
       overlay sits above the whole Sienna stack, so an open modal covers
       this button regardless of Sienna's high inline z-index. */
    left: max(20px, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: max(20px, env(safe-area-inset-bottom)) !important;
    top: auto !important;
    z-index: 98 !important;
}

/* Keep the edge gone on every interaction state — Sienna re-applies the
   border/outline on hover/focus. */
html .asw-menu-btn:hover,
html .asw-menu-btn:focus,
html .asw-menu-btn:focus-visible,
html .asw-menu-btn:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Match the right-corner buttons' responsive sizes/offsets so the left
   toggle stays on the same baseline at every breakpoint. */
@media (max-width: 767px) {
    html .asw-menu-btn {
        width: 44px !important;
        height: 44px !important;
        left: 15px !important;
        bottom: 15px !important;
    }
    html .asw-menu-btn svg {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
    }
}

@media (max-width: 360px) {
    html .asw-menu-btn {
        width: 40px !important;
        height: 40px !important;
    }
    html .asw-menu-btn svg {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }
}

/* Open the accessibility panel from the left edge (matches the toggle). */
.asw-menu {
    left: 0 !important;
    right: auto !important;
}

html .asw-menu-btn svg {
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
}

html .asw-menu,
html .asw-menu * {
    font-family: var(--font-base, sans-serif) !important;
    line-height: 1.5 !important;
}

.asw-menu-header div[role=button] {
    width: 34px;
    height: 34px;
}