/* ==================================================================
   مركز أمجاد للمخطوطات — واجهة الموقع v4.0
   Bootstrap 5.3 RTL + هوية المركز (العنابي والذهبي من الشعار)
   التصميم يبدأ من الجوال ثم يتوسع (Mobile-first)
   ================================================================== */

:root {
    --brand: #991d20;          /* العنابي من الشعار */
    --brand-rgb: 153, 29, 32;
    --brand-dark: #6f1417;
    --gold: #c8902a;           /* الذهبي من الشعار */
    --gold-soft: #f3e3c3;
    --sand: #faf6f0;           /* خلفية دافئة مستوحاة من خلفية القائمة القديمة */
    --ink: #202932;            /* لون التذييل القديم */
    --font-ui: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
    --font-text: "Noto Naskh Arabic", "Traditional Arabic", "Amiri", "Times New Roman", serif;

    --bs-primary: var(--brand);
    --bs-primary-rgb: var(--brand-rgb);
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: var(--brand-rgb);
    --bs-link-hover-color: var(--brand-dark);
    --bs-body-font-family: var(--font-ui);
    --bs-body-bg: var(--sand);
    --bs-heading-color: inherit;
}
[data-bs-theme="dark"] {
    --sand: #16181b;
    --gold-soft: #3a2f1b;
    --bs-body-bg: #16181b;
    --bs-link-color: #e2787a;
    --bs-link-hover-color: #f0a0a2;
}

body { font-family: var(--font-ui); line-height: 1.8; -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.5; }
img { max-width: 100%; height: auto; }
.skip-link { position: absolute; inset-inline-start: 1rem; top: -3rem; z-index: 2000; }
.skip-link:focus { top: 1rem; }

