@charset "UTF-8";

/* ==========================================================================
   لوحة التحكم الشاملة في خطوط وأبعاد وألوان جسم الموقع (داخل وخارج المربعات)
   ========================================================================== */ :root {

    /* ======================================================================

       1. الهيكل العام وأبعاد الصفحة الأساسية

       ====================================================================== */

    --site-max-width: 1050px;              /* أقصى عرض لإطار الموقع كاملاً (يمين ويسار) */

    --site-bg-page: #B6BBBE;               /* لون الخلفية العامة خلف الموقع خارج الإطار */

    --site-box-bg: #f4f6f8;                /* لون خلفية الإطار الرئيسي الحاضن للموقع */

    --site-radius: 10px;                   /* تدوير حواف الموقع الخارجية الأربعة */

    --site-shadow: 0 5px 25px rgba(0, 0, 0, 0.08); /* ظل الموقع الخارجي ثلاثي الأبعاد */

    --site-padding: 7px 10px;              /* مسافة الموقع عن حواف شاشة المتصفح (أعلى/أسفل يمين/يسار) */


    /* ======================================================================

       2. عزل خلفية القائمة الجانبية عن جسم الموضوعات (من البنر إلى الفوتر)

       ====================================================================== */

    --placeholder-banner-width: 100%;       /* عرض مكان البنر العلوي */

    --placeholder-banner-min-height: 180px; /* أقل ارتفاع لمكان البنر العلوي */


    /* أ) التحكم في عمود القائمة الجانبية بالكامل */

    --placeholder-sidebar-width: 250px;     /* عرض عمود القائمة الجانبية */

    --sidebar-column-bg: #f4f6f8;            /* خلفية عمود القائمة كاملاً من البنر للفوتر */

    --sidebar-column-border-left: 1px solid #f8faf9; /* الخط الفاصل بين عمود القائمة ومنطقة الموضوعات */

    --sidebar-column-padding: 0px 0px 0px; /* المسافة الداخلية لعمود القائمة (أعلى يمين/يسار أسفل) */


    /* ب) التحكم في منطقة الموضوعات والمقالات والإطار العام المحيط بها */

    --content-area-bg: #ffffff;             /* لون خلفية منطقة الموضوعات المستقلة */

    --content-area-padding: 15px 15px 20px; /* المسافة الداخلية للمحتوى عن الإطار (أعلى يمين/يسار أسفل) */

    --content-area-margin: 10px;            /* فراغ خارجي يحيط بمنطقة الموضوعات لعزل الإطار عن الأطراف */

    --content-area-border: 1px solid #c2cbcf; /* إطار جسم الموضوعات الخارجي (السمك - النمط - اللون) */

    --content-area-radius: 8px;             /* تدوير حواف إطار جسم الموضوعات الأربعة */

    --content-area-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* ظل خفيف للإطار العام الخارجي */


    /* ج) الفوتر السفلي */

    --placeholder-footer-width: 100%;       /* عرض مكان الفوتر السفلي */

    --placeholder-footer-min-height: 60px;  /* أقل ارتفاع لمكان الفوتر السفلي */


    /* ======================================================================

       3. التحكم الكامل في مسار الصفحة والتقويم (خارج المربعات)

       ====================================================================== */

    /* أ) شريط مسار الصفحة (الصفحة الرئيسية • البحوث والمقالات - يميناً) */

    --breadcrumb-font-family: 'Simplified Arabic', 'Segoe UI', Tahoma, sans-serif; /* نوع خط شريط المسار */

    --breadcrumb-font-size: 1.00rem;        /* حجم خط شريط المسار */

    --breadcrumb-font-weight: bold;         /* سمك خط شريط المسار */

    --breadcrumb-link-color: #0e676e;       /* لون الروابط في شريط المسار */

    --breadcrumb-link-hover-color: #2ebfa5; /* لون الروابط عند التأشير بالماوس */

    --breadcrumb-current-color: #1e293b;    /* لون نص الصفحة الحالية في المسار */

    

    --breadcrumb-dot-size: 9px;             /* حجم النقطة الفاصلة في مسار الصفحة */

    --breadcrumb-dot-color: #2ebfa5;        /* لون النقطة الفاصلة في مسار الصفحة */

    --breadcrumb-margin-bottom: 18px;       /* المسافة الفاصلة أسفل شريط المسار */


    /* ب) صندوق التقويم الهجري والميلادي (يساراً) */

    --date-font-family: 'Simplified Arabic', 'Segoe UI', Tahoma, sans-serif; /* نوع خط صندوق التقويم */

    --date-font-size: 1.10rem;              /* حجم خط صندوق التقويم */

    --date-font-weight: bold;               /* سمك خط صندوق التقويم */

    --date-text-color: #006A6A;             /* لون أرقام ونصوص التقويم */

    --date-bg-color: #ffffff;               /* لون خلفية مربع التقويم */

    --date-border-color: #BFCCCC;           /* لون إطار مربع التقويم */

    --date-border-radius: 6px;              /* تدوير حواف مربع التقويم */

    --date-padding: 4px 12px;               /* المسافة الداخلية لصندوق التقويم (أعلى/أسفل يمين/يسار) */

    --date-separator-color: #2ebfa5;        /* لون الفاصل بين التاريخ الهجري والميلادي */


    /* ج) شريط أدوات التفاعل أسفل الموضوعات (مشاركة، طباعة، تكبير...) */

    --actions-bar-bg: #ffffff;              /* لون خلفية شريط الأدوات */

    --actions-bar-border: #e1e7e7;          /* لون إطار شريط الأدوات */

    --actions-btn-font-family: 'Simplified Arabic', 'Segoe UI', Arial, sans-serif; /* نوع خط أزرار التفاعل */

    --actions-btn-font-size: 1.10rem;       /* حجم خط أزرار التفاعل */

    --actions-btn-font-weight: 700;         /* سمك خط أزرار التفاعل */

    --actions-btn-color: #006A6A;           /* لون خط أزرار التفاعل الأساسي */

    --actions-btn-hover-color: #2ebfa5;     /* لون خط أزرار التفاعل عند المرور */

    --actions-dot-color: #4ba69e;           /* لون النقطة الفاصلة بين أزرار التفاعل */


    /* ======================================================================

       4. الخطوط والألوان داخل مربعات المقالات والموضوعات (البطاقات الداخلية)

       ====================================================================== */

    --card-bg: #ffffff;                     /* لون خلفية بطاقة المقال */

    --card-border: #BFCCCC;                 /* لون إطار بطاقة المقال الأساسي */

    --card-border-hover: #BFCCCC;           /* لون إطار بطاقة المقال عند التأشير بالماوس */

    --card-radius: 10px;                    /* تدوير حواف بطاقة المقال */

    --card-padding: 12px 10px;              /* المسافة الداخلية لمحتوى المقال (أعلى/أسفل يمين/يسار) */

    --card-shadow: 0 3px 10px rgba(0, 0, 0, 0.03); /* ظل بطاقة المقال الناعم */


    --card-title-font-family: 'Traditional Arabic', serif; /* نوع خط عنوان المقال */

    --card-title-font-size: 1.80rem;        /* حجم خط عنوان المقال */

    --card-title-font-weight: 800;          /* سمك خط عنوان المقال */

    --card-title-color: #006C6C;            /* لون خط عنوان المقال الأساسي */

    --card-title-hover-color: #0e676e;      /* لون خط عنوان المقال عند التأشير */


    --card-date-font-family: 'Simplified Arabic', sans-serif; /* نوع خط تاريخ المقال */

    --card-date-font-size: 0.80rem;         /* حجم خط تاريخ المقال */

    --card-date-font-weight: normal;        /* سمك خط تاريخ المقال */

    --card-date-color: #64748b;             /* لون خط تاريخ المقال */


    --card-author-font-family: 'Simplified Arabic', sans-serif; /* نوع خط مربع الكاتب */

    --card-author-font-size: 1.20rem;       /* حجم خط مربع الكاتب */

    --card-author-font-weight: 700;         /* سمك خط مربع الكاتب */

    --card-author-label-color: #08383c;     /* لون كلمة "الكاتب:" */

    --card-author-name-color: #0e676e;      /* لون اسم الشيخ أو الكاتب */

    --card-author-bg: #F1F9F0;              /* لون خلفية شريط الكاتب الصغير */

    --card-author-border-color: #006A6A;    /* لون الخط الجانبي الأيمن لشريط الكاتب */


    --card-text-font-family: 'Simplified Arabic', 'Simplified Arabic', Tahoma, serif; /* نوع خط نص المقال */

    --card-text-font-size: 1.25rem;         /* حجم خط نص المقال */

    --card-text-font-weight: normal;        /* سمك خط نص المقال */

    --card-text-color: #1e293b;             /* لون خط نص المقال */

    --card-text-line-height: 1.8;           /* ارتفاع وتناغم الأسطر في نص المقال */


    --btn-readmore-font-family: 'Simplified Arabic', sans-serif; /* نوع خط زر (اقرأ المزيد) */

    --btn-readmore-font-size: 0.99rem;      /* حجم خط زر (اقرأ المزيد) */

    --btn-readmore-font-weight: 700;        /* سمك خط زر (اقرأ المزيد) */

    --btn-readmore-bg: #006A6A;             /* لون خلفية زر (اقرأ المزيد) */

    --btn-readmore-color: #ffffff;          /* لون كتابة زر (اقرأ المزيد) */

    --btn-readmore-hover-bg: #08383c;       /* لون خلفية الزر عند التأشير بالماوس */

    --btn-readmore-hover-color: #ffffff;    /* لون كتابة الزر عند التأشير بالماوس */

    --btn-readmore-radius: 5px;             /* تدوير حواف زر (اقرأ المزيد) */

}


