/* =========================================
   Iamdieter - Ultimate Master Stylesheet 🚀
   ========================================= */

/* 1. المتغيرات والألوان الأساسية للهوية */
:root { 
    --primary: #238664;   /* الأخضر الأساسي */
    --secondary: #414c59; /* النيلي للفوتر */
    --accent: #1abc9c;    /* لون التفاعل (الهوفر) */
    --bg: #f9fafb;        /* لون خلفية الصفحة (فاتح جداً ومريح للعين يشبه Manus) */
}

/* 2. الإعدادات العامة */
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: var(--bg); 
    color: #333; 
    margin: 0; 
    padding: 0;
    padding-top: 90px; /* ⚠️ تعويض مساحة الهيدر الثابت عشان المحتوى ما يختفي تحته */
    line-height: 1.8; 
    direction: rtl; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
}

/* =========================================
   3. الهيدر والقائمة العلوية (أبيض، ثابت، وشفاف عند النزول)
   ========================================= */
#main-header { 
    background-color: #ffffff; 
    padding: 15px 0; 
    border-bottom: 1px solid #eaeaea; 
    position: fixed; /* تثبيت الهيدر في الأعلى */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000; 
    transition: all 0.3s ease; 
}

/* الكلاس الذي سيتم إضافته برمجياً عند النزول بالصفحة */
header.header-scrolled {
    background-color: rgba(255, 255, 255, 0.85); /* شفافية بيضاء */
    backdrop-filter: blur(10px); /* تأثير زجاجي رائع خلف الهيدر */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* الحد السفلي بظل ناعم */
    padding: 10px 0; /* تصغير الهيدر قليلاً لزيادة مساحة القراءة */
    border-bottom: none;
}

.header-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }

.header-logo a { display: block; color: var(--primary); text-decoration: none; font-size: 1.8rem; font-weight: bold; }
.header-logo img { 
    max-height: 40px; /* ⬇️ تم تصغير اللوجو الأساسي */
    width: auto; 
    display: block; 
    transition: max-height 0.3s ease;
}

/* تصغير اللوجو مع النزول */
header.header-scrolled .header-logo img {
    max-height: 32px; /* ⬇️ تصغير اللوجو أكثر مع النزول */
}

