/* Performance Optimizations CSS */
/* This file contains critical optimizations for CLS and Speed Index improvements */

/* Font loading optimizations */
/* Prefer local installation of Montserrat; avoid hard-coded woff2 remote URLs that may 404.
   If you host Montserrat files locally, replace the local(...) references with url('/fonts/montserrat-*.woff2'). */
@font-face {
    font-family: 'Montserrat';
    src: local('Montserrat'), local('Montserrat-Regular');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Critical for CLS prevention */
}
+
@font-face {
    font-family: 'Montserrat';
    src: local('Montserrat Medium'), local('Montserrat-Medium');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
+
}
+
@font-face {
    font-family: 'Montserrat';
    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
+
}
+
@font-face {
    font-family: 'Montserrat';
    src: local('Montserrat Bold'), local('Montserrat-Bold');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
+
/* Layout stability improvements */
.layout-stable {
    contain: layout style paint;
}

.nav-grid {
    will-change: auto; /* Remove after initial render */

.nav-card {
    contain: layout style;
    transform: translateZ(0); /* Force GPU acceleration */
}

.verse-container {
    contain: layout;
}

.verse-text {
    min-height: 100px; /* Stable height for verse content */
}
/* Icon font fallbacks to prevent invisible text */
.nav-icon {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', 
                 'Font Awesome 6 Pro', 'FontAwesome', 
                 'Material Icons', 'Material Icons Outlined',
                 system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Optimize animations for better performance */
.nav-card:hover {
    transform: translateY(-8px) scale(1.02) translateZ(0);
    will-change: transform, box-shadow;
}

/* 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;
    }
}

/* Optimize background gradients */
.gradient-optimized {
    background: var(--gradient-hero);
    background-attachment: fixed;
    will-change: auto;
}

/* Image optimization classes */
.img-optimized {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* loading and decoding attributes should be set in HTML, not CSS */
}

/* Prevent layout shift for buttons */
.btn, .action-button, .diseño {
    min-height: 44px;
    min-width: 44px;
    box-sizing: border-box;
    contain: layout style;
}

/* Critical viewport optimizations */
@media (max-width: 768px) {
    .nav-card {
        min-height: 180px !important;
        contain: layout style paint;
    }
    
    .nav-icon {
        width: 75px !important;
        height: 75px !important;
        flex-shrink: 0;
    }
}

@media (min-width: 769px) {
    .nav-card {
        min-height: 120px !important;
        contain: layout style paint;
    }
    
    .nav-icon {
        width: 90px !important;
        height: 90px !important;
        flex-shrink: 0;
    }
}

/* Optimize fonts loading states */
.fonts-loading {
    opacity: 0.8;
}

.fonts-loaded {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Optimize critical rendering path */
.above-fold {
    contain: layout style;
}

.below-fold {
    content-visibility: auto;
    contain-intrinsic-size: 1px 1000px;
}

/* Performance hints for browsers */
.performance-hint {
    transform: translateZ(0);
    will-change: auto;
    backface-visibility: hidden;
}

/* Optimize scrolling performance */
.scroll-optimized {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Resource hints for better caching */
.preload-hint::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>');
}

/* Critical layout improvements */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
    contain: layout;
}

/* Prevent horizontal overflow */
* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    width: 100%;
}

/* Optimize backdrop filters for better performance */
.backdrop-optimized {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    will-change: auto;
}

/* Intersection Observer polyfill optimization */
.lazy-load {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.lazy-load.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Critical Web Vitals optimizations */
.cls-prevention {
    aspect-ratio: attr(width) / attr(height);
    width: 100%;
    height: auto;
}

/* Speed Index improvements */
.critical-content {
    display: block !important;
    visibility: visible !important;
}

.non-critical-content {
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
}