:root { --wcag-scale:1; --wcag-font-family:''; }
html { font-size:calc(1rem * var(--wcag-scale)) !important; }
body.wcag-font-applied, body.wcag-font-applied * { font-family: var(--wcag-font-family) !important; }

/* Contrast thema's */
.wcag-contrast-high :not(.wcag-no-contrast, .wcag-no-contrast *, img, strong, .prev-page-btn, .next-page-btn){background:#fff !important;color:#000 !important;border-color:#000 !important;}
.wcag-contrast-high a { text-decoration:underline !important; font-weight:700 !important; }

.wcag-contrast-dark :not(.wcag-no-contrast, .wcag-no-contrast *) { background:#000 !important; color:#fff !important; border-color:#fff !important; }
.wcag-contrast-sepia :not(.wcag-no-contrast, .wcag-no-contrast *) { background:#f4ecd8 !important; color:#3b2f2f !important; border-color:#3b2f2f !important; }

/* Toolbar */
#wcag-helper-toolbar {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999999;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-left: none;
    border-radius: 0 12px 12px 0;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Toolbar right */
.wcag-helper-right #wcag-helper-toolbar {
    left: auto;
    right: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    border-right: none;
    border-radius: 12px 0 0 12px;
    box-shadow: -2px 2px 12px rgba(0, 0, 0, 0.1);
}

/* Toolbar content */
.wcag-toolbar-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Collapsed */
#wcag-helper-toolbar[data-collapsed="true"] .wcag-toolbar-content {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    position: absolute;
    visibility: hidden;
}

#wcag-helper-toolbar[data-collapsed="true"] {
    padding: 8px;
}

/* Buttons */
.wcag-collapse-btn {
    background: rgba(0, 0, 0, 0.05) !important;
}

.wcag-collapse-btn:hover {
    background: rgba(0, 0, 0, 0.1) !important;
}

#wcag-helper-toolbar[data-collapsed="true"] .wcag-collapse-btn svg {
    transform: rotate(180deg);
}

.wcag-collapse-btn svg {
    transition: transform 0.3s ease;
}

/* Space for the toolbar where it is fixed to the bottom of the screen (mobile), so it covers neither the
   end of the page nor the element that has keyboard focus. --wcag-toolbar-height is measured by the script.
   Themes can use --wcag-toolbar-offset for their own scrolling areas, such as a full screen menu. */
:root {
    --wcag-toolbar-offset: 0px;
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --wcag-toolbar-offset: var(--wcag-toolbar-height, 0px);
        padding-bottom: var(--wcag-toolbar-offset);
        scroll-padding-bottom: var(--wcag-toolbar-offset);
    }

    #wcag-helper-toolbar {
        left: 50% !important;
        top: auto !important;
        bottom: 0 !important;
        transform: translateX(-50%) translateY(0) !important;
        flex-direction: row !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        border-bottom: none !important;
        border-radius: 12px 12px 0 0 !important;
        padding: 8px 12px !important;
        width: auto !important;
        max-width: 100%;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15) !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .wcag-toolbar-content {
        flex-direction: row !important;
    }

    #wcag-helper-toolbar[data-collapsed="true"] {
        padding: 8px !important;
    }

    .wcag-collapse-btn svg {
        transform: rotate(-90deg);
    }

    #wcag-helper-toolbar[data-collapsed="true"] .wcag-collapse-btn svg {
        transform: rotate(90deg);
    }

    @supports (padding: max(0px)) {
        #wcag-helper-toolbar {
            padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
        }
    }

    .wcag-btn {
        padding: 8px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .wcag-btn svg {
        width: 20px !important;
        height: 20px !important;
    }

    .wcag-label {
        font-size: 9px !important;
    }
}

/* Buttons */
.wcag-btn {
    position: relative;
    background: transparent;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #333;
    min-width: 44px;
    min-height: 44px;
}

.wcag-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

.wcag-btn:active {
    background: rgba(0, 0, 0, 0.12);
    transform: scale(0.95);
}

.wcag-btn svg {
    width: 24px;
    height: 24px;
    display: block;
}

.wcag-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;
    display: none;
}

/* Active */
.wcag-btn[data-active="true"] {
    background: #005fa1;
    color: #fff;
}

.wcag-btn[data-active="true"]:hover {
    background: #f59d1d;
    color: #1a1a1a; /* The white icon would be 2.2:1 on the orange, dark is 8:1 (WCAG 1.4.11) */
}

/* Divider */
.wcag-divider {
    width: 32px;
    height: 1px;
    background: rgba(0, 0, 0, 0.12);
    margin: 4px 0;
    display: block;
}

/* ReadSpeaker player: above the toolbar where it is at the bottom of the screen, and no wider than the
   toolbar, so it stays on the screen */
.wcag-readspeaker {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 20px);
    height: 28px;
}

@media (max-width: 768px) {
    .wcag-divider {
        display: none;
    }
}

/* With the ReadSpeaker button the toolbar is 352px wide: on narrower screens (down to 320px) less space
   between the buttons, so all of them fit */
@media (max-width: 360px) {
    #wcag-helper-toolbar:has(#wcag-readspeaker-toggle),
    #wcag-helper-toolbar:has(#wcag-readspeaker-toggle) .wcag-toolbar-content {
        gap: 4px;
    }

    #wcag-helper-toolbar:has(#wcag-readspeaker-toggle) {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* Below the toolbar where it is at the side of the screen: from 769px, up to 768px it is at the bottom */
@media (min-width: 769px) {
    .wcag-readspeaker {
        right: auto;
        bottom: -48px;
        width: 386px;
    }
}