/**
 * Cumulative Layout Shift (CLS) Fixes
 * Prevents layout shifts by reserving space for dynamic content
 */

/* Fix #requestinfo_section layout shift (GTMetrix: 0.57 score) */
#requestinfo_section {
    /* Use contain to isolate layout calculations */
    contain: layout;
}

/* Fix #requestinfo form layout shift (GTMetrix: 0.83 score) */
#requestinfo_section #requestinfo {
    /* Let form size naturally - overflow visible for proper interaction */
}

/* Reserve space for form header */
#requestinfo header {
    /* Explicit height reservation for header text */
    min-height: 42px;
}

/* Reserve space for form content block */
#requestinfo .content_block {
    /* Removed excessive min-height - let content size naturally */
}

/* Mobile/tablet breakpoints - removed excessive min-heights that caused whitespace gaps */

/* Sticky button - prevent layout shift */
.sticky_btn {
    /* Use transform instead of top/bottom for positioning */
    transform: translateZ(0);
    /* Enable GPU acceleration */
    will-change: transform;
}

/* Hero slider - prevent shift during image load */
.ed_slider {
    /* Already has min-height in critical CSS, ensure it's respected */
    position: relative;
}

.slide_img {
    /* Prevent shift during background image load */
    background-size: cover;
    background-position: center;
}

/* Fix hero banner .inner div layout shift (GTMetrix: 0.06 score) */
.ed_slider .inner {
    /* Reserve space for hero caption content */
    min-height: 120px;
    /* Ensure content visibility with reserved space */
    will-change: auto;
}

.ed_slider figcaption {
    /* Prevent caption from causing shifts */
    contain: layout style;
}

/* Mobile hero adjustments */
@media only screen and (max-width: 767px) {
    .ed_slider .inner {
        /* Smaller min-height for mobile */
        min-height: 80px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1000px) {
    .ed_slider .inner {
        /* Medium size for tablets */
        min-height: 100px;
    }
}

/* Prevent logo shift */
.custom_logo {
    /* Reserve space for logo */
    display: block;
    /* Ensure dimensions are set */
    aspect-ratio: auto;
}

/* Footer - prevent shift */
.site-footer {
    /* Isolate footer layout */
    contain: layout style;
}

/* Student quotes - prevent image load shift */
.student_quotes li .quote_left {
    /* Already has width/height, ensure no shift */
    overflow: hidden;
}

.student_quotes li .quote_left img,
.student_quotes li .quote_left picture {
    /* Prevent image load shift - dimensions set in global.css */
    display: block;
    width: 100%;
}

/* Prevent font load shift (FOIT/FOUT) */
/* This is handled by font-display: swap in preloads */

/* Additional form stability improvements */
.enterpriseform {
    /* Ensure form doesn't shift during load */
    contain: layout style;
}

/* Removed excessive min-heights from form fields that were causing fields to appear too tall */

/* Ensure buttons don't cause shifts */
#requestinfo button#submit {
    /* Reserve button space */
    min-height: 45px;
}

/**
 * General CLS Prevention Strategies Applied:
 * 1. Reserve space with min-height for dynamic content
 * 2. Use aspect-ratio for images where possible
 * 3. Use contain property to isolate layout
 * 4. Prevent margin collapse with overflow: hidden
 * 5. Use transform instead of top/left for animations
 * 6. Set explicit dimensions on replaced elements
 * 7. Add min-height to form fields and containers
 * 8. Use contain: layout to isolate rendering contexts
 */