/* ==========================================================================

   ضبط الصفحة الأساسي

   ========================================================================== */

html {

    scroll-behavior: smooth;

}


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


body {

    font-family: var(--breadcrumb-font-family);

    background-color: var(--site-bg-page);

    color: var(--card-text-color);

    line-height: 1.6;

    padding: var(--site-padding);

    display: flex;

    justify-content: center;

    align-items: flex-start;

    min-height: 100vh;

}


.site-wrapper {

    max-width: var(--site-max-width);

    width: 100%;

    background: var(--site-box-bg);

    border-radius: var(--site-radius);

    box-shadow: var(--site-shadow);

    overflow: hidden;

    display: flex;

    flex-direction: column;

}


.svg-icon {

    display: inline-block;

    width: 16px;

    height: 16px;

    fill: currentColor;

    vertical-align: middle;

    flex-shrink: 0;

}


/* ==========================================================================

   الهيكل الرأسي الفاصل (يمتد عمود القائمة بالكامل من البنر للفوتر)

   ========================================================================== */

#header-banner-placeholder {

    width: var(--placeholder-banner-width);

    min-height: var(--placeholder-banner-min-height);

    display: block;

}


/* الحاوية المشتركة: لا هوامش تفصلها عن البنر والفوتر */

.main-body-layout {

    display: flex;

    flex-direction: row;

    gap: 0; /* إلغاء الفراغ لتلتحم الحدود بدقة */

    padding: 0; /* التباعد يتم بشكل مستقل داخل كل قسم */

    width: 100%;

    align-items: stretch; /* تجعل القائمة والموضوعات بنفس الارتفاع دائماً */

}


