/* إلغاء أيقونة القائمة نهائياً من كل الأجهزة */
.menu-bar,
.desktop-menu-bar,
.close-menu {
    display: none !important;
}

/* ============================================================
   CLS FIX - Layout Shift Prevention
   تاريخ الإضافة: 2026-06-02
   ============================================================ */

/* منع CLS من الخطوط - تحديد حجم ثابت للعناصر قبل تحميل الخط */
.menu-nav > ul > li > a,
.menu-nav > ul > li {
  /* حجز ارتفاع ثابت لمنع reflow عند تبديل الخط */
  min-height: 44px;
  align-items: center;
}

/* منع layout shift من page_item */
li.page_item a,
.page_item > a {
  display: inline-block;
  min-height: 1.5em;
}

/* تثبيت حجم nav items - منع CLS */
.header .top-header {
  min-height: 64px;
}

/* منع non-composited animations */
.city-section a {
  will-change: transform;
}
.city-section .city-block {
  will-change: transform;
  /* لا نستخدم transition على background - نستخدم opacity بدلاً */
}

/* btn-contact-price - RTL fix */
html[dir="rtl"] .btn-contact-price {
  flex-direction: row-reverse;
}

/* Fix for menu transition - use transform only */
.menu-nav > ul > li > ul {
  will-change: transform, opacity;
}

/* Stable image containers - prevent CLS */
.img-project,
.p-block-box .img-services,
.single-post-parent-container-thumbnail {
  contain: layout size;
}

/* ============================================================ */

/* ===== إزالة المربع بجانب 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;
    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;
}

/* ============================================================
   تكبير خطوط المقالات (+2px) — النص فقط، بدون تغيير الهيدينج
   المطلوب: p, li, span, td, blockquote, strong — لا h1/h2/h3
   ============================================================ */

/* الفقرات والعناصر النصية الأساسية: 16px → 18px */
post-content p,
post-content li,
post-content span,
post-content td,
post-content th,
post-content blockquote,
post-content figcaption,
.single-post-parent-container-content p,
.single-post-parent-container-content li,
.single-post-parent-container-content span,
.single-post-parent-container-content td,
.single-post-parent-container-content blockquote {
    font-size: 17px !important;
    line-height: 1.6 !important;
}

/* strong / em داخل الفقرات: يرث الحجم من الـ parent */
post-content p strong,
post-content p em,
post-content li strong,
post-content li em,
.single-post-parent-container-content p strong,
.single-post-parent-container-content p em {
    font-size: inherit !important;
}

/* ArticleDetails */
.ArticleDetails {
    font-size: 17px !important;
    line-height: 1.6 !important;
}

/* sub-content: 17px → 19px */
p.sub-content {
    font-size: 19px !important;
}

/* bk-content: 18px → 20px */
p.bk-content {
    font-size: 20px !important;
}

/* answer-single (FAQ): 19px → 21px */
.answer-single.-ToggleContentValue {
    font-size: 21px !important;
}

/* step-desc النص: 16px → 18px */
.step-desc p {
    font-size: 18px !important;
    line-height: 1.7 !important;
}

/* الموبايل */
@media (max-width: 767px) {
    post-content p,
    post-content li,
    post-content span,
    .single-post-parent-container-content p,
    .single-post-parent-container-content li {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }
}

/* ===== إصلاح أيقونات المشاركة في فوتر المقالات (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-heading h1 {
    width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    display: block !important;
    line-height: 1.5 !important;
}



/* ===== النص justified — ممتد من الطرفين ===== */
post-content p,
post-content li,
.single-post-parent-container-content p,
.single-post-parent-container-content li,
.body-content p,
.body-content li {
    text-align: justify !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;
}



/* محتوى المقال — padding كافٍ من الجانبين */
.single-post-parent-container-content {
    padding: 0 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

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

/* النص لا يتجاوز حدود الحاوية أبداً */
.body-content p,
.body-content li,
.body-content ul,
.body-content ol,
.single-post-parent-container-content p,
.single-post-parent-container-content li {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
}

/* إعادة margin/padding للفقرات */
.single-post-parent-container-content p,
.single-post-parent-container-content ul,
.single-post-parent-container-content ol,
.single-post-parent-container-content li,
.single-post-parent-container-content h2,
.single-post-parent-container-content h3 {
    margin: revert !important;
    padding: revert !important;
}

/* تحريك الأزرار العائمة لا تغطي النص */
.btn-phone {
    bottom: 90px !important;
    left: 10px !important;
    z-index: 99 !important;
}
.btn-whatsapp {
    bottom: 20px !important;
    left: 10px !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 */