/*
 Theme Name:     Twenty Twelve Child (IslamicDua)
 Theme URI:      https://example.com/twentytwelve-child/
 Description:    قالب ابن مخصص لموقع أدعية وأذكار (تصميم إسلامي هادئ)
 Author:         Your Name
 Author URI:     https://example.com
 Template:       twentytwelve
 Version:        4.1.0
 License:        GNU General Public License v2 or later
 License URI:    http://www.gnu.org/licenses/gpl-2.0.html
 Tags:           rtl-language-support
 Text Domain:    twentytwelve-child-islamicdua
*/

/* ================================================
  1. الإعدادات الأساسية والألوان الجديدة (Islamic & Calm)
================================================
*/
:root {
 --bg-body: #FDFCF8;          /* خلفية الموقع (كريمي فاتح جداً - هادئ) */
 --bg-content: #FFFFFF;      /* خلفية المحتوى (أبيض نقي) */
 --bg-article: #FFFFFF;      /* خلفية المقالات (أبيض نقي) */
 --text-dark: #403D39;        /* لون الخط الأساسي (بني داكن/فحمي - وقور) */
 --text-medium: #777777;      /* لون خط متوسط (رمادي دافئ) */
 --accent-primary: #007249;    /* أخضر إسلامي داكن (أساسي - للسلام) */
 --accent-secondary: #C0A062; /* ذهبي/بيج (للتنبيهات والهوفر - فخامة) */
 --border-color: #E8E6E0;      /* لون حدود بيج فاتح */
}

body {
 direction: rtl;
 background-color: var(--bg-body); /* خلفية الموقع */
 color: var(--text-dark); /* لون الخط الأساسي */
 font-family: Arial, sans-serif; /* === تعديل: تغيير الخط إلى Arial === */
 line-height: 1.8; /* زيادة التباعد للخط الأكبر */
 font-size: 18px; /* === تعديل: تكبير الخط الأساسي === */
 font-weight: 500; /* === تعديل: جعل الخط أثقل (Medium) === */
}

.site {
 background-color: var(--bg-content);
 max-width: 1200px;
 margin: 20px auto;
 padding: 0;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* ظل خفيف جداً */
 border-radius: 8px;
 border: 1px solid var(--border-color); /* إطار فاتح */
 overflow: hidden;
}

a { color: var(--accent-primary); text-decoration: none; transition: all 0.2s ease-in-out; }
a:hover { color: var(--accent-secondary); }

/* ================================================
  2. الهيدر (Header) وهوية موقع الأدعية
================================================
*/
.site-header { background-color: var(--bg-content); padding: 20px 30px; border-bottom: 3px solid var(--accent-primary); }
.site-header .header-main { 
 display: flex; 
 /* === تعديل: التوسيط العمودي === */
 flex-direction: column; 
 align-items: center; 
 flex-wrap: wrap; 
}
.site-branding { 
 /* === تعديل: توسيط العنوان والوصف === */
 text-align: center; 
}
.site-header h1 { margin: 0; padding: 0; }
.site-header h1 a { 
 color: var(--text-dark); 
 font-size: 2.5rem; /* === تعديل: تكبير === */
 font-weight: 800; /* === تعديل: بولد جداً === */
 text-decoration: none; 
 white-space: nowrap; /* === تعديل: لضمان سطر واحد === */
}
.site-header h1 a::before { 
 /* === تعديل: تغيير الأيقونة إلى أيقونة دعاء === */
 content: '🤲'; 
 display: inline-block; 
 margin-left: 12px; 
 font-size: 2.1rem; /* === تعديل: تكبير === */
 vertical-align: middle; 
 opacity: 0.8; 
 filter: drop-shadow(0 0 5px var(--accent-primary));
}
.site-header h2 { 
 color: var(--text-medium); 
 font-size: 1.0rem; /* === تعديل: تكبير === */
 margin-top: 5px; 
 font-weight: 500; /* === تعديل: أثقل === */
}

