/* Performance Optimizations CSS */

/* Critical CSS - Load immediately */
.critical-styles {
    /* Essential styles for above-the-fold content */
    .header, .main-menu, .logo {
        display: block;
        visibility: visible;
    }
}

/* Lazy loading styles */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.lazy-load.loaded {
    opacity: 1;
}

/* Image optimization */
img {
    max-width: 100%;
    height: auto;
    loading: lazy;
}

/* Font optimization */
/* Ensure Font Awesome fonts use swap to avoid FOIT */
@font-face {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/themes/riorelax/webfonts/fa-light-300.woff2') format('woff2'),
         url('/themes/riorelax/webfonts/fa-light-300.woff') format('woff');
}

@font-face {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/themes/riorelax/webfonts/fa-regular-400.woff2') format('woff2'),
         url('/themes/riorelax/webfonts/fa-regular-400.woff') format('woff');
}

@font-face {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/themes/riorelax/webfonts/fa-solid-900.woff2') format('woff2'),
         url('/themes/riorelax/webfonts/fa-solid-900.woff') format('woff');
}

@font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/themes/riorelax/webfonts/fa-brands-400.woff2') format('woff2'),
         url('/themes/riorelax/webfonts/fa-brands-400.woff') format('woff');
}

/* Also map Free family to the same files where applicable */
@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/themes/riorelax/webfonts/fa-solid-900.woff2') format('woff2'),
         url('/themes/riorelax/webfonts/fa-solid-900.woff') format('woff');
}

/* Reduce layout shifts */
.aspect-ratio {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.aspect-ratio img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Optimize animations */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Critical above-the-fold styles */
.hero-section {
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Optimize button styles */
.btn {
    transition: all 0.2s ease;
    will-change: transform;
}

.btn:hover {
    transform: translateY(-1px);
}

/* Optimize navigation */
.main-menu {
    will-change: transform;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .lazy-load {
        opacity: 1; /* Disable lazy loading on mobile for better UX */
    }
    
    /* Reduce animations on mobile */
    * {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
}