/*
 * website/assets/base.css
 * ----------------------------------------------------
 * ملف الأنماط الأساسية الموحد لجميع صفحات Sopen.
 * يحدد الأنماط العامة ويحسن التصفح.
 * 🌟 [تحديث التصميم] تحسين تفاعل البطاقات وأحجام الخطوط.
 */

/* 1. الخطوط الأساسية */
body {
    font-family: 'Cairo', 'Tajawal', 'Inter', sans-serif; /* إضافة Inter كخط احتياطي */
    color: #1e293b; /* Slate-800 */
    background-color: #f8fafc; /* Slate-50 */
    direction: rtl; /* ضمان الاتجاه من اليمين لليسار */
}

/* 2. شريط التنقل الثابت (Header) */
.header-fixed {
    box-shadow: 0 6px 20px -3px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.9); /* خلفية شفافة ناعمة */
}

/* 3. عناصر التفاعل العامة */
.ai-badge {
    background-color: #0d9488; /* Teal-600 */
    color: #ffffff;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: pulse-light 2s infinite;
}

/* 4. تصميم البطاقات */
.card-hover {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 35px -8px rgba(0, 0, 0, 0.15);
}

/* 5. تصميم المحتوى (Article Content) */
.article-content h2, 
.article-content h3 {
    font-family: 'Cairo', sans-serif;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 900;
    color: #10172a; /* Slate-900 */
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0; /* Gray-200 */
}

.article-content h2 {
    font-size: 2.5rem; /* 4xl */
}

.article-content h3 {
    font-size: 2rem; /* 3xl */
    border-bottom: 1px solid #f1f5f9; /* Gray-100 */
}

.article-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    font-size: 1.125rem; /* lg */
    color: #334155; /* Slate-700 */
}

/* 6. قائمة جدول المحتويات (TOC) - (يبقى كما هو) */
#toc-nav a {
    display: block;
    padding: 0.5rem 0.5rem;
    border-right: 3px solid transparent;
    transition: all 0.2s;
    font-size: 0.95rem;
    color: #475569; /* Slate-600 */
}

#toc-nav a.toc-h3 {
    padding-right: 1.5rem;
    font-size: 0.9rem;
    font-weight: 400;
}

#toc-nav a:hover {
    color: #0d9488; /* Teal-600 */
    border-right-color: #14b8a6; /* Teal-500 */
    background-color: #f0fdfa; /* Teal-50 */
}

/* 7. الرسوم المتحركة البسيطة */
@keyframes pulse-light {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
}