/*
 * ==========================================================================
 * الخطوط
 * ==========================================================================
 *
 * الخط Tajawal يحمل من ملفات محلية في مجلد fonts/ - بلا أي طلب
 * خارجي. هذا أسرع خيار: رحلة واحدة لخادمك بدل رحلتين لجوجل
 * (fonts.googleapis.com ثم fonts.gstatic.com)، ويعمل حتى لو حجبت
 * جوجل أو بطؤت.
 *
 * ⚠ أربعة أوزان لا خمسة: 400 و500 و700 و800.
 *
 * الموقع يستعمل font-weight: 600 في نحو تسعين موضعا، لكن Tajawal
 * لا يحوي هذا الوزن أصلا (أوزانه 200·300·400·500·700·800·900).
 *
 * ولا نخترع له ملفا: قاعدة مطابقة CSS تقول إن الوزن المطلوب فوق 500
 * يبحث عنه صعودا أولا، فيجد المتصفح 700 ويستعمله. وهذا ما يحدث
 * اليوم مع جوجل بالضبط - فحذف التعريف يبقي الشكل كما هو تماما.
 *
 * ⚠ لا تضف @font-face بوزن 600 يشير لملف 500: سيجعل النص أخف مما
 * هو عليه الآن في تسعين موضعا، وهو تغيير في المظهر لا إصلاح.
 *
 * ⚠ woff2 وحدها.
 *
 * تدعمها كل المتصفحات منذ 2016 وهي أصغر من woff بنحو 30%. وإضافة
 * صيغة ثانية تعني ملفات أكثر على الخادم بلا فائدة عملية.
 *
 * ⚠ font-display: block مقصود (كان swap).
 *
 * مع swap كان المتصفح يرسم النص بالخط البديل ثم يبدله عند وصول Tajawal، فيعاد
 * ترتيب السطر ويتحرك ما حوله - عند فتح كل صفحة، لان كل انتقال مستند جديد يحمل
 * الخط من جديد. و block يمهل الخط فترة قصيرة قبل ان يرسم النص، فيظهر النص من
 * اول رسم بشكله النهائي. والخطوط الاربعة تنزل مسبقا برأس Link في .htaccess، فلا
 * يطول الانتظار عمليا.
 *
 * لو حذفت ملفات fonts/ لأي سبب، تتولى TajawalFallback العرض ولا
 * تنكسر الصفحة - لكنها خطة طوارئ لا وضع دائم.
 */

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('fonts/tajawal-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 500;
    font-display: block;
    src: url('fonts/tajawal-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    font-display: block;
    src: url('fonts/tajawal-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 800;
    font-display: block;
    src: url('fonts/tajawal-800.woff2') format('woff2');
}

/*
 * البديل المعاير.
 *
 * خط النظام يرسم قبل وصول Tajawal، ولو اختلفت مقاساته تقفز الصفحة
 * عند التبديل. هذه القيم تجعل ارتفاع السطر وعرض الحروف قريبين من
 * Tajawal فلا تحس القفزة.
 */
@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%;
}

/*
 * ==========================================================================
 * Safe Area - شريط الحالة العلوي في الآيفون
 * ==========================================================================
 *
 * ⚠ المشكلة: التطبيق المثبت على الشاشة الرئيسية في iOS يرسم الصفحة تحت
 * شريط الحالة (الساعة والبطارية)، فيغطي الهيدر. وAndroid لا يفعل ذلك.
 *
 * ⚠ الحل: env(safe-area-inset-top) - قيمته صفر على Android والكمبيوتر
 * وسفاري العادي والآيفون بلا Notch، فلا يتغير شيء هناك. وعلى الآيفون
 * ذي Notch / Dynamic Island يساوي ارتفاع الشريط فتنزل الصفحة تحته.
 *
 * ⚠ ولا padding ثابت ولا كشف للجهاز ولا لمس viewport-fit=cover.
 *
 * ⚠ ملف مشترك واحد لا تعديل كل صفحة على حدة. والخلفيات الممتدة
 * (.top-header-bg) تبقى ملتصقة بأعلى الشاشة وتطول بقدر الشريط، فيبقى
 * اللون تحته ولا تظهر خلفية الصفحة.
 */
@supports (padding-top: env(safe-area-inset-top)) {

    /* الهيدر العادي (داخل .wrap / .page) ينزل تحت الشريط.
       ⚠ .pkh (الباقات) يضيف الشريط في padding خاص به
       أصلا (packages.css) فلا نكرره. */
    body .wrap > .topbar,
    body .page > .topbar,
    body .page-head:first-child,
    body > .page-head {
        margin-top: env(safe-area-inset-top, 0px);
    }

    /* شريط الثيم/اللغة في صفحات الحساب - خارج بطاقة الدخول فقط */
    body .panel-top:not(.panel .panel-top) {
        margin-top: env(safe-area-inset-top, 0px);
    }

    /*
     * الخلفية الممتدة: تطول بقدر الشريط بدل أن تتحرك.
     * content-box + padding = الارتفاع المكتوب في كل صفحة + الشريط،
     * فلا نحتاج معرفة ارتفاعها في كل ملف.
     */
    .top-header-bg {
        box-sizing: content-box;
        padding-top: env(safe-area-inset-top, 0px);
    }
}


/*
 * ==========================================================================
 * لا انتقال متحرك بين الصفحات (كان View Transitions وأزيل)
 * ==========================================================================
 *
 * كان هنا @view-transition وتسمية .bn بـview-transition-name. وهذا يلتقط لقطة للفوتر
 * في الصفحة القديمة وأخرى في الجديدة ويحرك بينهما، فاذا اختلفت اللقطتان ولو قليلا
 * (حالة الضغط على بند، او فوتر ثلاثي البنود ثم خماسي) رأى المستخدم الأزرار تتحرك
 * وترجع. والفوتر يجب أن يكون ثابتا لا يتحرك، فلا يوجد شيء يحركه الآن.
 *
 * ⚠ الانتقال العادي بين صفحتين يبقي الصفحة القديمة ظاهرة حتى ترسم الجديدة (المتصفح
 *   يؤخر الرسم الأول)، والفوتر أول عنصر في الجسم، والصفحة تصل دفعة واحدة (perf_boot.php)،
 *   فيستبدل الفوتر القديم بالجديد في رسمة واحدة وفي نفس المكان.
 */