/* Speed Optimization Stylesheet for Kristeve Solar World */

/* ===== CRITICAL CSS FOR ABOVE-THE-FOLD CONTENT ===== */

/* Preload critical fonts */
@font-face {
  font-family: 'Poppins';
  font-display: swap;
  src: url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
}

@font-face {
  font-family: 'Playfair Display';
  font-display: swap;
  src: url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&display=swap');
}

/* ===== IMAGE OPTIMIZATION ===== */

/* Lazy loaded image styles */
img[loading="lazy"] {
  opacity: 0;
  animation: fade-in 0.3s ease-in forwards 0.1s;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

@keyframes fade-in {
  to { opacity: 1; }
}

/* Background image optimization */
.hero-slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: background-image;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Enable hardware acceleration */
.hero-slide,
.feature-card,
.btn,
.premium-icon,
[data-bg-image] {
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
  transform: translateZ(0);
}

/* Reduce repaints */
* {
  backface-visibility: hidden;
}

/* ===== FONT OPTIMIZATION ===== */

/* Use system fonts while custom fonts load */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Fallback until Poppins loads */
.brand,
.nav-main,
.section-header,
.feature-card h3 {
  font-family: 'Poppins', system-ui, sans-serif;
}

/* ===== CRITICAL PATH OPTIMIZATION ===== */

/* Above-the-fold content */
.site-header,
.hero-slider,
.hero-slide.active {
  min-height: auto;
  contain: paint;
}

/* ===== ANIMATION PERFORMANCE ===== */

/* Use transform and opacity for smooth 60fps animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translate3d(-50px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Reduce animation duration for better performance */
.feature-card {
  animation: fadeInUp 0.4s ease-in-out;
}

/* ===== RENDERING OPTIMIZATION ===== */

/* Contain layout recalculations */
.section,
.container,
.footer-content {
  contain: layout style paint;
}

/* Use CSS Grid efficiently */
@media (max-width: 768px) {
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ===== CRITICAL CSS - LOAD FIRST ===== */

/* Essential button styles */
.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, #D4600A 0%, #FF8C00 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(212, 96, 10, 0.3);
}

/* ===== PRINT OPTIMIZATION ===== */
@media print {
  /* Disable animations and transitions for print */
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== REDUCE CUMULATIVE LAYOUT SHIFT (CLS) ===== */

/* Reserve space for hero slider */
.hero-slider {
  aspect-ratio: 16 / 6;
  overflow: hidden;
}

/* Reserve space for images */
img {
  aspect-ratio: attr(width) / attr(height);
}

/* Prevent layout shift from modal loading */
.modal {
  contain: paint;
}

/* ===== REDUCE FIRST CONTENTFUL PAINT (FCP) ===== */

/* Prioritize critical content rendering */
.hero-slide.active {
  opacity: 1;
  visibility: visible;
}

.hero-slide:not(.active) {
  opacity: 0;
  visibility: hidden;
}

/* ===== OPTIMIZE SCROLLING PERFORMANCE ===== */

/* Use passive event listeners (handled via JS)  */
.scrollable {
  will-change: scroll-position;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}

/* Optimize hover states */
@media (hover: hover) {
  .feature-card:hover {
    transform: translateY(-8px);
  }
}

@media (hover: none) {
  /* Disable hover animations on touch devices */
  .feature-card:active {
    transform: translateY(-4px);
  }
}

/* ===== OPTIMIZE THIRD-PARTY SCRIPTS ===== */

/* Isolate third-party content */
iframe,
[class*="ad-"],
[class*="tracking-"],
.social-plugin {
  contain: strict;
}

/* ===== NETWORK OPTIMIZATION ===== */

/* Reduce request payload */
@media (max-width: 480px) {
  /* Simplify complex backgrounds for mobile */
  .hero-slide {
    background-attachment: scroll; /* Prevent fixed attachment on mobile */
  }
}

/* ===== PREVENT LAYOUT JANK ===== */

/* Stabilize font metrics */
body {
  font-display: swap;
}

h1, h2, h3, h4, h5, h6 {
  font-display: swap;
}

/* ===== PREFETCH/PRECONNECT RESOURCES ===== */

/* Handled via JS in performance-optimize.js */

/* ===== OPTIMIZE COLOR RENDERING =====  */

/* Reduce memory usage for colors */
:root {
  --primary: #D4600A;
  --accent: #FF8C00;
  --dark: #1F1F1F;
  --light: #F9FAFB;
  --border: #E0E0E0;
}

/* ===== OPTIMIZE BOX MODEL ===== */

/* Use border-box for simpler calculations */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ===== MOBILE OPTIMIZATION ===== */

/* Faster touch response */
button,
a,
input {
  touch-action: manipulation;
}

/* Prevent zooming on double-tap */
input,
button {
  font-size: 16px; /* Prevents zoom on iOS */
}

/* ===== CRITICAL INLINE STYLES ===== */

/* Inline critical CSS above the fold to eliminate render-blocking */

/* Hero Section Critical Styles */
.hero-slider {
  background-color: #1F1F1F;
  position: relative;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-slide.active {
  opacity: 1;
}

/* ===== LAZY LOAD DEFER CSS ===== */

/* Styles for deferred loading - load async */

.sidebar-widget,
.related-posts,
.comments-section {
  /* These can be deferred */
  contain: content;
}