/* ===================================
   Performance & Optimization Fixes
   =================================== */

/* ===================================
   FIX: Google Tag Manager Image Overflow
   Prevents GTM tracking pixels from overflowing element bounds
   =================================== */
img:not(.allow-overflow),
video:not(.allow-overflow),
canvas:not(.allow-overflow) {
    overflow: clip !important;
    max-width: 100%;
    height: auto;
}

/* Allow overflow only for specific animation wrappers */
.animation-wrapper img,
.animation-wrapper video,
.animation-wrapper canvas,
[data-animation] img,
[data-animation] video,
[data-animation] canvas {
    overflow: visible;
}

/* ===================================
   Image Optimization
   =================================== */

/* Ensure all images are responsive and optimized */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Lazy loading optimization */
img[loading="lazy"] {
    content-visibility: auto;
}

/* Prevent layout shift for images */
img[width][height] {
    height: auto;
}

/* ===================================
   Tablet Responsive Fixes (768px - 1024px)
   Extends mobile fixes to tablet breakpoints
   =================================== */

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    
    /* Disable smooth scroll wrappers on tablets */
    #smooth-wrapper,
    #smooth-content {
        transform: none !important;
        height: auto !important;
        overflow: visible !important;
        position: static !important;
        width: 100% !important;
        will-change: auto !important;
    }
    
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden !important;
        width: 100%;
        max-width: 100vw;
    }
    
    /* Banner area fixes for tablets */
    .banner-area,
    .banner-style-one {
        padding: 80px 20px 60px !important;
        min-height: auto !important;
        height: auto !important;
    }
    
    /* Fix absolutely positioned hero content */
    .banner-one-wrapper .para-wraph {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
        width: 100% !important;
        margin-bottom: 30px !important;
    }
    
    .bannerJump_animation,
    .banner-jump-button {
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        margin-top: 30px !important;
    }
    
    /* Breadcrumb fixes for tablets */
    .rts-breadcrumb-area,
    .baread-crumb-main-wrapper {
        padding-top: 100px !important;
    }
    
    /* Portfolio and grid layouts */
    .portfolio-area,
    .case-studies-area {
        padding: 60px 20px !important;
    }
    
    /* Container adjustments */
    .container,
    .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ===================================
   Font Display Optimization
   Prevents invisible text during font loading
   =================================== */

@font-face {
    font-display: swap;
}

/* ===================================
   Video Optimization
   =================================== */

video {
    max-width: 100%;
    height: auto;
    background-color: #000;
}

/* Lazy load videos */
video[poster] {
    object-fit: cover;
}

/* ===================================
   Accessibility Fixes
   =================================== */

/* Ensure sufficient color contrast */
.btn,
.rts-btn,
button {
    color: #fff;
    background-color: #000;
}

/* Fix link accessibility */
a:not([aria-label]):not([title]) {
    position: relative;
}

/* Ensure all interactive elements have discernible names */
a[href]:empty::before,
button:empty::before {
    content: attr(aria-label);
    position: absolute;
    left: -9999px;
}

/* ===================================
   Blog Page Specific Fixes
   =================================== */

/* Blog images uniform sizing and optimization */
.blog-single-main-wrapper .thumbnail img,
.blog-details-bd-wrapper .author-area img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Blog sidebar sticky positioning fix */
.rts-sticky-column-item {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    align-self: flex-start;
}

@media only screen and (max-width: 1024px) {
    .rts-sticky-column-item {
        position: relative;
        top: auto;
    }
}

/* Blog content responsive */
.blog-details-main-wrapper {
    overflow-x: hidden;
}

.blog-details-main-wrapper img {
    max-width: 100%;
    height: auto;
}

.blog-details-main-wrapper .container {
    padding: 0 15px;
}

@media only screen and (max-width: 767px) {
    .blog-details-breadcrumb .blog-details-bd-wrapper {
        padding: 30px 15px !important;
    }
    
    .blog-details-main-wrapper .col-xl-4,
    .blog-details-main-wrapper .col-lg-8 {
        padding: 0 15px;
    }
    
    .rts-single-wized {
        margin-bottom: 30px;
    }
}

/* ===================================
   Performance: Reduce Repaints
   =================================== */

/* Use transform and opacity for animations instead of layout properties */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

/* Remove will-change after animation completes */
.animation-complete {
    will-change: auto;
}

/* ===================================
   Critical Rendering Path Optimization
   =================================== */

/* Prevent render-blocking above the fold */
.below-fold {
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
}

/* ===================================
   Reduce Layout Shift (CLS)
   =================================== */

/* Reserve space for dynamic content */
.lazy-container {
    min-height: 200px;
    position: relative;
}

/* Image aspect ratio boxes */
.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.aspect-ratio-4-3 {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.aspect-ratio-1-1 {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

/* ===================================
   Network Performance
   =================================== */

/* Preload critical assets hint */
link[rel="preload"] {
    /* Ensures preloaded resources are used */
}

/* DNS prefetch for external resources */
link[rel="dns-prefetch"] {
    /* Improves external resource loading */
}