/*
Theme Name: مدرسة الريحان
Theme URI: https://fiqhlearning.com
Author: محمد الأمين
Author URI: https://fiqhlearning.com
Description: قالب WordPress احترافي لمنصة تعليمية إلكترونية لفهم الفقه المالكي. يدعم RTL كاملاً، بألوان خضراء إسلامية، ومصمم خصيصاً لإدارة المقررات والدروس والطلاب بدون إضافات خارجية. الإصدار 1.3 يتضمن تحسينات شاملة للتصميم المتجاوب مع جميع أحجام الشاشات.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fiqhlearning
Tags: rtl-language-support, education, lms, arabic, islamic, two-columns, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready, responsive-layout
*/

/* ==========================================================================
   متغيرات CSS - نظام الألوان الأخضر الإسلامي
   ========================================================================== */

:root {
    /* الألوان الأساسية - درجات الأخضر */
    --color-primary: #0B5E3B;
    --color-primary-dark: #084229;
    --color-primary-light: #0E7A4D;
    --color-primary-lighter: #10965F;
    --color-accent: #14B171;
    --color-accent-light: #2DCE89;

    /* الألوان المحايدة */
    --color-white: #FFFFFF;
    --color-light: #F7FAFC;
    --color-light-gray: #EDF2F7;
    --color-gray: #A0AEC0;
    --color-dark-gray: #4A5568;
    --color-dark: #1A202C;
    --color-black: #000000;
    --color-border: #E2E8F0;

    /* ألوان الحالات */
    --color-success: #14B171;
    --color-warning: #F6AD55;
    --color-error: #F56565;
    --color-info: #4299E1;

    /* الخطوط */
    --font-primary: 'Cairo', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif;
    --font-heading: 'Cairo', 'Noto Naskh Arabic', serif;

    /* أحجام الخطوط */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;

    /* المسافات */
    --spacing-xs: 0.25rem;      /* 4px */
    --spacing-sm: 0.5rem;       /* 8px */
    --spacing-md: 1rem;         /* 16px */
    --spacing-lg: 1.5rem;       /* 24px */
    --spacing-xl: 2rem;         /* 32px */
    --spacing-2xl: 3rem;        /* 48px */
    --spacing-3xl: 4rem;        /* 64px */
    --spacing-4xl: 5rem;        /* 80px */
    --spacing-5xl: 6rem;        /* 96px */

    /* الانتقالات */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* الظلال */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* الشعاع */
    --radius-sm: 0.25rem;
    --radius-base: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
}

/* وضع الظلام - متناسق مع الهوية الأصلية */
body.dark-mode {
    /* الخلفيات - أخضر داكن مريح للعين */
    --color-white: #0D1512;
    --color-light: #172A23;
    --color-light-gray: #12201B;

    /* النصوص - وضوح عالي مع لمسة خضراء */
    --color-black: #E7F6EE;
    --color-dark: #C2D6CC;
    --color-dark-gray: #8FA69A;
    --color-gray: #6B7F74;

    /* الألوان الأساسية - هوية الريحان الخضراء */
    --color-primary: #20A36C;
    --color-primary-dark: #167A52;
    --color-primary-light: #34C585;
    --color-accent: #4BE49C;

    /* ألوان الحالات - ناعمة ومتناسقة */
    --color-success: #34C585;
    --color-warning: #E3A74D;
    --color-error: #E06A6A;
    --color-info: #4BA7E4;

    /* متغيرات إضافية للوضع الليلي */
    --color-border: #1F3A2F;
    --color-dark-bg: #0D1512;
    --color-dark-card: #172A23;
    --color-dark-border: #1F3A2F;

    /* الظلال في الوضع الليلي - ناعمة */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.45);
    --shadow-base: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -1px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.45), 0 10px 10px -5px rgba(0, 0, 0, 0.25);
}

body.dark-mode .card {
    background-color: var(--color-light);
    border: 1px solid var(--color-light-gray);
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--color-light-gray);
    color: var(--color-black);
    border-color: var(--color-gray);
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: var(--color-primary);
    background-color: var(--color-light);
}

body.dark-mode .main-header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-light-gray);
}

body.dark-mode .site-footer {
    background-color: #0D1512;
    border-top: 1px solid var(--color-border);
}

/* تحسينات الوضع الليلي للأسئلة والأجوبة */
body.dark-mode .lesson-tab {
    color: var(--color-dark-gray);
}

body.dark-mode .lesson-tab.active {
    color: var(--color-primary);
}

body.dark-mode .lesson-tabs {
    border-bottom-color: var(--color-light-gray);
}

body.dark-mode .video-container {
    background-color: #000;
}

body.dark-mode .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

body.dark-mode .btn-primary:hover {
    background-color: var(--color-primary-light);
}

body.dark-mode .lesson-course-link,
body.dark-mode .lesson-duration {
    color: var(--color-dark-gray);
}

body.dark-mode .lesson-status-completed {
    color: var(--color-success);
}

body.dark-mode .lesson-item-sidebar:hover {
    background-color: var(--color-light-gray);
}

body.dark-mode .lesson-item-sidebar.active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

