:root {
    /* ألوان هوية Mozaic: أسود + برتقالي دافئ (مأخوذة من الموقع الحي mozaic-nl.com) */
    --rose-gold: #F39A35;
    --rose-gold-hover: #D9821F;
    --gunmetal: #1A1A1A;
    --accent: #F39A35;
    --accent-hover: #D9821F;
    --accent-light: #F5B565;
    --transition: all 0.3s ease-in-out;
    --border-radius: 8px;

    /* هوية "النظام الرسمي الهولندي بلمسة إنسانية": Cairo للعربية (يحمل نفس الروح الهندسية
       الرسمية)، IBM Plex Sans كخط لاتيني مصمَّم أصلاً بمنطق أنظمة/نماذج مؤسسية لكنه دافئ ومقروء،
       وIBM Plex Mono لأكواد/أرقام الخدمات وحقول النماذج (نفس منطق رقم الملف/الطابع الرسمي). */
    --font-body: 'Cairo', 'IBM Plex Sans', 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-heading: 'IBM Plex Sans', 'Cairo', 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

/* الوضع الفاتح (Light Mode) — الافتراضي: يناسب أكتر طابع شركة خدمات مجتمعية ودودة */
:root[data-theme="light"] {
    --bg-body: #FAFAFA;
    --bg-navbar: #FFFFFF;
    --bg-card: #FFFFFF;
    --text-primary: #161616;
    --text-secondary: #5A5A5A;
    --border-color: #E7E7E7;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.06);

    /* متغيرات الناف بار للوضع الفاتح */
    --nav-glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
    --nav-scrolled-bg: rgba(255, 255, 255, 0.98);
    --nav-text-color: rgba(22, 22, 22, 0.75);
    --nav-text-hover: #161616;
    --mobile-menu-bg: rgba(250, 250, 250, 0.98);

    --nav-topbar-bg: rgba(0, 0, 0, 0.03);
    --nav-border: rgba(22, 22, 22, 0.1);
    --nav-dropdown-bg: rgba(255, 255, 255, 0.98);
    --nav-dropdown-text: rgba(22, 22, 22, 0.8);
    --nav-hover-bg: rgba(22, 22, 22, 0.05);

    /* غلاف زجاجي شفاف (بطاقات/فورم فوق الفيديو أو الصور) وتغميق خفيف لفيديو الـ Hero */
    --card-glass-bg: rgba(255, 255, 255, 0.75);
    --hero-overlay: linear-gradient(90deg, rgba(250, 250, 250, 0.94) 30%, rgba(250, 250, 250, 0.65) 100%);
}
/* الوضع الداكن (Dark Mode) — اختياري عبر زر تبديل المظهر */
:root[data-theme="dark"] {
    --bg-body: #0E0E0E;
    --bg-navbar: #161616;
    --bg-card: #1E1E1E;
    --text-primary: #FFFFFF;
    --text-secondary: #B3B3B3;
    --border-color: #2C2C2C;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.4);

    /* متغيرات الناف بار للوضع الداكن */
    --nav-glass-bg: linear-gradient(180deg, rgba(10, 10, 10, 0.95), rgba(10, 10, 10, 0.6));
    --nav-scrolled-bg: rgba(10, 10, 10, 0.98);
    --nav-text-color: rgba(255, 255, 255, 0.75);
    --nav-text-hover: #ffffff;
    --mobile-menu-bg: rgba(10, 10, 10, 0.98);

    --nav-topbar-bg: rgba(0, 0, 0, 0.2);
    --nav-border: rgba(255, 255, 255, 0.08);
    --nav-dropdown-bg: rgba(12, 12, 12, 0.95);
    --nav-dropdown-text: rgba(255, 255, 255, 0.7);
    --nav-hover-bg: rgba(255, 255, 255, 0.05);

    /* غلاف زجاجي شفاف (بطاقات/فورم فوق الفيديو أو الصور) وتغميق خفيف لفيديو الـ Hero */
    --card-glass-bg: rgba(30, 30, 30, 0.7);
    --hero-overlay: linear-gradient(90deg, rgba(14, 14, 14, 0.85) 30%, rgba(14, 14, 14, 0.6) 100%);
}

/* إعدادات عامة */
html, body {
    overflow-x: hidden;
}
body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-body);
    margin: 0;
    transition: var(--transition);
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; }

/* شريط التمرير (Scrollbar) — موحّد بكل صفحات الموقع */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* 🆕 مصدر نص مخفي بصريًا (بس مقروء من a_procces.js عبر innerText) — لحقول "editable"
   بتخزّن نص متعدد الأسطر كمصدر واحد، بينما العرض الفعلي بالصفحة مبني منه ديناميكيًا
   (مثال: قائمة "لمّ الشمل" بالهوم بيج). white-space:pre-line ضروري عشان innerText
   يحافظ على \n الحقيقية بدل ما تنطوي لمسافة — تأكدت تجريبيًا بالمتصفح. */
.editable-hidden-source {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: pre-line;
}

/* تبديل لوجو الوضع الفاتح/الغامق — نسختان من نفس اللوجو، وحدة بس ظاهرة حسب data-theme.
   CSS بس (بدون JS) لأن data-theme بينحط على <html> بسكريبت منع الوميض قبل أول رسم للصفحة. */
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }

/* 🆕 زر "برند" بتدرّج لوني فخم — عام لكل الموقع (كان محصور بـindex.css بس، فما كان
   شغّال بأي صفحة تانية بتستخدم نفس الكلاس، متل فورم "اقترح مبادرتك" بصفحة الخدمات). */
.btn-brand {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border: none;
    color: #fff;
    padding: 14px 35px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 10px;
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(243, 154, 53, 0.3);
}
.btn-brand:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(243, 154, 53, 0.5);
    color: #fff;
}