/*
  Course styles. Tailwind (CDN) provides utilities; this file holds components,
  the dark / high-contrast themes, RTL-specific rules and print styles.
  Use logical properties (inset-inline-start, margin-inline-start, ...) — never left/right.
*/

/* The JS font-size control changes --font-size; everything in rem scales with it. */
:root {
    --font-size: 1rem;
}

html {
    font-size: var(--font-size);
}

body {
    font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    line-height: 1.75;
    scroll-behavior: smooth;
    transition: background-color 0.3s, color 0.3s;
}

.skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    top: -4rem;
    z-index: 100;
    background: #1d4ed8;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}
.skip-link:focus { top: 1rem; }

.lesson-card, .modal-content {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s;
}

/* --- Accordion (grid-rows animation handles any content height) --- */
.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-out;
}
.accordion-content.active { grid-template-rows: 1fr; }
.accordion-inner {
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 0.4s;
}
.accordion-content.active .accordion-inner {
    visibility: visible;
    transition-delay: 0s;
}
.accordion-button.active .accordion-chevron { transform: rotate(180deg); }

/* --- Flashcards --- */
.flashcard-container { perspective: 1000px; }
.flashcard {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.flashcard.is-flipped { transform: rotateY(180deg); }
.flashcard-face, .flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    gap: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    overflow-y: auto;
}
.flashcard-back { transform: rotateY(180deg); }
.card-chip {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.1rem 0.75rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.2);
}

.progress-bar-fill { transition: width 0.5s ease-in-out; }

/* --- Barrier animation (direction-agnostic via logical properties) --- */
.animation-container {
    position: relative;
    height: 200px;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: background-color 0.3s;
}
.person-icon, .barrier-icon {
    position: absolute;
    bottom: 20px;
    width: 6rem;
    transition: all 1.5s ease-in-out;
}
.person-icon { inset-inline-start: 5%; }
.barrier-icon { inset-inline-start: calc(50% - 3rem); }
.person-icon.move { inset-inline-start: calc(50% - 9rem); }
.person-icon.move-past { inset-inline-start: calc(95% - 6rem); }
.barrier-icon.removed { opacity: 0; transform: translateY(100px) scale(0.5); }
.result-text {
    position: absolute;
    inset: 0 0 auto 0;
    top: 1.25rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out 1.5s;
    font-weight: bold;
    font-size: 1.5rem;
}
.result-text.show { opacity: 1; }

