/**
 * Accessibility Styles - עיצוב תפריט נגישות
 * עומד בתקן הישראלי ת"י 5568
 */

/* Skip to Content Link */
.skip-to-content {
    position: absolute;
    top: -100px;
    right: 0;
    background: var(--primary-color, #2563eb);
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 8px 8px;
    z-index: 10000;
    transition: top 0.3s ease;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

/* Accessibility Button */
.accessibility-btn {
    position: fixed;
    bottom: 20px;
    right: 20px; /* שינוי לצד ימין כדי שלא יתנגש עם WhatsApp */
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 1 !important; /* וודא שהכפתור תמיד גלוי */
    visibility: visible !important;
}

.accessibility-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

.accessibility-btn:focus {
    outline: 3px solid #fbbf24 !important;
    outline-offset: 4px;
}

/* וודא שהכפתור נשאר גלוי גם במצבי ניגודיות */
body.contrast-high .accessibility-btn,
body.contrast-inverted .accessibility-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    filter: none !important;
}

/* Accessibility Menu */
.accessibility-menu {
    position: fixed;
    top: 50%;
    right: -400px; /* שינוי לצד ימין */
    transform: translateY(-50%);
    width: 350px;
    max-height: 90vh;
    background: white !important;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    z-index: 10001;
    transition: right 0.4s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.accessibility-menu.open {
    right: 20px; /* שינוי לצד ימין */
}

/* וודא שהתפריט נראה טוב גם במצבי ניגודיות */
body.contrast-high .accessibility-menu,
body.contrast-inverted .accessibility-menu {
    background: white !important;
    filter: none !important;
}

.accessibility-menu-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accessibility-menu-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.accessibility-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.accessibility-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.accessibility-close:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}

.accessibility-menu-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.accessibility-control {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.accessibility-control:last-child {
    border-bottom: none;
}

.accessibility-control > label:first-child {
    display: block;
    font-weight: 600;
    margin-bottom: 12px;
    color: #1e293b;
}

.accessibility-buttons {
    display: flex;
    gap: 8px;
}

.acc-btn {
    flex: 1;
    padding: 10px 16px;
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #334155;
}

.acc-btn:hover {
    background: #e2e8f0;
    border-color: #667eea;
}

.acc-btn:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

.acc-btn:active {
    transform: scale(0.95);
}

.acc-btn-reset {
    width: 100%;
    padding: 12px;
    background: #fee2e2;
    border: 2px solid #fecaca;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    color: #991b1b;
    transition: all 0.3s ease;
}

.acc-btn-reset:hover {
    background: #fecaca;
}

.acc-btn-reset:focus {
    outline: 3px solid #ef4444;
    outline-offset: 2px;
}

/* Checkbox Controls */
.accessibility-control label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.accessibility-control label:hover {
    background: #f1f5f9;
}

.accessibility-control input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #667eea;
}

.accessibility-control input[type="checkbox"]:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

/* Accessibility Statement Link */
.accessibility-statement-link {
    display: block;
    text-align: center;
    padding: 12px;
    background: #f1f5f9;
    border-radius: 8px;
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.accessibility-statement-link:hover {
    background: #e2e8f0;
    color: #764ba2;
}

.accessibility-statement-link:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

/* Keyboard Shortcuts Info */
.accessibility-shortcuts {
    margin-top: 20px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
}

.accessibility-shortcuts summary {
    cursor: pointer;
    font-weight: 600;
    color: #1e293b;
    padding: 4px;
}

.accessibility-shortcuts summary:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    border-radius: 4px;
}

.accessibility-shortcuts ul {
    margin-top: 12px;
    padding-right: 20px;
    list-style: none;
}

.accessibility-shortcuts li {
    margin-bottom: 8px;
    color: #64748b;
    font-size: 0.9rem;
}

.accessibility-shortcuts kbd {
    background: #e2e8f0;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85rem;
    color: #1e293b;
}

/* ===================================
   ACCESSIBILITY MODES - מצבי נגישות
   =================================== */

/* High Contrast Mode */
body.contrast-high {
    filter: contrast(1.5);
}

body.contrast-high * {
    border-color: #000 !important;
}

/* Inverted Contrast Mode */
body.contrast-inverted {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    filter: invert(1) hue-rotate(180deg);
}

body.contrast-inverted img,
body.contrast-inverted video {
    filter: invert(1) hue-rotate(180deg);
}

/* וודא שכפתור ותפריט הנגישות לא מושפעים מהפילטר */
body.contrast-inverted .accessibility-btn,
body.contrast-inverted .accessibility-menu {
    filter: invert(1) hue-rotate(180deg) !important;
}

body.contrast-inverted .accessibility-btn svg,
body.contrast-inverted .accessibility-menu * {
    filter: none !important;
}

/* Highlight Links */
body.highlight-links a {
    background: yellow !important;
    color: #000 !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    padding: 2px 4px !important;
}

/* Readable Font */
body.readable-font,
body.readable-font * {
    font-family: Arial, sans-serif !important;
    letter-spacing: 0.05em !important;
}

/* Text Spacing */
body.text-spacing {
    line-height: 2 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}

body.text-spacing p,
body.text-spacing li,
body.text-spacing div {
    margin-bottom: 1.5em !important;
}

/* Pause Animations */
body.pause-animations *,
body.pause-animations *::before,
body.pause-animations *::after {
    animation-play-state: paused !important;
    transition: none !important;
}

/* Hide Images */
body.hide-images img:not([alt=""]) {
    opacity: 0.1;
}

body.hide-images img::after {
    content: attr(alt);
    display: block;
    background: #f1f5f9;
    padding: 20px;
    text-align: center;
    color: #64748b;
    font-weight: 600;
}

/* ===================================
   FOCUS STYLES - עיצוב מיקוד
   =================================== */

*:focus {
    outline: 3px solid #fbbf24 !important;
    outline-offset: 2px !important;
}

*:focus:not(:focus-visible) {
    outline: none !important;
}

*:focus-visible {
    outline: 3px solid #fbbf24 !important;
    outline-offset: 2px !important;
}

/* ===================================
   RESPONSIVE - נגישות במובייל
   =================================== */

@media (max-width: 768px) {
    .accessibility-btn {
        bottom: 20px;
        right: 15px; /* שינוי לצד ימין */
        width: 56px;
        height: 56px;
    }

    .accessibility-menu {
        width: calc(100% - 30px);
        right: -100%; /* שינוי לצד ימין */
        max-height: 85vh;
    }

    .accessibility-menu.open {
        right: 15px; /* שינוי לצד ימין */
    }

    .accessibility-buttons {
        flex-wrap: wrap;
    }

    .acc-btn {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
    
    /* וודא שהכפתור לא מתחבא במובייל */
    .accessibility-btn {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
    }
}

@media (max-width: 480px) {
    .accessibility-btn {
        bottom: 20px;
        right: 10px;
        width: 52px;
        height: 52px;
    }

    .accessibility-menu {
        width: calc(100% - 20px);
        right: -100%;
    }

    .accessibility-menu.open {
        right: 10px;
    }

    .accessibility-menu-header {
        padding: 15px;
    }

    .accessibility-menu-header h2 {
        font-size: 1.1rem;
    }

    .accessibility-menu-content {
        padding: 15px;
    }
}

/* ===================================
   PRINT STYLES - הדפסה
   =================================== */

@media print {
    .accessibility-btn,
    .accessibility-menu,
    .skip-to-content {
        display: none !important;
    }
}