/* ===== إزالة المربع بجانب Home في قائمة التنقل ===== */
.menu-nav i.fa-window,
.menu-nav .fa-window,
nav i.fa-window,
nav .fa-window,
.menu-item i.fa-window {
    display: none !important;
}

/* ===== إصلاح ظهور header-mobile مرتين على الشاشات الكبيرة ===== */
@media (min-width: 1271px) {
    header-mobile {
        display: none !important;
    }
}

/* ===== تصغير حجم الهيدر مع تكبير الشعار ===== */
.header {
    padding: 2px 0 !important;
    min-height: auto !important;
}

header-mobile {
    padding: 2px 0 !important;
    height: auto !important;
}

.header .web-logo {
    /* ارتفاع ثابت = 200px × (294/1080) ≈ 54px — تثبيت الحاوية يمنع CLS */
    height: 54px !important;
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 200px !important;
}

header-mobile .web-logo {
    height: 54px !important;
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 200px !important;
}

.header .web-logo img, 
header-mobile .web-logo img {
    /* لا transform:scale — يسبب non-composited animation + CLS */
    max-width: 200px !important;
    width: 200px !important;
    height: auto !important;
    object-fit: contain !important;
}

.header .top-header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ===== أيقونات المشاركة الاجتماعية ===== */
.social-header {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.social-header ul {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 8px !important;
}

.social-header li {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.social-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid var(--uicolor) !important;
    border-radius: 50% !important;
    color: var(--uicolor) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.social-link i {
    font-size: 18px !important;
    color: var(--uicolor) !important;
}

.social-link i.fab {
    font-family: "Font Awesome 6 Brands" !important;
}

.social-link i.fas {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Fix for Article Sharing Icons */
.single__container_social__right__share {
    display: flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 10px 0 !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.single__container_social__right__share li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 15px !important;
    border-radius: 8px !important;
    color: white !important;
    text-decoration: none !important;
    font-size: 14px !important;
    min-width: 100px !important;
}

.single__container_social__right__share li a i {
    margin-inline-end: 8px !important;
    font-size: 18px !important;
    color: white !important;
}

.single__container_social__right__share li.whatsapp a { background-color: #25d366 !important; }
.single__container_social__right__share li.messenger a { background-color: #0084ff !important; }
.single__container_social__right__share li.facebook a { background-color: #1877f2 !important; }
.single__container_social__right__share li.telegram a { background-color: #0088cc !important; }
.single__container_social__right__share li.twitter a { background-color: #1da1f2 !important; }

.single__container_social__right__share li a i.fab {
    font-family: "Font Awesome 6 Brands" !important;
}

.single__container_social__right__share li a i.fas,
.single__container_social__right__share li a i.fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.social-link:hover {
    background-color: var(--uicolor) !important;
    color: white !important;
}

.social-link:hover i {
    color: white !important;
}

/* ===== أيقونات الاتصال والواتساب ===== */
.btn-phone, .btn-whatsapp {
    width: 65px !important;
    height: 65px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.btn-phone svg, .btn-whatsapp svg {
    width: 38px !important;
    height: 38px !important;
}

/* ===== سهم الصعود ===== */
#button {
    bottom: 20px !important;
    right: 20px !important;
    left: auto !important;
    width: 55px !important;
    height: 55px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    z-index: 999 !important;
}

#button.show {
    opacity: 1 !important;
    visibility: visible !important;
}

#button svg {
    width: 28px !important;
    height: 28px !important;
}

/* ===== تأكيد ظهور العناصر ===== */
.lnav-bar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.header .rnav {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* ===== استجابة الموبايل ===== */
@media (max-width: 1270px) {
    .social-header ul {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    
    .social-link {
        width: 38px !important;
        height: 38px !important;
    }
    
    .social-link i {
        font-size: 16px !important;
    }
}

@media (max-width: 768px) {
    .header .web-logo {
        height: 54px !important;
        width: 180px !important;
    }
    
    header-mobile .web-logo {
        height: 54px !important;
        width: 180px !important;
    }
    
    .header .web-logo img, 
    header-mobile .web-logo img {
        width: 180px !important;
        max-width: 180px !important;
    }
    
    .social-link {
        width: 36px !important;
        height: 36px !important;
    }
    
    .social-link i {
        font-size: 15px !important;
    }
}


/* ===================================================
   إصلاح LCP — إزالة opacity:0 عن أول صورة في الصفحة
   السبب: img.imgLoader تبدأ بـ opacity:0 وتنتظر JS
   لإضافة class="loaded"، مما يؤخر LCP بـ ~1.5s
   الحل: أول imgLoader في الـ DOM تصبح مرئية فوراً
   الصور الأخرى تحافظ على الـ fade-in
   =================================================== */

/* أول صورة imgLoader في الصفحة — LCP — تظهر فوراً */
img.imgLoader:first-of-type,
.panner img.imgLoader:first-child,
.cover img.imgLoader:first-child,
section:first-of-type img.imgLoader:first-child {
    opacity: 1 !important;
    transition: none !important;
}

/* الصورة الرئيسية للـ hero/panner — أكثر تحديداً */
.panner img.imgLoader,
.cover img.imgLoader,
.web-logo img.imgLoader {
    opacity: 1 !important;
    transition: none !important;
}

/* ============================================================
   FIX: Non-Composited Animations (PageSpeed: 19 animated elements)
   استبدال خصائص الأنيميشن غير GPU بـ transform/opacity فقط
   ============================================================ */

/* كل الأنيميشن تستخدم will-change: transform لتفعيل GPU layer */
.menu-nav>ul>li,
.services .p-block-box,
.city-section a,
.project .block-offset .p-block-box,
.box-price,
.single-post-parent-container-thumbnail img,
.social-single a,
.btn-brand,
.faq i.play-icon {
    will-change: transform;
    transform: translateZ(0); /* إنشاء GPU layer */
}

/* استبدال transition: all بـ transition محددة (all تسبب non-composited) */
.services .p-block-box {
    transition: transform 150ms ease, box-shadow 150ms ease !important;
}
.city-section a {
    transition: transform 150ms ease !important;
}
.project .block-offset .p-block-box {
    transition: transform 150ms ease, box-shadow 150ms ease !important;
}
.box-price {
    transition: transform 100ms ease, box-shadow 100ms ease, border-color 100ms ease !important;
}
/* إزالة will-change بعد انتهاء التفاعل لتحرير الذاكرة */
.services .p-block-box:not(:hover),
.city-section a:not(:hover),
.box-price:not(:hover) {
    will-change: auto;
}

/* ============================================================
   FIX LCP: تحسين Largest Contentful Paint
   المشكلة: الصورة البطولية تُكتشف متأخراً بسبب CSS المُحمَّل بشكل غير متزامن
   الحل: إضافة أبعاد صريحة للصورة + تجنب layout shift أثناء التحميل
   ============================================================ */

/* 1. منع layout shift على اللوجو — يسبب إعادة حساب LCP
   الصورة الأصلية 1080×294، نسبة العرض/الارتفاع = 3.673
   يُعرض بحجم ~350×95 — نثبّت aspect-ratio لمنع reflow
   CRITICAL: width+height+aspect-ratio معاً هي الطريقة الوحيدة
   لحجز المساحة قبل تحميل الصورة ومنع CLS = 0.148 */
.web-logo img,
header-mobile .web-logo img {
    width: 200px !important;
    height: auto !important;
    max-width: 200px !important;
    aspect-ratio: 1080 / 294 !important; /* نسبة الصورة الفعلية — تمنع CLS */
    object-fit: contain !important;
    display: block;
}

/* 2. الصورة البطولية (panner): أبعاد صريحة تمنع reflow */
.panner img,
.panner .YourColor--Theme--image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
}

/* 3. تسريع إظهار النص فوق صورة LCP (Critical text) */
.t-cover h1,
.panner h1 {
    content-visibility: visible;
    contain: none;
}

/* 4. إزالة تأخير rendering على الـ above-the-fold */
.panner,
.header,
header-mobile {
    content-visibility: visible;
}

/* 5. باقي الصفحة: تأجيل rendering لتحرير موارد LCP */
footer,
.faq-section,
div.services,
.city-section {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* ===== إصلاح أيقونات المشاركة في فوتر المقالات (social-single) ===== */
.social-single a i.fab,
.social-single a i.fa-brands {
    font-family: "FA6Brands", "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

.social-single a i.fas,
.social-single a i.fa-solid,
.social-single a i.fa {
    font-family: "FA6Solid", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* إخفاء الـ pseudo-element */
.single-post-parent-thumbnail::before {
    display: none !important;
}

/* إصلاح imgLoader */
.single-post-parent-thumbnail img.imgLoader,
.single-post-parent-thumbnail img.imgLoader.loaded,
.single-post-parent-container-right img.imgLoader:first-of-type {
    opacity: 1 !important;
    transition: none !important;
}

/* ===== المقال يملأ عرض الشاشة كاملاً ===== */
.single-post-parent-container {
    flex-direction: column !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.single-post-parent-container-right {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* إخفاء السايدبار في صفحة المقال */
.single-post-parent-container-left {
    display: none !important;
}



/* الأزرار العائمة — اليسار */
.btn-phone {
    bottom: 80px !important;
    left: 20px !important;
    right: auto !important;
    z-index: 99 !important;
}
.btn-whatsapp {
    bottom: 20px !important;
    left: 20px !important;
    right: auto !important;
    z-index: 99 !important;
}



/* ===== تكبير عرض المقال ليملأ الشاشة كاملاً ===== */

/* إزالة max-width من الـ container في صفحة المقال */
.single-post-parent .container,
.single-post-parent-container,
.single-post-parent {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* المحتوى يملأ العرض */
.single-post-parent-container-right {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.body-content {
    padding: 15px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}



/* ===== حل جذري — المقال يملأ الشاشة بدون قطع ===== */

/* إزالة overflow من body وroot */
body, rootinside {
    overflow-x: hidden !important;
}

/* الـ container في صفحة المقال = عرض كامل */
.single-post-parent .container {
    max-width: 100vw !important;
    width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.single-post-parent-container-right {
    width: 100% !important;
    padding: 0 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.body-content,
.single-post-parent-container-content {
    width: 100% !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* كل العناصر داخل المقال لا تتجاوز العرض */
.body-content *,
.single-post-parent-container-content * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* القوائم — padding صغير فقط */
.body-content ul,
.body-content ol,
.single-post-parent-container-content ul,
.single-post-parent-container-content ol {
    padding-left: 20px !important;
    padding-right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.body-content li,
.single-post-parent-container-content li {
    padding-right: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ===== إصلاح Table of Contents — محاذاة يسار للموقع الإنجليزي ===== */
.ez-toc-container,
.ez-toc-widget-container,
#ez-toc-container,
.rank-math-toc,
.wp-block-table-of-contents,
.toc_container,
.toc_list,
[class*="toc"],
[id*="toc"],
.table-of-contents,
nav.ez-toc-container {
    direction: ltr !important;
    text-align: left !important;
}

.ez-toc-container ol,
.ez-toc-container ul,
.ez-toc-container li,
.ez-toc-container a,
#ez-toc-container ol,
#ez-toc-container ul,
#ez-toc-container li,
#ez-toc-container a,
.toc_list li,
.toc_list a,
[class*="toc"] li,
[class*="toc"] a {
    direction: ltr !important;
    text-align: left !important;
    float: none !important;
}

/* العنوان Table of Contents */
.ez-toc-title,
.toc_title,
[class*="toc"] p,
[class*="toc"] span {
    direction: ltr !important;
    text-align: left !important;
}

/* ===== إصلاح شامل لـ Table of Contents — محاذاة يسار + ترقيم صحيح ===== */

/* إجبار كل عناصر TOC على الاتجاه اليساري */
.ez-toc-container *,
#ez-toc-container *,
.wp-block-table-of-contents *,
[class*="toc"] *,
[id*="toc"] * {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed !important;
}

/* الـ container الرئيسي */
.ez-toc-container,
#ez-toc-container,
div.ez-toc-container {
    direction: ltr !important;
    text-align: left !important;
}

/* القوائم المرقمة داخل TOC */
.ez-toc-container ol,
.ez-toc-container ul,
#ez-toc-container ol,
#ez-toc-container ul,
nav.ez-toc-container ol,
nav.ez-toc-container ul {
    direction: ltr !important;
    text-align: left !important;
    padding-left: 20px !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    list-style-position: inside !important;
}

/* عناصر القائمة */
.ez-toc-container li,
#ez-toc-container li {
    direction: ltr !important;
    text-align: left !important;
    list-style-position: inside !important;
}

/* الروابط */
.ez-toc-container a,
#ez-toc-container a {
    direction: ltr !important;
    text-align: left !important;
    display: inline !important;
}

/* عنوان الـ TOC */
.ez-toc-title-container,
.ez-toc-title,
#ez-toc-container .ez-toc-title {
    direction: ltr !important;
    text-align: left !important;
    display: flex !important;
    justify-content: flex-start !important;
}

/* صورة المقال — تُعرَّف في Critical CSS الـ inline في part.php */

/* ===================================================
   RTL FINAL OVERRIDE — مواضع الأزرار العائمة
   يجب أن يكون آخر شيء في الملف لضمان الأولوية
   =================================================== */

/* أيقونة الهاتف — يسار */
.btn-phone {
    left: 10px !important;
    right: auto !important;
    bottom: 90px !important;
}

/* أيقونة واتساب — يسار */
.btn-whatsapp {
    left: 10px !important;
    right: auto !important;
    bottom: 20px !important;
}

/* سهم الصعود — يمين */
#button {
    right: 20px !important;
    left: auto !important;
}

/* YC contact two — يمين */
.YC-contact-two {
    right: 24px !important;
    left: auto !important;
}

/* ===================================================
   ROOT CAUSE FIX — FORCED POSITIONS
   هذا التعديل يضمن بقاء الأيقونات في أماكنها مهما كان تعارض ملفات الـ RTL
   =================================================== */

/* إجبار أيقونات الاتصال على اليسار */
.btn-phone, .btn-whatsapp, [class*="btn-phone"], [class*="btn-whatsapp"] {
    left: 20px !important;
    right: auto !important;
}

/* إجبار سهم الصعود على اليمين */
#button, .scroll-to-top, [id*="button"], .back-to-top {
    right: 20px !important;
    left: auto !important;
}

/* ضبط المسافات العمودية لضمان عدم التداخل */
.btn-whatsapp { bottom: 20px !important; }
.btn-phone { bottom: 95px !important; }
#button { bottom: 20px !important; }

/* ================================================================
   EMIRATEFIX — نظام تنسيق المحتوى الموحد
   Article & Page Content Typography System
   الإصدار: 2.0 | سياسة الـ SEO والهوية البصرية للموقع
   ================================================================ */


/* ────────────────────────────────────────────────────────────────
   1. H1 — العنوان الرئيسي للصفحة / المقال
   اللون: الأزرق الرئيسي | يُستخدم مرة واحدة فقط
   ──────────────────────────────────────────────────────────────── */

.single-post-parent-container-heading h1,
.body-content h1,
post-content h1,
.single-post-parent-container-content h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: #0056b3 !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    text-align: right !important;
    direction: rtl !important;
}

@media (max-width: 767px) {
    .single-post-parent-container-heading h1,
    .body-content h1,
    post-content h1,
    .single-post-parent-container-content h1 {
        font-size: 22px !important;
        line-height: 1.45 !important;
    }
}


/* ────────────────────────────────────────────────────────────────
   2. H2 — العناوين الرئيسية الفرعية
   اللون: أزرق داكن | خط جانبي يمين
   ──────────────────────────────────────────────────────────────── */

.body-content h2,
post-content h2,
.single-post-parent-container-content h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: #003d82 !important;
    margin: 32px 0 14px 0 !important;
    padding: 0 14px 0 0 !important;
    border-right: 4px solid #0056b3 !important;
    border-left: none !important;
    display: block !important;
    text-align: right !important;
    direction: rtl !important;
}

@media (max-width: 767px) {
    .body-content h2,
    post-content h2,
    .single-post-parent-container-content h2 {
        font-size: 19px !important;
        margin: 24px 0 10px 0 !important;
    }
}


/* ────────────────────────────────────────────────────────────────
   3. H3 — العناوين التفصيلية
   اللون: رمادي داكن | خط سفلي ناعم
   ──────────────────────────────────────────────────────────────── */

.body-content h3,
post-content h3,
.single-post-parent-container-content h3 {
    font-size: 19px !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;
    color: #2c2c2c !important;
    margin: 24px 0 10px 0 !important;
    padding: 0 0 6px 0 !important;
    border-bottom: 1px solid #d0d9e9 !important;
    display: block !important;
    text-align: right !important;
    direction: rtl !important;
}

@media (max-width: 767px) {
    .body-content h3,
    post-content h3,
    .single-post-parent-container-content h3 {
        font-size: 17px !important;
        margin: 18px 0 8px 0 !important;
    }
}


/* ────────────────────────────────────────────────────────────────
   4. H4 — العناوين الصغيرة / النقاط الفرعية
   ──────────────────────────────────────────────────────────────── */

.body-content h4,
post-content h4,
.single-post-parent-container-content h4 {
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #444444 !important;
    margin: 18px 0 8px 0 !important;
    padding: 0 !important;
    display: block !important;
    text-align: right !important;
    direction: rtl !important;
}


/* ────────────────────────────────────────────────────────────────
   5. H5 — أصغر عناوين التسلسل الهرمي
   ──────────────────────────────────────────────────────────────── */

.body-content h5,
post-content h5,
.single-post-parent-container-content h5 {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #555555 !important;
    margin: 14px 0 6px 0 !important;
    padding: 0 !important;
    display: block !important;
    text-align: right !important;
    direction: rtl !important;
}


/* ────────────────────────────────────────────────────────────────
   6. الفقرات <p> — نص الجسم الأساسي
   ──────────────────────────────────────────────────────────────── */

.body-content p,
post-content p,
.single-post-parent-container-content p,
.ArticleDetails p {
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.85 !important;
    color: #444444 !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    text-align: justify !important;
    direction: rtl !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 767px) {
    .body-content p,
    post-content p,
    .single-post-parent-container-content p {
        font-size: 16px !important;
        line-height: 1.75 !important;
    }
}


/* ────────────────────────────────────────────────────────────────
   7. القوائم <ul> و <ol> و <li>
   ──────────────────────────────────────────────────────────────── */

.body-content ul,
.body-content ol,
post-content ul,
post-content ol,
.single-post-parent-container-content ul,
.single-post-parent-container-content ol {
    margin: 12px 0 20px 0 !important;
    padding-right: 24px !important;
    padding-left: 0 !important;
    direction: rtl !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.body-content li,
post-content li,
.single-post-parent-container-content li {
    font-size: 17px !important;
    line-height: 1.8 !important;
    color: #444444 !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    text-align: right !important;
    direction: rtl !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 767px) {
    .body-content li,
    post-content li,
    .single-post-parent-container-content li {
        font-size: 16px !important;
    }
}


/* ────────────────────────────────────────────────────────────────
   8. strong / em — النص العريض والمائل
   ──────────────────────────────────────────────────────────────── */

.body-content p strong,
.body-content li strong,
post-content p strong,
post-content li strong,
.single-post-parent-container-content p strong,
.single-post-parent-container-content li strong {
    font-size: inherit !important;
    font-weight: 700 !important;
    color: #222222 !important;
}

.body-content p em,
post-content p em,
.single-post-parent-container-content p em {
    font-size: inherit !important;
    font-style: italic !important;
    color: inherit !important;
}


/* ────────────────────────────────────────────────────────────────
   9. ArticleDetails — تفاصيل المقال
   ──────────────────────────────────────────────────────────────── */

.ArticleDetails {
    font-size: 17px !important;
    line-height: 1.8 !important;
    color: #444444 !important;
    direction: rtl !important;
    text-align: right !important;
}

.ArticleDetails.details {
    max-height: 250px !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
}

.ArticleDetails.details.height {
    max-height: 100% !important;
}


/* ────────────────────────────────────────────────────────────────
   10. حاوية المحتوى الكاملة — Layout
   ──────────────────────────────────────────────────────────────── */

/* إخفاء السايدبار */
.single-post-parent-container-left {
    display: none !important;
}

/* المقال يملأ العرض كاملاً */
.single-post-parent .container,
.single-post-parent-container,
.single-post-parent {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-direction: column !important;
}

.single-post-parent-container-right {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.body-content,
.single-post-parent-container-content {
    width: 100% !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* منع تجاوز العرض */
.body-content *,
.single-post-parent-container-content * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}


/* ================================================================
   FIX LCP + CLS — صورة المقال الرئيسية
   ================================================================

   CLS السبب:
   - main.css يُحدد height:250px ثابت بدون aspect-ratio
   - الصورة تُحمَّل بـ loading=lazy بدون أبعاد → layout shift

   الحل:
   - aspect-ratio ثابت يحجز المساحة قبل التحميل → CLS ≈ 0
   - contain-intrinsic-size يمنع reflow أثناء التحميل
   - height:auto يسمح للصورة بالتمدد الطبيعي بنسبتها
   ================================================================ */

.single-post-parent-thumbnail {
    /* حجز مساحة ثابتة قبل تحميل الصورة — يمنع layout shift */
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    contain-intrinsic-size: 0 225px !important;
    content-visibility: auto !important;

    /* تصميم */
    background: #f0f5ff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-bottom: 15px !important;
    padding: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.single-post-parent-thumbnail img {
    /* الصورة تملأ الحاوية بالكامل بدون تشويه */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 16px !important;
    /* لا opacity animation على LCP element */
    opacity: 1 !important;
    transition: none !important;
}

/* إلغاء الـ pseudo-element الذي يُسبب CLS */
.single-post-parent-thumbnail::before {
    display: none !important;
    content: none !important;
}

/* ─── موبايل ──────────────────────────────── */
@media (max-width: 767px) {
    .single-post-parent-thumbnail {
        aspect-ratio: 4 / 3 !important;
        min-height: 180px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }
}



/* ================================================================
   زيادة حجم الخطوط — العناوين فقط بمقدار 2 درجات (2px)
   المحتوى والنصوص بمقدار 4 درجات كما هو
   ================================================================ */

/* --- body base font size: 14px → 18px --- */
body {
    font-size: 18px !important;
    --fsize: 18px !important;
}

/* --- h1 --- */
h1,
.single-post-parent-container-heading > h1,
h1.news-title,
h1.slice-title,
post-content h1 {
    font-size: calc(var(--h1-size, 34px) + 2px) !important;
}

section.project.project-archive--description > .container > h1 { font-size: 32px !important; }
h1.news-title { font-size: 30px !important; }
h1.slice-title { font-size: 37px !important; }
.single-post-parent-container-heading > h1 { font-size: 26px !important; }
.t-cover h1 { font-size: 53px !important; }
post-content h1 { font-size: calc(1em + 2px) !important; }

/* --- h2 --- */
h2,
.faq h2,
post-content h2,
.project > .container > h2,
.city-section > div > h2,
.model .model-info h2,
rootinside theme-widget--item .widgettitle,
.about-content h2,
h2.news-title,
h2.slice-title,
h2.bk-title {
    font-size: calc(var(--h2-base, 28px) + 2px) !important;
}

.faq h2 { font-size: 36px !important; }
.project > .container > h2 { font-size: 30px !important; }
.city-section > div > h2 { font-size: 30px !important; }
rootinside theme-widget--item .widgettitle { font-size: 30px !important; }
.about-content h2 { font-size: 32px !important; }
h1.news-title, .project-archive h2.news-title { font-size: 30px !important; }
h2.slice-title { font-size: 33px !important; }
h2.bk-title { font-size: 27px !important; }
.faq-model h2 { font-size: 42px !important; }
.feature .feature-info h2 { font-size: 42px !important; }
.contact-body .contact-info h2 { font-size: 38px !important; }
.price h2 { font-size: 38px !important; }
post-content h2 { font-size: 24px !important; }
.single-post-parent-container-content h2 { font-size: 24px !important; }
post-content h2.slice-title { font-size: 42px !important; }

/* --- h3 --- */
h3,
.p-block-box h3,
.services .p-block-box h3,
.faq .head-faq h3,
post-content h3,
.single-post-parent-container-content h3,
.step-desc h3,
.head-faq-single h3,
.faq-single > h3 {
    font-size: calc(var(--h3-base, 20px) + 2px) !important;
}

.p-block-box h3 { font-size: 22px !important; }
.services .p-block-box h3 { font-size: 26px !important; }
.faq .head-faq h3 { font-size: 22px !important; }
post-content h3 { font-size: 22px !important; }
.single-post-parent-container-content h3 { font-size: 24px !important; }
.step-desc h3 { font-size: 19px !important; }
.head-faq-single h3 { font-size: 20px !important; }
.faq-single > h3 { font-size: 22px !important; }
.info-model h3:first-child { font-size: 20px !important; }
.info-model h3:last-child { font-size: 17px !important; }
.single-sidebar .info-project h3 { font-size: 15px !important; }

/* --- h4 --- */
h4,
.single-post-parent-container-comments > h4 {
    font-size: calc(var(--h4-base, 18px) + 2px) !important;
}
.single-post-parent-container-comments > h4 { font-size: 22px !important; }

/* --- h5 --- */
h5 { font-size: calc(var(--h5-base, 16px) + 2px) !important; }

/* --- h6 --- */
h6 { font-size: calc(var(--h6-base, 14px) + 2px) !important; }

/* --- paragraph & general content --- */
p,
.faq p,
.services .p-block-box p,
.about-content p,
rootinside theme-widget--item .textwidget,
.p-block p,
.archive_description_container {
    font-size: 20px !important;
}

post-content p { line-height: 33px !important; font-size: 20px !important; }
.single-post-parent-container-content * { font-size: 20px !important; }
post-content * { font-size: 20px !important; }

/* --- body-content & article content --- */
.body-content li,
post-content li,
.single-post-parent-container-content li { font-size: 20px !important; }

.ArticleDetails { font-size: 20px !important; }

/* --- footer --- */
footer .we-are p { font-size: 20px !important; }
footer .blocks-footer > theme-widget--item .textwidget { font-size: 20px !important; }
footer .blocks-footer > theme-widget--item .menu > li > a { font-size: 22px !important; }
footer .links li { font-size: 20px !important; }

/* --- nav & menus --- */
.menu-nav > ul > li > a { font-size: 19px !important; }
.menu-nav > ul { font-size: 20px !important; }