/*
 * ==========================================================================
 * الخطوط
 * ==========================================================================
 *
 * الخط الأساسي Tajawal/Cairo يُحمَّل من الشبكة، وحتى وصوله يرسم المتصفح
 * النص بخط احتياطي. لو كان الاحتياطي بمقاسات مختلفة، يتغيّر ارتفاع
 * العناصر فجأة عند وصول الخط الأصلي - وهذا هو "كِبَر الصفحة وصِغَرها"
 * الذي يظهر عند أول فتح.
 *
 * الحل: نعرّف خطًا احتياطيًا بنفس مقاييس Tajawal تقريبًا (size-adjust
 * و ascent/descent)، فيشغل النص المساحة نفسها قبل وبعد التحميل ولا
 * تحدث أي قفزة.
 */

@font-face {
    font-family: 'TajawalFallback';
    src: local('Segoe UI'), local('Tahoma'), local('Arial');
    size-adjust: 96%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

/*
 * تعريف خط Cairo من ملفات محلية (offline) بدل الاعتماد على Google Fonts.
 * لازم تحط ملفات الخط في مجلد /fonts (راجع fonts/README.md للتفاصيل).
 *
 * لو الملفات مش موجودة لسه، المتصفح هيرجع تلقائيًا لأقرب خط عربي مثبّت
 * على جهاز المستخدم (Segoe UI / Tahoma / Arial) من غير أي خطأ ظاهر -
 * الموقع هيفضل شغال وشكله كويس، بس مش بخط Cairo بالظبط لحد ما تضيف
 * الملفات.
 */

@font-face {
    font-family: 'Cairo';
    src: url('fonts/cairo-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('fonts/cairo-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('fonts/cairo-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('fonts/cairo-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('fonts/cairo-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}