/* --- Tables --- */
.data-table { border-collapse: collapse; }
.data-table th, .data-table td { border-inline-start: 1px solid #e5e7eb; }
.data-table th:first-child, .data-table td:first-child { border-inline-start: none; }
.checklist-table th[scope="row"] { width: 14rem; min-width: 12rem; }
.print-value { display: none; }

/* --- Quiz --- */
.quiz-option { transition: background-color 0.2s ease, border-color 0.2s ease; }
.quiz-option:has(input:disabled) { cursor: default; }
.feedback {
    display: none;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
}
.feedback.correct { background-color: #dcfce7; color: #166534; }
.feedback.incorrect { background-color: #fee2e2; color: #991b1b; }

/* --- Toast --- */
.toast {
    position: fixed;
    bottom: 6rem;
    inset-inline: 1rem;
    margin-inline: auto;
    max-width: 32rem;
    z-index: 60;
    padding: 0.875rem 1.25rem;
    border-radius: 0.75rem;
    background-color: #1f2937;
    color: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(1rem);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* --- TTS button --- */
.tts-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    margin-inline-start: 0.5rem;
    display: inline-flex;
    vertical-align: middle;
    flex-shrink: 0;
}
.tts-button svg { width: 1.25rem; height: 1.25rem; color: #6b7280; }
.tts-button:hover svg { color: #3b82f6; }
.tts-button.speaking svg { color: #ef4444; }

/* Highly visible focus ring for keyboard users */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
}
.quiz-option:has(input:focus-visible) { outline: 3px solid #3b82f6; outline-offset: 2px; }
.screen-title:focus, .quiz-results:focus { outline: none; }

/* --- Screens & navigation --- */
.screen { display: none; animation: fadeIn 0.5s; }
.screen.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.navigation-controls {
    position: sticky;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}
.nav-btn {
    background-color: #3b82f6;
    color: white;
    font-weight: bold;
    padding: 0.75rem 1.75rem;
    border-radius: 9999px;
    transition: background-color 0.2s;
}
.nav-btn:hover { background-color: #2563eb; }
.nav-btn:disabled { background-color: #9ca3af; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* ================= DARK THEME ================= */
body.theme-dark { background-color: #111827; color: #d1d5db; }

.theme-dark header, .theme-dark .lesson-card, .theme-dark .modal-content, .theme-dark .bg-white {
    background-color: #1f2937;
    color: #d1d5db;
    border-color: #4b5563;
}
.theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark .font-bold, .theme-dark .text-gray-900, .theme-dark .text-blue-800 {
    color: #f9fafb;
}
.theme-dark p, .theme-dark cite, .theme-dark li, .theme-dark td, .theme-dark .quiz-option span, .theme-dark .text-gray-700, .theme-dark .text-gray-600, .theme-dark .text-gray-800 {
    color: #cbd5e1;
}
.theme-dark .text-blue-700 { color: #93c5fd; }
.theme-dark .accordion-button { color: #f9fafb; }
.theme-dark .accordion-button:hover, .theme-dark .quiz-option:hover { background-color: #374151; }
.theme-dark .animation-container, .theme-dark .bg-gray-100 { background-color: #374151; color: #f9fafb; }
.theme-dark blockquote { background-color: #374151; border-color: #3b82f6; }
.theme-dark .divide-y > :not([hidden]) ~ :not([hidden]), .theme-dark .border, .theme-dark .data-table th, .theme-dark .data-table td { border-color: #4b5563; }

.theme-dark .bg-blue-50, .theme-dark .bg-blue-100 { background-color: #1e3a8a; border-color: #3b82f6; }
.theme-dark .bg-green-50, .theme-dark .bg-green-100 { background-color: #14532d; border-color: #22c55e; }
.theme-dark .bg-red-50, .theme-dark .bg-red-100 { background-color: #7f1d1d; border-color: #f87171; }
.theme-dark .bg-purple-50, .theme-dark .bg-purple-100 { background-color: #4c1d95; border-color: #a78bfa; }
.theme-dark .bg-amber-50 { background-color: #78350f; border-color: #f59e0b; }
.theme-dark .bg-gray-50 { background-color: #374151; border-color: #6b7280; }
.theme-dark .bg-blue-50 *, .theme-dark .bg-blue-100 * { color: #dbeafe; }
.theme-dark .bg-green-50 *, .theme-dark .bg-green-100 *, .theme-dark .text-green-800, .theme-dark .text-green-700 { color: #bbf7d0; }
.theme-dark .bg-red-50 *, .theme-dark .bg-red-100 *, .theme-dark .text-red-800, .theme-dark .text-red-700 { color: #fecaca; }
.theme-dark .bg-purple-50 *, .theme-dark .bg-purple-100 * { color: #ede9fe; }
.theme-dark .bg-amber-50 * { color: #fef3c7; }
.theme-dark .quiz-option:has(:checked) { background-color: #1e3a8a; }
.theme-dark .feedback.correct { background-color: #14532d; color: #bbf7d0; }
.theme-dark .feedback.incorrect { background-color: #7f1d1d; color: #fecaca; }
.theme-dark .course-link { color: #93c5fd; }
.theme-dark .checklist-input { background-color: #111827; border-color: #4b5563; color: #f9fafb; }

.theme-dark .flashcard-face.bg-blue-500 { background-color: #1e40af; }
.theme-dark .flashcard-back.bg-blue-700 { background-color: #1d4ed8; }
.theme-dark .flashcard-face.bg-green-500 { background-color: #166534; }
.theme-dark .flashcard-back.bg-green-700, .theme-dark .flashcard-back.bg-green-600 { background-color: #15803d; }
.theme-dark .flashcard-face.bg-purple-500 { background-color: #5b21b6; }
.theme-dark .flashcard-back.bg-purple-700 { background-color: #6d28d9; }
.theme-dark .flashcard-face.bg-gray-700 { background-color: #374151; }
.theme-dark .flashcard-face p, .theme-dark .flashcard-back p, .theme-dark .flashcard-back li { color: #fff; }

body.theme-dark .navigation-controls { background-color: rgba(31, 41, 55, 0.9); border-color: #4b5563; }


/* ================= HIGH CONTRAST THEME ================= */
body.theme-high-contrast { background-color: #000000; color: #ffffff; }

.theme-high-contrast header,
.theme-high-contrast .lesson-card,
.theme-high-contrast .modal-content,
.theme-high-contrast .bg-white {
    background-color: #000000;
    border: 2px solid #ffff00;
    color: #ffffff;
}
.theme-high-contrast h1, .theme-high-contrast h2, .theme-high-contrast h3, .theme-high-contrast h4,
.theme-high-contrast .font-bold, .theme-high-contrast .text-gray-900, .theme-high-contrast .text-blue-800,
.theme-high-contrast .text-blue-700, .theme-high-contrast .callout-label {
    color: #ffff00;
}
.theme-high-contrast p, .theme-high-contrast cite, .theme-high-contrast li, .theme-high-contrast em, .theme-high-contrast td,
.theme-high-contrast .quiz-option span,
.theme-high-contrast .text-gray-800, .theme-high-contrast .text-gray-700, .theme-high-contrast .text-gray-600 {
    color: #ffffff;
}

/* Buttons */
.theme-high-contrast .nav-btn,
.theme-high-contrast .quiz-submit,
.theme-high-contrast .demo-btn,
.theme-high-contrast .checklist-print,
.theme-high-contrast .checklist-clear {
    background-color: #0000ff;
    color: #ffffff;
    border: 2px solid #ffff00;
}
.theme-high-contrast .nav-btn:disabled, .theme-high-contrast .quiz-submit:disabled { background-color: #333; }
.theme-high-contrast #font-decrease, .theme-high-contrast #font-increase,
.theme-high-contrast [data-theme-btn] {
    background-color: #000;
    color: #fff;
    border: 2px solid #ffff00;
}
.theme-high-contrast [data-theme-btn][aria-pressed="true"] { background-color: #0000ff !important; }

/* Coloured boxes become black with a yellow outline */
.theme-high-contrast .bg-blue-50, .theme-high-contrast .bg-blue-100,
.theme-high-contrast .bg-green-50, .theme-high-contrast .bg-green-100,
.theme-high-contrast .bg-red-50, .theme-high-contrast .bg-red-100,
.theme-high-contrast .bg-purple-50, .theme-high-contrast .bg-purple-100,
.theme-high-contrast .bg-amber-50, .theme-high-contrast .bg-gray-50, .theme-high-contrast .bg-gray-100 {
    background-color: #000;
    border-color: #ffff00;
    color: #fff;
}
.theme-high-contrast .bg-green-100.text-green-800, .theme-high-contrast .text-green-700, .theme-high-contrast .text-green-800 { color: #00ff00; }
.theme-high-contrast .bg-red-100.text-red-800, .theme-high-contrast .text-red-700, .theme-high-contrast .text-red-800 { color: #ff6666; }
.theme-high-contrast .text-purple-800, .theme-high-contrast .text-amber-900, .theme-high-contrast .text-blue-900, .theme-high-contrast .text-green-900, .theme-high-contrast .text-red-900 { color: #ffff00; }
.theme-high-contrast .animation-container { background-color: #222; }
.theme-high-contrast blockquote { background-color: #111; border-color: #ffff00; }
.theme-high-contrast .progress-bar-fill { background-color: #ffff00; }
.theme-high-contrast .w-full.bg-gray-200 { background-color: #333; }
.theme-high-contrast .tts-button svg { color: #ffff00; }
.theme-high-contrast .accordion-button { color: #ffffff; }
.theme-high-contrast .accordion-button:hover, .theme-high-contrast .quiz-option:hover { background-color: #222; }
.theme-high-contrast .border, .theme-high-contrast .data-table th, .theme-high-contrast .data-table td,
.theme-high-contrast .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: #ffff00; }
.theme-high-contrast .quiz-option { border-color: #fff; }
.theme-high-contrast .quiz-option:has(:checked) { background-color: #0000ff; }
.theme-high-contrast .feedback.correct { background-color: #000; color: #00ff00; border: 1px solid #00ff00; }
.theme-high-contrast .feedback.incorrect { background-color: #000; color: #ff6666; border: 1px solid #ff6666; }
.theme-high-contrast .course-link { color: #00ffff; }
.theme-high-contrast .checklist-input { background-color: #000; border-color: #ffff00; color: #fff; }
.theme-high-contrast .flashcard-face, .theme-high-contrast .flashcard-back { background-color: #000 !important; border: 2px solid #ffff00; }
.theme-high-contrast .flashcard-face p, .theme-high-contrast .flashcard-back p, .theme-high-contrast .flashcard-back li { color: #fff; }
.theme-high-contrast .toast { background-color: #000; border: 2px solid #ffff00; }

body.theme-high-contrast .navigation-controls { background-color: rgba(0, 0, 0, 0.9); border-color: #ffff00; }


/* ================= PRINT (checklist / action plan) ================= */
@media print {
    header, .settings-bar, .navigation-controls, .no-print, .tts-button, .toast, .skip-link { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .lesson-card { box-shadow: none !important; border: none !important; }
    .checklist-input { display: none !important; }
    .print-value { display: block; white-space: pre-wrap; min-height: 1.5rem; }
    .table-wrap { overflow: visible !important; }
    .checklist-table { min-width: 0 !important; font-size: 10pt; }
    .data-table th, .data-table td { border: 1px solid #999 !important; }
    .screen:not(.active) { display: none !important; }
}