/**
 * Core Web Vitals Optimization
 * Prevent Cumulative Layout Shift (CLS)
 */

/* Prevent layout shifts from images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Reserve space for lazy-loaded images */
img[loading="lazy"] {
    min-height: 200px;
    background: #f0f0f0;
}

/* Prevent font loading layout shift */
body {
    font-display: swap;
}

/* Prevent hero section layout shift */
.hero-section {
    min-height: 500px;
}

@media (max-width: 768px) {
    .hero-section {
        min-height: 400px;
    }
}

/* Prevent navigation layout shift */
.main-nav {
    min-height: 70px;
}

/* Prevent footer layout shift */
.main-footer {
    min-height: 300px;
}

/* Skeleton loading for dynamic content */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

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

/* Prevent button layout shift */
.btn, .cta-btn {
    min-width: 120px;
    min-height: 44px;
}

/* Prevent form layout shift */
input, textarea, select {
    min-height: 44px;
}

/* Prevent card layout shift */
.card {
    min-height: 200px;
}

/* Ensure consistent spacing */
section {
    margin-bottom: 60px;
}

@media (max-width: 768px) {
    section {
        margin-bottom: 40px;
    }
}

/* Prevent WhatsApp CTA layout shift */
.whatsapp-cta {
    width: 60px;
    height: 60px;
}

@media (max-width: 768px) {
    .whatsapp-cta {
        width: 56px;
        height: 56px;
    }
}

/* Prevent icon layout shift */
.icon, .social-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
}

/* Prevent logo layout shift */
.logo {
    width: 150px;
    height: 50px;
}

@media (max-width: 768px) {
    .logo {
        width: 120px;
        height: 40px;
    }
}