/**
 * تحسينات الأداء وإصلاح CLS
 *
 * @package Nadiim
 * @since 1.0.0
 */

/* =================================================================
   منع CLS - Cumulative Layout Shift
   ================================================================= */

/**
 * إضافة أبعاد ثابتة للعناصر التي قد تسبب CLS
 */

/* الصور */
img {
    max-width: 100%;
    height: auto;
    /* منع layout shift عند التحميل */
    aspect-ratio: attr(width) / attr(height);
}

/* الصور المميزة */
.post-thumbnail img,
.hero-slide-card img,
.review-card img,
.howarat-card img {
    width: 100%;
    height: auto;
    display: block;
}

/* Hero Slider - ارتفاع ثابت لمنع CLS */
.hero-swiper {
    min-height: var(--hero-height, 600px);
}

@media screen and (max-width: 768px) {
    .hero-swiper {
        min-height: var(--hero-height-mobile, 420px);
    }
}

/* منع CLS في البطاقات */
.review-card,
.howarat-card,
.esdar-card {
    min-height: 300px;
}

/* منع CLS في السكشنات */
section {
    min-height: fit-content;
    contain: layout; /* تحسين الأداء */
}

/* =================================================================
   تحسين تحميل الخطوط
   ================================================================= */

/* منع FOIT/FOUT - Flash of Invisible/Unstyled Text */
body {
    font-display: swap; /* أو optional */
}

/* Fallback fonts واضحة */
body {
    font-family: var(--font-primary), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* =================================================================
   تحسين السرعة - Content Visibility
   ================================================================= */

/**
 * استخدام content-visibility للعناصر خارج الشاشة
 * يحسن الأداء بشكل كبير
 */

/* الأقسام السفلية */
.site-footer,
.comments-area,
section:not(:first-of-type) {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* البطاقات البعيدة */
.review-card:nth-child(n+7),
.howarat-card:nth-child(n+7),
.esdar-card:nth-child(n+7) {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
}

/* =================================================================
   منع Reflow - تثبيت أحجام العناصر
   ================================================================= */

/* الأزرار */
.btn,
.cta-button,
.more-button {
    min-height: 48px; /* حجم ثابت */
}

/* الأيقونات */
svg,
.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    flex-shrink: 0;
}

/* النجوم */
.star-icon,
.star-filled,
.star-empty {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* =================================================================
   تحسين Animations - سلاسة الحركة
   ================================================================= */

/**
 * استخدام will-change بحذر للعناصر المتحركة فقط
 */

.swiper-slide {
    will-change: transform;
}

.cta-button:hover {
    will-change: transform;
}

/* إزالة will-change بعد انتهاء التفاعل */
.swiper-slide:not(.swiper-slide-active) {
    will-change: auto;
}

/* =================================================================
   تحسين العرض - Rendering Performance
   ================================================================= */

/**
 * استخدام transform و opacity للانيميشن بدلاً من properties أخرى
 */

/* الانيميشن باستخدام transform فقط */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* منع repaint غير ضروري */
.hero-slide-card,
.review-card,
.howarat-card {
    transform: translateZ(0); /* GPU acceleration */
    backface-visibility: hidden;
}

/* =================================================================
   Skeleton Screens - تحسين التجربة أثناء التحميل
   ================================================================= */

/**
 * إظهار placeholders أثناء تحميل الصور
 */

/* Placeholder للصور */
img[loading="lazy"] {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* إزالة التأثير بعد التحميل */
img[loading="lazy"].loaded {
    animation: none;
    background: none;
}

/* =================================================================
   تحسين الأداء على الموبايل
   ================================================================= */

@media screen and (max-width: 768px) {

    /* تقليل complexity على الموبايل */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* تسريع scroll */
    body {
        -webkit-overflow-scrolling: touch;
    }

    /* تحسين hover على الموبايل */
    @media (hover: none) {
        .cta-button:hover,
        .review-card:hover,
        .howarat-card:hover {
            transform: none;
        }
    }
}

/* =================================================================
   تحسين Swiper Performance
   ================================================================= */

/* تحسين أداء Swiper */
.swiper {
    overflow: hidden;
    /* استخدام GPU acceleration */
    transform: translate3d(0, 0, 0);
}

.swiper-wrapper {
    transform-style: preserve-3d;
}

.swiper-slide {
    /* تقليل repaint */
    transform: translate3d(0, 0, 0);
}

/* =================================================================
   Preload Critical Assets - LCP Optimization
   ================================================================= */

/**
 * هذه التحسينات تتم في HTML head
 * ولكن نضيف CSS لدعمها
 */

/* تحسين عرض أول محتوى */
.hero-slider-section {
    /* أولوية عالية للعرض */
    contain: layout style;
}

/* الصور المهمة */
.hero-slide-card img {
    /* fetchpriority="high" يتم إضافته في PHP */
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* =================================================================
   تحسين Font Loading
   ================================================================= */

/**
 * منع FOIT باستخدام font-display: swap
 * يتم تطبيقه عبر Google Fonts API
 */

/* Local fallback fonts */
@font-face {
    font-family: 'Cairo-fallback';
    src: local('Arial'), local('Tahoma');
    font-display: swap;
    size-adjust: 95%;
}

/* =================================================================
   Critical CSS Inline - Above the Fold
   ================================================================= */

/**
 * هذه الأنماط يجب أن تكون inline في <head>
 * للصفحات المهمة (Hero, Header, etc)
 */

/* سنضيف critical CSS في ملف منفصل */

/* =================================================================
   Resource Hints Support
   ================================================================= */

/**
 * دعم preconnect و prefetch
 * يتم التعامل معها في PHP functions.php
 */