/*
 * Siaya Accessibility v3.0
 * Professional click-to-open interface.
 * Theme based on supplied County Government of Siaya header:
 * Green #4A9236, gold #D4AE67, white.
 */

#siaya-accessibility {
    --sa-green: #4A9236;
    --sa-green-dark: #36762A;
    --sa-green-deep: #24591E;
    --sa-gold: #D4AE67;
    --sa-gold-light: #F4E5C1;
    --sa-white: #fff;
    --sa-ink: #1d2a1b;
    --sa-muted: #667064;
    --sa-border: #dfe5dd;
    --sa-soft: #f5f8f4;
    --sa-shadow: 0 14px 38px rgba(20, 48, 18, .22);
    position: fixed;
    top: 72px;
    right: 14px;
    z-index: 999999;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.25;
}

#siaya-accessibility *,
#siaya-accessibility *::before,
#siaya-accessibility *::after {
    box-sizing: border-box;
}

#siaya-accessibility .sa-launcher {
    width: 46px;
    height: 46px;
    min-width: 46px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #0066CC;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,.22);
    cursor: pointer;
    font-size: 21px;
    font-weight: 700;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

#siaya-accessibility .sa-launcher:hover,
#siaya-accessibility .sa-launcher:focus-visible,
#siaya-accessibility.is-open .sa-launcher {
    background: #0052A3;
    box-shadow: 0 4px 13px rgba(0,0,0,.28);
    outline: 3px solid #fff;
    outline-offset: 2px;
}

#siaya-accessibility .sa-person {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 21px;
    line-height: 1;
}


#siaya-accessibility .sa-panel {
    position: absolute;
    top: 48px;
    right: 0;
    width: 390px;
    max-width: calc(100vw - 24px);
    overflow: hidden;
    background: var(--sa-white);
    color: var(--sa-ink);
    border: 1px solid rgba(28,70,25,.15);
    border-radius: 12px;
    box-shadow: var(--sa-shadow);
}

#siaya-accessibility .sa-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 18px 15px;
    background: var(--sa-green);
    color: var(--sa-white);
    border-bottom: 3px solid var(--sa-gold);
}

#siaya-accessibility .sa-panel-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .1px;
}

#siaya-accessibility .sa-panel-subtitle {
    margin-top: 3px;
    font-size: 11px;
    opacity: .88;
}

#siaya-accessibility .sa-close {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    color: var(--sa-white);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

#siaya-accessibility .sa-close:hover,
#siaya-accessibility .sa-close:focus-visible {
    background: var(--sa-gold);
    color: var(--sa-green-deep);
    outline: none;
}

#siaya-accessibility .sa-panel-body {
    padding: 16px;
}

#siaya-accessibility .sa-section + .sa-section {
    margin-top: 16px;
}

#siaya-accessibility .sa-section-heading {
    margin-bottom: 8px;
    color: var(--sa-green-deep);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
}

#siaya-accessibility .sa-text-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

#siaya-accessibility .sa-text-controls button {
    min-height: 54px;
    border: 1px solid var(--sa-border);
    border-radius: 7px;
    background: var(--sa-soft);
    color: var(--sa-ink);
    cursor: pointer;
}

#siaya-accessibility .sa-text-controls button:hover,
#siaya-accessibility .sa-text-controls button:focus-visible {
    border-color: var(--sa-green);
    background: #edf5ea;
    outline: 2px solid var(--sa-green);
    outline-offset: 1px;
}

#siaya-accessibility .sa-text-controls strong {
    display: block;
    font-size: 17px;
    color: var(--sa-green-deep);
}

#siaya-accessibility .sa-text-controls span {
    display: block;
    margin-top: 3px;
    color: var(--sa-muted);
    font-size: 10px;
}

#siaya-accessibility .sa-option-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