/* === تعديل: لضمان تجاوب العنوان في سطر واحد === */
@media (max-width: 768px) {
 .site-header h1 a {
  font-size: 2.0rem;
 }
}
@media (max-width: 480px) {
 .site-header h1 a {
  font-size: 1.6rem;
 }
 .site-header h1 a::before {
  font-size: 1.4rem; /* تصغير الأيقونة مع الخط */
 }
}

.main-navigation { 
 margin: 0; 
 /* === تعديل: توسيط القائمة === */
 width: 100%; 
 display: flex; 
 justify-content: center; 
 margin-top: 15px; /* إضافة هامش للفصل بين العنوان والقائمة */
}
.main-navigation ul.nav-menu, 
.main-navigation div.nav-menu > ul { 
 border: none; 
 padding: 0; 
 margin: 0; 
 display: flex; 
 /* === تعديل: توسيط عناصر القائمة والسماح بالالتفاف === */
 justify-content: center;
 flex-wrap: wrap;
}
.main-navigation li { margin: 0; }
.main-navigation li a { 
 display: block; 
 color: var(--text-dark); 
 padding: 10px 18px; 
 line-height: 1.5; 
 font-weight: 700; /* === تعديل: بولد === */
 border-radius: 5px; 
 margin-right: 5px; 
}
.main-navigation li a:hover,
.main-navigation .current-menu-item > a { 
 background-color: var(--accent-primary); 
 color: var(--bg-content); /* لون النص أبيض */
}
.menu-toggle { 
 background: var(--accent-primary); 
 color: var(--bg-content); 
 border: none; 
}
.wrapper { padding: 30px; display: flex; flex-wrap: wrap; gap: 30px; }
.site-content { width: 100%; flex: 1; min-width: 0; }
.widget-area { width: 300px; }
@media (max-width: 960px) { .widget-area { width: 100%; } }

/* ================================================
  3. تصميم المقالات (content.php)
================================================
*/
.site-content article {
 background-color: var(--bg-article);
 padding: 0;
 margin-bottom: 30px;
 border-radius: 8px;
 border: 1px solid var(--border-color);
 box-shadow: 0 3px 10px rgba(0,0,0,0.05); /* ظل خفيف */
 overflow: hidden;
}
.entry-header .wp-post-image {
 width: calc(100% - 20px);
 height: auto;
 object-fit: cover;
 max-height: 450px;
 display: block;
 margin: 10px 10px 25px 10px;
 padding: 5px;
 background-color: var(--bg-body); /* خلفية رمادية فاتحة للصورة */
 border: 1px solid var(--accent-primary);
 border-radius: 8px;
 box-shadow: 0 4px 15px rgba(0,0,0,0.1), inset 0 0 8px rgba(0,0,0,0.05); /* ظل خفيف */
 opacity: 0.95;
 transition: opacity 0.3s ease, transform 0.3s ease;
}
.entry-header a:hover .wp-post-image { opacity: 1; transform: scale(1.01); }
.entry-header { margin-bottom: 20px; }
.entry-title { 
 font-size: 1.6rem; /* === تعديل: تكبير === */
 font-weight: 700; /* === تعديل: بولد === */
 padding: 0 30px; 
 margin-top: 20px; 
 margin-bottom: 20px; 
 color: var(--text-dark); 
}
.entry-title a { color: var(--text-dark); }
.entry-title a:hover { color: var(--accent-primary); }

