/* =================================================
   CLS & Performance Fixes
   Loaded after style.css to override problematic rules
   ================================================= */

/* 1. Replace non-composited transitions with GPU-friendly alternatives */

/* Hamburger menu: use transform instead of top */
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    transition: transform 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity 0.1s linear !important;
}
.hamburger--squeeze.is-active .hamburger-inner,
.hamburger--squeeze.is-active .hamburger-inner::before,
.hamburger--squeeze.is-active .hamburger-inner::after {
    transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.1s linear !important;
}

/* 2. Slider controls: use transform instead of margin-top */
.bd_slider_alpha .owl_control .fn_prev,
.bd_slider_alpha .owl_control .fn_next {
    will-change: transform, opacity;
}

/* 3. Prevent layout-triggering transitions on common elements */
.bd_fn_header,
.bd_fn_footer,
.bd_fn_pagetitle,
.bd_fn_sidebarpage {
    contain: layout style;
}

/* 4. Swiper pagination: force composited transitions */
.swiper-pagination-bullet,
.swiper-pagination-bullet-active {
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

/* 5. Image aspect ratio preservation */
img {
    height: auto;
}
img[width][height] {
    aspect-ratio: attr(width) / attr(height);
}

/* 6. Prevent FOUT layout shift from Google Fonts */
body {
    font-synthesis: none;
}

/* 7. Owl carousel slide transitions - prefer transform */
.owl-stage {
    transition-property: transform !important;
}

/* 8. Accessibility: Improve color contrast */
/* Body text: #666 on white → #545454 (5.0:1 ratio, exceeds WCAG AA) */
body {
    color: #545454;
}
/* Footer/muted text contrast fix on dark bg (#081225) */
.bd_fn_footer .top_footer,
.bd_fn_footer .footer_widget {
    color: #b8b8b8;
}
.bd_fn_footer .footer_widget a,
.bd_fn_footer .footer_bottom a {
    color: #b8b8b8;
}
.bd_fn_footer .footer_copyright p {
    color: #999;
}
/* Top panel links contrast */
.bd_fn_toppanel a {
    color: inherit;
}
/* Newsletter placeholder contrast */
.subscriber input[type="email"]::placeholder {
    color: #888;
}
/* Business hours text contrast */
.bd_fn_widget_business_hours .hours {
    color: #c0c0c0;
}
/* Counter section text contrast on dark bg (#16161B) */
.fn_cs_counter_with_caption p {
    color: #b0b0b0;
}
/* Skip-to-content link: ensure 4.5:1 contrast */
.skip-to-content {
    background: #0d6eaa;
}
/* Discover button contrast on hero overlay */
.fn_cs_hero_header .discover {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/* Blog date month/year styling (migrated from h5 to span) */
.fn_cs_triple_blog_modern .time .month,
.fn_cs_triple_blog_modern .time .year {
    display: block;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    font-family: 'Quicksand', sans-serif;
}

/* 9. Service section: prevent CLS from fn__svg → inline SVG replacement */
.fn_cs_services_classic .item .icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fn_cs_services_classic .item .icon img,
.fn_cs_services_classic .item .icon svg {
    width: 64px;
    height: 64px;
}
.fn_cs_services_classic .list > ul > li > .item {
    min-height: 250px;
    contain: layout style;
}

/* 10. Trusted logos section: prevent CLS from JS-replaced content */
.fn_cs_personal_partners_gamma .partners_inner {
    min-height: 200px;
    contain: layout style;
}
.fn_cs_personal_partners_gamma .partners_inner ul {
    min-height: 200px;
}

/* 11. Header logo: reserve space to prevent shift from JS logo swap */
.bd_fn_header .menu_logo {
    min-width: 225px;
    min-height: 100px;
}
/* Header: fixed height to prevent content shift */
.bd_fn_header .header_inner {
    min-height: 100px;
}

/* 12. All major sections: contain layout to prevent cascading shifts */
.fn_cs_hero_header,
.fn_cs_introduce_wrap,
.fn_cs_services_classic,
.fn_cs_counter_with_caption,
.fn_cs_service_query,
.fn_cs_project_sticky_modern,
.blog_section {
    contain: layout style;
}
/* Trusted companies wrapper: fixed height based on typical content */
div[style*="padding:80px 0 60px"] {
    min-height: 280px;
    contain: layout style;
}

/* 13. CLS Prevention: Reserve space for dynamically loaded includes */
[data-html="/includes/desktop-header.html"] {
    min-height: 120px;
}
[data-html="/includes/mobile-header.html"] {
    min-height: 0;
}
[data-html="/includes/footer.html"] {
    min-height: 400px;
}
[data-html="/includes/sidebar.html"] {
    min-height: 200px;
}
@media (max-width: 1040px) {
    [data-html="/includes/desktop-header.html"] { min-height: 0; }
    [data-html="/includes/mobile-header.html"] { min-height: 60px; }
}

/* 14. Font fallback sizing to prevent FOUT CLS */
body {
    font-size-adjust: 0.5;
}

/* 15. Hero title containment */
.fn_cs_hero_header .title_holder {
    contain: layout style;
}

/* 16. Faster preloader fade-out (1.3s → 0.3s) for better LCP */
.preloader_loaded #bd-fn-loader .loader-section.section-left {
    transition: transform 0.2s cubic-bezier(.645,.045,.355,1) !important;
}
.preloader_loaded #bd-fn-loader .loader-section.section-right {
    transition: transform 0.2s cubic-bezier(.645,.045,.355,1) !important;
}
.preloader_loaded #bd-fn-loader .fn_loader {
    transition: opacity 0.1s ease-out !important;
}
.preloader_loaded #bd-fn-loader {
    transition: visibility 0s 0.3s, transform 0.1s 0.3s ease-out !important;
}

/* 17. Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}