/**
 * CLS FIX #1: CSS Fixes for stylingcv.com WordPress Theme
 * Add this to your WordPress theme's custom CSS or style.css
 *
 * Purpose: Prevent Cumulative Layout Shift by reserving space for images,
 * fixing font loading, and stabilizing dynamic content
 */

/* ===================================================================
   1. IMAGE DIMENSION FIXES - Reserve space before images load
   =================================================================== */

/* Resume template images - Common aspect ratio 8:11.32 (A4 portrait) */
img[src*="alfred-en.webp"],
img[src*="template"],
img[src*="resume"] {
  aspect-ratio: 8 / 11.32;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Ensure all images have min dimensions to prevent collapse */
img:not([width]):not([height]) {
  min-height: 200px;
  background: #f0f0f0;
}

/* Logo images - typically 200x60 */
.site-logo img,
header img[src*="logo"] {
  width: 200px;
  height: 60px;
  object-fit: contain;
}

/* Profile/Avatar images - typically square */
img[class*="avatar"],
img[class*="profile"] {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
}

/* Gallery/Portfolio images - 4:3 aspect ratio */
.gallery img,
.portfolio-item img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
}


/* ===================================================================
   2. FONT LOADING FIXES - Prevent FOIT/FOUT layout shifts
   =================================================================== */

/* Force font-display: swap for all custom fonts */
@font-face {
  font-display: swap;
}

/* Stabilize text containers during font load */
body,
h1, h2, h3, h4, h5, h6,
p, a, span {
  /* Prevent invisible text during font load */
  font-display: swap;
}

/* Reserve space for icon fonts */
[class*="icon-"],
[class*="fa-"],
.dashicons {
  display: inline-block;
  min-width: 1em;
  min-height: 1em;
}


/* ===================================================================
   3. LAZY LOADING FIXES - Prevent shift when lazy images load
   =================================================================== */

/* Images with loading="lazy" need reserved space */
img[loading="lazy"] {
  min-height: 200px;
  background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
  background-size: 200% 100%;
}

/* Shimmer effect while loading */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

img[loading="lazy"]:not([src]) {
  animation: shimmer 1.5s infinite linear;
}


/* ===================================================================
   4. DYNAMIC CONTENT FIXES - Reserve space for modals, menus, etc.
   =================================================================== */

/* Mega Menu - Reserve consistent space */
.mega-menu,
nav.main-navigation {
  min-height: 60px;
  will-change: auto; /* Prevent reflow */
}

/* AI Modal placeholder */
.ai-modal-container {
  min-height: 400px;
  contain: layout; /* Isolate layout calculations */
}

/* Language Switcher - Fixed dimensions */
.language-switcher {
  min-width: 100px;
  min-height: 40px;
}


/* ===================================================================
   5. SKELETON LOADING STYLES - Show placeholders while content loads
   =================================================================== */

/* Skeleton loader base style */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 4px;
}

/* Skeleton for text lines */
.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
  width: 100%;
}

.skeleton-text-short {
  width: 60%;
}

/* Skeleton for images */
.skeleton-image {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Skeleton for cards */
.skeleton-card {
  min-height: 300px;
  padding: 20px;
}


/* ===================================================================
   6. CONTAINER STABILIZATION - Prevent collapse/expansion
   =================================================================== */

/* Main content area - minimum height */
main,
.main-content,
#primary {
  min-height: 100vh;
}

/* Grid containers - prevent reflow */
.template-grid,
.resume-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  min-height: 500px; /* Prevent collapse before content loads */
}

/* Card containers - fixed aspect ratio */
.card,
.resume-card {
  aspect-ratio: 8 / 11.32;
  contain: layout; /* Isolate from surrounding layout */
}


/* ===================================================================
   7. TRANSFORM-BASED ANIMATIONS - Use GPU, avoid layout shifts
   =================================================================== */

/* Replace height/width animations with transform */
.expand-animation {
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 0.3s ease;
  will-change: transform;
}

.expand-animation.collapsed {
  transform: scaleY(0);
}

/* Replace left/right animations with translate */
.slide-animation {
  transform: translateX(0);
  transition: transform 0.3s ease;
  will-change: transform;
}

.slide-animation.hidden {
  transform: translateX(-100%);
}


/* ===================================================================
   8. PERFORMANCE OPTIMIZATIONS
   =================================================================== */

/* Use CSS containment for isolated components */
.resume-template,
.portfolio-item,
.blog-post {
  contain: layout style paint;
}

/* Prevent layout thrashing on scroll */
.sticky-header {
  position: sticky;
  top: 0;
  will-change: transform;
  contain: layout;
}

/* Optimize repaint areas */
.animated-element {
  will-change: transform, opacity;
  /* Never use: will-change: height, width, top, left */
}


/* ===================================================================
   9. RESPONSIVE IMAGE FIXES
   =================================================================== */

/* Prevent CLS on responsive images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Picture element stabilization */
picture {
  display: block;
  position: relative;
  min-height: 200px;
}

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


/* ===================================================================
   10. CRITICAL ABOVE-FOLD CONTENT
   =================================================================== */

/* Hero section - fixed height to prevent shift */
.hero-section,
.page-header {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Navigation - fixed height */
.site-header,
.navbar {
  height: 80px;
  display: flex;
  align-items: center;
}


/* ===================================================================
   11. THIRD-PARTY EMBEDS
   =================================================================== */

/* YouTube, Vimeo embeds - 16:9 aspect ratio */
.video-embed,
iframe[src*="youtube"],
iframe[src*="vimeo"] {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

/* Twitter embeds */
.twitter-tweet {
  min-height: 200px;
}

/* Google Maps */
.google-map,
iframe[src*="google.com/maps"] {
  aspect-ratio: 16 / 9;
  width: 100%;
}


/* ===================================================================
   12. MOBILE SPECIFIC FIXES
   =================================================================== */

@media (max-width: 768px) {
  /* Smaller skeleton heights on mobile */
  img[loading="lazy"] {
    min-height: 150px;
  }

  /* Adjust grid on mobile */
  .template-grid,
  .resume-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    min-height: 300px;
  }

  /* Mobile menu - fixed height */
  .mobile-menu {
    min-height: 50px;
  }
}


/* ===================================================================
   13. PRINT STYLES - Prevent CLS in print view
   =================================================================== */

@media print {
  /* Ensure images have dimensions for print */
  img {
    max-width: 100%;
    height: auto;
    page-break-inside: avoid;
  }
}