/* حاوية بيانات المقالة (Meta Bar) */
.post-meta-data {
 display: flex;
 flex-wrap: wrap;
 gap: 10px 20px;
 padding: 15px 20px;
 margin: 0 30px 25px;
 font-size: 0.9rem; /* === تعديل: تكبير === */
 color: var(--text-medium);
 background: var(--bg-body); /* خلفية رمادية فاتحة */
 border-radius: 6px;
 border-left: 4px solid var(--accent-secondary); /* === تعديل: لون ذهبي === */
 border-right: 4px solid var(--accent-secondary); /* === تعديل: لون ذهبي === */
 box-shadow: none; /* إزالة الظل الداخلي */
}
.meta-item { display: flex; align-items: center; }
.meta-icon { display: inline-block; width: 18px; height: 18px; margin-left: 8px; background-color: var(--accent-primary); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.meta-item.meta-updated { 
 color: var(--accent-secondary); 
 font-weight: 700; /* === تعديل: بولد === */
}
.meta-item.meta-updated .meta-icon { background-color: var(--accent-secondary); }

/* أكواد الأيقونات SVG لم تتغير هنا */

/* محتوى المقالة والترويسات (مع أيقونات إسلامية) */
.entry-content,
.entry-summary { 
 color: rgb(0, 0, 0); /* === تعديل: أسود صريح === */
 padding: 0 30px 30px; 
 font-size: 22px; /* === تعديل: 22px === */
 font-weight: 700; /* === تعديل: بولد === */
 line-height: 32px; /* === تعديل: 32px === */
}
.entry-content p { margin-bottom: 20px; }
.entry-content a { text-decoration: underline; }

/* أيقونات الترويسات (تعديل الألوان والحجم) */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
 display: flex;
 align-items: center;
 margin: 30px 0 15px;
 padding-bottom: 10px;
 border-bottom: 1px dotted var(--border-color);
}
.entry-content h2::before,
.entry-content h3::before,
.entry-content h4::before {
 content: '';
 display: inline-block;
 width: 1em;
 height: 1em;
 margin-left: 10px;
 -webkit-mask-size: contain;
 mask-size: contain;
 -webkit-mask-repeat: no-repeat;
 mask-repeat: no-repeat;
 -webkit-mask-position: center;
 mask-position: center;
 opacity: 0.8;
}

/* H2: أيقونة هلال (Crescent) */
.entry-content h2 { 
 font-size: 2.0rem; /* === تعديل: تكبير === */
 color: var(--accent-primary); /* === تعديل: أخضر === */
 font-weight: 700; /* === تعديل: بولد === */
}
.entry-content h2::before { background-color: var(--accent-primary);
 /* === تعديل: أيقونة هلال === */
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11.35 3.01C7.8 3.93 5 7.15 5 11c0 3.85 3.15 7 7 7c2.83 0 5.25-1.68 6.42-4.01c-.13.01-.26.01-.42.01c-3.59 0-6.5-2.91-6.5-6.5c0-1.87.79-3.54 2.05-4.66c-.34-.05-.68-.13-1.04-.13c-.3 0-.6-.05-.86-.04z'/%3E%3C/svg%3E");
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11.35 3.01C7.8 3.93 5 7.15 5 11c0 3.85 3.15 7 7 7c2.83 0 5.25-1.68 6.42-4.01c-.13.01-.26.01-.42.01c-3.59 0-6.5-2.91-6.5-6.5c0-1.87.79-3.54 2.05-4.66c-.34-.05-.68-.13-1.04-.13c-.3 0-.6-.05-.86-.04z'/%3E%3C/svg%3E");
}

/* H3: أيقونة نجمة (Star) */
.entry-content h3 { 
 font-size: 1.7rem; /* === تعديل: تكبير === */
 color: var(--accent-secondary); /* === تعديل: ذهبي === */
 font-weight: 700; /* === تعديل: بولد === */
}
.entry-content h3::before { background-color: var(--accent-secondary);
 /* === تعديل: أيقونة نجمة === */
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
}

/* H4: أيقونة سهم (مناسب لـ RTL) */
.entry-content h4 { 
 font-size: 1.4rem; /* === تعديل: تكبير === */
 color: var(--text-dark); /* === تعديل: بني داكن === */
 font-weight: 700; /* === تعديل: بولد === */
 border-bottom-style: solid; 
 border-bottom-width: 1px; 
}
.entry-content h4::before { background-color: var(--text-dark);
 /* === تعديل: أيقونة سهم لليسار (مناسب لـ RTL) === */
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 18l-6-6 6-6 1.4 1.4-4.6 4.6 4.6 4.6L14 18z'/%3E%3C/svg%3E");
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 18l-6-6 6-6 1.4 1.4-4.6 4.6 4.6 4.6L14 18z'/%3E%3C/svg%3E");
}

