/* =========================================================
   Easy Accessibility
   Scoped to #easy-accessibility and body accessibility classes.
   ========================================================= */

#easy-accessibility {
    direction: rtl;
    font-family: inherit;
}

#easy-accessibility,
#easy-accessibility * {
    box-sizing: border-box;
}

#easy-accessibility .accessibility-toggle {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999999;
    width: 48px;
    min-height: 150px;
    padding: 10px 8px;
    border: 0;
    border-radius: 12px 0 0 12px;
    background: #1769aa;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .20);
    transition: background .2s ease, width .2s ease;
}

#easy-accessibility .accessibility-toggle:hover,
#easy-accessibility .accessibility-toggle:focus-visible {
    background: #0d4f82;
}

#easy-accessibility .accessibility-toggle:focus-visible,
#easy-accessibility button:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
}

#easy-accessibility .accessibility-toggle span {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

#easy-accessibility .accessibility-panel {
    position: fixed;
    right: 58px;
    top: 50%;
    transform: translateY(-50%) translateX(20px);
    width: 340px;
    max-width: calc(100vw - 80px);
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
    background: #fff;
    color: #222;
    border: 1px solid #ddd;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
    z-index: 999998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

#easy-accessibility .accessibility-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

#easy-accessibility .accessibility-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ddd;
}

#easy-accessibility .accessibility-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #222;
}

#easy-accessibility .accessibility-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #eee;
    color: #333;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

#easy-accessibility .accessibility-close:hover {
    background: #ddd;
}

#easy-accessibility .accessibility-group {
    margin-bottom: 20px;
}

#easy-accessibility .accessibility-group h3 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: #333;
}

#easy-accessibility .accessibility-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#easy-accessibility .accessibility-buttons button,
#easy-accessibility .accessibility-reset {
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 8px;
    font: inherit;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

#easy-accessibility .accessibility-buttons button {
    border: 1px solid #d0d0d0;
    background: #f7f7f7;
    color: #222;
}

#easy-accessibility .accessibility-buttons button:hover {
    background: #e9f3fb;
    border-color: #1769aa;
}

#easy-accessibility .accessibility-buttons button.active,
#easy-accessibility .accessibility-buttons button[aria-pressed="true"] {
    background: #1769aa;
    border-color: #1769aa;
    color: #fff;
}

#easy-accessibility .accessibility-reset {
    width: 100%;
    margin-top: 5px;
    border: 0;
    background: #333;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

#easy-accessibility .accessibility-reset:hover {
    background: #111;
}

#easy-accessibility .accessibility-panel::-webkit-scrollbar {
    width: 7px;
}

#easy-accessibility .accessibility-panel::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 10px;
}

/* =========================================================
   Font size
   Uses rem multiplier so existing responsive typography
   remains usable.
   ========================================================= */

body.access-font-large {
    font-size: 112.5%;
}

body.access-font-xlarge {
    font-size: 125%;
}

/* =========================================================
   Text alignment
   Targets text-bearing elements and avoids the accessibility
   panel itself.
   ========================================================= */

body.access-align-right :where(
    main p, main li, main td, main th, main h1, main h2, main h3,
    main h4, main h5, main h6, article p, article li, article td,
    article th, article h1, article h2, article h3, article h4,
    article h5, article h6, .elementor-widget-text-editor p,
    .elementor-widget-heading .elementor-heading-title
) {
    text-align: right !important;
}

body.access-align-center :where(
    main p, main li, main td, main th, main h1, main h2, main h3,
    main h4, main h5, main h6, article p, article li, article td,
    article th, article h1, article h2, article h3, article h4,
    article h5, article h6, .elementor-widget-text-editor p,
    .elementor-widget-heading .elementor-heading-title
) {
    text-align: center !important;
}