/* 1. عمود القائمة الجانبية (يمتد من البنر إلى الفوتر بخلفية مستقلة) */

#sidebar-placeholder {

    width: var(--placeholder-sidebar-width);

    min-width: var(--placeholder-sidebar-width);

    flex-shrink: 0;

    display: block;

    background: var(--sidebar-column-bg);

    border-left: var(--sidebar-column-border-left);

    padding: var(--sidebar-column-padding);

    box-sizing: border-box;

}


/* 2. منطقة الموضوعات والمقالات بخلفيتها المستقلة ومحاطة بالإطار العام الجمالي */

.content-area {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    background: var(--content-area-bg);

    padding: var(--content-area-padding);

    margin: var(--content-area-margin);

    border: var(--content-area-border);

    border-radius: var(--content-area-radius);

    box-shadow: var(--content-area-shadow);

    box-sizing: border-box;

}


#footer-placeholder {

    width: var(--placeholder-footer-width);

    min-height: var(--placeholder-footer-min-height);

    display: block;

}


/* ==========================================================================

   حذف وإخفاء سطر/عنوان "أحدث المقالات والدروس" من أول الصفحة نهائياً

   ========================================================================== */

.section-header,

.section-title,

.latest-posts-heading,

.content-area > h1:first-of-type,

.content-area > h2:first-of-type {

    display: none !important;

}