.read-more-link { 
 display: inline-block; 
 background-color: var(--accent-primary); 
 color: var(--bg-content); 
 padding: 8px 15px; 
 border-radius: 5px; 
 font-weight: 700; /* === تعديل: بولد === */
 margin-top: 15px; 
}
.read-more-link:hover { 
 background-color: var(--accent-secondary); 
 color: var(--bg-content); 
}
.entry-tags { 
 padding: 15px 30px; 
 background-color: var(--bg-body); /* خلفية رمادية فاتحة */
 border-top: 1px dashed var(--border-color); 
 margin-top: 25px; 
}
.entry-tags a { 
 display: inline-block; 
 background: #E0E0E0; /* رمادي فاتح */
 color: var(--text-medium); /* لون خط متوسط */
 padding: 4px 10px; 
 border-radius: 4px; 
 font-size: 0.85rem; 
 margin: 2px; 
}
.entry-tags a:hover { 
 background: var(--accent-primary); 
 color: var(--bg-content); 
}

/* ================================================
  4. تصميم الجداول (لجدول الأذكار/الأدعية)
================================================
*/
.entry-content table {
 width: 100%;
 border-collapse: separate;
 border-spacing: 0;
 margin: 30px 0;
 font-size: 0.95rem;
 border: 1px solid var(--accent-primary); /* === تعديل: إطار أخضر === */
 border-radius: 10px;
 overflow: hidden;
 position: relative;
 /* === تعديل: ظل أخضر خفيف === */
 box-shadow: 0 5px 15px rgba(0, 114, 73, 0.1), 0 3px 10px rgba(0,0,0,0.05); 
 transition: all 0.3s ease-in-out;
}
.entry-content table:hover {
 transform: translateY(-3px);
 /* === تعديل: ظل أخضر أقوى === */
 box-shadow: 0 8px 20px rgba(0, 114, 73, 0.15), 0 5px 15px rgba(0,0,0,0.08); 
}
.entry-content table th,
.entry-content table td {
 padding: 14px 10px;
 text-align: right;
 border-bottom: 1px solid var(--border-color);
 position: relative;
}
.entry-content table th {
 color: var(--bg-content); /* لون النص أبيض */
 font-weight: 700;
 text-transform: uppercase;
 font-size: 0.9rem;
 background: var(--accent-primary); /* === تعديل: خلفية خضراء ثابتة === */
}
/* تم حذف @keyframes th-gradient-animation لأنها لم تعد مستخدمة */
.entry-content table th:first-child { position: relative; }
.entry-content table th:first-child::before {
 content: '';
 display: inline-block;
 width: 1.1em;
 height: 1.1em;
 vertical-align: middle;
 margin-left: 8px;
 background-color: var(--bg-content); /* لون الأيقونة أبيض */
 /* === تعديل: أيقونة كتاب (قرآن/أدعية) === */
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4zm12 16H6V18h12v2zm0-4h-5v-2h5v2zm0-4h-5V8h5v2zm0-4h-5V4h5v2z'/%3E%3C/svg%3E");
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4zm12 16H6V18h12v2zm0-4h-5v-2h5v2zm0-4h-5V8h5v2zm0-4h-5V4h5v2z'/%3E%3C/svg%3E");
}
.entry-content table tr { background-color: #FAFAFA; } /* لون صفوف فاتح */
.entry-content table tr:nth-of-type(even) { background-color: var(--bg-content); } /* لون أبيض */
/* === تعديل: هوفر أخضر فاتح جداً === */
.entry-content table tr:hover { background-color: #F0F8F5; color: var(--text-dark); } 
.entry-content table tr td:first-child { 
 font-weight: 700; /* === تعديل: بولد === */
 color: var(--accent-secondary); /* === تعديل: لون ذهبي للتمييز === */
}

/* ================================================
5. كود جعل الجدول "ينكمش" ليتناسب مع الموبايل
================================================
*/
@media screen and (max-width: 768px) {
  .entry-content table {
      table-layout: fixed;
      font-size: 0.85rem; 
  }
  .entry-content table th,
  .entry-content table td {
    padding: 10px 5px;
    white-space: normal; 
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .entry-content table th:first-child::before {
    display: none;
  }
}

/* ================================================
  5. الشريط الجانبي (Sidebar) والويدجات
================================================
*/
.widget-area { 
 background-color: var(--bg-body); /* خلفية بلون الموقع (دمج) */
 padding: 0; /* إزالة الحشو القديم */
 border-radius: 0; 
 border: none; 
}
.widget { 
 margin-bottom: 25px;
 background-color: var(--bg-content); /* تصميم كارت للويدجت */
 border: 1px solid var(--border-color);
 padding: 20px;
 border-radius: 8px;
}
.widget-title { 
 font-size: 1.5rem; /* === تعديل: تكبير === */
 color: var(--text-dark); 
 font-weight: 700; /* === تعديل: بولد === */
 border-bottom: 2px solid var(--accent-primary); /* === تعديل: خط أخضر === */
 padding-bottom: 10px; 
 margin-bottom: 15px; 
}
.widget ul { list-style: none; padding-right: 0; margin-right: 0; }
.widget ul li { padding: 8px 0; border-bottom: 1px dotted var(--border-color); }
.widget ul li a { 
 color: var(--text-dark); /* === تعديل: لون أغمق === */
 font-weight: 500; /* === تعديل: أثقل === */
}
.widget ul li a:hover { color: var(--accent-primary); }

/* ================================================
  6. الفوتر (Footer)
================================================
*/
footer[role="contentinfo"] { 
 margin-top: 20px; 
 padding: 25px; 
 text-align: center; 
 color: var(--text-medium); 
 border-top: 1px solid var(--border-color); 
 background: var(--bg-body); /* خلفية بلون الموقع */
 border-bottom-left-radius: 8px; 
 border-bottom-right-radius: 8px; 
}

/* ================================================
  7. تصميم صفحة مرفق الصورة (image.php)
================================================
*/
.image-attachment .entry-header { padding: 30px; border-bottom: none; }
.image-attachment .entry-content { padding: 0; }
.image-attachment .entry-attachment { background: var(--bg-body); padding: 20px 0; text-align: center; }
.image-attachment .attachment img { 
 max-width: 100%; 
 height: auto; 
 max-height: 80vh; 
 border: 2px solid var(--accent-secondary); /* === تعديل: إطار ذهبي === */
 border-radius: 4px; 
}
.image-attachment .entry-description,
.image-attachment .entry-caption { padding: 25px 30px; color: var(--text-medium); }
#image-navigation { padding: 15px 0 0 0; display: flex; justify-content: space-between; }
#image-navigation a { 
 background: #E0E0E0; /* رمادي فاتح */
 color: var(--text-dark); 
 padding: 8px 15px; 
 border-radius: 5px; 
}
#image-navigation a:hover { 
 background: var(--accent-primary); 
 color: var(--bg-content); 
}

/* ================================================
  8. بلوك الأسئلة الشائعة (يتم تفعيله بـ JS)
================================================
*/
.js-faq-block {
 /* === تعديل: خلفية ذهبية خفيفة === */
 background-color: rgba(192, 160, 98, 0.05); 
 border: 1px solid var(--accent-secondary);
 border-radius: 8px;
 padding: 25px;
 margin: 30px 0;
 /* === تعديل: توهج ذهبي === */
 box-shadow: 0 0 10px rgba(192, 160, 98, 0.1); 
}
.js-faq-block h2 {
 color: var(--accent-secondary) !important;
 border-bottom-color: var(--accent-secondary);
 border-bottom-style: solid;
 border-bottom-width: 2px;
 font-size: 1.7rem;
 font-weight: 700; /* === تعديل: بولد === */
}
.js-faq-block h2::before {
 background-color: var(--accent-secondary);
 /* أيقونة السؤال مناسبة ولم تتغير */
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 18h2v-2h-2v2m1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5c0-2.21-1.79-4-4-4z'/%3E%3C/svg%3E");
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 18h2v-2h-2v2m1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5c0-2.21-1.79-4-4-4z'/%3E%3C/svg%3E");
}
.js-faq-block h3 {
 color: var(--accent-primary) !important; /* === تعديل: لون أخضر === */
 border: none;
 font-size: 1.3rem;
 padding-bottom: 5px;
 margin-top: 20px;
 font-weight: 700; /* === تعديل: بولد === */
}
.js-faq-block h3::before {
 background-color: var(--accent-primary);
}
.js-faq-block p {
 padding: 10px 15px;
 border-right: 3px solid var(--accent-primary); /* === تعديل: أخضر === */
 /* === تعديل: خلفية خضراء خافتة جداً === */
 background: rgba(0, 114, 73, 0.05); 
 border-radius: 4px;
 color: var(--text-dark);
 margin-bottom: 15px;
 font-weight: 500; /* === تعديل: أثقل === */
}

/* ================================================
  9. صندوق معلومات الكاتب (تصميم محرر إسلامي)
================================================
*/
.author-box {
 background-color: var(--bg-body); /* خلفية بلون الموقع */
 padding: 30px;
 margin: 40px 0 0 0;
 border-top: 4px solid var(--accent-secondary); /* === تعديل: خط ذهبي علوي === */
 border-bottom: 1px solid var(--border-color);
 border-radius: 0;
 border-left: 0;
 border-right: 0;
 box-shadow: 0 -5px 15px rgba(0,0,0,0.03); /* ظل علوي خفيف */
 display: flex;
 align-items: flex-start;
 gap: 25px; 
}
.author-avatar {
 flex-shrink: 0;
}
.author-avatar img {
 border-radius: 12px; 
 border: 3px solid var(--border-color);
 padding: 3px;
 background: var(--bg-content); /* خلفية بيضاء */
 box-shadow: 0 4px 10px rgba(0,0,0,0.1);
 transition: all 0.3s ease;
 width: 96px;
}
.author-avatar img:hover {
 transform: scale(1.05);
 border-color: var(--accent-secondary); /* === تعديل: تغيير الإطار للذهبي عند الهوفر === */
}
.author-info {
 flex-grow: 1;
}
.author-name {
 font-size: 1.6rem; /* === تعديل: تكبير === */
 font-weight: 700; /* === تعديل: بولد === */
 color: var(--accent-primary); /* === تعديل: لون أخضر === */
 margin-top: 0;
 margin-bottom: 10px;
 display: flex;
 align-items: center;
}
.author-icon {
 display: inline-block;
 width: 1.2em;
 height: 1.2em;
 margin-left: 10px;
 background-color: var(--accent-primary); /* === تعديل: لون أخضر === */
 /* === تعديل: أيقونة مستخدم/شخص (مناسبة) === */
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
 -webkit-mask-size: contain;
 mask-size: contain;
}
.author-description {
 color: var(--text-medium);
 margin-bottom: 20px;
 font-size: 1.1rem; /* === تعديل: تكبير === */
 line-height: 1.8;
 font-weight: 500; /* === تعديل: أثقل === */
}
/* تصميم راقي لرابط الكاتب (Ghost Button) */
.author-link {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background-color: transparent;
 border: 2px solid var(--accent-primary);
 color: var(--accent-primary);
 padding: 10px 18px;
 border-radius: 6px;
 font-weight: 700; /* === تعديل: بولد === */
 font-size: 0.95rem;
 transition: all 0.3s ease;
}
.author-link-icon {
 width: 1.1em;
 height: 1.1em;
 fill: currentColor;
 transition: transform 0.3s ease;
}
.author-link:hover {
 background-color: var(--accent-primary);
 color: var(--bg-content); /* نص أبيض */
 border-color: var(--accent-primary);
 transform: translateY(-2px);
 /* === تعديل: ظل أخضر === */
 box-shadow: 0 4px 10px rgba(0, 114, 73, 0.2);
}
.author-link:hover .author-link-icon {
 transform: rotate(10deg);
}
@media (max-width: 600px) {
 .author-box {
  flex-direction: column;
  text-align: center;
  padding: 20px 15px;
  gap: 15px;
 }
 .author-avatar { 
  margin-bottom: 10px; 
 }
 .author-info {
  width: 100%;
 }
 .author-name {
  justify-content: center;
 }
 .author-link {
  margin: 0 auto;
 }
}
@media (max-width: 600px) {
 .author-icon { 
  margin-right: 0; 
  margin-left: 8px; 
 }
}

/* ================================================
  10. تصميم القائمة في الفوتر
================================================
*/
.footer-navigation-area {
 background-color: var(--bg-content); /* خلفية بيضاء */
 padding: 20px 30px;
 border-top: 2px solid var(--accent-primary); /* === تعديل: خط أخضر علوي === */
 box-shadow: 0 -5px 15px rgba(0,0,0,0.05); /* ظل علوي خفيف */
}
.footer-navigation .footer-menu {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 10px;
}
.footer-navigation .footer-menu li {
 margin: 0;
}
.footer-navigation .footer-menu li a {
 display: block;
 color: var(--text-medium);
 font-weight: 700; /* === تعديل: بولد === */
 padding: 10px 15px;
 border-radius: 5px;
 transition: all 0.3s ease;
}
.footer-navigation .footer-menu li a:hover,
.footer-navigation .footer-menu .current-menu-item > a {
 background-color: var(--accent-primary);
 color: var(--bg-content); /* نص أبيض */
 transform: translateY(-2px);
}
footer[role="contentinfo"] {
 border-radius: 0;
 margin-top: 0;
 border-top: 1px solid var(--border-color);
 background: var(--bg-body); /* خلفية بلون الموقع */
}

/* ================================================
  11. نظام الكروت (Grid Card System)
================================================
*/
.post-grid-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 20px;
}
.grid-card {
 background-color: var(--bg-article);
 border-radius: 8px;
 overflow: hidden;
 border: 1px solid var(--border-color);
 box-shadow: 0 3px 8px rgba(0,0,0,0.05); /* ظل خفيف */
 transition: all 0.3s ease;
 position: relative;
 padding: 0;
 margin: 0;
 border-bottom: none;
}
.grid-card:hover {
 transform: translateY(-6px);
 box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* ظل أوضح */
 border-color: var(--accent-primary); /* === تعديل: إطار أخضر === */
}
.card-image-container {
 width: 100%;
 aspect-ratio: 16 / 10;
 background-color: var(--bg-body); /* خلفية رمادية فاتحة */
 overflow: hidden;
}
.grid-card img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.4s ease;
}
.grid-card:hover img {
 transform: scale(1.05);
}
.card-image-placeholder {
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0.3;
}
.placeholder-icon {
 font-size: 4rem;
 color: var(--border-color);
}
.entry-header-card {
 padding: 15px;
 text-align: right;
 border-top: 1px solid var(--border-color);
}
.entry-title-card {
 font-size: 1.2rem; /* === تعديل: تكبير === */
 font-weight: 700; /* === تعديل: بولد === */
 color: var(--text-dark);
 margin: 0;
 line-height: 1.4;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;  
 overflow: hidden;
 text-overflow: ellipsis;
 min-height: 2.8em;
}
.grid-card:hover .entry-title-card a {
 color: var(--accent-secondary); /* === تعديل: تغيير لون العنوان للذهبي عند الهوفر === */
}
.grid-card .entry-header {
 margin-bottom: 0;
}
.grid-card .post-meta-data,
.grid-card .entry-content,
.grid-card .entry-summary,
.grid-card .read-more-link,
.grid-card .entry-tags,
.grid-card .author-box {
 display: none;
}