body.dark-mode .modal-content {
    background-color: var(--color-light);
}

body.dark-mode .search-modal-content {
    background-color: var(--color-light);
}

body.dark-mode code {
    background-color: var(--color-light-gray);
    color: var(--color-primary-light);
}

body.dark-mode .user-dropdown {
    background-color: var(--color-light);
    border: 1px solid var(--color-light-gray);
}

/* ==========================================================================
   إعادة تعيين وأساسيات
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-dark);
    background-color: var(--color-light);
    direction: rtl;
    text-align: right;
}

/* ==========================================================================
   الطباعة
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--color-dark);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-light);
}

/* ==========================================================================
   تصميم عام
   ========================================================================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.container-wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.section {
    padding: var(--spacing-3xl) 0;
}

/* الأزرار */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--text-base);
    font-weight: 600;
    text-align: center;
    border-radius: var(--radius-base);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn svg {
    flex-shrink: 0;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: var(--color-white);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* البطاقات */
.card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-base);
    transition: all var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

/* ==========================================================================
   صفحة الدرس - الأسئلة والتمارين
   ========================================================================== */

.exercises-section,
.questions-section {
    padding: var(--spacing-lg);
}

.add-question-form {
    margin-bottom: var(--spacing-2xl);
    padding: var(--spacing-xl);
}

.add-question-form h4 {
    margin-bottom: var(--spacing-lg);
    color: var(--color-primary);
}

.add-question-form textarea {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--color-gray);
    border-radius: 8px;
    font-family: inherit;
    font-size: var(--text-base);
    resize: vertical;
    margin-bottom: var(--spacing-md);
    background-color: var(--color-white);
    color: var(--color-black);
}

.add-question-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.questions-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.question-item {
    padding: var(--spacing-xl);
}

.question-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-light-gray);
}

.question-author strong {
    color: var(--color-primary);
    font-size: var(--text-lg);
}

.question-date {
    color: var(--color-dark);
    font-size: var(--text-sm);
    margin-right: var(--spacing-md);
}

.question-content {
    padding: var(--spacing-md) 0;
    color: var(--color-black);
    line-height: 1.8;
    font-size: var(--text-base);
}

.question-answer {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    background-color: var(--color-light);
    border-right: 4px solid var(--color-primary);
    border-radius: 8px;
}

.answer-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    color: var(--color-primary);
    font-weight: 600;
}

.answer-header svg {
    flex-shrink: 0;
}

.answer-content {
    color: var(--color-black);
    line-height: 1.8;
}

.answer-form {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-light-gray);
}

.answer-form textarea {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--color-gray);
    border-radius: 8px;
    font-family: inherit;
    font-size: var(--text-base);
    resize: vertical;
    margin-bottom: var(--spacing-md);
    background-color: var(--color-white);
    color: var(--color-black);
}

.answer-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.no-questions {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--color-dark);
}

.no-questions p {
    font-size: var(--text-lg);
}

/* Dark mode for questions */
body.dark-mode .add-question-form textarea,
body.dark-mode .answer-form textarea {
    background-color: var(--color-light);
    border-color: var(--color-light-gray);
    color: var(--color-black);
}

body.dark-mode .question-answer {
    background-color: var(--color-light-gray);
}

body.dark-mode .question-header {
    border-bottom-color: var(--color-light-gray);
}

body.dark-mode .answer-form {
    border-top-color: var(--color-light-gray);
}

/* Dark mode - القائمة والهيدر */
body.dark-mode .main-header {
    background-color: var(--color-light);
}

body.dark-mode .menu-toggle {
    background-color: var(--color-light-gray);
}

body.dark-mode .menu-icon,
body.dark-mode .menu-icon::before,
body.dark-mode .menu-icon::after {
    background-color: var(--color-primary-light);
}

body.dark-mode .main-navigation {
    background-color: var(--color-light);
}

body.dark-mode .nav-menu li {
    border-bottom-color: var(--color-light-gray);
}

body.dark-mode .nav-menu li a {
    color: var(--color-white);
}

body.dark-mode .nav-menu li a:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* ==========================================================================
   استجابة الشاشات المحسّنة - الإصدار 1.3
   ========================================================================== */

