/* Performance Optimization CSS - Fix Lighthouse Issues */

/* 1. FIX LAYOUT SHIFTS (CLS) */
/* Prevent any layout shifts by forcing dimensions */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Force explicit dimensions for all images */
.info-icon img {
    width: 120px !important;
    height: 120px !important;
    object-fit: cover;
    aspect-ratio: 1/1;
}

/* Reserve space for images before they load */
img[width][height] {
    aspect-ratio: attr(width) / attr(height);
}

/* Container stability */
.container {
    min-height: 100vh;
    will-change: auto;
}

.calculator-grid {
    contain: layout style;
}

.calculator-item {
    contain: layout style;
    min-height: 120px; /* Reserve space */
}

/* 2. IMPROVE FONT LOADING */
/* Font loading is handled by Google Fonts with display=swap */

/* 3. REDUCE MAIN THREAD BLOCKING */
/* Use CSS containment to reduce layout calculations */
.info-section {
    contain: layout style;
}

.service-header {
    contain: layout style;
}

/* 4. OPTIMIZE CRITICAL RENDERING PATH */
/* Above-the-fold content optimization */
.intro-section {
    contain: layout;
}

.main-services {
    contain: layout;
}

/* 5. IMPROVE CONTRAST (ACCESSIBILITY) */
/* Fix contrast ratios */
.calculator-item p {
    color: #555555 !important; /* Improved contrast */
}

.intro-section p {
    color: #444444 !important; /* Better contrast */
}

.classic-list li {
    color: #333333 !important;
}

/* 6. MOBILE PERFORMANCE OPTIMIZATIONS */
@media (max-width: 768px) {
    /* Reduce complexity on mobile */
    .calculator-item {
        will-change: auto;
        transform: none;
    }
    
    .calculator-item:hover {
        transform: none; /* Disable hover effects on mobile */
    }
    
    /* Optimize mobile layout */
    .calculator-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .info-icon img {
        width: 80px !important;
        height: 80px !important;
    }
}

/* 7. REDUCE UNUSED CSS */
/* Only load necessary styles */
.calculator-item.premium .price-label {
    background: #28a745;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

/* 8. OPTIMIZE ANIMATIONS */
/* Use transform instead of layout-triggering properties */
.calculator-item {
    transform: translateZ(0); /* Create new layer */
    transition: transform 0.2s ease;
}

.calculator-item:hover {
    transform: translateY(-2px) translateZ(0);
}

/* 9. PREVENT LAYOUT THRASHING */
/* Isolate layout changes */
.calculator-item,
.info-section {
    isolation: isolate;
}

/* 10. WEB VITALS OPTIMIZATION */
/* Optimize for Core Web Vitals */
html {
    scroll-behavior: smooth;
}

/* Critical path optimization */
.above-fold {
    contain: layout style paint;
}

/* Lazy loading optimization */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded {
    opacity: 1;
}