/* ==========================================================================
   responsive-guard.css
   حماية عامة من التمدد الأفقي (horizontal overflow) على كل الأجهزة.
   أي عنصر أعرض من الشاشة كان يُنتج شريط تمرير أفقي، ويظهر في الواجهة
   العربية (RTL) على شكل فراغ أبيض في جانب الصفحة.
   ========================================================================== */

/* overflow-x: clip لا يُنشئ حاوية تمرير، لذلك لا يُعطّل position: sticky
   بخلاف hidden. وقيمة hidden مُدرجة كبديل للمتصفحات القديمة. */
html {
    overflow-x: clip;
}

body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

/* الوسائط لا تتجاوز حاوياتها أبدا */
img,
svg,
video,
canvas,
iframe,
embed,
object {
    max-width: 100%;
}

table,
blockquote,
pre {
    max-width: 100%;
}

pre {
    overflow-x: auto;
}

/* في الشاشات الصغيرة: الروابط والكلمات الطويلة (مثل عناوين URL أو أكواد
   الإعلانات) تُلَف بدل أن تدفع عرض الصفحة */
@media (max-width: 767.98px) {
    body {
        overflow-wrap: break-word;
    }
}