/* أزرار وألوان الهوية */
.btn-primary, .btn-gold { background-image: none; }
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark); --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); }
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); }
.btn-gold { --bs-btn-color: #fff; --bs-btn-bg: var(--gold); --bs-btn-border-color: var(--gold); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #a8761d; --bs-btn-hover-border-color: #a8761d; }
.text-brand { color: var(--brand) !important; }
.text-gold { color: var(--gold) !important; }
.bg-brand { background-color: var(--brand) !important; color: #fff; }
.form-control:focus, .form-select:focus { border-color: rgba(var(--brand-rgb), .5); box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .15); }
.page-link { color: var(--brand); }
.active > .page-link, .page-link.active { background-color: var(--brand); border-color: var(--brand); }

/* ------------------------------------------------------------------
   الشريط العلوي (يختفي على الجوال، روابطه موجودة في القائمة)
   ------------------------------------------------------------------ */
.topbar { background: var(--ink); color: #cfd6dd; font-size: .85rem; }
.topbar a { color: #cfd6dd; text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar .social a { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; }
.topbar .social a:hover { background: rgba(255,255,255,.1); }

/* ------------------------------------------------------------------
   الرأس والقائمة
   ------------------------------------------------------------------ */
.site-header { background: var(--bs-body-bg); border-bottom: 3px solid var(--brand); }
.brand-logo { height: 56px; width: auto; }
@media (min-width: 992px) { .brand-logo { height: 84px; } }
.site-slogan { height: 64px; width: auto; }

.main-nav { background: var(--brand); }
.main-nav .navbar-nav > .nav-item > .nav-link { color: #fff; font-weight: 600; padding: .85rem 1rem; }
.main-nav .navbar-nav > .nav-item > .nav-link:hover,
.main-nav .navbar-nav > .nav-item > .nav-link.active { background: rgba(0,0,0,.18); color: #fff; }
.main-nav .navbar-nav > .nav-item > .nav-link.active { box-shadow: inset 0 -3px 0 var(--gold); }
.main-nav .dropdown-menu { border: 0; border-top: 3px solid var(--gold); border-radius: 0 0 .5rem .5rem; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.main-nav .dropdown-item.active, .main-nav .dropdown-item:active { background: rgba(var(--brand-rgb), .1); color: var(--brand); }
.mega-menu { min-width: min(960px, 96vw); padding: 1rem; }
.mega-title { font-weight: 700; color: var(--brand); display: block; padding: .25rem .5rem; border-bottom: 1px solid var(--bs-border-color); margin-bottom: .35rem; text-decoration: none; }
@media (min-width: 1200px) {
    .main-nav .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }   /* فتح بالمرور على الكمبيوتر */
    .main-nav .dropdown-mega { position: static; }
    .main-nav .navbar-nav { flex-wrap: wrap; }   /* أمان: إن زادت القوائم مستقبلاً تنزل لسطر ثانٍ بدل التداخل */
    .main-nav .navbar-nav > .nav-item > .nav-link { padding: .8rem .6rem; }
}
@media (min-width: 1400px) {
    .main-nav .navbar-nav > .nav-item > .nav-link { padding: .85rem .7rem; }
}
/* الأسماء الطويلة في القوائم تلتف على أكثر من سطر بدل أن تتداخل */
.main-nav .dropdown-item, .mega-title { white-space: normal; }
.main-nav .dropdown-menu:not(.mega-menu) { min-width: 14rem; max-width: min(22rem, 90vw); }
/* القائمة المنزلقة على الجوال */
@media (max-width: 1199.98px) {
    .main-nav .offcanvas { background: var(--bs-body-bg); }
    .main-nav .offcanvas .navbar-nav > .nav-item > .nav-link { color: var(--bs-body-color); background: transparent; box-shadow: none; border-bottom: 1px solid var(--bs-border-color); padding: .8rem 0; }
    .main-nav .offcanvas .navbar-nav > .nav-item > .nav-link.active,
    .main-nav .offcanvas .navbar-nav > .nav-item > .nav-link.show { color: var(--brand); background: transparent; font-weight: 700; }
    .main-nav .offcanvas .dropdown-menu { box-shadow: none; border: 0; padding: 0 1rem .5rem; background: transparent; }
    .main-nav .offcanvas .mega-menu { min-width: 0; padding: 0 .5rem; }
}
.nav-search-btn { color: #fff; border-color: rgba(255,255,255,.5); }
.nav-search-btn:hover { background: #fff; color: var(--brand); }

/* شريط أحدث المقالات: يتمرر أفقياً باللمس على الجوال */
.latest-bar { background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); font-size: .9rem; }
.latest-bar .label { background: var(--gold); color: #fff; font-weight: 700; white-space: nowrap; }
.latest-bar .scroller { display: flex; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.latest-bar .scroller::-webkit-scrollbar { display: none; }
.latest-bar a { color: var(--bs-body-color); text-decoration: none; }
.latest-bar a:hover { color: var(--brand); }

/* ------------------------------------------------------------------
   البطاقات والأقسام
   ------------------------------------------------------------------ */
.section { padding-block: 2rem; }
@media (min-width: 992px) { .section { padding-block: 3rem; } }
.section-title { display: flex; align-items: center; gap: .6rem; font-size: 1.25rem; margin-bottom: 1rem; }
.section-title::before { content: ""; width: 6px; height: 1.4em; background: var(--gold); border-radius: 3px; }
.card { border: 0; border-radius: .75rem; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.04); }
.card-accent { border-top: 3px solid var(--brand); }
.card-img-top { aspect-ratio: 16 / 9; object-fit: cover; }
.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li + li { border-top: 1px dashed var(--bs-border-color); }
.link-list a { display: flex; align-items: center; gap: .5rem; padding: .55rem 0; color: var(--bs-body-color); text-decoration: none; }
.link-list a::before { content: "\2190"; color: var(--gold); font-weight: 700; }
.link-list a:hover { color: var(--brand); }
.cta-card { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; }
.cta-card .btn { white-space: nowrap; }

/* البنرات (Carousel) */
.hero-carousel .carousel-item img { width: 100%; aspect-ratio: 1220 / 350; object-fit: cover; }
.hero-carousel { border-radius: .75rem; overflow: hidden; }

/* فيديو يوتيوب خفيف: صورة حتى يضغط الزائر */
.yt-lite { position: relative; display: block; width: 100%; border: 0; padding: 0; background: #000 center / cover no-repeat; cursor: pointer; border-radius: .75rem; overflow: hidden; }
.yt-lite::after { content: ""; position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; border-radius: 12px; background: rgba(var(--brand-rgb), .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 28px no-repeat; }
.yt-lite:hover::after { background-color: var(--brand); }

/* أزرار التواصل الاجتماعي (بدل صندوقي فيسبوك وتويتر) */
.social-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.social-btns a { flex: 1 1 140px; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem; border-radius: .5rem; color: #fff; text-decoration: none; font-weight: 600; }
.social-btns .fb { background: #1877f2; } .social-btns .x { background: #111; } .social-btns .yt { background: #e62117; }
.social-btns .ig { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); } .social-btns .li { background: #0a66c2; }
.social-btns a:hover { filter: brightness(1.1); color: #fff; }

/* ------------------------------------------------------------------
   الصفحات الداخلية
   ------------------------------------------------------------------ */
.page-hero { background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); }
.page-hero .breadcrumb { margin: 0; font-size: .85rem; }
.page-hero .breadcrumb a { text-decoration: none; }
.side-nav .list-group-item { border-inline: 0; }
.side-nav .list-group-item.active { background: rgba(var(--brand-rgb), .08); color: var(--brand); border-color: var(--bs-border-color); border-inline-start: 3px solid var(--brand); font-weight: 700; }

/* نص المقال: خط نسخي مريح للقراءة الطويلة */
.page-content { font-family: var(--font-text); font-size: 1.1rem; line-height: 2.1; overflow-wrap: anywhere; }
@media (min-width: 992px) { .page-content { font-size: 1.15rem; } }
.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5 { font-family: var(--font-ui); color: var(--brand); margin-top: 1.5rem; }
.page-content img { border-radius: .5rem; }
.page-content blockquote { border-inline-start: 4px solid var(--gold); padding: .5rem 1rem; background: var(--gold-soft); border-radius: .25rem; margin: 0; }
.page-content table { width: 100%; }
.page-content iframe { max-width: 100%; }
.article-img { border-radius: .75rem; }

/* قوائم المقالات */
.post-item { display: flex; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--bs-border-color); }
.post-item:last-child { border-bottom: 0; }
.post-thumb { flex: 0 0 110px; }
.post-thumb img { width: 110px; height: 80px; object-fit: cover; border-radius: .5rem; }
@media (min-width: 768px) { .post-thumb { flex-basis: 200px; } .post-thumb img { width: 200px; height: 130px; } }
.post-title { font-size: 1.05rem; margin-bottom: .25rem; }
.post-title a { color: var(--bs-body-color); text-decoration: none; }
.post-title a:hover { color: var(--brand); }
.post-excerpt { color: var(--bs-secondary-color); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* البحث في الفهارس */
.result-card { display: block; padding: .8rem 1rem; border-bottom: 1px solid var(--bs-border-color); color: var(--bs-body-color); text-decoration: none; }
.result-card:hover { background: rgba(var(--brand-rgb), .04); color: var(--brand); }
.result-card .num { color: var(--bs-secondary-color); font-size: .8rem; }
.detail-list { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.detail-list dt { color: var(--brand); font-weight: 700; padding-top: .75rem; }
.detail-list dd { margin: 0; padding-bottom: .75rem; border-bottom: 1px solid var(--bs-border-color); font-family: var(--font-text); font-size: 1.05rem; }
@media (min-width: 768px) {
    .detail-list { grid-template-columns: 170px 1fr; }
    .detail-list dt, .detail-list dd { padding-block: .75rem; border-bottom: 1px solid var(--bs-border-color); }
}

/* ------------------------------------------------------------------
   التذييل
   ------------------------------------------------------------------ */
.site-footer { background: var(--ink); color: #b9c3cc; font-size: .95rem; }
.site-footer h2 { color: #fff; font-size: 1.05rem; margin-bottom: 1rem; }
.site-footer a { color: #d9e0e6; text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { padding: .2rem 0; }
.footer-stat { background: rgba(255,255,255,.06); border-radius: .5rem; padding: .75rem; text-align: center; }
.footer-stat strong { display: block; color: #fff; font-size: 1.25rem; }
.footer-logo { background: #fff; border-radius: .5rem; padding: .4rem .6rem; max-height: 76px; width: auto; }
.site-footer .copyright { border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; }
.to-top { position: fixed; inset-inline-start: 1rem; bottom: 1rem; z-index: 1030; opacity: 0; pointer-events: none; transition: opacity .2s; }
.to-top.show { opacity: 1; pointer-events: auto; }

/* ------------------------------------------------------------------
   توافق مع محتوى المقالات القديمة (أُنشئ بالقالب السابق)
   ------------------------------------------------------------------ */
.page-content .heading-block { margin-bottom: 1rem; }
.page-content .heading-block h1, .page-content .heading-block h2, .page-content .heading-block h3, .page-content .heading-block h4 { margin-top: 0; }
.page-content .bottommargin-sm { margin-bottom: 1.5rem !important; }
.page-content .nopadding { padding: 0 !important; }
.page-content .content-wrap { padding: 0; }
.page-content .clear { clear: both; display: block; }
.page-content .panel-heading { background: var(--gold-soft); padding: .5rem 1rem; border-radius: .5rem; margin-bottom: .75rem; }
.page-content .panel-title { font-size: 1.1rem; margin: 0; }
.page-content .imgs-int img { border: 1px solid var(--bs-border-color); padding: 4px; }
.page-content [class*="icon-arrow-left"]::before { content: "\2190"; color: var(--gold); font-style: normal; margin-inline-end: .35rem; }
.page-content .col-sm-5, .page-content .col-sm-7 { max-width: 100%; }
@media (min-width: 576px) { .page-content .col-sm-5, .page-content .col-sm-7 { float: right; padding-inline: .75rem; } }

/* الطباعة: نص المقال فقط */
@media print {
    .topbar, .main-nav, .latest-bar, .site-footer, .side-col, .to-top, .adsbygoogle, .page-hero .breadcrumb { display: none !important; }
    body { background: #fff; }
}

/* تموضع القوائم المنسدلة على الكمبيوتر */
@media (min-width: 1200px) {
    .main-nav .dropdown-menu { top: 100%; inset-inline-start: 0; margin-top: 0; }
    /* القائمة العريضة: تُثبَّت على شريط القائمة كله، في المنتصف، ولا تتجاوز عرض الشاشة أبداً */
    .main-nav .dropdown-mega > .mega-menu {
        position: absolute; top: 100% !important; inset-inline: 0 !important; transform: none !important;
        margin-inline: auto; width: auto; min-width: 0; max-width: min(1320px, calc(100vw - 1.5rem));
        max-height: calc(100vh - 140px); overflow-y: auto;
    }
}