/**
 * No Layout Shift Fix
 * Prevents layout shifts from navbar and banner loading
 */

/* Override the dynamic padding that causes shifts */
body {
    /* Always reserve space for navbar + banner from the start */
    padding-top: 60px !important;
    transition: none !important; /* Prevent any padding transitions */
}

/* Remove the dynamic padding change */
body.has-banner {
    padding-top: 60px !important; /* Keep same padding, no shift */
}

/* Fix navbar position */
.compact-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999990 !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
}

/* Banner should be below navbar but not affect body padding */
.stable-banner-wrapper {
    /* Not fixed - flows normally in document */
    position: relative !important;
    margin-top: 0 !important;
    width: 100%;
    /* Reserve height immediately */
    height: 280px;
    min-height: 280px;
    padding: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Remove any top banner positioning that might conflict */
.top-banner {
    position: relative !important;
    top: auto !important;
    margin-top: 0 !important;
}

/* Ensure banner container doesn't collapse */
.stable-banner-container {
    width: 100%;
    height: 250px;
    min-height: 250px;
    position: relative;
    background: #1a1a2e;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .stable-banner-wrapper {
        height: 200px;
        min-height: 200px;
        padding: 10px;
    }

    .stable-banner-container {
        height: 180px;
        min-height: 180px;
    }
}

/* Prevent any element from changing body padding */
* {
    /* Block any script from changing body padding */
}

/* Ensure content starts at right position */
.container-fluid {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Main content area */
main,
.main-content,
[role="main"] {
    margin-top: 0 !important;
}

/* Prevent CLS (Cumulative Layout Shift) */
.stable-banner-wrapper,
.stable-banner-container,
.header-banner-swiper {
    contain: layout style paint;
}

/* Skeleton placeholder to maintain height during load */
.stable-banner-wrapper:empty::before,
.stable-banner-container:empty::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        #1a1a2e 0%,
        #2a2a3e 50%,
        #1a1a2e 100%
    );
    border-radius: 20px;
}

/* Force banner images to not cause reflow */
.header-banner-swiper img {
    /* Reserve space with width/height attributes */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Override any JavaScript that tries to adjust padding */
body[style*="padding-top"] {
    padding-top: 60px !important;
}