/**
 * CLS (Cumulative Layout Shift) Optimization
 * This file contains critical CSS to prevent layout shifts
 */

/* Font Loading Optimization - Prevent FOIT/FOUT */
@font-face {
  font-family: 'tiefonticon';
  src: url('../fonts/tielabs-fonticon/tielabs-fonticon.ttf?ciufdj') format('truetype'),
       url('../fonts/tielabs-fonticon/tielabs-fonticon.woff?ciufdj') format('woff'),
       url('../fonts/tielabs-fonticon/tielabs-fonticon.svg?ciufdj#tielabs-fonticon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Changed from block to swap for better CLS */
}

/* Reserve space for images to prevent layout shift */
img {
  height: auto;
  max-width: 100%;
}

/* Prevent layout shift for lazy-loaded images */
img[loading="lazy"] {
  min-height: 200px;
  background: #f0f0f0;
}

/* Reserve space for post thumbnails */
.post-thumbnail,
.post-thumb {
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
}

.post-thumbnail::before,
.post-thumb::before {
  content: '';
  display: block;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

.post-thumbnail img,
.post-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Prevent layout shift for header */
.site-header,
.theme-header {
  min-height: 80px;
}

/* Logo container size reservation */
.logo-container {
  min-height: 60px;
}

.logo img {
  max-height: 60px;
  width: auto;
  height: auto;
}

/* Navigation menu height reservation */
.main-nav,
#main-nav {
  min-height: 50px;
}

/* Prevent layout shift for breaking news */
.breaking-news,
.ticker-wrapper {
  min-height: 40px;
}

/* Reserve space for sliders */
.slider-area,
.tie-slider-wrapper,
.featured-area {
  position: relative;
  background: #f5f5f5;
}

.slider-area::before,
.tie-slider-wrapper::before {
  content: '';
  display: block;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

/* Prevent layout shift for widgets */
.widget {
  min-height: 50px;
}

/* Reserve space for ads to prevent layout shift */
.e3lan-top,
.e3lan-bottom,
.e3lan-post,
.e3lan-widget {
  min-height: 90px;
  background: #f9f9f9;
  display: block;
}

/* Prevent layout shift for social icons */
.social-icons-widget,
.social-icons {
  min-height: 40px;
}

/* Prevent layout shift for footer */
.site-footer,
#footer {
  min-height: 100px;
}

/* Prevent layout shift for comments section */
#comments {
  min-height: 100px;
}

/* Prevent layout shift for search form */
.search-form {
  min-height: 40px;
}

/* Prevent layout shift for mobile menu */
#mobile-menu {
  min-height: 50px;
}

/* Optimize font awesome icons loading */
.fa, .fas, .far, .fal, .fab {
  font-display: swap;
}

/* Prevent layout shift for post content */
.entry-content {
  min-height: 200px;
}

/* Reserve space for featured posts */
.featured-posts-area {
  min-height: 300px;
}

/* Prevent layout shift for category blocks */
.mag-box {
  min-height: 250px;
}

/* Optimize web font loading */
body {
  font-display: swap;
}

/* Prevent layout shift for sidebar */
#sidebar,
.sidebar {
  min-height: 500px;
}

/* Prevent layout shift for post meta */
.post-meta {
  min-height: 30px;
}

/* Prevent layout shift for pagination */
.pagination,
.pages-numbers {
  min-height: 50px;
}

/* Prevent layout shift for breadcrumbs */
.breadcrumb,
.tie-breadcrumb {
  min-height: 30px;
}

/* Optimize iframe loading (YouTube, etc.) */
iframe {
  max-width: 100%;
}

.fluid-width-video-wrapper,
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.fluid-width-video-wrapper iframe,
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Prevent layout shift for related posts */
.related-posts {
  min-height: 200px;
}

/* Prevent layout shift for author box */
.author-box {
  min-height: 150px;
}

/* Optimize Google Fonts loading */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-display: swap;
}

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-display: swap;
}

/* Prevent layout shift for mega menu */
.mega-menu {
  min-height: 200px;
}

/* Prevent layout shift for sticky sidebar */
.theiaStickySidebar {
  min-height: 300px;
}

/* Prevent layout shift for live search */
#autocomplete-suggestions {
  min-height: 100px;
}

/* Critical CSS for above-the-fold content */
.container {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Prevent layout shift for WooCommerce elements */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  min-height: 50px;
}

/* Optimize animation performance */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent layout shift for loading states */
.is-loading {
  min-height: 200px;
  background: #f5f5f5;
}

/* Optimize will-change for animations */
.slider-area,
.tie-slider-wrapper,
.featured-area,
.mega-menu {
  will-change: auto;
}

/* Remove will-change after animation */
.animated {
  will-change: transform, opacity;
}

.animated.done {
  will-change: auto;
}