/* Blog Performance Optimizations */

/* Critical CSS for above-the-fold content */
.blog-container {
    contain: layout style paint;
}

.blog-title {
    contain: layout style;
}

.blog-image {
    contain: layout style paint;
}

/* Reduce repaints and reflows */
.blog-content,
.blog-sidebar {
    contain: layout style;
}

/* Optimize animations */
.blog-share-buttons .share-button,
.blog-back-button,
.categories-list a {
    will-change: transform;
}

/* Reduce layout thrashing */
.blog-meta,
.blog-tags {
    contain: layout;
}

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

/* Reduce memory usage for large content */
.blog-content {
    contain: layout style;
}

/* Optimize sidebar widgets */
.sidebar-widget {
    contain: layout style;
}

/* Critical rendering path optimizations */
.blog-header {
    contain: layout style;
}

.blog-navigation {
    contain: layout style;
}

.blog-comments {
    contain: layout style;
}

/* Print optimizations */
@media print {
    * {
        contain: layout style paint;
    }
    
    .blog-container {
        contain: layout style;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .blog-content {
        color: #000;
    }
    
    .blog-title {
        color: #000;
    }
    
    .blog-meta {
        color: #333;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .share-button:hover,
    .blog-back-button:hover,
    .categories-list a:hover {
        transform: none;
    }
    
    .form-input:focus,
    .form-textarea:focus {
        transition: none;
    }
}

/* Dark mode optimizations */
@media (prefers-color-scheme: dark) {
    .blog-container {
        background-color: #1a1a1a;
        color: #ffffff;
    }
    
    .blog-title {
        color: #ffffff;
    }
    
    .blog-content {
        color: #e5e5e5;
    }
    
    .blog-meta {
        color: #cccccc;
    }
    
    .blog-tag {
        background-color: #333333;
        color: #ffffff;
        border-color: #555555;
    }
    
    .form-input,
    .form-textarea {
        background-color: #333333;
        color: #ffffff;
        border-color: #555555;
    }
    
    .submit-button {
        background-color: #3b82f6;
        color: #ffffff;
    }
}