.main-nav { display: flex; align-items: center; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
.nav-list a { 
    color: var(--primary); /* تحويل الروابط للأخضر الداكن لتناسب الخلفية البيضاء */
    font-size: 1.05rem; 
    font-weight: 600; 
    transition: color 0.3s; 
}
.nav-list a:hover { color: var(--accent); }

.menu-toggle { display: none; background: transparent; border: none; color: var(--primary); font-size: 1.8rem; cursor: pointer; padding: 5px; }

/* =========================================
   4. تخطيط الصفحة الرئيسية (الشبكة والسايدبار)
   ========================================= */
.layout-container { max-width: 1200px; margin: 20px auto 40px auto; padding: 0 20px; display: flex; gap: 30px; flex-wrap: wrap; }
.main-section { flex: 1; min-width: 65%; }
.sidebar { width: 300px; flex-shrink: 0; }

.hero-post { background: #fff; border-radius: 12px; overflow: hidden; margin-bottom: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); transition: transform 0.3s; position: relative; border: 1px solid #eaeaea; }
.hero-post:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.hero-image-link { display: block; height: 350px; }
.hero-image { width: 100%; height: 100%; object-fit: cover; }
.hero-content { padding: 25px; }
.hero-title { margin: 0 0 15px 0; font-size: 1.8rem; }
.hero-title a { color: var(--primary); text-decoration: none; }
.hero-title a:hover { color: var(--accent); }
.hero-excerpt { font-size: 1.1rem; color: #555; line-height: 1.6; margin: 0; }

.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.post-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.03); display: flex; flex-direction: column; transition: transform 0.3s; border: 1px solid #eaeaea; }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.post-image-link { display: block; height: 160px; }
.post-image { width: 100%; height: 100%; object-fit: cover; }
.post-content { padding: 15px; display: flex; flex-direction: column; flex-grow: 1; }
.post-title { font-size: 1.1rem; margin: 0 0 10px 0; line-height: 1.4; }
.post-title a { color: var(--primary); text-decoration: none; }
.post-title a:hover { color: var(--accent); }
.post-excerpt { font-size: 0.9em; color: #666; margin: 0; line-height: 1.5; }

.widget { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); margin-bottom: 25px; border: 1px solid #eaeaea; }
.widget-title { font-size: 1.2rem; color: var(--primary); border-bottom: 2px solid var(--accent); padding-bottom: 10px; margin-top: 0; margin-bottom: 20px; font-weight: bold; }
.popular-list { list-style: none; padding: 0; margin: 0; }
.popular-item { display: flex; gap: 15px; margin-bottom: 15px; align-items: center; border-bottom: 1px solid #f0f0f0; padding-bottom: 15px; }
.popular-item:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.popular-img { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; }
.popular-item-title { font-size: 0.95rem; line-height: 1.4; margin: 0; }
.popular-item-title a { color: var(--primary); text-decoration: none; font-weight: bold; transition: color 0.2s; }
.popular-item-title a:hover { color: var(--accent); }

/* =========================================
   5. تصميم المقال الداخلي (هنا الحل لمشكلة الانفراط!) 🚀
   ========================================= */
.container {
    max-width: 850px !important;
    margin: 40px auto !important;
    padding: 0 20px;
    box-sizing: border-box;
}
.article-card { background: #fff; border-radius: 8px; padding: 40px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); border: 1px solid #eaeaea; }
.article-title { color: var(--primary); font-size: 2.2rem; margin-top: 0; margin-bottom: 15px; line-height: 1.4; }
.article-meta { font-size: 0.95rem; color: #7f8c8d; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.category-badge { display: inline-block; background: var(--primary); color: #fff; padding: 4px 12px; border-radius: 15px; text-decoration: none; font-size: 0.85rem; margin-left: 5px; }
.article-content { font-size: 1.1rem; color: #444; line-height: 1.9; }
.article-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 20px 0; }
.article-content h2, .article-content h3 { color: var(--primary); margin-top: 30px; }
.tags-section { margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; }
.tag-badge { display: inline-block; background: #ecf0f1; color: #7f8c8d; padding: 6px 14px; border-radius: 5px; text-decoration: none; font-size: 0.85rem; margin-left: 5px; margin-bottom: 5px; transition: 0.2s; }
.tag-badge:hover { background: var(--primary); color: #fff; }
.disclaimer-box { background-color: #e8f5e9; color: var(--primary); border: 1px solid #c8e6c9; padding: 15px; border-radius: 5px; margin-top: 30px; font-size: 0.95rem; }
.related-posts { margin-top: 40px; display: flex; gap: 20px; flex-wrap: wrap; }
.related-post-card { background: #fff; padding: 15px; border-radius: 8px; flex: 1; min-width: 200px; box-shadow: 0 2px 5px rgba(0,0,0,0.03); border-top: 3px solid var(--primary); border-left: 1px solid #eaeaea; border-right: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; }
.related-post-card a { text-decoration: none; color: var(--primary); font-weight: bold; transition: color 0.2s; display: block; margin-bottom: 10px; }
.related-post-card a:hover { color: var(--accent); }

/* =========================================
   6. الفوتر (Footer)
   ========================================= */
.site-footer { background-color: var(--secondary); color: #ffffff; padding: 40px 20px 20px; margin-top: auto; width: 100%; box-sizing: border-box; }
.footer-content { max-width: 1200px; margin: 0 auto; text-align: center; }
.footer-content h3 { color: var(--accent); margin-bottom: 15px; margin-top: 0; }
.footer-content p { color: #f8f9fa; font-size: 0.95rem; max-width: 800px; margin: 0 auto 20px auto; line-height: 1.6; }
.copyright-text { font-size: 0.85rem; border-top: 1px solid #2e593d; padding-top: 15px; margin-top: 20px; color: #f8f9fa; }

/* =========================================
   7. التجاوب مع الشاشات (Media Queries)
   ========================================= */
@media (max-width: 900px) { 
    .sidebar { width: 100%; } 
    .layout-container { flex-direction: column; }
}

@media (max-width: 768px) {
    .menu-toggle { display: block; }
    .main-nav { 
        display: none; 
        width: 100%; 
        background-color: #ffffff; /* القائمة في الجوال بيضاء */
        position: absolute; 
        top: 100%; 
        left: 0; 
        right: 0; 
        box-shadow: 0 5px 10px rgba(0,0,0,0.1); 
        z-index: 999; 
        border-top: 1px solid #eaeaea;
    }
    .main-nav.active { display: block; }
    .nav-list { flex-direction: column; gap: 0; }
    .nav-list li { border-bottom: 1px solid #f0f0f0; width: 100%; text-align: right; }
    .nav-list li:last-child { border-bottom: none; }
    .nav-list a { display: block; padding: 15px 20px; font-size: 1.1rem; color: var(--primary); }
    
    .hero-image-link { height: 200px; }

    /* تجاوب المقالات في الجوال */
    .article-card { padding: 20px; }
    .article-title { font-size: 1.6em; }
    .related-posts { flex-direction: column; }
    .related-post-card { width: 100%; min-width: auto; box-sizing: border-box; }
}