/**
 * Performance Optimizations CSS - MonCoachPerso
 * Version: 1.0.0
 *
 * This file contains performance-focused CSS optimizations
 * to improve Core Web Vitals (LCP, CLS, INP)
 */

/* ============================================================
   1. PREVENT LAYOUT SHIFT (CLS)
   ============================================================ */

/* Reserve space for images to prevent CLS */
img {
    height: auto;
    max-width: 100%;
}

/* Elementor images - prevent CLS */
.elementor-image img,
.elementor-widget-image img,
.elementor-post__thumbnail img,
.elementor-background-overlay {
    aspect-ratio: attr(width) / attr(height);
}

/* Reserve space for common image containers */
.elementor-widget-image {
    min-height: 1px;
}

/* Prevent font swap causing CLS */
.elementor-heading-title,
.elementor-widget-text-editor,
.elementor-button-text,
h1, h2, h3, h4, h5, h6,
p, span, a {
    font-display: swap;
}

/* ============================================================
   2. OPTIMIZE ANIMATIONS (INP)
   ============================================================ */

/* Use GPU-accelerated transforms for animations */
.elementor-invisible,
.elementor-motion-effects-element,
[data-settings*="animation"],
.animated {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .elementor-invisible {
        visibility: visible !important;
    }
}

/* ============================================================
   3. OPTIMIZE FONT LOADING
   ============================================================ */

/* Ensure font-display: swap is applied */
@font-face {
    font-display: swap !important;
}

/* Prevent FOIT (Flash of Invisible Text) */
body {
    font-display: swap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
}

/* ============================================================
   4. OPTIMIZE RENDERING
   ============================================================ */

/* Optimize paint performance for fixed/sticky elements */
.elementor-sticky,
.elementor-sticky--active,
[data-elementor-sticky],
header.elementor-sticky,
.e-sticky,
.sticky-header {
    will-change: transform;
    transform: translateZ(0);
    contain: layout style;
}

/* Content-visibility for off-screen sections (modern browsers) */
.elementor-section:not(:first-child),
.elementor-container:not(:first-child) {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* ============================================================
   5. OPTIMIZE MOBILE PERFORMANCE
   ============================================================ */

@media (max-width: 767px) {
    /* Simplify shadows on mobile */
    .elementor-widget-image-box,
    .elementor-widget-icon-box,
    .elementor-widget-button,
    .elementor-post,
    .elementor-portfolio-item {
        box-shadow: none !important;
    }

    /* Reduce animation complexity on mobile */
    .elementor-motion-effects-element {
        transform: none !important;
    }

    /* Disable parallax on mobile for performance */
    [data-elementor-settings*="background_motion_fx"],
    .elementor-motion-effects-parent {
        background-attachment: scroll !important;
    }

    /* Optimize touch scrolling */
    .elementor-section,
    .elementor-container {
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   6. LAZY LOADING OPTIMIZATION
   ============================================================ */

/* Fade in lazy-loaded images */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

img[loading="lazy"].loaded,
img[loading="lazy"][src]:not([src=""]) {
    opacity: 1;
}

/* Background for images while loading */
.elementor-widget-image img[loading="lazy"]:not(.loaded) {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
}

/* ============================================================
   7. OPTIMIZE SLIDERS/CAROUSELS
   ============================================================ */

/* Optimize Swiper slider performance */
.swiper-container,
.swiper,
.elementor-swiper {
    will-change: transform;
    transform: translateZ(0);
}

.swiper-slide {
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Hide non-active slides to improve performance */
.swiper-slide:not(.swiper-slide-active):not(.swiper-slide-next):not(.swiper-slide-prev) {
    visibility: hidden;
}

/* ============================================================
   8. COOKIE BANNER OPTIMIZATION
   ============================================================ */

/* Ensure cookie banner doesn't cause CLS */
.cmplz-cookiebanner,
.cookie-notice-container,
#cookie-notice,
.complianz-notice {
    position: fixed !important;
    contain: layout style paint;
}

/* ============================================================
   9. ABOVE THE FOLD OPTIMIZATION
   ============================================================ */

/* Critical above-the-fold content */
.elementor-section:first-child,
.elementor-section.elementor-element[data-element_type="section"]:first-of-type {
    contain: none;
    content-visibility: visible;
}

/* ============================================================
   10. BUTTON/INTERACTION OPTIMIZATION
   ============================================================ */

/* Optimize button hover states */
.elementor-button,
.elementor-widget-button a,
a.elementor-button {
    will-change: background-color, color, transform;
    transform: translateZ(0);
}

/* Reduce expensive hover effects */
.elementor-button:hover,
.elementor-widget-button a:hover {
    transform: translateZ(0);
}

/* ============================================================
   11. ICON OPTIMIZATION
   ============================================================ */

/* Optimize icon rendering */
.elementor-icon,
.elementor-icon i,
[class*="fa-"],
[class*="eicon-"] {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
}

/* ============================================================
   12. FORM OPTIMIZATION
   ============================================================ */

/* Optimize Elementor form inputs */
.elementor-form input,
.elementor-form textarea,
.elementor-form select {
    will-change: border-color, box-shadow;
}

/* ============================================================
   13. VIDEO OPTIMIZATION
   ============================================================ */

/* Lazy load video backgrounds */
.elementor-background-video-container {
    contain: strict;
}

.elementor-background-video-container video,
.elementor-background-video-container iframe {
    will-change: transform;
}

/* ============================================================
   14. SCROLL OPTIMIZATION
   ============================================================ */

/* Smooth scroll only when needed */
html {
    scroll-behavior: auto;
}

@media (prefers-reduced-motion: no-preference) {
    html:focus-within {
        scroll-behavior: smooth;
    }
}

/* ============================================================
   15. PRINT STYLES (Reduce unnecessary rendering)
   ============================================================ */

@media print {
    .elementor-motion-effects-element,
    .animated,
    [data-settings*="animation"] {
        animation: none !important;
        transform: none !important;
    }
}