/* =========================================================
   accessibility.css — WCAG 2.1 AA + Keyboard Navigation
   ========================================================= */

/* ─── Skip to main content — لمستخدمي لوحة المفاتيح ──── */
.skip-link {
    position: absolute;
    top: -100px;
    right: 12px;
    background: var(--primary, #2563eb);
    color: #fff;
    padding: 10px 20px;
    border-radius: 0 0 8px 8px;
    font-weight: 700;
    font-size: .95rem;
    z-index: 999999;
    transition: top .2s;
    text-decoration: none;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* ─── Focus Indicators — واضحة ومرئية ────────────────── */
:focus-visible {
    outline: 3px solid var(--primary, #2563eb) !important;
    outline-offset: 3px !important;
    border-radius: 4px;
}

/* إزالة outline لمستخدمي الماوس فقط */
:focus:not(:focus-visible) {
    outline: none;
}

/* ─── Buttons & Links focus ───────────────────────────── */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--primary, #2563eb) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

/* ─── Minimum touch target size (44x44px WCAG 2.5.5) ─── */
button,
[role="button"],
a.btn,
.nav-toggle,
.dark-toggle {
    min-height: 44px;
    min-width: 44px;
}

/* ─── Reduced Motion — احترام إعدادات المستخدم ──────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── High Contrast Mode ─────────────────────────────── */
@media (forced-colors: active) {
    .btn,
    button {
        border: 2px solid ButtonText;
    }
}

/* ─── Text sizing — قابل للتكبير حتى 200% ─────────────
   جميع الـ font-size يجب أن تكون rem/em وليس px ثابتة    */

/* ─── Error messages — واضحة ومُعلَنة بالـ ARIA ─────── */
.form-error,
.alert-danger,
[role="alert"] {
    border-right: 4px solid var(--danger, #dc2626);
    padding: 10px 14px;
}

[role="alert"]:not(:empty) {
    animation: fadeInAlert .3s ease;
}

@keyframes fadeInAlert {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Sufficient Color Contrast helpers ─────────────────
   نضمن أن النص الثانوي له تباين كافٍ 4.5:1               */
.text-muted,
.text-secondary,
.meta-text {
    color: var(--gray-600, #4b5563); /* 5.74:1 على خلفية بيضاء */
}

/* ─── Form labels — دائماً ظاهرة ────────────────────── */
.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
}

/* ─── Image alt fallback ─────────────────────────────── */
img {
    max-width: 100%;
    height: auto;
}
img[alt] { font-size: .875rem; color: var(--gray-500); }

/* ─── Table accessibility ────────────────────────────── */
table { border-collapse: collapse; }
th { text-align: right; }

/* ─── Visible keyboard focus on cards ───────────────────*/
.job-card:focus-within {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: 2px;
}