/* ==========================================================================
   طبقة تظليل داكنة للصفحات القديمة
   تُحمَّل بعد ملفات CSS القديمة فتغلبها، وتعيد توجيه الأسطح والنصوص
   والحدود إلى رموز نظام التصميم الجديد بلا إعادة كتابة للمحتوى.
   ========================================================================== */

/* ---------- عام ---------- */
body{background:var(--bg-1);color:var(--fg-2);font-family:var(--font);line-height:2}
h1,h2,h3,h4,h5{color:var(--fg-1);font-family:var(--font);letter-spacing:-.02em}
p,li,td,th,dd,dt,span,label{font-family:var(--font)}
a{color:inherit}
hr{border:0;border-top:1px solid var(--hair)}
strong,b{color:var(--fg-1)}

/* أي سطح أبيض قديم */
[class*="-card"],[class*="-box"],[class*="card-"],
.info-item,.perk,.role-card,.join-step,.tldr,.author-box,.newsletter,
.search-box,.blog-cta-box,.svc-table-wrap,.article-faq{
  background:var(--glass) !important;border-color:var(--hair) !important;color:var(--fg-2)}

/* ---------- صفحة المشروع ---------- */
.project-hero{background:var(--bg-0);padding-block:clamp(120px,14vw,170px) clamp(44px,5vw,64px);
  position:relative;overflow:hidden}
.project-title{color:var(--fg-1);letter-spacing:-.03em}
.project-badge{background:rgba(242,177,0,.14);color:var(--gold-2);
  border:1px solid var(--hair-gold);border-radius:var(--r-pill)}
.project-content,.project-overview,.project-challenges{background:transparent}
.overview-title,.challenges-title,.info-title{color:var(--fg-1)}
.overview-text,.challenges-text{color:var(--fg-2)}
.project-info-box{background:var(--glass);border:1px solid var(--hair);border-radius:var(--r-lg)}
.info-item{border-color:var(--hair) !important}
.info-label{color:var(--fg-3)}
.info-value{color:var(--fg-1)}
.project-gallery-section{background:transparent}
.gallery-main,.thumbnail{background:var(--bg-0);border:1px solid var(--hair);border-radius:var(--r)}
.gallery-btn{background:var(--glass);border:1px solid var(--hair-2);color:var(--fg-1)}
.lightbox{background:rgba(6,12,24,.94)}
.lightbox-close,.lightbox-nav{background:var(--glass);border:1px solid var(--hair-2);color:var(--fg-1)}
.lightbox-counter{color:var(--fg-2)}

/* وسوم الخادم في صفحة المشروع */
.wd-hero{background:var(--bg-0);padding-block:clamp(120px,14vw,170px) clamp(40px,5vw,60px)}
.wd-title{color:var(--fg-1);letter-spacing:-.03em}
.wd-title-en{color:var(--gold-2)}
.wd-tagline,.wd-overview{color:var(--fg-2)}
.wd-h2{color:var(--fg-1)}
.wd-card{background:var(--glass);border:1px solid var(--hair);border-radius:var(--r-lg)}
.wd-section{background:transparent}
.wd-meta-item{border-color:var(--hair)}
.wd-meta-item .k{color:var(--fg-3)}
.wd-meta-item .v{color:var(--fg-1)}
.wd-tech-chips span,.wd-chip{background:var(--glass);border:1px solid var(--hair);
  color:var(--fg-2);border-radius:var(--r-pill)}