/* ================================================
  12. تجاوب نظام الكروت (Responsive)
================================================
*/
@media (max-width: 1024px) {
 .post-grid-container {
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
 }
 .site-content {
  width: 100%;
 }
 .widget-area {
  width: 100%;
  margin-top: 30px;
 }
}
@media (max-width: 600px) {
 .post-grid-container {
  grid-template-columns: 1fr;
  gap: 20px;
 }
}
@media (min-width: 1025px) {
    .site-content {
        width: 68%;
    }
    .widget-area {
        width: 28%;
    }
}

/* ================================================
  13. تجاوب الهواتف (الخطوط وإلغاء الحدود)
================================================
*/
@media (max-width: 768px) {
  /* === تعديل: إلغاء حدود الصفحة وتركها تتمدد === */
  .site {
    margin: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    max-width: 100%;
    overflow: hidden; /* منع أي تجاوز عرضي */
  }
  .wrapper {
    padding: 15px; /* تقليل الحشو الداخلي */
    gap: 20px;
  }
  /* === تعديل: تصغير الخطوط على الهواتف === */
  body {
    font-size: 17px; /* تصغير الخط الأساسي قليلاً */
    line-height: 1.7;
  }
  .entry-title {
    font-size: 1.4rem; /* تصغير عنوان المقال */
    padding: 0 20px;
  }
  
  .post-meta-data {
    margin: 0 20px 20px;
  }
  .entry-content,
  .entry-summary {
    font-size: 19px; /* تصغير خط المحتوى */
    line-height: 1.8;
    padding: 0 20px 20px;
  }
  .entry-content h2 {
    font-size: 1.7rem;
  }
  .entry-content h3 {
    font-size: 1.5rem;
  }
  .entry-content h4 {
    font-size: 1.3rem;
  }
  .widget-title {
    font-size: 1.3rem;
  }
  
  .author-name {
    font-size: 1.4rem;
  }
  
  .author-description {
    font-size: 1rem;
  }
  
  .site-header {
    padding: 15px;
  }
  
  /* تعديل الحشو للمقالات ليناسب الحواف الجديدة */
  .site-content article {
    border-radius: 0; /* إزالة الحواف المستديرة للمقال ليمتد */
    border-right: none;
    border-left: none;
    box-shadow: 0 3px 5px rgba(0,0,0,0.03);
    margin-bottom: 20px;
  }
  
  .entry-header .wp-post-image {
    width: 100%; /* الصورة تمتد بعرض الشاشة */
    margin: 0 0 20px 0;
    border-radius: 0;
    border: none;
    padding: 0;
    border-bottom: 1px solid var(--border-color);
  }
  
  .entry-tags {
    padding: 15px 20px;
  }
}
@media (max-width: 600px) {
  .wrapper {
    padding: 10px;
    gap: 15px;
  }
  .site-header {
    padding: 10px;
  }
  .entry-title {
    padding: 0 15px;
    margin-bottom: 15px;
  }
  .post-meta-data {
    margin: 0 15px 15px;
    padding: 10px 15px;
  }
  .entry-content,
  .entry-summary {
    padding: 0 15px 15px;
    font-size: 18px; /* تصغير إضافي بسيط */
  }
  .entry-tags {
    padding: 15px;
  }
}

/*
المراجع
*/
.article-references {
    background-color: #f8f9fa; /* لون خلفية رمادي فاتح */
    border: 1px solid #dee2e6; /* إطار خفيف */
    border-radius: 8px; /* حواف دائرية */
    padding: 25px;
    margin-top: 20px; /* مسافة قبل الصندوق */
    margin-bottom: 30px; /* مسافة بعد الصندوق */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* ظل خفيف */
}

.entry-content h2:has(+ .article-references) {
    color: #0056b3; /* لون مميز لعنوان المراجع */
    border-bottom: 2px solid #0056b3;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.article-references ul {
    list-style-type: square; /* يمكن تغييره إلى disc أو none */
    padding-right: 20px; /* للغة العربية */
    margin: 0;
}

.article-references li {
    font-size: 16px;
    line-height: 1.7;
    color: #343a40; /* لون نص مريح للعين */
    margin-bottom: 12px;
}

.article-references li:last-child {
    margin-bottom: 0;
}