/*
Theme Name: برمجة خاصة - فريق عمل في خدمتكم 24 ساعة
Theme URI: https://shaban-negm.com
Author: Shaban Negm - Custom Development - 01093121688
Author URI: https://shaban-negm.com
Description: برمجة خاصة حصرية غير متاحة للبيع - تاسيس تشطيب صيانه لياسه دهانات سباكه كهربا
Version: 1.7.0
License: Private - All Rights Reserved
Text Domain: shaban-negm-private
*/

/* === بداية كود 1: تعريف خطوط Cairo المحلية أوف لاين === */
/* الوظيفة: تحميل كل أوزان خط Cairo من السيرفر - 0 طلب خارجي */
/* الاسم: font-face-cairo-local-offline */
@font-face {
    font-family: 'Cairo';
    src: url('fonts/Cairo-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('fonts/Cairo-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('fonts/Cairo-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('fonts/Cairo-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('fonts/Cairo-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('fonts/Cairo-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('fonts/Cairo-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('fonts/Cairo-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
/* === نهاية كود 1: تعريف خطوط Cairo المحلية أوف لاين === */

/* === بداية كود 2: المتغيرات الأساسية === */
/* الوظيفة: متغيرات الألوان والمقاسات للتحكم السريع */
/* الاسم: css-variables */
:root {
    --primary: #0d1b2a;
    --secondary: #f39c12;
    --accent: #007bff;
    --whatsapp: #25D366;
    --dark: #1b263b;
    --light: #f8f9fa;
    --content-bg: #fffaf3;
    --border-gold: #f39c12;
    --text: #2c3e50;
    --radius: 8px;
    --shadow: 0 4px 20px rgba(0,0,0,.08);
    --container: 1200px;
}
/* === نهاية كود 2: المتغيرات الأساسية === */

/* === بداية كود 3: Reset + منع السحب الأفقي نهائي === */
/* الوظيفة: تصفير المتصفح + منع السكرول الأفقي 100% + تحسين CLS */
/* الاسم: reset-overflow-fix-final */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{
    scroll-behavior:smooth;
    font-size:16px;
    -webkit-text-size-adjust:100%;
    overflow-x:clip;
    width:100%;
    max-width:100vw
}
body{
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
    direction:rtl;
    background:var(--light);
    color:var(--text);
    line-height:1.8;
    font-size:1rem;
    font-weight:400;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:clip;
    width:100%;
    max-width:100vw;
    position:relative
}
#page, #content,.site,.site-content {
    max-width: 100vw;
    overflow-x: clip;
    width: 100%;
}
/* === نهاية كود 3: Reset + منع السحب الأفقي نهائي === */

/* === بداية كود 4: الصور المتجاوبة + منع CLS === */
/* الوظيفة: صور 100% متجاوبة + aspect-ratio لمنع CLS + Lazy Load */
/* الاسم: responsive-images-no-cls */
img, picture, video, iframe, svg {
    max-width: 100%;
    height: auto;
    display: block;
    box-sizing: border-box;
}
img {
    object-fit: cover;
}
img[width][height] {
    aspect-ratio: attr(width) / attr(height);
}
.entry-content img,
.wp-block-image img,
figure img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.elementor-widget-image img {
    width: 100%!important;
    height: auto!important;
}
img[loading="lazy"] {
    background: #e0e0e0;
}
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius);
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* === نهاية كود 4: الصور المتجاوبة + منع CLS === */

/* === بداية كود 5: العناصر الأساسية + إصلاح الهوامش SEO === */
/* الوظيفة: توسيط المحتوى + منع خروج النصوص + SEO Friendly */
/* الاسم: base-elements-seo-fixed */
a{text-decoration:none;transition:all.25s ease;word-wrap:break-word;overflow-wrap:break-word}
button{cursor:pointer;border:none;font-family:inherit}
h1,h2,h3,h4,h5,h6{margin:0 0 1rem 0;line-height:1.4;font-weight:700;word-wrap:break-word}
p{margin:0 0 1rem 0;word-wrap:break-word}
.container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 20px;
    width:100%;
    display:block;
    box-sizing:border-box
}
/* إصلاح المحتوى على الديسكتوب والموبايل + هامش ذهبي */
.entry-content,
.page-content,
.post-content,
.site-main > *:not(.full-width):not(.elementor),
.single-post.entry-content,
.page.entry-content,
article,
main {
    width:100%;
    max-width:var(--container);
    margin-left:auto;
    margin-right:auto;
    padding:25px 20px;
    display:block;
    box-sizing:border-box;
    overflow-wrap:break-word;
    word-wrap:break-word;
    background:var(--content-bg);
    border-radius:12px;
    box-shadow:0 2px 15px rgba(0,0,0,.05);
    border-right:4px solid var(--border-gold)
}
/* أي جدول أو كود أو iframe كبير */
table, pre, code, iframe, embed {
    max-width: 100%;
    overflow-x: auto;
    display: block;
    word-wrap: break-word;
}
/* === نهاية كود 5: العناصر الأساسية + إصلاح الهوامش SEO === */

/* === بداية كود 6: الهيدر الرئيسي === */
/* الوظيفة: هيدر ثابت متجاوب مع تحسين الأداء */
/* الاسم: site-header */
.site-header{
    background:var(--primary);
    color:#fff;
    padding:15px 0;
    border-bottom:3px solid var(--secondary);
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
    contain:layout style paint;
    width:100%;
    max-width:100vw
}
/* === نهاية كود 6: الهيدر الرئيسي === */

/* === بداية كود 7: حاوية الهيدر === */
/* الوظيفة: تنظيم اللوجو وأزرار التواصل */
/* الاسم: header-container */
.site-header.container{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}
/* === نهاية كود 7: حاوية الهيدر === */

/* === بداية كود 8: لوجو الموقع SEO === */
/* الوظيفة: ستايل اسم الموقع + H1 للسيو */
/* الاسم: logo-styles-seo */
.logo h1{margin:0;font-size:1.25rem;line-height:1.4;font-weight:700}
.logo a{color:#fff}
.logo a:hover{color:var(--secondary)}
/* === نهاية كود 8: لوجو الموقع SEO === */

/* === بداية كود 9: أزرار التواصل === */
/* الوظيفة: أزرار واتساب وتليفون متجاوبة */
/* الاسم: header-contact-buttons */
.header-contact{display:flex;gap:10px;flex-wrap:wrap}
.header-contact a{
    color:#fff;
    background:var(--whatsapp);
    padding:10px 20px;
    border-radius:var(--radius);
    font-weight:700;
    font-size:.95rem;
    display:inline-flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    will-change:transform
}
.header-contact a:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.header-contact a:active{transform:translateY(0)}
.phone-eg{background:var(--accent)!important}
/* === نهاية كود 9: أزرار التواصل === */

/* === بداية كود 10: المحتوى الرئيسي === */
/* الوظيفة: حاوية المحتوى مع إصلاح العرض 100% */
/* الاسم: site-main-fixed */
.site-main{
    padding:30px 0 50px;
    min-height:60vh;
    contain:layout;
    width:100%;
    max-width:100vw;
    display:block;
    overflow-x:clip
}
.site-main.container,
.site-main >.wp-block-group,
.site-main > article {
    max-width:var(--container);
    margin:0 auto;
    width:100%;
    box-sizing:border-box
}
/* === نهاية كود 10: المحتوى الرئيسي === */

/* === بداية كود 11: الفوتر الرئيسي === */
/* الوظيفة: فوتر الموقع */
/* الاسم: site-footer */
.site-footer{
    background:var(--dark);
    color:#e0e1dd;
    padding:40px 0 20px;
    text-align:center;
    margin-top:60px;
    contain:layout style paint;
    width:100%;
    max-width:100vw
}
.site-footer p{margin:10px 0;font-size:.95rem}
.footer-copyright{border-top:1px solid #415a77;padding-top:20px;margin-top:20px;font-size:.9rem}
.footer-copyright span{color:var(--secondary);font-weight:700}
/* === نهاية كود 11: الفوتر الرئيسي === */

/* === بداية كود 12: كلاسات مساعدة للسرعة والسيو === */
/* الوظيفة: كلاسات جاهزة لتسريع الرندر وتقليل CLS */
/* الاسم: performance-helpers-seo */
.content-auto{content-visibility:auto;contain-intrinsic-size:300px}
.w-100{width:100%!important}
.h-auto{height:auto!important}
.d-none{display:none!important}
.d-block{display:block!important}
.text-center{text-align:center!important}
.img-fluid{max-width:100%;height:auto}
.rounded{border-radius:var(--radius)}
.shadow{box-shadow:var(--shadow)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* === نهاية كود 12: كلاسات مساعدة للسرعة والسيو === */

/* === بداية كود 13: كلاسات أوزان الخط === */
/* الوظيفة: التحكم في وزن خط Cairo */
/* الاسم: font-weights */
.font-extralight{font-weight:200}
.font-light{font-weight:300}
.font-normal{font-weight:400}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.font-black{font-weight:900}
/* === نهاية كود 13: كلاسات أوزان الخط === */

/* === بداية كود 22: إصلاح المنتور + هامش ذهبي ========== */
/* الوظيفة: يمنع المنتور يكسر الشاشة + يوسط المحتوى + هامش شيك */
/* الاسم: elementor-desktop-fix-margin */
.elementor-section.elementor-section-boxed >.elementor-container {
    max-width: var(--container)!important;
    margin-left: auto!important;
    margin-right: auto!important;
    padding-left: 20px!important;
    padding-right: 20px!important;
    box-sizing: border-box!important;
}
.elementor {
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
}
body.elementor-page.site-main {
    max-width: 100%;
    padding: 0;
    overflow-x: clip;
}
.elementor-widget-wrap >.elementor-element {
    margin-bottom: 0;
}
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget-wrap {
    max-width: 100%!important;
    box-sizing: border-box!important;
}
/* هامش ذهبي للمنتور */
.elementor-widget-text-editor,
.elementor-widget-heading {
    background:var(--content-bg);
    padding:20px;
    border-radius:12px;
    border-right:4px solid var(--border-gold);
    box-shadow:0 2px 15px rgba(0,0,0,.05);
    margin-bottom:20px
}
/* === نهاية كود 22: إصلاح المنتور + هامش ذهبي ========== */

/* === بداية كود 23: حماية نهائية من السحب الأفقي === */
/* الوظيفة: بيمسك أي عنصر هربان ويمنعه يكسر الشاشة */
/* الاسم: overflow-fix-ultimate */
html, body, #page, #content,.site,.site-content,.elementor {
    max-width: 100vw!important;
    overflow-x: clip!important;
    width: 100%!important;
}
/* === نهاية كود 23: حماية نهائية من السحب الأفقي === */

/* === بداية كود 14: تجاوب شاشات 4K وأكبر === */
/* الوظيفة: تكبير الحاوية والخط للشاشات الكبيرة */
/* الاسم: responsive-4k */
@media (min-width:1920px){
    :root{--container:1400px}
    html{font-size:18px}
}
/* === نهاية كود 14: تجاوب شاشات 4K وأكبر === */

/* === بداية كود 15: تجاوب شاشات 1440px === */
/* الوظيفة: تكبير الحاوية والخط */
/* الاسم: responsive-1440 */
@media (min-width:1440px){
    :root{--container:1320px}
    html{font-size:17px}
}
/* === نهاية كود 15: تجاوب شاشات 1440px === */

/* === بداية كود 16: تجاوب لابتوب 1200px === */
/* الوظيفة: ضبط الحاوية للابتوب */
/* الاسم: responsive-laptop */
@media (max-width:1200px){
    :root{--container:1140px}
}
/* === نهاية كود 16: تجاوب لابتوب 1200px === */

/* === بداية كود 17: تجاوب تابلت أفقي 992px === */
/* الوظيفة: ضبط الهيدر والأزرار */
/* الاسم: responsive-tablet-landscape */
@media (max-width:992px){
    :root{--container:960px}
  .container{padding:0 15px}
  .logo h1{font-size:1.15rem}
  .header-contact a{padding:9px 16px;font-size:.9rem}
  .entry-content,.page-content,.post-content {padding:22px 18px}
}
/* === نهاية كود 17: تجاوب تابلت أفقي 992px === */

/* === بداية كود 18: تجاوب تابلت عمودي 768px === */
/* الوظيفة: قلب الهيدر عمودي + تكبير الأزرار + هامش أكبر */
/* الاسم: responsive-tablet-portrait */
@media (max-width:768px){
    html{font-size:15px}
  .site-header{padding:12px 0}
  .site-header.container{flex-direction:column;text-align:center}
  .logo h1{font-size:1.1rem;margin-bottom:12px}
  .header-contact{justify-content:center;width:100%}
  .header-contact a{padding:12px 16px;font-size:.9rem;flex:1;justify-content:center;min-width:140px}
  .site-main{padding:25px 0}
  .entry-content,.page-content,.post-content {padding:20px 16px;margin:0 12px}
  .elementor-widget-text-editor,.elementor-widget-heading {padding:18px 15px;margin:0 10px 15px}
  .site-footer{padding:35px 0 20px;margin-top:40px}
  .elementor-column{gap:15px}
}
/* === نهاية كود 18: تجاوب تابلت عمودي 768px === */

/* === بداية كود 19: تجاوب موبايل كبير 576px === */
/* الوظيفة: أزرار 100% عرض + هامش ذهبي واضح */
/* الاسم: responsive-mobile-large */
@media (max-width:576px){
  .container{padding:0 12px}
  .logo h1{font-size:1rem}
  .header-contact{flex-direction:column;gap:8px}
  .header-contact a{width:100%;padding:13px 16px}
  .site-main{padding:20px 0}
  .wp-block-image{margin:15px 0}
  .entry-content,.page-content,.post-content {
       padding:18px 15px;
       margin:0 10px;
       border-right-width:3px
   }
  .elementor-widget-text-editor,.elementor-widget-heading {
       padding:16px 14px;
       margin:0 8px 12px;
       border-right-width:3px
   }
}
/* === نهاية كود 19: تجاوب موبايل كبير 576px === */

/* === بداية كود 20: تجاوب موبايل متوسط 480px === */
/* الوظيفة: تصغير الخطوط والصور + هامش مناسب */
/* الاسم: responsive-mobile-medium */
@media (max-width:480px){
    html{font-size:14px}
  .logo h1{font-size:.95rem;line-height:1.5}
  .site-footer p{font-size:.9rem}
  .footer-copyright{font-size:.85rem}
  .entry-content img{border-radius:6px}
  .entry-content,.page-content,.post-content {
       padding:16px 14px;
       margin:0 8px;
       border-radius:10px
   }
}
/* === نهاية كود 20: تجاوب موبايل متوسط 480px === */

/* === بداية كود 21: تجاوب موبايل صغير 360px === */
/* الوظيفة: ضبط نهائي لأصغر الشاشات + هامش مريح */
/* الاسم: responsive-mobile-small */
@media (max-width:360px){
  .container{padding:0 10px}
  .logo h1{font-size:.9rem}
  .header-contact a{font-size:.85rem;padding:12px 14px}
    body{line-height:1.7}
  .entry-content,.page-content,.post-content {
       padding:15px 12px;
       margin:0 6px;
       border-right-width:2px
   }
  .elementor-widget-text-editor,.elementor-widget-heading {
       padding:14px 12px;
       margin:0 6px 10px
   }
}
/* === نهاية كود 21: تجاوب موبايل صغير 360px === */