.wd-screen,.wd-screens img{background:var(--bg-0);border:1px solid var(--hair);border-radius:var(--r)}
.wd-visit{background:linear-gradient(135deg,var(--gold),#FFC637);color:#10233C;
  border-radius:var(--r-pill);border:0;font-weight:700}
.wd-logo-fallback{background:var(--glass);border:1px solid var(--hair);color:var(--fg-1)}
.wd-swatch{border:1px solid var(--hair)}

/* ---------- التوظيف ---------- */
.careers-hero{background:var(--bg-0);padding-block:clamp(120px,14vw,170px) clamp(44px,5vw,64px);
  color:var(--fg-1)}
.careers-section{background:transparent}
.role-card{border-radius:var(--r-lg)}
.role-badge{background:rgba(47,191,160,.14);color:var(--teal-2);border:1px solid rgba(47,191,160,.3)}
.role-ico{background:rgba(242,177,0,.14);color:var(--gold-2);border:1px solid var(--hair)}
.role-apply,.apply-wa{background:linear-gradient(135deg,var(--gold),#FFC637);color:#10233C;
  border-radius:var(--r-pill);font-weight:700}
.join-step{border-radius:var(--r)}
.perk{border-radius:var(--r)}
.careers-form input,.careers-form textarea,.careers-form select{
  background:rgba(255,255,255,.04);border:1px solid var(--hair);color:var(--fg-1);
  border-radius:var(--r-sm)}

/* ---------- المدونة ---------- */
.blog-hero,.article-header{background:var(--bg-0);color:var(--fg-1);
  padding-block:clamp(118px,14vw,166px) clamp(40px,5vw,60px)}
.blog-listing,.blog-posts,.related-posts-section,.blog-article{background:transparent}
.blog-card,.post-card,.related-card{border-radius:var(--r-lg);overflow:hidden}
.blog-card-image,.post-card-image,.related-card img,.article-featured-image{background:var(--bg-0)}
.blog-card-category,.post-card-category,.article-category{
  background:rgba(242,177,0,.14);color:var(--gold-2);border:1px solid var(--hair-gold);
  border-radius:var(--r-pill)}
.post-card-title,.article-title,.related-card h3{color:var(--fg-1)}
.post-card-excerpt,.article-content p,.article-content li{color:var(--fg-2)}
.article-content h2,.article-content h3,.article-content h4{color:var(--fg-1)}
.article-content a{color:var(--gold-2)}
.article-content blockquote{border-inline-start:3px solid var(--gold);background:var(--glass);
  color:var(--fg-2);border-radius:var(--r-sm)}
.article-content code,.article-content pre{background:rgba(255,255,255,.06);color:var(--teal-2);
  border:1px solid var(--hair);border-radius:var(--r-sm)}
.article-content table{border-color:var(--hair)}
.article-content th{background:var(--glass);color:var(--fg-1)}
.article-content td,.article-content th{border-color:var(--hair);color:var(--fg-2)}
.meta-item,.blog-card-meta,.post-card-meta,.article-meta{color:var(--fg-3)}
.category-tab,.blog-filters button,.pagination a,.pagination span{
  background:var(--glass);border:1px solid var(--hair);color:var(--fg-2);border-radius:var(--r-pill)}
.category-tab.active,.pagination .current{
  background:linear-gradient(135deg,var(--gold),#FFC637);color:#10233C;border-color:transparent}
.author-avatar{border:1px solid var(--hair)}
.author-info strong,.author-box strong{color:var(--fg-1)}
.share-btn{background:var(--glass);border:1px solid var(--hair);color:var(--fg-2);border-radius:50%}
.share-btn:hover{color:var(--gold-2);border-color:var(--hair-gold)}
.tldr,.article-key{border-inline-start:3px solid var(--teal);border-radius:var(--r-sm)}
.newsletter input{background:rgba(255,255,255,.04);border:1px solid var(--hair);color:var(--fg-1)}
.newsletter button,.blog-cta-btn{background:linear-gradient(135deg,var(--gold),#FFC637);
  color:#10233C;border:0;border-radius:var(--r-pill);font-weight:700}
.breadcrumb,.breadcrumb a{color:var(--fg-3)}
.breadcrumb a:hover{color:var(--gold-2)}
.no-posts,.content-loading,.posts-loading{color:var(--fg-3)}

/* ---------- الخدمات ---------- */
.svc-chip{background:var(--glass);border:1px solid var(--hair);color:var(--fg-2);
  border-radius:var(--r-pill)}
.svc-table-wrap{border-radius:var(--r);overflow:hidden}
.svc-table th{background:var(--glass);color:var(--fg-1)}
.svc-table td,.svc-table th{border-color:var(--hair);color:var(--fg-2)}
.svc-note{background:var(--glass);border:1px solid var(--hair);color:var(--fg-2);
  border-radius:var(--r)}
.svc-faq summary{color:var(--fg-1)}
.svc-faq p{color:var(--fg-2)}

/* ---------- أصناف قديمة عامة ---------- */
.section-head h2,.section-title{color:var(--fg-1)}
.section-head p,.section-subtitle{color:var(--fg-2)}
.btn-primary{background:linear-gradient(135deg,var(--gold),#FFC637) !important;color:#10233C !important;
  border:0 !important;border-radius:var(--r-pill) !important}
.btn-secondary,.btn-outline{background:var(--glass) !important;border:1px solid var(--hair-2) !important;
  color:var(--fg-1) !important;border-radius:var(--r-pill) !important}

/* ---------- أسطح بيضاء متبقّية من الأنماط القديمة ---------- */
.perks,.careers-section,.careers-section.alt,.apply-section,
.about-stats,.about-section,.about-hero,.values-section,.team-section,
.svc-section,.services-section,.cta-section,.faq-section,
section[class*="-section"],section[class*="section-"]{
  background:transparent !important}
.apply-wrap,.about-stat,.value-card,.team-card,.stat-box,.stat-card{
  background:var(--glass) !important;border:1px solid var(--hair) !important;
  border-radius:var(--r-lg) !important;color:var(--fg-2) !important}
.about-stat b,.about-stat strong,.stat-box b,.about-stat .num{color:var(--gold-2) !important}
.about-stat span,.about-stat small{color:var(--fg-2) !important}

/* شارات فاتحة قديمة */
[class*="badge"],[class*="-tag"],[class*="chip"]{
  background:rgba(242,177,0,.12) !important;color:var(--gold-2) !important;
  border:1px solid var(--hair-gold) !important}

/* نماذج قديمة */
input,textarea,select{background:rgba(255,255,255,.04) !important;color:var(--fg-1) !important;
  border:1px solid var(--hair) !important;border-radius:var(--r-sm) !important}
input::placeholder,textarea::placeholder{color:var(--fg-3) !important}
option{background:var(--bg-2);color:var(--fg-1)}

/* جداول وصور داخل المحتوى */
table{border-color:var(--hair) !important}
img{border-radius:inherit}

/* ---------- ضمان تباين النص في كل المحتوى القديم ---------- */
body>:not(.site-header):not(.site-footer) p,
body>:not(.site-header):not(.site-footer) li,
body>:not(.site-header):not(.site-footer) td,
body>:not(.site-header):not(.site-footer) small,
body>:not(.site-header):not(.site-footer) label,
.perk,.join-step,.role-card,.about-stat,.apply-wrap{color:var(--fg-2)}
body>:not(.site-header):not(.site-footer) :is(h1,h2,h3,h4,h5,h6,strong,b,th){color:var(--fg-1)}
body>:not(.site-header):not(.site-footer) a:not([class*="btn"]):not([class*="apply"]){color:var(--gold-2)}
.perk :is(p,span,small,div),.join-step :is(p,span,small,div),
.role-card :is(p,span,small,div),.about-stat :is(span,small),
.apply-wrap :is(p,span,small,label){color:var(--fg-2)}
.perk :is(h3,h4,strong),.join-step :is(h3,h4,strong),.role-card :is(h3,h4,strong){color:var(--fg-1)}
.about-stat :is(b,strong,.num){color:var(--gold-2)}
.site-footer ~ * svg{color:inherit}
[class*="-ico"],[class*="-icon"]{color:var(--gold-2)}

/* شريط فلاتر المدونة والبحث */
.blog-filters{background:var(--bg-0) !important;border-block:1px solid var(--hair) !important}
.blog-filters .container{background:transparent !important}
.search-box{background:var(--glass) !important;border:1px solid var(--hair) !important;
  border-radius:var(--r-pill) !important}
.search-box input{background:transparent !important;border:0 !important;color:var(--fg-1) !important}
.search-box button{background:linear-gradient(135deg,var(--gold),#FFC637) !important;
  color:#10233C !important;border:0 !important;border-radius:var(--r-pill) !important}

/* ---------- أزرار الدعوة القديمة: نص داكن على الذهبي ---------- */
a.primary,a.role-apply,a.apply-wa,.hero-ctas a.primary,
a[class*="btn-primary"],button.primary{
  background:linear-gradient(135deg,var(--gold),#FFC637) !important;
  color:#10233C !important;border:0 !important;border-radius:var(--r-pill) !important;
  font-weight:700 !important}
a.secondary,a.ghost,.hero-ctas a:not(.primary){
  background:var(--glass) !important;color:var(--fg-1) !important;
  border:1px solid var(--hair-2) !important;border-radius:var(--r-pill) !important}

/* الشارات تبقى بحجم محتواها لا شريطاً عرضياً */
[class*="badge"],[class*="-tag"],[class*="chip"]{
  display:inline-flex !important;align-items:center;width:auto !important;
  border-radius:var(--r-pill) !important;padding:6px 16px !important;
  font-size:13.5px !important;font-weight:700 !important;line-height:1.6 !important}
.nav-pill,.nav-pill a{display:unset}
.nav-pill{display:flex !important;width:auto !important;background:rgba(255,255,255,.055) !important;
  border:1px solid var(--hair) !important;color:inherit !important}
.nav-pill a{display:block !important;padding:10px 17px !important;font-size:14.5px !important;
  background:transparent !important;border:0 !important;color:var(--fg-2) !important}
.nav-pill a.is-active{background:rgba(255,255,255,.1) !important;color:var(--fg-1) !important}

/* شريط التوثيق في تذييل صفحات الخادم */
.trust-ids{display:grid;gap:12px;margin:0}
.trust-ids div{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.trust-ids dt{font-size:13px;color:var(--fg-3);margin:0}
.trust-ids dd{margin:0;font-size:14px;font-weight:700;color:var(--fg-1);direction:ltr}
.trust-ids dd.is-valid{color:var(--teal-2)}
.trust-verify{display:inline-flex;margin-top:14px;font-size:13.5px;font-weight:700;
  color:var(--gold-2) !important}
.trust-seal-slot{margin-top:18px;min-height:46px}

/* ---------- أعطال التباين التي كشفها التدقيق البصري ---------- */
/* الأسئلة الشائعة في صفحات الخدمات كانت بطاقات بيضاء بنص أبيض */
.svc-faq .faq-q{background:var(--glass) !important;border:1px solid var(--hair) !important;
  border-radius:var(--r-lg) !important;box-shadow:none !important}
.svc-faq .faq-q h3{color:var(--fg-1) !important}
.svc-faq .faq-q p{color:var(--fg-2) !important}

/* عناوين أرقام الخدمات كانت شبه سوداء على داكن */
.about-stat .lbl,.works-stat .lbl,.stat .lbl{color:var(--fg-2) !important}

/* زر الإرسال في التوظيف: نص داكن على الذهبي */
.btn-submit,.btn-submit *{color:#10233C !important}
/* ملاحظة واتساب في التوظيف ليست زراً */
.apply-wa{background:none !important;color:var(--fg-2) !important;
  border:0 !important;border-radius:0 !important;padding:0 !important;font-weight:400 !important}
.apply-wa a{color:var(--teal-2) !important;font-weight:700}

/* زر زيارة المشروع كان ذهبياً على ذهبي */
.wd-visit,.wd-visit *{color:#10233C !important}

/* الظلال المسقطة الموروثة من التصميم الفاتح */
.faq-q,.value-card,.about-stat,.role-card,.perk,.apply-wrap,.cta-box,
.svc-table-wrap,.step-num,.join-step,.blog-card,.post-card,.related-card,
.info-item,.project-info-box,.author-box,.newsletter,.search-box{box-shadow:none !important}

/* توحيد أنصاف الأقطار والحدود */
.cta-box,.svc-table-wrap,.faq-q,.value-card,.about-stat{
  border-radius:var(--r-lg) !important;border:1px solid var(--hair) !important}

/* 17 · حقول الروابط والبريد تُقلب بالثنائية */
input[type="url"],input[type="email"],input[type="tel"]{direction:ltr;text-align:right}

/* 21 · الأرقام مع لاحقة لاتينية
   كان direction:ltr مفروضا، وهو صحيح لـ«11+» وخاطئ لـ«1 كود»
   و«4-8 أسابيع» فيقلب قراءتهما إلى «كود 1» و«أسابيع 4-8».
   plaintext يحدد اتجاه كل عنصر من أول حرف قوي فيه: الرقم الصرف
   يبقى لاتينيا والمختلط يعود عربيا. مقيس على
   /services/app-development.html.
   وارتفاع السطر كان يساوي حجم الخط تماما (30/30) فيتلاصق
   السطران في «4-8 أسابيع». */
.about-stat .num,.works-stat .num{unicode-bidi:plaintext;display:inline-block;line-height:1.3}

/* 23 · النجمة الحمراء المطلوبة */
.req,span.req{color:#FF6B5E !important}

/* 24 · عناوين معلومات المشروع على سطح مرتفع */
.info-label,.wd-meta-item .k{color:var(--fg-2) !important}

/* 13 · توحيد مقاييس العناوين بين الصفحات */
.about-hero h1,.careers-hero h1,.blog-hero h1,.article-header h1,.project-hero h1,.wd-hero h1{
  font-size:clamp(30px,3.4vw,44px) !important;font-weight:800 !important;
  letter-spacing:-.03em !important;line-height:1.42 !important}
.about-hero h2,.careers-hero h2,.blog-hero h2,.careers-section h2,.svc-section h2{
  font-size:clamp(26px,2.8vw,36px) !important;font-weight:800 !important;letter-spacing:-.03em !important}

/* التقديم على الوظائف صار واتساب مباشرة بلا نموذج */
body>:not(.site-header):not(.site-footer) .apply-cta{display:flex;justify-content:center;margin-top:28px}
body>:not(.site-header):not(.site-footer) .apply-cta .btn-wa{font-size:16px;padding:17px 34px}
body>:not(.site-header):not(.site-footer) .apply-cta .btn-wa svg{width:20px;height:20px}

/* ==========================================================================
   تصحيحات تدقيق 2026-10-13 للصفحات القديمة
   ========================================================================== */

/* الخط: blog.css و styles.css تطلبان عائلة Zain وهي غير محمّلة إطلاقا
   فتسقط على خط احتياطي أعرض بـ18% ويختلف رسم الحروف داخل الصفحة الواحدة. */
body>:not(.site-header):not(.site-footer) :is(.blog-filters button,.blog-search input,
  .pagination a,.pagination span,.pagination button,.newsletter-form input,
  .newsletter-form button,.blog-cta-btn,.search-box input){font-family:var(--font)}

/* ترقيم صفحات المدونة: كان ذهبيا على أبيض بتباين 1.41:1 أي غير مقروء. */
body>:not(.site-header):not(.site-footer) :is(.pagination a,.pagination span,.pagination button){
  background:var(--glass);border:1px solid var(--hair);color:var(--fg-2)}
body>:not(.site-header):not(.site-footer) .pagination a:hover{
  color:var(--gold-2);border-color:var(--hair-gold);background:var(--glass-2)}
body>:not(.site-header):not(.site-footer) .pagination .is-active,
body>:not(.site-header):not(.site-footer) .pagination [aria-current]{
  background:linear-gradient(135deg,var(--gold),#FFC637);color:#10233C;border-color:transparent}

/* تاريخ بطاقة المقال: fg-3 على سطح البطاقة يعطي 3.70:1 والمطلوب 4.5. */
body>:not(.site-header):not(.site-footer) :is(.blog-card-meta,.blog-card-meta span){color:var(--fg-2)}

/* أوزان غير موجودة في العائلة: 500 تنزل إلى 400 و900 تنزل إلى 800
   فتظهر النية أرقّ أو أثخن مما قُصد. نحسمها على الوزن المحمّل فعلا. */
body>:not(.site-header):not(.site-footer) :is(.wd-feature span,.wd-features span){font-weight:700}
body>:not(.site-header):not(.site-footer) :is(.about-stat .num,.section-head h2,
  .cta-box h2,.blog-cta-box h2,.step-num){font-weight:800}

/* تباعد موجب على نص عربي يفصل الحروف المتصلة. القواعد كُتبت أصلا للاتيني. */
body>:not(.site-header):not(.site-footer) :is(.eyebrow,.kicker){letter-spacing:0}

/* ارتفاع سطر دون 1.7 على متون عربية تلتف فعلا. */
body>:not(.site-header):not(.site-footer) :is(.perks .perk p,.wd-feature span,
  .pcard-tagline){line-height:1.85}

/* إيقاع الأقسام: الصفحات القديمة تستعمل حشوة ثابتة بالبكسل خارج النظام
   فتبدو مزحومة على الحاسب وفضفاضة على الجوال. */
body>:not(.site-header):not(.site-footer) :is(.about-section,.careers-section,
  .about-cta,.blog-cta){padding-block:clamp(72px,9vw,130px)}
body>:not(.site-header):not(.site-footer) .blog-listing{padding-block:clamp(52px,6vw,88px)}
/* وأقسام بحشوة صفر كانت تلصق المحتوى بما قبله. */
body>:not(.site-header):not(.site-footer) :is(.about-stats,.perks){padding-block:clamp(52px,6vw,88px)}

/* طول السطر: أجوبة الخدمات كانت تصل 128 محرفا في السطر. */
body>:not(.site-header):not(.site-footer) :is(.svc-faq .faq-q p,.svc-note,
  .wd-overview,.faq-a,.faq-answer){max-width:68ch}


/* زر .btn-a بلا قاعدة أساس في أي ملف: حشوته تأتي من .about-cta وحدها
   وتحويله إلى block من .cta-actions. فالزر الواقع خارجهما يبقى inline
   بارتفاع 19 بكسل مع بقاء حدّ الحبة، أي هدف لمس دون نصف الحد. */
body>:not(.site-header):not(.site-footer) .btn-a{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:14px 30px;border-radius:var(--r-pill);
  font-weight:700;line-height:1.4}

/* شعار الرأس كان 40 بكسل ارتفاعا وهدف اللمس 44 */
.brand{min-height:44px;display:inline-flex;align-items:center}

/* شعارات الدفع: contain يترك تمارا بضعف عرض مدفوع. توحيد الارتفاع يسوّيها */
.pay-logo img,.footer-pay-list img{height:22px;width:auto;object-fit:contain}

/* ============================================================
   قياسات 2026-10-14
   ============================================================ */

/* صفحات الخدمات الثلاث المكتوبة يدويا تستعمل
   color:var(--muted,#5b6b82) داخل السمة. المتغير غير معرف في
   النظام الداكن فيسقط على اللون الاحتياطي وتباينه 3.4:1 على
   الأرضية الكحلية. تعريفه هنا يصلح ست صفحات (عربية وإنجليزية)
   بسطر واحد ويرفع التباين إلى 9.0:1. */
:root{ --muted: #AFC0D6; }

/* فتات المسار في صفحة المشروع: روابط inline بارتفاع 17 بكسل.
   WCAG 2.2 يطلب 24 بكسل للهدف خارج جسم النص، وفتات المسار
   قائمة تنقل لا جملة. نرفع الارتفاع بحشو عمودي بلا تغيير السطر. */
.wd-breadcrumb a{display:inline-block;padding-block:4px}

/* سهم «تفاصيل الخدمة» مرسوم ليشير يسارا، وهو اتجاه القراءة في
   العربية. في صفحات en الاتجاه ltr فيجب أن يشير يمينا. */
[dir="ltr"] .link-arrow svg{transform:scaleX(-1)}

/* ============================================================
   قياسات الجوال 2026-10-14 (ثلاثة وكلاء + تحقق مستقل)
   ============================================================ */


/* المدونة الصفحة الوحيدة بهامشين جانبيين مختلفين: الواجهة
   ونداء التواصل عليهما padding-inline:20px فوق هامش الحاوية 24،
   فيبدأ نصهما عند 44 بينما تبدأ البطاقات عند 24. درجة مرئية. */
.blog-hero,.blog-cta{padding-inline:0}