body.access-align-left :where(
    main p, main li, main td, main th, main h1, main h2, main h3,
    main h4, main h5, main h6, article p, article li, article td,
    article th, article h1, article h2, article h3, article h4,
    article h5, article h6, .elementor-widget-text-editor p,
    .elementor-widget-heading .elementor-heading-title
) {
    text-align: left !important;
}

body.access-align-justify :where(
    main p, main li, main td, main th, article p, article li,
    article td, article th, .elementor-widget-text-editor p
) {
    text-align: justify !important;
}

/* =========================================================
   Line spacing
   ========================================================= */

body.access-line-medium :where(
    main p, main li, main td, main th, main h1, main h2, main h3,
    main h4, main h5, main h6, article p, article li, article td,
    article th, article h1, article h2, article h3, article h4,
    article h5, article h6, .elementor-widget-text-editor
) {
    line-height: 1.9 !important;
}

body.access-line-large :where(
    main p, main li, main td, main th, main h1, main h2, main h3,
    main h4, main h5, main h6, article p, article li, article td,
    article th, article h1, article h2, article h3, article h4,
    article h5, article h6, .elementor-widget-text-editor
) {
    line-height: 2.2 !important;
}

/* =========================================================
   Letter spacing
   ========================================================= */

body.access-letter-medium :where(
    main p, main li, main td, main th, main h1, main h2, main h3,
    main h4, main h5, main h6, article p, article li, article td,
    article th, article h1, article h2, article h3, article h4,
    article h5, article h6, .elementor-widget-text-editor
) {
    letter-spacing: .04em !important;
}

body.access-letter-large :where(
    main p, main li, main td, main th, main h1, main h2, main h3,
    main h4, main h5, main h6, article p, article li, article td,
    article th, article h1, article h2, article h3, article h4,
    article h5, article h6, .elementor-widget-text-editor
) {
    letter-spacing: .08em !important;
}

/* =========================================================
   High contrast
   ========================================================= */

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

body.access-contrast-high :where(
    main, article, section, header, footer, nav, aside,
    .elementor, .elementor-section, .elementor-container
) {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

body.access-contrast-high :where(
    p, li, td, th, h1, h2, h3, h4, h5, h6, span, strong, em, label
) {
    color: #fff !important;
}

body.access-contrast-high :where(a) {
    color: #ffff00 !important;
    text-decoration: underline !important;
}

body.access-contrast-high :where(
    img, video, iframe
) {
    outline: 1px solid #fff;
}

body.access-contrast-high #easy-accessibility .accessibility-panel {
    background: #000;
    color: #fff;
    border-color: #fff;
}

body.access-contrast-high #easy-accessibility .accessibility-header h2,
body.access-contrast-high #easy-accessibility .accessibility-group h3 {
    color: #fff;
}

body.access-contrast-high #easy-accessibility .accessibility-buttons button {
    background: #000;
    color: #fff;
    border-color: #fff;
}

body.access-contrast-high #easy-accessibility .accessibility-buttons button.active {
    background: #fff;
    color: #000;
}

/* =========================================================
   Highlight links/headings
   ========================================================= */

body.access-highlight-on :where(
    a, button, h1, h2, h3, h4, h5, h6, strong, b
) {
    text-shadow: 0 0 1px currentColor;
}

body.access-highlight-on :where(
    a
) {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

body.access-highlight-on #easy-accessibility a {
    outline: 0;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 600px) {
    #easy-accessibility .accessibility-toggle {
        width: 44px;
        min-height: 130px;
    }

    #easy-accessibility .accessibility-panel {
        right: 10px;
        left: 10px;
        width: auto;
        max-width: none;
        max-height: 85vh;
        padding: 16px;
        transform: translateY(-50%) translateX(15px);
    }

    #easy-accessibility .accessibility-panel.is-open {
        transform: translateY(-50%) translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #easy-accessibility .accessibility-toggle,
    #easy-accessibility .accessibility-panel,
    #easy-accessibility button {
        transition: none;
    }
}