/* 
* Mobile Fixes CSS 
* إصلاحات خاصة للموبايل لضمان العرض السليم للمحتوى
*/

/* إصلاح عرض البطاقات على الموبايل */
@media (max-width: 767px) {
    /* تحسين ظهور التأثيرات الحركية على الأجهزة المحمولة */
    [data-aos] {
        /* إزالة التعطيل للسماح بعمل التأثيرات الحركية */
        /* لن نقوم بتعطيل التأثيرات الحركية */
        pointer-events: auto; /* ضمان إمكانية التفاعل مع العناصر */
    }
    
    /* تحسين التأثيرات الحركية على الجوال */
    [data-aos=fade-up], 
    [data-aos=fade-down], 
    [data-aos=fade-left], 
    [data-aos=fade-right], 
    [data-aos=zoom-in] {
        transition-duration: 0.5s !important; /* تسريع مدة الحركة */
        transition-timing-function: ease-out !important;
    }
    
    /* ضمان عرض كامل لبطاقات الخدمات */
    .service-card {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        overflow: visible;
        padding: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* ضمان مركزية وظهور الأيقونات بشكل كامل */
    .icon-box {
        margin: 0 auto 15px auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* إصلاح محاذاة النص في بطاقات الخدمات */
    .service-card h3 {
        text-align: center;
        width: 100%;
    }
    
    .service-card p {
        text-align: justify;
        text-justify: inter-word;
        width: 100%;
    }
    
    /* معالجة مشكلة التداخل مع الهيدر بشكل كامل */
    body {
        padding-top: 80px; /* إضافة مسافة للجسم بأكمله للتعويض عن الهيدر الثابت */
    }
    
    /* إصلاح محاذاة صفحة الهيرو ومنع التداخل مع الهيدر */
    .hero-section {
        padding-top: 60px !important; /* تقليل المسافة العلوية لأننا أضفنا بالفعل مسافة للجسم */
        margin-top: 0 !important; /* إلغاء أي هوامش قد تسبب مشاكل */
        min-height: calc(100vh - 80px); /* ارتفاع الشاشة مع مراعاة ارتفاع الهيدر */
        position: relative;
        z-index: 1;
        overflow: visible; /* التأكد من عدم قطع المحتوى */
    }
    
    /* تحسين موضع الهيدر وتستيله */
    header, .navbar {
        position: fixed !important;
        width: 100%;
        z-index: 9999; /* قيمة أعلى للتأكد من أنه فوق جميع العناصر */
        top: 0;
        left: 0;
        right: 0;
        background-color: var(--gray-dark) !important; /* استخدام لون الرمادي الداكن من هوية الشركة */
        height: 80px; /* تثبيت ارتفاع الهيدر */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* إضافة ظل لتحسين المظهر */
    }
    
    /* ضبط المسافة بين الشعار والعناصر الأخرى في الهيدر */
    .navbar-brand {
        padding: 5px 0;
    }
    
    .hero-content {
        padding: 0 15px;
        width: 100%;
        margin: 0 auto; /* إلغاء الهامش الإضافي لأننا أضفنا مسافة للجسم بشكل شامل */
        position: relative;
        top: 50px; /* تحريك المحتوى للأسفل قليلاً */
    }
    
    .hero-content .hero-title {
        text-align: center;
    }
    
    .hero-content .hero-subtitle {
        text-align: justify;
        text-justify: inter-word;
    }
    
    /* تحسينات إضافية للهيدر ومحتوى الصفحة الرئيسية */
    .navbar-brand img {
        max-height: 50px; /* تقليل حجم الشعار قليلاً */
        margin: 5px 0;
    }
    
    /* إصلاح التنقل بين اللغات وزر القائمة */
    .language-switcher, .menu-toggle-btn {
        margin: 0 5px;
        z-index: 10000; /* ضمان أن هذه الأزرار تعمل */
    }
    
    /* تصحيح أوضاع القسم الرئيسي بأكمله */
    main, .main-content {
        padding-top: 80px; /* تأكيد أن جميع أقسام المحتوى لا تتداخل مع الهيدر */
    }
    
    /* ضمان عرض كامل للصورة في قسم About */
    .about-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    
    /* تحسين عرض البطاقات في قسم المشاريع */
    .project-card {
        width: 100%;
        overflow: hidden;
    }
    
    /* تحسين محاذاة العناصر ضمن الحاويات */
    .container {
        padding-left: 15px;
        padding-right: 15px;
        overflow-x: hidden;
    }
    
    /* تصحيح الهوامش للصفوف والأعمدة */
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    /* إصلاح عرض الصفحة بالكامل */
    body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    /* إصلاحات للخط الزمني في عرض الموبايل */
    .timeline-section {
        padding: 40px 0;
        overflow: visible;
    }
    
    .timeline::before {
        left: 25px !important;
        right: auto !important;
    }
    
    html[dir="rtl"] .timeline::before {
        right: 25px !important;
        left: auto !important;
    }
    
    .timeline-item {
        flex-direction: column;
        margin-bottom: 50px;
        padding-top: 30px;
        position: relative;
    }
    
    .timeline-year {
        position: absolute;
        top: 0;
        left: 25px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 14px !important;
        transform: translateX(-50%) !important;
        z-index: 2;
        margin-bottom: 15px;
    }
    
    html[dir="rtl"] .timeline-year {
        left: auto !important;
        right: 25px !important;
        transform: translateX(50%) !important;
    }
    
    /* أسلوب موحد لجميع عناصر الخط الزمني على الموبايل */
    .timeline-content {
        width: calc(100% - 60px) !important;
        margin-top: 30px;
        margin-left: 45px !important;
        margin-right: 0 !important;
        padding: 20px !important;
        position: relative;
        z-index: 1;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
    }
    
    .timeline-content h3,
    .timeline-content h4 {
        text-align: left !important;
    }
    
    .timeline-content p {
        text-align: justify !important;
        text-justify: inter-word;
    }
    
    html[dir="rtl"] .timeline-content {
        margin-left: 0 !important;
        margin-right: 45px !important;
    }
    
    html[dir="rtl"] .timeline-content h3,
    html[dir="rtl"] .timeline-content h4 {
        text-align: right !important;
    }
    
    html[dir="rtl"] .timeline-content p {
        text-align: justify !important;
        text-justify: inter-word;
    }
    
    /* إلغاء التناوب في عرض الموبايل للمحافظة على التنسيق */
    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {
        margin-left: 45px !important;
        margin-right: 0 !important;
    }
    
    .timeline-item:nth-child(odd) .timeline-content h3,
    .timeline-item:nth-child(odd) .timeline-content h4,
    .timeline-item:nth-child(even) .timeline-content h3,
    .timeline-item:nth-child(even) .timeline-content h4 {
        text-align: left !important;
    }
    
    html[dir="rtl"] .timeline-item:nth-child(odd) .timeline-content,
    html[dir="rtl"] .timeline-item:nth-child(even) .timeline-content {
        margin-left: 0 !important;
        margin-right: 45px !important;
    }
    
    html[dir="rtl"] .timeline-item:nth-child(odd) .timeline-content h3,
    html[dir="rtl"] .timeline-item:nth-child(odd) .timeline-content h4,
    html[dir="rtl"] .timeline-item:nth-child(even) .timeline-content h3,
    html[dir="rtl"] .timeline-item:nth-child(even) .timeline-content h4 {
        text-align: right !important;
    }
    
    /* إخفاء جميع النقاط */
    .timeline-dot, 
    .timeline-item:nth-child(even) .timeline-dot,
    html[dir="rtl"] .timeline-item:nth-child(even) .timeline-dot {
        display: none !important;
    }
    
    /* تحسين عرض قائمة التنقل على الموبايل */
    .navbar-brand img {
        max-height: 40px;
    }
    
    /* تحسين عرض القائمة عند فتحها */
    .fullscreen-menu .menu-content {
        width: 100%;
        padding: 20px;
    }
}