/* ============================================
   CLS (Cumulative Layout Shift) Prevention
   Enhanced fixes for zero layout shifts
   ============================================ */

/* 1. FONT LOADING FIXES - Critical */

/* Optimized fallback fonts with precise metrics */
@font-face {
    font-family: 'Inter-Fallback';
    src: local('Arial'), local('Helvetica');
    size-adjust: 106.5%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Montserrat-Fallback';
    src: local('Arial Black'), local('Arial Bold'), local('Arial');
    size-adjust: 104.5%;
    ascent-override: 92%;
    descent-override: 23%;
    line-gap-override: 0%;
}

/* Force fallback stack immediately */
body {
    font-family: 'Inter', 'Inter-Fallback', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
    font-display: swap;
}

h1, h2, h3, h4, h5, h6,
.font-display,
.font-montserrat {
    font-family: 'Montserrat', 'Montserrat-Fallback', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
    font-display: swap;
}

/* Prevent FOIT (Flash of Invisible Text) */
.wf-loading body,
.wf-loading h1,
.wf-loading h2,
.wf-loading h3 {
    visibility: visible !important;
    opacity: 1 !important;
}

/* 2. SECTION PADDING FIXES - Major CLS culprits */

/* Reserve explicit heights for sections to prevent shifts */
section.py-8,
section.py-16,
section.py-20,
section[class*="py-"] {
    min-height: 300px;
}

section.relative {
    contain: layout;
}

/* Specific section height reservations */
.hero-section,
section:first-of-type {
    min-height: 500px;
}

@media (min-width: 768px) {
    section.py-8,
    section.py-16,
    section.py-20 {
        min-height: 400px;
    }
    
    .hero-section,
    section:first-of-type {
        min-height: 600px;
    }
}

@media (min-width: 1024px) {
    section.py-8,
    section.py-16,
    section.py-20 {
        min-height: 500px;
    }
    
    .hero-section,
    section:first-of-type {
        min-height: 700px;
    }
}

/* 3. ABSOLUTE POSITIONED ELEMENTS */

/* Prevent animation decorations from causing shifts */
div.absolute[style*="animation-delay"] {
    contain: layout;
    will-change: transform;
    transform: translateZ(0);
}

.absolute.bottom-10,
.absolute.bottom-20 {
    contain: layout style;
}

/* 4. MOBILE MENU FIXES */

#mobileMenu .flex-1.overflow-y-auto {
    min-height: 400px;
    contain: layout style paint;
}

.mobile-menu {
    will-change: transform;
    contain: layout style paint;
    backface-visibility: hidden;
}

/* 5. IMAGE CONTAINER FIXES */

/* Reserve space with aspect ratios */
img:not([width]):not([height]) {
    aspect-ratio: attr(width) / attr(height);
}

img[data-src],
img[loading="lazy"] {
    min-height: 200px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e3e8ef 100%);
}

/* Image containers */
.relative.h-44,
.relative.h-56 {
    contain: layout size;
}

/* 6. GRID & CONTAINER STABILITY */

.grid {
    contain: layout;
}

.container {
    contain-intrinsic-size: auto 1200px;
}

/* 7. CARD STABILITY */

.bg-white,
.bg-white\/95,
.card,
.car-card {
    contain: layout style;
    will-change: auto;
}

/* 8. ANIMATION OPTIMIZATIONS */

[data-aos] {
    will-change: opacity, transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

[data-aos].aos-animate {
    will-change: auto;
}

/* 9. BUTTON & INTERACTIVE ELEMENT STABILITY */

button,
a[class*="btn-"],
.btn-primary,
.btn-secondary {
    contain: layout style paint;
    transform: translateZ(0);
}

/* 10. HEADER OPTIMIZATION */

header,
#header {
    contain: layout style;
    will-change: background-color;
}

/* Prevent header background shift */
header.bg-white\/95 {
    background-color: rgba(255, 255, 255, 0.95);
}

/* 11. TEXT CONTENT STABILITY */