#siaya-accessibility .sa-option {
    min-height: 61px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border: 1px solid var(--sa-border);
    border-radius: 7px;
    background: var(--sa-white);
    color: var(--sa-ink);
    cursor: pointer;
    text-align: left;
}

#siaya-accessibility .sa-option:hover,
#siaya-accessibility .sa-option:focus-visible {
    border-color: var(--sa-green);
    background: #f4f9f2;
    outline: 2px solid var(--sa-green);
    outline-offset: 1px;
}

#siaya-accessibility .sa-option.is-active {
    border-color: var(--sa-green);
    background: #eaf4e7;
    box-shadow: inset 3px 0 0 var(--sa-green);
}

#siaya-accessibility .sa-option-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #edf3eb;
    color: var(--sa-green-deep);
    font-size: 14px;
    font-weight: 800;
}

#siaya-accessibility .sa-option.is-active .sa-option-icon {
    background: var(--sa-green);
    color: #fff;
}

#siaya-accessibility .sa-option strong,
#siaya-accessibility .sa-option small {
    display: block;
}

#siaya-accessibility .sa-option strong {
    font-size: 11px;
    line-height: 1.25;
}

#siaya-accessibility .sa-option small {
    margin-top: 3px;
    color: var(--sa-muted);
    font-size: 9px;
}

#siaya-accessibility .sa-panel-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 16px;
}

#siaya-accessibility .sa-panel-actions button {
    min-height: 39px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}

#siaya-accessibility .sa-reset-all {
    border: 1px solid var(--sa-border);
    background: #f3f4f2;
    color: #394238;
}

#siaya-accessibility .sa-fullscreen {
    border: 1px solid var(--sa-green);
    background: var(--sa-green);
    color: #fff;
}

#siaya-accessibility .sa-panel-actions button:hover,
#siaya-accessibility .sa-panel-actions button:focus-visible {
    outline: 2px solid var(--sa-gold);
    outline-offset: 1px;
}

#siaya-accessibility .sa-panel-footer {
    padding: 9px 16px;
    border-top: 1px solid var(--sa-border);
    background: #fafbfa;
    color: #6b7469;
    font-size: 9px;
    text-align: center;
}

html:not(.sa-readable-font) body {
    font-size: calc(1em * var(--sa-text-scale));
}

html.sa-readable-font body,
html.sa-readable-font body * {
    font-family: Arial, Helvetica, sans-serif !important;
}

html.sa-underline-links a {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 2px !important;
}

html.sa-high-contrast body {
    background: #000 !important;
    color: #fff !important;
}

html.sa-high-contrast body * {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

html.sa-high-contrast a,
html.sa-high-contrast a * {
    color: #ffff00 !important;
}

html.sa-grayscale {
    filter: grayscale(100%);
}

html.sa-focus-mode body {
    background: #f4f4f4 !important;
}

html.sa-focus-mode body > *:not(#wpadminbar):not(#siaya-accessibility) {
    max-width: 1400px;
    margin-left: auto !important;
    margin-right: auto !important;
}

html.sa-stop-animation *,
html.sa-stop-animation *::before,
html.sa-stop-animation *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

@media (max-width: 1100px) {
    #siaya-accessibility {
        right: 9px;
    }
}

@media (max-width: 900px) {
    #siaya-accessibility {
        top: 68px;
        right: 8px;
    }


    #siaya-accessibility .sa-panel {
        top: 49px;
        width: 360px;
        max-width: calc(100vw - 16px);
    }
}

@media (max-width: 520px) {
    #siaya-accessibility {
        top: 64px;
        right: 6px;
    }

    #siaya-accessibility .sa-panel {
        width: calc(100vw - 12px);
        right: -1px;
    }

    #siaya-accessibility .sa-option-grid {
        grid-template-columns: 1fr;
    }

    #siaya-accessibility .sa-panel-body {
        padding: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #siaya-accessibility *,
    #siaya-accessibility *::before,
    #siaya-accessibility *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}