/*==================================
 Heshev accessibility widget (התאמות נגישות)
 Pairs with js/a11y-widget.js. The widget root (#a11yw) is excluded from
 every page-level mode below so the panel stays usable in all of them.
 ==================================== */

/*----------- widget: trigger -----------*/

#a11yw {
    --a11yw-accent: #4b3cc4;
    --a11yw-accent-hover: #3b2ea3;
    --a11yw-text: #1f2937;
    --a11yw-muted: #5b6470;
    --a11yw-line: #d7dfe8;
    --a11yw-seg-bg: #e8eef5;
    --a11yw-switch-off: #7d8791;
    font-family: 'Rubik', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    color: var(--a11yw-text);
    direction: rtl;
    text-align: right;
}

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

#a11yw .a11yw-trigger {
    position: fixed;
    left: 0;
    top: 50%;
    z-index: 10000;
    width: 34px;
    height: 44px;
    margin: -22px 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0 8px 8px 0;
    background: var(--a11yw-accent);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(20, 20, 60, 0.25);
    transition: background-color .2s ease, width .2s ease;
}

#a11yw .a11yw-trigger:hover {
    background: var(--a11yw-accent-hover);
    width: 40px;
}

#a11yw .a11yw-trigger svg {
    width: 22px;
    height: 22px;
}

/*----------- widget: panel -----------*/

#a11yw .a11yw-panel {
    position: fixed;
    left: 48px;
    top: 50%;
    z-index: 10001;
    width: 340px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid var(--a11yw-line);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(20, 30, 60, 0.18);
}

#a11yw .a11yw-panel[hidden] {
    display: none;
}

#a11yw .a11yw-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--a11yw-line);
}

#a11yw .a11yw-title {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--a11yw-text);
}

#a11yw .a11yw-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--a11yw-muted);
}

#a11yw .a11yw-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin: -4px -6px 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #374151;
    cursor: pointer;
}

#a11yw .a11yw-close:hover {
    background: var(--a11yw-seg-bg);
}

#a11yw .a11yw-close svg {
    width: 18px;
    height: 18px;
}

#a11yw .a11yw-body {
    padding: 14px 20px 6px;
}

#a11yw .a11yw-group {
    margin-bottom: 14px;
}

#a11yw .a11yw-label {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--a11yw-text);
}

/*----------- widget: segmented controls -----------*/

#a11yw .a11yw-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    border-radius: 10px;
    background: var(--a11yw-seg-bg);
}

#a11yw .a11yw-seg button {
    min-width: 40px;
    height: 34px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #4b5563;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 34px;
    cursor: pointer;
    white-space: nowrap;
}

#a11yw .a11yw-seg button:hover {
    color: var(--a11yw-text);
}

#a11yw .a11yw-seg button[aria-checked="true"] {
    background: #fff;
    color: #111827;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
}

/* "A-" etc. are LTR glyph pairs inside an RTL panel */
#a11yw .a11yw-seg-text button {
    direction: ltr;
    unicode-bidi: isolate;
}

#a11yw .a11yw-divider {
    height: 1px;
    margin: 4px -20px 6px;
    border: 0;
    background: var(--a11yw-line);
}

/*----------- widget: switches -----------*/

#a11yw .a11yw-switches {
    margin: 0;
    padding: 0;
    list-style: none;
}

#a11yw .a11yw-switch {
    width: 100%;
    margin: 0;
    padding: 9px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--a11yw-text);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    text-align: right;
    cursor: pointer;
}

#a11yw .a11yw-track {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--a11yw-switch-off);
    transition: background-color .2s ease;
}

/* RTL: off = knob on the right (start), on = knob on the left */
#a11yw .a11yw-track::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: right .2s ease;
}

#a11yw .a11yw-switch[aria-checked="true"] .a11yw-track {
    background: var(--a11yw-accent);
}

#a11yw .a11yw-switch[aria-checked="true"] .a11yw-track::after {
    right: 22px;
}

/*----------- widget: footer -----------*/

#a11yw .a11yw-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--a11yw-line);
}

#a11yw .a11yw-reset {
    margin: 0;
    padding: 7px 14px;
    border: 1px solid var(--a11yw-line);
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

#a11yw .a11yw-reset:hover {
    background: var(--a11yw-seg-bg);
}

#a11yw .a11yw-reset[aria-disabled="true"] {
    color: #9aa3ad;
    background: #fff;
    cursor: default;
}

#a11yw .a11yw-statement {
    color: var(--a11yw-accent);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#a11yw .a11yw-statement:hover {
    color: var(--a11yw-accent-hover);
}

/*----------- widget: focus -----------*/

#a11yw button:focus,
#a11yw a:focus {
    outline: none;
}

#a11yw button:focus-visible,
#a11yw a:focus-visible {
    outline: 3px solid var(--a11yw-accent);
    outline-offset: 2px;
    box-shadow: none;
}