/* Prevent text content shifts */
p, span, div {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/* 12. FLEX CONTAINERS */

.flex,
.flex-1 {
    contain: layout;
}

/* 13. SWIPER/CAROUSEL STABILITY */

.swiper,
.swiper-container {
    contain: layout style;
}

.swiper-slide {
    contain: layout;
}

/* 14. MODAL & OVERLAY FIXES */

.modal,
.overlay,
[role="dialog"] {
    contain: layout style paint;
    will-change: opacity, transform;
}

/* 15. FOOTER STABILITY */

footer {
    contain: layout style;
}

/* 16. BADGE & TAG STABILITY */

.badge,
span[class*="rounded-full"],
span[class*="px-"] {
    contain: layout style;
    display: inline-block;
}

/* 17. SKELETON LOADER DIMENSIONS */

.lazy-skeleton,
[class*="skeleton"] {
    contain: layout size;
    min-height: 100px;
}

/* 18. RESPONSIVE IMAGE FIX */

picture {
    display: block;
    contain: layout;
}

/* 19. SVG STABILITY */

svg {
    display: block;
    width: 100%;
    height: auto;
}

/* 20. CRITICAL RENDERING PATH */

/* Ensure above-the-fold content renders immediately */
.above-fold,
section:first-child {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* 21. WEB FONT LOADING STATE */

/* Visible text during font load */
body.wf-loading {
    visibility: visible !important;
}

/* 22. LAZY LOADED CONTENT */

[data-lazy-content] {
    min-height: 200px;
    contain: layout;
}

/* 23. NAVIGATION LINK STABILITY */

/* Exclude dropdown parents from contain restrictions */
nav li.group,
nav .relative.group,
.outstation-toggle {
    contain: none !important;
}

/* 24. TESTIMONIAL CARDS */

.testimonial-card,
.service-card,
.package-card {
    contain: layout style;
    min-height: 250px;
}

/* 25. STAT BOXES */

.stat-box,
[class*="text-center"] > div:not(.inline-flex) {
    contain: layout;
    min-height: 80px;
}

/* 26. FORM ELEMENTS */

input,
textarea,
select {
    contain: layout style;
}

/* 27. BREADCRUMB STABILITY */

nav[aria-label="breadcrumb"],
.breadcrumb {
    contain: layout;
    min-height: 40px;
}

/* 28. PRICE DISPLAY - More specific targeting */

.price,
.price-display,
.price-amount,
[class*="price-"] {
    contain: layout;
    min-width: 60px;
}

/* 29. LOADING STATES */

.loading,
[aria-busy="true"] {
    contain: layout style;
    min-height: 100px;
}

/* 30. PREVENT LAYOUT THRASHING */

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 31. GPU ACCELERATION FOR TRANSFORMS */

.transform,
[class*="translate"],
[class*="scale"],
[class*="rotate"] {
    transform: translateZ(0);
    will-change: transform;
}

/* 32. REDUCE PAINT COMPLEXITY */

.rounded-2xl,
.rounded-3xl,
[class*="rounded-"] {
    contain: paint;
}

/* 33. CONTAIN LAYOUT CHANGES */

main,
article,
aside {
    contain: layout style;
}

/* 34. SPACING CONSISTENCY */

/* Ensure consistent spacing prevents shifts */
section + section {
    contain: layout;
}

/* 16. BREADCRUMB STABILITY */

nav[class*="breadcrumb"],
ol[class*="breadcrumb"] {
    min-height: 2rem;
    contain: layout;
}

/* 17. MODAL & OVERLAY OPTIMIZATIONS */

#bookingModal,
#mobileMenuOverlay {
    contain: layout style paint;
}

/* 18. SCROLL TOP BUTTON */

#scrollTopBtn {
    contain: strict;
}

/* 19. QUICK ACTION BUTTONS */

.fixed.bottom-6.right-6 {
    contain: strict;
}

/* 20. IMAGE OPTIMIZATION */

/* Prevent image layout shifts - set aspect ratio */
img:not([width]):not([height]) {
    aspect-ratio: attr(width) / attr(height);
    height: auto;
}

/* 21. ROUNDED CORNER OPTIMIZATION */

/* Hardware acceleration for rounded elements */
[class*="rounded-"] {
    transform: translateZ(0);
}

/* 22. DROPDOWN MENU STABILITY */

.group:hover > div,
.group:hover > ul {
    contain: layout style paint;
}

/* 23. PREVENT FLASH OF UNSTYLED TEXT (FOUT) */

/* Ensure text is visible during font load */
html {
    font-synthesis: none;
    text-rendering: optimizeSpeed;
}

/* 24. CRITICAL CSS FOR ABOVE-THE-FOLD CONTENT */

/* Ensure hero content area is stable */
.container.mx-auto {
    min-height: fit-content;
}

/* 25. RESPONSIVE IMAGE CONTAINERS */

/* Maintain aspect ratios */
[class*="aspect-"] {
    contain: size layout style;
}