/**
 * CLS FIX STYLESHEET - OPTIMIZED
 * 
 * Minimal, performance-optimized styles to prevent Cumulative Layout Shift
 * Only includes essential fixes without performance overhead
 */

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

/* Use system fonts - instant load, very similar to Roboto */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}

/* Web fonts only for headings (non-blocking) */
h1, h2, h3, h4, h5, h6, .btn, .widget-title {
  font-family: 'Varela Round', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* Bold text */
strong, b, .bold {
  font-weight: 700;
}

/* ========================================
   CRITICAL: PREVENT IMAGE LAYOUT SHIFTS
   ======================================== */

/* ALL images maintain aspect ratio and never cause shifts */
img.img-responsive {
  height: auto;
  max-width: 100%;
  display: block;
}

/* Flexslider and gallery containers - CRITICAL: Reserve exact space before images load */
.gallery-slider-two.flexslider {
  position: relative;
  width: 100%;
  min-height: 267px; /* Match image aspect ratio 400x267 */
  background-color: #f5f5f5;
  overflow: hidden;
}

.gallery-slider-two.flexslider .slides {
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 267px;
}

.gallery-slider-two.flexslider .slides > li {
  position: relative;
  width: 100%;
  min-height: 267px;
  background-color: #f5f5f5;
}

.gallery-slider-two.flexslider .slides > li a {
  display: block;
  width: 100%;
  min-height: 267px;
}

.gallery-slider-two.flexslider .slides > li img {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  display: block;
}

/* Override flexslider draggable styles that cause CLS */
.gallery-slider-two.flexslider img[draggable] {
  -webkit-user-drag: none;
  user-select: none;
}

/* ========================================
   IMAGE CONTAINERS - FIXED ASPECT RATIOS
   ======================================== */

/* Property card images - 3:2 ratio */
.property-card-image {
  aspect-ratio: 3 / 2;
  position: relative;
  background-color: #f5f5f5;
  overflow: hidden;
}

.property-card-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   LAZY LOADING IMAGES
   ======================================== */

/* Reserve space before image loads - shimmer effect */
img[loading="lazy"]:not([src]) {
  background: linear-gradient(90deg, #f5f5f5 25%, #e0e0e0 50%, #f5f5f5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Images with explicit dimensions never shift */
img[width][height] {
  height: auto;
}

/* ========================================
   EXPLICIT DIMENSIONS
   ======================================== */

/* Header - prevent shifts */
.site-header,
.main-header {
  min-height: 80px;
}

/* Footer - consistent height */
.site-footer {
  min-height: 200px;
}

/* Property cards and listings - consistent height */
.property-card,
.property-listing-grid,
.post-for-grid {
  min-height: 450px;
}

/* Property thumbnail container - fixed dimensions */
.property-thumbnail {
  position: relative;
  overflow: hidden;
}

/* Title and meta section - prevent shifts */
.title-and-meta {
  min-height: 180px;
}

/* Description text - fixed height to prevent shifts */
.lessormore {
  min-height: 90px;
  overflow: hidden;
}

/* Property title wrapper - CRITICAL for detail pages */
.property-title-wrapper {
  min-height: 500px;
}

.property-title-wrapper .single-property-wrapper {
  min-height: 450px;
}

/* Detail page specific - prevent CLS on property pages */
.container-property-single {
  min-height: 1200px;
}

.property-single-content {
  min-height: 800px;
}

/* Flexslider on detail pages - critical for LCP and CLS */
.single-property-slider1,
#slider.flexslider {
  min-height: 600px;
  background-color: #f5f5f5;
}

.single-property-slider1 .slides,
#slider.flexslider .slides {
  min-height: 600px;
}

/* Override flexslider visibility issues */
.flexslider .slides:after {
  visibility: hidden !important;
  display: block !important;
  content: "" !important;
  clear: both !important;
  height: 0 !important;
  line-height: 0 !important;
}

/* Ensure images maintain dimensions */
.flexslider img[width][height] {
  max-width: 100%;
  height: auto;
}

/* Prevent drag-related CLS */
.flexslider img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Zero padding utility - ensure no unexpected shifts */
.zero-horizontal-padding {
  padding-left: 0;
  padding-right: 0;
}

/* Header mobile logo container */
.hidden-md.hidden-lg {
  min-height: 45px;
  display: flex;
  align-items: center;
}

/* Buttons - fixed heights */
.btn {
  min-height: 44px;
}

.btn-sm {
  min-height: 36px;
}

.btn-lg {
  min-height: 52px;
}

/* Form controls */
.form-control {
  min-height: 44px;
}

/* ========================================
   SKELETON LOADERS
   ======================================== */

.skeleton-image {
  aspect-ratio: 3 / 2;
  background-color: #f5f5f5;
}

.skeleton-property-card {
  min-height: 450px;
}

/* ========================================
   PREVENT SCROLLBAR SHIFTS
   ======================================== */

/* Modern approach - reserve scrollbar space */
html {
  scrollbar-gutter: stable;
}

/* Fallback for older browsers */
@supports not (scrollbar-gutter: stable) {
  html {
    overflow-y: scroll;
  }
}

/* ========================================
   CUSTOM ANIMATIONS (replaces animate.css)
   ======================================== */

/* Fade in from left */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from bottom */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animations */
.fade-in-left.animated {
  animation: fadeInLeft 0.8s ease-out;
}

.fade-in-up.animated {
  animation: fadeInUp 0.8s ease-out;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none !important;
  }
}