/* ==========================================================================

   تنسيقات شريط المسار والتقويم

   ========================================================================== */

.top-nav-bar {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    flex-wrap: wrap !important;

    gap: 12px !important;

    margin-bottom: var(--breadcrumb-margin-bottom) !important;

    width: 100% !important;

}


.breadcrumb-trail {

    display: inline-flex !important;

    align-items: center !important;

    gap: 10px !important;

    font-family: var(--breadcrumb-font-family) !important;

    font-size: var(--breadcrumb-font-size) !important;

    font-weight: var(--breadcrumb-font-weight) !important;

    line-height: 1.4 !important;

}


.breadcrumb-trail a {

    font-family: var(--breadcrumb-font-family) !important;

    font-size: var(--breadcrumb-font-size) !important;

    font-weight: var(--breadcrumb-font-weight) !important;

    color: var(--breadcrumb-link-color) !important;

    text-decoration: none !important;

    transition: color 0.2s ease !important;

}


.breadcrumb-trail a:hover {

    color: var(--breadcrumb-link-hover-color) !important;

}


.breadcrumb-trail .breadcrumb-dot {

    width: var(--breadcrumb-dot-size) !important;

    height: var(--breadcrumb-dot-size) !important;

    background-color: var(--breadcrumb-dot-color) !important;

    border-radius: 50% !important;

    display: inline-block !important;

    flex-shrink: 0 !important;

}


.breadcrumb-trail .breadcrumb-current {

    font-family: var(--breadcrumb-font-family) !important;

    font-size: var(--breadcrumb-font-size) !important;

    font-weight: var(--breadcrumb-font-weight) !important;

    color: var(--breadcrumb-current-color) !important;

}


.current-date-box {

    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

    font-family: var(--date-font-family) !important;

    font-size: var(--date-font-size) !important;

    font-weight: var(--date-font-weight) !important;

    color: var(--date-text-color) !important;

    background-color: var(--date-bg-color) !important;

    border: 1px solid var(--date-border-color) !important;

    border-radius: var(--date-border-radius) !important;

    padding: var(--date-padding) !important;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02) !important;

    direction: rtl !important;

    line-height: 1.3 !important;

}


.current-date-box .date-separator {

    color: var(--date-separator-color) !important;

    margin: 0 4px !important;

    font-weight: bold !important;

}


/* ==========================================================================

   تنسيقات مربعات وبطاقات المقالات

   ========================================================================== */

.articles-grid {

    display: flex;

    flex-direction: column;

    gap: 20px;

    width: 100%;

}


.article-card {

    background: var(--card-bg);

    border: 1px solid var(--card-border);

    border-radius: var(--card-radius);

    padding: var(--card-padding);

    display: flex;

    flex-direction: column;

    box-shadow: var(--card-shadow);

    transition: border-color 0.2s ease;

    text-align: right;

    width: 100%;

}


/* تم تثبيت المربع تماماً دون حركة عند التأشير بالماوس مع بقاء تغيير لون الإطار */

.article-card:hover {

    transform: none !important;

    box-shadow: var(--card-shadow) !important;

    border-color: var(--card-border-hover);

}


/* الإبقاء على المربع الأول العلوي فقط وحذف/إخفاء المربعات التالية */

.article-card:not(:first-child) {

    display: none !important;

}


/* ضبط عنوان المقال فقط في الوسط بعرض كامل */

.article-title {

    font-family: var(--card-title-font-family);

    font-size: var(--card-title-font-size);

    font-weight: var(--card-title-font-weight);

    color: var(--card-title-color);

    text-decoration: none;

    margin-bottom: 6px;

    line-height: 1.5;

    text-align: center !important;

    display: block !important;

    width: 100% !important;

    transition: color 0.2s ease;

}


.article-title:hover {

    color: var(--card-title-hover-color);

}


.article-date {

    font-family: var(--card-date-font-family);

    font-size: var(--card-date-font-size);

    font-weight: var(--card-date-font-weight);

    color: var(--card-date-color);

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    gap: 6px;

}


.article-date .svg-icon {

    width: 14px;

    height: 14px;

}


