/* ============ style.css - StoryDZ | جميع النسخ ============ */

/* ============ إعادة تعيين ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ============ الجسم ============ */
body { 
    font-family: 'Cairo', sans-serif; 
    background: linear-gradient(145deg, #f8f5f0 0%, #e8e2d4 100%); 
    color: #2c2418; 
    line-height: 1.5; 
}

/* ============ الشريط العلوي ============ */
.top-bar { 
    background: #1e2a2e; 
    color: #e8d6b5; 
    padding: 8px 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap; 
    font-size: 0.85rem; 
    border-bottom: 2px solid #c49a6c; 
}

.top-bar .lang-switcher { 
    display: flex; 
    gap: 8px; 
}

.top-bar .lang-switcher a { 
    color: #f2e8cf; 
    text-decoration: none; 
    font-size: 1.1rem; 
    transition: 0.3s; 
}

.top-bar .lang-switcher a:hover { 
    color: #d9a13b; 
    transform: translateY(-2px); 
}

.social-links { 
    display: flex; 
    gap: 6px; 
}

.social-links a { 
    color: #f2e8cf; 
    margin: 0 2px; 
    font-size: 1.1rem; 
    transition: 0.3s; 
    display: inline-block; 
}

.social-links a:hover { 
    color: #d9a13b; 
    transform: translateY(-2px); 
}

/* ============ الهيدر الرئيسي ============ */
.main-header { 
    background: linear-gradient(135deg, #fff6e8, #fff0e0); 
    padding: 20px 30px; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.05); 
    border-bottom: 1px solid #e2cfb3; 
}

.logo-area { 
    text-align: center; 
}

.logo-area .site-title { 
    font-size: 2.2rem; 
    font-weight: 800; 
    background: linear-gradient(135deg, #8b5a2b, #4f2f10); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text;
    color: #4f2f10; 
    display: block; 
}

.logo-area p { 
    color: #6a4e2e; 
    font-weight: 500; 
    margin-top: 5px; 
    font-size: 0.9rem; 
}

/* ============ القائمة ============ */
nav { 
    margin-top: 15px; 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px; 
    border-top: 1px solid #e2cfb3; 
    padding-top: 18px; 
    justify-content: center; 
}

nav a { 
    text-decoration: none; 
    background: #f3ebdd; 
    padding: 8px 18px; 
    border-radius: 40px; 
    font-weight: 600; 
    color: #3b2a1f; 
    transition: 0.2s; 
    font-size: 0.9rem; 
    border: 1px solid #e2cbaa; 
}

nav a:hover { 
    background: #c9a87b; 
    color: white; 
    transform: translateY(-2px); 
}

/* ============ الحاوية الرئيسية ============ */
.container { 
    max-width: 1300px; 
    margin: 0 auto; 
    padding: 20px 25px; 
}

/* ============ الإعلانات ============ */
.ad-container { 
    text-align: center; 
    margin: 25px auto; 
    padding: 10px; 
    background: #f5efe6; 
    border-radius: 20px; 
    max-width: 1200px; 
}

.ad-label { 
    font-size: 12px; 
    color: #9b7b5c; 
    margin-bottom: 6px; 
}

.inline-ad { 
    background: #f4ede3; 
    padding: 20px; 
    margin: 35px 0; 
    border-radius: 28px; 
    text-align: center; 
}

/* ============ الهيرو ============ */
.hero { 
    background: linear-gradient(105deg, #32281c, #5f4430); 
    border-radius: 32px; 
    padding: 45px 30px; 
    color: #fef3e2; 
    margin-bottom: 40px; 
    text-align: center; 
}

.hero h2 { 
    font-size: 2.2rem; 
    font-weight: 800; 
}

.hero p { 
    font-size: 1.2rem; 
    margin-top: 12px; 
    opacity: 0.9; 
    max-width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
}

/* ============ شريط الإحصائيات ============ */
.stats-bar { 
    display: flex; 
    justify-content: space-around; 
    background: #2c2418; 
    color: #e8d6b5; 
    padding: 30px; 
    border-radius: 24px; 
    margin: 40px 0; 
    flex-wrap: wrap; 
    text-align: center; 
    gap: 15px; 
}

.stats-bar div { 
    flex: 1; 
    min-width: 120px; 
}

.stat-big { 
    font-size: 2.5rem; 
    font-weight: 800; 
    color: #d9a13b; 
    display: block; 
}

/* ============ عنوان القسم ============ */
.section-title { 
    text-align: center; 
    font-size: 2rem; 
    font-weight: 800; 
    color: #4f2f10; 
    margin: 50px 0 30px 0; 
    border-bottom: 3px solid #c9a87b; 
    padding-bottom: 15px; 
}

/* ============ الشبكة ============ */
.section-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
    gap: 30px; 
    margin-bottom: 50px; 
}

/* ============ كرت القسم ============ */
.category-card { 
    background: #fffaf3; 
    border-radius: 28px; 
    overflow: hidden; 
    box-shadow: 0 12px 25px rgba(0,0,0,0.08); 
    transition: all 0.3s ease; 
    border: 1px solid #eedbba; 
    position: relative; 
}

.category-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 25px 35px rgba(0,0,0,0.12); 
}

/* ============ رأس الكرت ============ */
.card-header { 
    padding: 18px 20px; 
    font-size: 1.15rem; 
    font-weight: 800; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    cursor: pointer; 
    user-select: none; 
    color: #fff; 
    gap: 10px;
}

.card-header span { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

.card-header i { 
    font-size: 1.3rem; 
}

.toggle-icon { 
    transition: transform 0.3s; 
}

/* ألوان رؤوس الأقسام */
.card-war { background: #c49a6c; }
.card-crusade { background: #bf9a6a; }
.card-mideast { background: #d4b886; }
.card-assassin { background: #b89a6c; }
.card-rev { background: #d4b896; }
.card-colonial { background: #c9a070; }
.card-mystery { background: #c4a67a; }
.card-strange { background: #ceaa7c; }
.card-islam { background: #b8956a; }
.card-israel { background: #d0b080; }
.card-empire { background: #c8a478; }
.card-football { background: #c5a070; }
.card-end { background: #ba9468; }
.card-leaders { background: #c2966a; }
.card-africa { background: #d2b484; }
.card-spy { background: #b89264; }
.card-disaster { background: #c89e6e; }
.card-crime { background: #bc9668; }
.card-sport { background: #c0a070; }

/* ============ قائمة القصص ============ */
.story-list { 
    padding: 18px 20px 22px; 
    max-height: 600px; 
    overflow-y: auto; 
}

.story-list a { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    text-decoration: none; 
    padding: 10px 0; 
    border-bottom: 1px dashed #eedfcb; 
    color: #4a3724; 
    font-weight: 500; 
    transition: 0.2s; 
    font-size: 0.9rem; 
    gap: 10px;
}

.story-list a:last-child { 
    border-bottom: none; 
}

.story-list a:hover { 
    color: #b45f2a; 
}

/* للنسخة العربية RTL */
[dir="rtl"] .story-list a:hover { 
    padding-right: 8px; 
}

/* للنسخة الفرنسية والإنجليزية LTR */
[dir="ltr"] .story-list a:hover { 
    padding-left: 8px; 
}

.story-list i { 
    color: #c8975e; 
    font-size: 0.8rem; 
}

/* ============ القصص الإضافية (مخفية افتراضياً) ============ */
.more-stories { 
    display: none; 
    margin-top: 15px; 
    padding-top: 15px; 
    border-top: 2px solid #eedbba; 
}

.more-stories.show { 
    display: block; 
    animation: fadeIn 0.3s ease; 
}

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

/* ============ أزرار عرض المزيد/إخفاء ============ */
.btn-more { 
    display: inline-block; 
    margin-top: 12px; 
    font-size: 0.85rem; 
    color: #936e42; 
    font-weight: 700; 
    cursor: pointer; 
    padding: 8px 16px; 
    background: #f3ede5; 
    border-radius: 30px; 
    transition: 0.2s; 
    text-align: center; 
    width: 100%; 
    border: none;
    font-family: 'Cairo', sans-serif;
}

.btn-more:hover { 
    background: #e8dcc8; 
    color: #b45f2a; 
}

.btn-less { 
    display: inline-block; 
    margin-top: 12px; 
    font-size: 0.8rem; 
    color: #936e42; 
    font-weight: 600; 
    cursor: pointer; 
    text-align: center; 
    width: 100%; 
    padding: 5px; 
    display: none; 
    border: none;
    background: transparent;
    font-family: 'Cairo', sans-serif;
}

.btn-less:hover { 
    color: #c93030; 
}

/* ============ شارة جديد ============ */
.new-badge { 
    background: #c93030; 
    color: white; 
    font-size: 0.7rem; 
    padding: 2px 8px; 
    border-radius: 20px; 
    font-weight: 700; 
    display: inline-block; 
}

/* للنسخة العربية */
[dir="rtl"] .new-badge { 
    margin-right: 5px; 
}

/* للنسخة الفرنسية والإنجليزية */
[dir="ltr"] .new-badge { 
    margin-left: 5px; 
}

/* ============ قسم القصص الحصرية ============ */
.featured-section { 
    background: #dfceb4; 
    border-radius: 30px; 
    padding: 25px; 
    margin: 35px 0; 
    text-align: center; 
}

.featured-section h3 { 
    margin-bottom: 20px; 
    color: #2c2418; 
}

.featured-links { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 15px; 
    margin-top: 20px; 
}

.featured-links a { 
    background: #2c3a30; 
    color: #f7e7cf; 
    padding: 10px 20px; 
    border-radius: 50px; 
    text-decoration: none; 
    font-weight: 600; 
    font-size: 0.9rem; 
    transition: 0.2s; 
}

.featured-links a:hover { 
    background: #1a2a1e; 
    transform: translateY(-2px); 
}

/* ============ الفوتر ============ */
footer { 
    background: #1f2a24; 
    color: #d8cfbc; 
    padding: 35px 25px 20px; 
    margin-top: 50px; 
    border-radius: 40px 40px 0 0; 
}

.footer-content { 
    max-width: 1200px; 
    margin: 0 auto; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    gap: 30px; 
}

.footer-col { 
    flex: 1; 
    min-width: 250px; 
}

.footer-col h4 { 
    font-size: 1.1rem; 
    margin-bottom: 12px; 
    color: #e8d6b5; 
}

/* للنسخة العربية */
[dir="rtl"] .footer-col h4 { 
    border-right: 3px solid #bb8a5c; 
    padding-right: 12px; 
}

/* للنسخة الفرنسية والإنجليزية */
[dir="ltr"] .footer-col h4 { 
    border-left: 3px solid #bb8a5c; 
    padding-left: 12px; 
}

.footer-col p { 
    color: #bbb; 
    font-size: 0.9rem; 
    line-height: 1.6; 
}

.footer-col a { 
    display: block; 
    color: #ebddc7; 
    text-decoration: none; 
    margin-bottom: 8px; 
    font-size: 0.9rem; 
    transition: 0.2s; 
}

.footer-col a:hover { 
    color: #e9b469; 
}

[dir="rtl"] .footer-col a:hover { 
    padding-right: 5px; 
}

[dir="ltr"] .footer-col a:hover { 
    padding-left: 5px; 
}

.social-footer { 
    display: flex; 
    gap: 18px; 
    margin-top: 12px; 
    flex-wrap: wrap; 
}

.social-footer a { 
    font-size: 1.5rem; 
    color: #cdb38c; 
    transition: 0.2s; 
}

.social-footer a:hover { 
    color: #e9b469; 
    transform: scale(1.1); 
    padding: 0 !important; 
}

/* ============ حقوق النشر ============ */
.copyright { 
    text-align: center; 
    margin-top: 35px; 
    padding-top: 18px; 
    border-top: 1px solid #3e4d44; 
    font-size: 0.8rem; 
    color: #999; 
}

/* ============ تحسينات RTL / LTR ============ */

/* للنسخة العربية: أيقونات إلى اليسار */
[dir="rtl"] .story-list a i,
[dir="rtl"] nav a i {
    margin-right: 5px;
}

/* للنسخة الفرنسية والإنجليزية: أيقونات إلى اليمين */
[dir="ltr"] .story-list a i,
[dir="ltr"] nav a i {
    margin-left: 5px;
}

/* ============ تجاوب الموقع ============ */
@media (max-width: 780px) { 
    .hero h2 { 
        font-size: 1.6rem; 
    } 
    
    .logo-area .site-title { 
        font-size: 1.8rem; 
    } 
    
    nav a { 
        padding: 5px 14px; 
        font-size: 0.8rem; 
    }
    
    .section-grid { 
        grid-template-columns: 1fr; 
    }
    
    .top-bar { 
        flex-direction: column; 
        gap: 10px; 
        text-align: center; 
    }
    
    .stats-bar { 
        flex-direction: column; 
        gap: 20px; 
    }
    
    .footer-content { 
        flex-direction: column; 
    }
}

@media (max-width: 480px) {
    .container {
        padding: 10px 15px;
    }
    
    .hero {
        padding: 30px 20px;
    }
    
    .hero h2 {
        font-size: 1.3rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .card-header {
        font-size: 1rem;
        padding: 15px;
    }
    
    .story-list a {
        font-size: 0.85rem;
    }
    
    .featured-links a {
        padding: 8px 15px;
        font-size: 0.8rem;
    }
}

/* ============ تخصيص شريط التمرير ============ */
.story-list::-webkit-scrollbar {
    width: 6px;
}

.story-list::-webkit-scrollbar-track {
    background: #f5efe6;
    border-radius: 10px;
}

.story-list::-webkit-scrollbar-thumb {
    background: #c9a87b;
    border-radius: 10px;
}

.story-list::-webkit-scrollbar-thumb:hover {
    background: #b8956a;
}

/* ============ تأثيرات إضافية ============ */
::selection {
    background: #c9a87b;
    color: #fff;
}

/* تحسين مظهر الروابط داخل المحتوى */
a {
    transition: all 0.2s ease;
}

/* تحسين التركيز للوصول */
a:focus, 
button:focus,
.btn-more:focus,
.btn-less:focus {
    outline: 2px solid #c9a87b;
    outline-offset: 2px;
}