/* Define new color variables based on the Visual Identity Guide */
        :root { /* متغيرات الألوان تبقى عامة لأنها تعريفات */
            --brand-orange: #f07c32; /* Primary Accent Color */
            --brand-yellow: #f7b733; /* Secondary Accent Color */
            --brand-light-blue: #59c7f0; /* Tertiary Accent Color */
            --brand-dark-blue: #1c203e; /* Dark Blue */
            --brand-text-on-accent: #FFFFFF; /* Text color on colored buttons (white) */

            /* لوحة الألوان المعدلة (أكثر قتامة وأقل سطوعاً، وتجنب الأسود) */
            /* هذه هي الألوان التي ستُستخدم في التدرج */
            --color-1: #c45d25; /* برتقالي داكن */
            --color-2: #c4962c; /* أصفر داكن */
            --color-3: #4196c1; /* أزرق فاتح داكن */
            --color-4: #606798; /* أزرق متوسط واضح */
            --color-5: #7f85b8; /* أزرق أفتح */
            --color-6: #d86c2e; /* برتقالي للمرور */
            --color-7: #e0b431; /* أصفر للمرور */
            --color-8: #51c0ee; /* أزرق فاتح للمرور */
            --color-9: #7075a3; /* أزرق متوسط أغمق */
            --color-10: #8f95c4; /* أزرق أفتح أكثر */
            --color-11: #e77335; /* برتقالي مميز للخاتمة */
        }

        /* ---------------------------------------------------------------- */
        /* أنماط الهوية البصرية (ألوان العناوين والأزرار فقط، بدون أحجام الخطوط)*/
        /* ---------------------------------------------------------------- */

        /* أنماط العناوين الرئيسية في المقال - لا تتداخل مع h1.main-exercise-title */
        /* هذه القاعدة ستؤثر فقط على H1s التي ليس لها class .main-exercise-title */
        body.single h1:not(.main-exercise-title),
        body.page h1:not(.main-exercise-title),
        body.singular h1:not(.main-exercise-title) {
            color: var(--color-1) !important; /* لون برتقالي معدل */
            /* تم حذف font-size: 2.8em !important; هنا */
            line-height: 1.2 !important; /* تباعد الأسطر */
            margin-top: 1.5em !important;
            margin-bottom: 0.8em !important;
        }

        /* الأنماط التدريجية لعناوين h2 و h3 (استناداً إلى IDs الأقسام) */
        /* H2 - تأكد من أنها داخل #article-section-X */
        body.single #article-section-1 h2, body.page #article-section-1 h2, body.singular #article-section-1 h2 { color: var(--color-1) !important; }
        body.single #article-section-2 h2, body.page #article-section-2 h2, body.singular #article-section-2 h2 { color: var(--color-2) !important; }
        body.single #article-section-3 h2, body.page #article-section-3 h2, body.singular #article-section-3 h2 { color: var(--color-3) !important; }
        body.single #article-section-4 h2, body.page #article-section-4 h2, body.singular #article-section-4 h2 { color: var(--color-4) !important; }
        body.single #article-section-5 h2, body.page #article-section-5 h2, body.singular #article-section-5 h2 { color: var(--color-5) !important; }
        body.single #article-section-6 h2, body.page #article-section-6 h2, body.singular #article-section-6 h2 { color: var(--color-6) !important; }
        body.single #article-section-7 h2, body.page #article-section-7 h2, body.singular #article-section-7 h2 { color: var(--color-7) !important; }
        body.single #article-section-8 h2, body.page #article-section-8 h2, body.singular #article-section-8 h2 { color: var(--color-8) !important; }
        body.single #article-section-9 h2, body.page #article-section-9 h2, body.singular #article-section-9 h2 { color: var(--color-9) !important; }
        body.single #article-section-10 h2, body.page #article-section-10 h2, body.singular #article-section-10 h2 { color: var(--color-10) !important; }
        body.single .conclusion h2, body.page .conclusion h2, body.singular .conclusion h2 { color: var(--color-11) !important; }
        /* أحجام وخصائص h2 العامة داخل الأقسام - تم حذف font-size */
        body.single #article-section-1 h2, body.page #article-section-1 h2, body.singular #article-section-1 h2,
        body.single #article-section-2 h2, body.page #article-section-2 h2, body.singular #article-section-2 h2,
        body.single #article-section-3 h2, body.page #article-section-3 h2, body.singular #article-section-3 h2,
        body.single #article-section-4 h2, body.page #article-section-4 h2, body.singular #article-section-4 h2,
        body.single #article-section-5 h2, body.page #article-section-5 h2, body.singular #article-section-5 h2,
        body.single #article-section-6 h2, body.page #article-section-6 h2, body.singular #article-section-6 h2,
        body.single #article-section-7 h2, body.page #article-section-7 h2, body.singular #article-section-7 h2,
        body.single #article-section-8 h2, body.page #article-section-8 h2, body.singular #article-section-8 h2,
        body.single #article-section-9 h2, body.page #article-section-9 h2, body.singular #article-section-9 h2,
        body.single #article-section-10 h2, body.page #article-section-10 h2, body.singular #article-section-10 h2,
        body.single .conclusion h2, body.page .conclusion h2, body.singular .conclusion h2 {
            /* تم حذف font-size: 2.2em !important; هنا */
            line-height: 1.3 !important;
            margin-top: 1.8em !important;
            margin-bottom: 0.7em !important;
        }


        /* H3 - تأكد من أنها داخل #article-section-X */
        body.single #article-section-1 h3, body.page #article-section-1 h3, body.singular #article-section-1 h3 { color: var(--color-2) !important; }
        body.single #article-section-2 h3, body.page #article-section-2 h3, body.singular #article-section-2 h3 { color: var(--color-3) !important; }
        body.single #article-section-3 h3, body.page #article-section-3 h3, body.singular #article-section-3 h3 { color: var(--color-4) !important; }
        body.single #article-section-4 h3, body.page #article-section-4 h3, body.singular #article-section-4 h3 { color: var(--color-5) !important; }
        body.single #article-section-5 h3, body.page #article-section-5 h3, body.singular #article-section-5 h3 { color: var(--color-6) !important; }
        body.single #article-section-6 h3, body.page #article-section-6 h3, body.singular #article-section-6 h3 { color: var(--color-7) !important; }
        body.single #article-section-7 h3, body.page #article-section-7 h3, body.singular #article-section-7 h3 { color: var(--color-8) !important; }
        body.single #article-section-8 h3, body.page #article-section-8 h3, body.singular #article-section-8 h3 { color: var(--color-9) !important; }
        body.single #article-section-9 h3, body.page #article-section-9 h3, body.singular #article-section-9 h3 { color: var(--color-10) !important; }
        body.single #article-section-10 h3, body.page #article-section-10 h3, body.singular #article-section-10 h3 { color: var(--color-1) !important; }
        /* أحجام وخصائص h3 العامة داخل الأقسام - تم حذف font-size */
        body.single #article-section-1 h3, body.page #article-section-1 h3, body.singular #article-section-1 h3,
        body.single #article-section-2 h3, body.page #article-section-2 h3, body.singular #article-section-2 h3,
        body.single #article-section-3 h3, body.page #article-section-3 h3, body.singular #article-section-3 h3,
        body.single #article-section-4 h3, body.page #article-section-4 h3, body.singular #article-section-4 h3,
        body.single #article-section-5 h3, body.page #article-section-5 h3, body.singular #article-section-5 h3,
        body.single #article-section-6 h3, body.page #article-section-6 h3, body.singular #article-section-6 h3,
        body.single #article-section-7 h3, body.page #article-section-7 h3, body.singular #article-section-7 h3,
        body.single #article-section-8 h3, body.page #article-section-8 h3, body.singular #article-section-8 h3,
        body.single #article-section-9 h3, body.page #article-section-9 h3, body.singular #article-section-9 h3,
        body.single #article-section-10 h3, body.page #article-section-10 h3, body.singular #article-section-10 h3 {
            /* تم حذف font-size: 1.8em !important; هنا */
            line-height: 1.4 !important;
            margin-top: 1.2em !important;
            margin-bottom: 0.5em !important;
        }

        /* أنماط أزرار الإظهار/الإخفاء (Reveal Buttons) - لون الخلفية يطابق لون H2 في القسم */
        /* تأكد من أنها داخل #article-section-X أو .conclusion */
        body.single #article-section-1 .reveal-button, body.page #article-section-1 .reveal-button, body.singular #article-section-1 .reveal-button { background-color: var(--color-1) !important; color: var(--brand-text-on-accent) !important; }
        body.single #article-section-2 .reveal-button, body.page #article-section-2 .reveal-button, body.singular #article-section-2 .reveal-button { background-color: var(--color-2) !important; color: var(--brand-text-on-accent) !important; }
        body.single #article-section-3 .reveal-button, body.page #article-section-3 .reveal-button, body.singular #article-section-3 .reveal-button { background-color: var(--color-3) !important; color: var(--brand-text-on-accent) !important; }
        body.single #article-section-4 .reveal-button, body.page #article-section-4 .reveal-button, body.singular #article-section-4 .reveal-button { background-color: var(--color-4) !important; color: var(--brand-text-on-accent) !important; }
        body.single #article-section-5 .reveal-button, body.page #article-section-5 .reveal-button, body.singular #article-section-5 .reveal-button { background-color: var(--color-5) !important; color: var(--brand-text-on-accent) !important; }
        body.single #article-section-6 .reveal-button, body.page #article-section-6 .reveal-button, body.singular #article-section-6 .reveal-button { background-color: var(--color-6) !important; color: var(--brand-text-on-accent) !important; }
        body.single #article-section-7 .reveal-button, body.page #article-section-7 .reveal-button, body.singular #article-section-7 .reveal-button { background-color: var(--color-7) !important; color: var(--brand-text-on-accent) !important; }
        body.single #article-section-8 .reveal-button, body.page #article-section-8 .reveal-button, body.singular #article-section-8 .reveal-button { background-color: var(--color-8) !important; color: var(--brand-text-on-accent) !important; }
        body.single #article-section-9 .reveal-button, body.page #article-section-9 .reveal-button, body.singular #article-section-9 .reveal-button { background-color: var(--color-9) !important; color: var(--brand-text-on-accent) !important; }
        body.single #article-section-10 .reveal-button, body.page #article-section-10 .reveal-button, body.singular #article-section-10 .reveal-button { background-color: var(--color-10) !important; color: var(--brand-text-on-accent) !important; }
        body.single .conclusion .reveal-button, body.page .conclusion .reveal-button, body.singular .conclusion .reveal-button { background-color: var(--color-11) !important; color: var(--brand-text-on-accent) !important; }

        /* لون عند التمرير (Hover) - سأستخدم filter: brightness لزيادة السطوع بدلاً من لون ثابت */
        /* هذه القاعدة يجب أن تبقى عامة للأزرار */
        body.single .reveal-button:hover, body.page .reveal-button:hover, body.singular .reveal-button:hover {
            filter: brightness(1.15); /* زيادة السطوع عند التمرير */
        }

        /* ---------------------------------------------------------------- */
        /* التجاوب لأحجام الخطوط على الأجهزة المختلفة                       */
        /* (هذه الأنماط تم حذفها من هنا لتسمح بضبطها يدوياً أو عبر ملف CSS آخر) */
        /* ---------------------------------------------------------------- */

:root { --brand-dark-blue-lighter: #282c4b; --brand-text-on-dark: #e8eaed; --brand-text-on-dark-muted: #a0a7b3; }
.section-content[hidden] { display: none !important; }

/* Article body: intro box and section headings, restored as classes (were inline styles) */
/* Matches the live article: a light card that sets the introduction apart from the body */
.introduction.section {
  background-color: #ffffff;
  color: #555b66;
  font-size: 1.1em;
  line-height: 1.6;
  margin-bottom: 30px;
  padding: 25px;
  border: 1px solid #eceef3;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(18, 24, 66, 0.08);
  box-sizing: border-box;
}
.introduction.section p {
  color: inherit;
}
.challenge-section > h2,
.conclusion > h2 {
  font-size: 1.3em;
  line-height: 1.3em;
  margin: 1.8em 0 0.7em;
}


/* Fixed image slot at the top of the sidebar, above Search */
.widget.side-art {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.side-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}