/* تحسينات للأجهزة اللوحية الكبيرة */
@media (max-width: 1024px) {
    .container {
        max-width: 960px;
        padding: 0 var(--spacing-lg);
    }

    .courses-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* تحسينات للأجهزة اللوحية */
@media (max-width: 768px) {
    :root {
        --text-4xl: 1.75rem;
        --text-3xl: 1.5rem;
        --text-2xl: 1.25rem;
        --text-xl: 1.125rem;
    }

    .container,
    .container-wide {
        max-width: 100%;
        padding: 0 var(--spacing-md);
    }

    .section {
        padding: var(--spacing-2xl) 0;
    }

    .card {
        padding: var(--spacing-md);
        border-radius: var(--radius-md);
    }

    .btn {
        padding: var(--spacing-md);
        font-size: var(--text-base);
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .courses-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    /* تحسينات الأسئلة */
    .questions-section,
    .exercises-section {
        padding: var(--spacing-md);
    }

    .question-item {
        padding: var(--spacing-md);
    }

    .question-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .add-question-form,
    .answer-form {
        padding: var(--spacing-md);
    }

    /* تحسينات الهيدر */
    .header-content {
        flex-wrap: wrap;
        padding: var(--spacing-sm) 0;
    }

    .site-title {
        font-size: var(--text-xl);
    }

    .header-actions {
        gap: var(--spacing-sm);
    }

    /* تحسينات القوائم */
    .nav-menu {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .nav-menu li a {
        padding: var(--spacing-md);
        display: block;
    }

    /* تحسينات الفوتر */
    .footer-widgets-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .footer-bottom-content {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }

    .footer-menu {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    /* تحسينات البطاقات */
    .course-card,
    .question-card {
        margin-bottom: var(--spacing-md);
    }

    .course-thumbnail,
    .course-thumbnail-placeholder {
        height: 180px;
    }

    /* تحسينات الفيديو */
    .video-container {
        margin-bottom: var(--spacing-lg);
    }

    /* تحسينات التبويبات */
    .lesson-tabs {
        flex-wrap: wrap;
        gap: var(--spacing-xs);
        overflow-x: auto;
    }

    .lesson-tab {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--text-sm);
        white-space: nowrap;
    }
}

/* تحسينات للهواتف الصغيرة */
@media (max-width: 480px) {
    :root {
        --text-4xl: 1.5rem;
        --text-3xl: 1.25rem;
        --text-2xl: 1.125rem;
        --text-xl: 1rem;
        --spacing-3xl: 3rem;
    }

    .container,
    .container-wide {
        padding: 0 var(--spacing-sm);
    }

    .section {
        padding: var(--spacing-xl) 0;
    }

    .card {
        padding: var(--spacing-sm);
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    /* تحسينات العناوين */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.125rem; }
    h4 { font-size: 1rem; }

    /* تحسينات الأيقونات */
    .stat-icon,
    .science-icon {
        width: 56px;
        height: 56px;
    }

    .stat-icon svg,
    .science-icon svg {
        width: 28px;
        height: 28px;
    }

    /* تحسينات النصوص */
    .hero-description {
        font-size: var(--text-base);
    }

    /* تحسينات النماذج */
    .add-question-form textarea,
    .answer-form textarea {
        padding: var(--spacing-sm);
        font-size: var(--text-base);
    }

    /* تحسينات الأزرار */
    .btn-lg {
        padding: var(--spacing-md);
        font-size: var(--text-base);
    }

    /* تحسينات المودال */
    .modal-content {
        width: 95%;
        padding: var(--spacing-md);
        margin: 10% auto;
    }

    .search-modal-content {
        width: 95%;
        padding: var(--spacing-md);
    }

    /* تحسينات شريط الأدوات */
    .back-to-top {
        width: 40px;
        height: 40px;
        bottom: var(--spacing-md);
        left: var(--spacing-md);
    }

    /* تحسينات البطاقات المصغرة */
    .course-thumbnail,
    .course-thumbnail-placeholder {
        height: 160px;
    }

    .course-content {
        padding: var(--spacing-sm);
    }

    .course-title {
        font-size: var(--text-lg);
    }

    /* تحسينات صفحة الدرس */
    .lesson-main-content {
        padding: var(--spacing-sm);
    }

    .lesson-header h1 {
        font-size: var(--text-xl);
    }

    /* تحسينات الأسئلة في الموبايل */
    .question-item {
        padding: var(--spacing-sm);
    }

    .question-content {
        font-size: var(--text-base);
        line-height: 1.6;
    }

    .question-answer {
        padding: var(--spacing-sm);
        margin-top: var(--spacing-md);
    }
}

/* تحسينات للشاشات الصغيرة جداً */
@media (max-width: 360px) {
    :root {
        --text-4xl: 1.375rem;
        --text-3xl: 1.125rem;
        --text-2xl: 1rem;
        --spacing-xl: 1.5rem;
        --spacing-2xl: 2rem;
        --spacing-3xl: 2.5rem;
    }

    .container,
    .container-wide {
        padding: 0 var(--spacing-xs);
    }

    .site-title {
        font-size: var(--text-lg);
    }

    .header-actions {
        gap: var(--spacing-xs);
    }

    .btn {
        padding: var(--spacing-sm);
        font-size: var(--text-sm);
    }

    .card {
        padding: var(--spacing-xs);
    }

    .stat-icon,
    .science-icon {
        width: 48px;
        height: 48px;
    }

    .modal-content,
    .search-modal-content {
        width: 98%;
        padding: var(--spacing-sm);
    }

    .question-item {
        padding: var(--spacing-xs);
    }

    .add-question-form,
    .answer-form {
        padding: var(--spacing-sm);
    }
}

/* تحسينات لنمط الطباعة */
@media print {
    .main-header,
    .site-footer,
    .header-actions,
    .back-to-top,
    .dark-mode-toggle,
    .search-toggle,
    .btn,
    .nav-menu {
        display: none !important;
    }

    .container,
    .container-wide {
        max-width: 100%;
        padding: 0;
    }

    body {
        background-color: white;
        color: black;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}