.article-author {

    font-family: var(--card-author-font-family) !important;

    font-size: var(--card-author-font-size) !important;

    font-weight: var(--card-author-font-weight) !important;

    background-color: var(--card-author-bg) !important;

    border-right: 3px solid var(--card-author-border-color) !important;

    padding: 6px 12px !important;

    border-radius: 4px !important;

    margin-bottom: 12px !important;

    width: fit-content !important;

    display: inline-block;

}


.article-author span:first-child {

    color: var(--card-author-label-color) !important;

}


.article-author span:last-child {

    color: var(--card-author-name-color) !important;

}


.article-excerpt {

    font-family: var(--card-text-font-family) !important;

    font-size: var(--card-text-font-size) !important;

    font-weight: var(--card-text-font-weight) !important;

    color: var(--card-text-color) !important;

    line-height: var(--card-text-line-height) !important;

    margin-bottom: 0px;

}


/* حذف وإلغاء زر اقرأ المزيد بالكامل من الصفحة */

.read-more-btn {

    display: none !important;

}


.page-actions-bar {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px 14px;

    margin-top: 35px;

    padding: 16px 20px;

    background-color: var(--actions-bar-bg);

    border: 1px solid var(--actions-bar-border);

    border-radius: var(--card-radius);

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);

}


.action-text-btn {

    background: transparent;

    border: none;

    font-family: var(--actions-btn-font-family);

    font-size: var(--actions-btn-font-size);

    font-weight: var(--actions-btn-font-weight);

    color: var(--actions-btn-color);

    cursor: pointer;

    text-decoration: none;

    padding: 4px 6px;

    transition: all 0.2s ease;

    line-height: 1;

}


.action-text-btn:hover {

    color: var(--actions-btn-hover-color);

    transform: translateY(-1px);

}


.action-separator-dot {

    width: 6px;

    height: 6px;

    background-color: var(--actions-dot-color);

    border-radius: 50%;

    display: inline-block;

    flex-shrink: 0;

}


.scroll-to-top {

    position: fixed;

    bottom: 25px;

    left: 25px;

    width: 44px;

    height: 44px;

    background-color: var(--btn-readmore-bg);

    color: #ffffff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);

    transition: all 0.3s ease;

    z-index: 1000;

    border: 2px solid rgba(255, 255, 255, 0.2);

    cursor: pointer;

}


.scroll-to-top:hover {

    background-color: var(--breadcrumb-dot-color);

    transform: translateY(-4px);

}


/* ==========================================================================

   التجاوب مع الهواتف والشاشات الصغيرة

   ========================================================================== */

@media (max-width: 900px) {

    .main-body-layout {

        flex-direction: column;

    }

    #sidebar-placeholder {

        width: 100%;

        min-width: 100%;

        border-left: none;

        border-bottom: var(--sidebar-column-border-left);

    }

    .content-area {

        margin: 5px;

    }

    .top-nav-bar {

        flex-direction: column !important;

        align-items: flex-start !important;

    }

}


/* ==========================================================================

   إعدادات الطباعة

   ========================================================================== */

@media print {

    body {

        background: #ffffff !important;

        padding: 0 !important;

        margin: 0 !important;

        color: #000000 !important;

    }


    .site-wrapper {

        box-shadow: none !important;

        border: none !important;

        border-radius: 0 !important;

        max-width: 100% !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

    }


    .main-body-layout {

        padding: 0 !important;

        display: block !important;

        width: 100% !important;

    }


    #header-banner-placeholder,

    #sidebar-placeholder,

    #footer-placeholder,

    .page-actions-bar,

    .scroll-to-top,

    .read-more-btn {

        display: none !important;

    }


    .content-area {

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        background: #ffffff !important;

        border: none !important;

        box-shadow: none !important;

    }


    .article-card {

        box-shadow: none !important;

        border: 1px solid #cccccc !important;

        page-break-inside: avoid;

        break-inside: avoid;

        margin-bottom: 20px !important;

        padding: 15px !important;

        background: #ffffff !important;

    }


    .article-title {

        color: #000000 !important;

        text-align: center !important;

    }


    .article-excerpt {

        color: #222222 !important;

    }

} 


/* إلغاء تأثير المربعات إذا تم لصقها داخل الجداول عبر فرونت بيدج */
table main,
table article,
table .content-area,
table .article-card,
td .content-area,
td .article-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: inline !important;
}