#a11yw .a11yw-trigger:focus-visible {
    outline: 3px solid #111827;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
}

#a11yw .a11yw-switch:focus-visible {
    outline-offset: 0;
}

@media (max-width: 480px) {
    #a11yw .a11yw-panel {
        left: 8px;
        right: 8px;
        width: auto;
    }
}

/*----------- reading guide -----------*/

.a11yw-guide {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9998;
    height: 12px;
    margin-top: -6px;
    pointer-events: none;
    background: rgba(75, 60, 196, 0.18);
    border-top: 2px solid #4b3cc4;
    border-bottom: 2px solid #4b3cc4;
}

html.a11y-guide .a11yw-guide {
    display: block;
}

/*==================================
 Page modes (classes on <html>)
 ==================================== */

/*----------- contrast: high -----------*/

html.a11y-contrast-high,
html.a11y-contrast-high body {
    background: #000 !important;
}

/* :where() keeps this catch-all at low specificity so the link/input rules below win */
html.a11y-contrast-high body :where(:not(#a11yw, #a11yw *, .a11yw-guide)) {
    background-color: #000 !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html.a11y-contrast-high body a:not(#a11yw *),
html.a11y-contrast-high body a:not(#a11yw *) * {
    color: #ffeb3b !important;
}

html.a11y-contrast-high body input:not(#a11yw *),
html.a11y-contrast-high body textarea:not(#a11yw *),
html.a11y-contrast-high body select:not(#a11yw *),
html.a11y-contrast-high body button:not(#a11yw *) {
    border: 1px solid #fff !important;
}

/*----------- contrast: inverted -----------*/

html.a11y-contrast-invert {
    background: #fff;
    filter: invert(1) hue-rotate(180deg);
}

/* flip media and the widget back so they look normal */
html.a11y-contrast-invert img,
html.a11y-contrast-invert video,
html.a11y-contrast-invert iframe,
html.a11y-contrast-invert #a11yw .a11yw-trigger,
html.a11y-contrast-invert #a11yw .a11yw-panel {
    filter: invert(1) hue-rotate(180deg);
}

/*----------- contrast: grayscale -----------*/

html.a11y-contrast-gray {
    filter: grayscale(1);
}

/*----------- text spacing (WCAG 1.4.12 values and above) -----------*/

html.a11y-spacing-1 body :where(:not(#a11yw, #a11yw *)) {
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}

html.a11y-spacing-1 body :is(p, li, a, span, label, h1, h2, h3, h4, h5, h6, dd, dt, td, th, blockquote, input, textarea):not(#a11yw *) {
    line-height: 1.5 !important;
}

html.a11y-spacing-2 body :where(:not(#a11yw, #a11yw *)) {
    letter-spacing: 0.2em !important;
    word-spacing: 0.3em !important;
}

html.a11y-spacing-2 body :is(p, li, a, span, label, h1, h2, h3, h4, h5, h6, dd, dt, td, th, blockquote, input, textarea):not(#a11yw *) {
    line-height: 1.9 !important;
}

/*----------- highlight links -----------*/

html.a11y-links body a:not(#a11yw *) {
    background-color: #fff59d !important;
    color: #000 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    outline: 2px solid #000 !important;
    outline-offset: 1px;
}

html.a11y-links body a:not(#a11yw *) * {
    color: #000 !important;
}

/*----------- stop animations -----------*/

html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

html.a11y-no-motion .typed-cursor {
    display: none !important;
}

/*----------- big cursor -----------*/

html.a11y-cursor,
html.a11y-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3v36l9.5-9.2 6.3 14.7 6.6-2.8-6.3-14.5H35z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}

html.a11y-cursor a,
html.a11y-cursor a *,
html.a11y-cursor button,
html.a11y-cursor button *,
html.a11y-cursor [role="button"],
html.a11y-cursor label {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3v36l9.5-9.2 6.3 14.7 6.6-2.8-6.3-14.5H35z' fill='%234b3cc4' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, pointer !important;
}

/*----------- readable font (icon fonts excluded) -----------*/

html.a11y-font body *:not(#a11yw):not(#a11yw *):not(i):not(.fa):not(.fas):not(.far):not(.fab):not([class^="ti-"]):not([class*=" ti-"]):not([class*="icon"]) {
    font-family: Arial, Helvetica, sans-serif !important;
}

/*----------- hide images -----------*/

html.a11y-no-images body img:not(#a11yw *),
html.a11y-no-images body picture:not(#a11yw *),
html.a11y-no-images body video:not(#a11yw *),
html.a11y-no-images body svg:not(#a11yw *) {
    visibility: hidden !important;
}

html.a11y-no-images body :where(:not(#a11yw, #a11yw *)) {
    background-image: none !important;
}