/**
 * Scroll Animation Widget Styles
 * Essential styles for the Elementor widget
 */

/* Ensure proper z-index stacking */
.elementor-widget-scroll_animation_widget {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    overflow: visible;
}

/* Prevent overlapping with adjacent elements */
.elementor-widget-scroll_animation_widget .scroll-animation-container {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    clear: both;
    isolation: isolate;
}

/* Ensure proper spacing */
.elementor-widget-scroll_animation_widget + .elementor-widget,
.elementor-widget + .elementor-widget-scroll_animation_widget {
    margin-top: 0;
}

/* Prevent excessive spacing */
.elementor-widget-scroll_animation_widget {
    margin-bottom: 0;
}

.elementor-widget-scroll_animation_widget .scroll-animation-container {
    margin-bottom: 0;
}

/* Prevent content from overlapping */
.elementor-widget-scroll_animation_widget ~ .elementor-widget {
    position: relative;
    z-index: 2;
}

/* Ensure proper stacking context */
.elementor-section:has(.elementor-widget-scroll_animation_widget) {
    position: relative;
    z-index: 1;
}

/* Fallback for browsers that don't support :has() */
.elementor-section .elementor-widget-scroll_animation_widget {
    position: relative;
    z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .section-content {
        gap: 3rem !important;
    }
    
    .content-side h2 {
        font-size: 3rem !important;
    }
}

@media (max-width: 768px) {
    .scroll-animation-section {
        min-height: 70vh !important;
    }
    
    .section-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        padding: 0 1rem !important;
    }
    
    .content-side {
        padding: 1rem !important;
    }
    
    .content-side h2 {
        font-size: 2.5rem !important;
    }
    
    .content-side .subheading {
        font-size: 1.25rem !important;
    }
    
    .image-side {
        padding: 1rem !important;
    }
    
    .image-card {
        height: 350px !important;
    }
}

@media (max-width: 480px) {
    .content-side h2 {
        font-size: 2rem !important;
    }
    
    .content-side .subheading {
        font-size: 1.125rem !important;
    }
    
    .content-side p,
    .content-side .points li {
        font-size: 1rem !important;
    }
    
    .image-card {
        height: 300px !important;
    }
}

/* Elementor editor specific styles */
.elementor-editor .scroll-animation-container {
    min-height: auto;
    position: relative !important;
}

.elementor-editor .scroll-animation-content {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

.elementor-editor .scroll-animation-section {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    margin-bottom: 2rem;
    border: 2px dashed #ddd;
    border-radius: 8px;
    height: auto !important;
}

.elementor-editor .scroll-animation-section:last-child {
    margin-bottom: 0;
}

/* Elementor section compatibility */
.elementor-section .elementor-widget-scroll_animation_widget {
    width: 100%;
    max-width: 100%;
}

/* Ensure proper Elementor container behavior */
.elementor-container .elementor-widget-scroll_animation_widget {
    position: relative;
    z-index: 1;
}

/* Fix for Elementor's overflow settings */
.elementor-section[data-element_type="section"] .elementor-widget-scroll_animation_widget {
    overflow: visible;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Ensure proper scroll containment */
.elementor-widget-scroll_animation_widget {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
}

/* Normal scroll animation layout */
.scroll-animation-section {
    width: 100%;
    min-height: 80vh;
    margin-bottom: 4rem;
    position: relative;
    display: flex;
    align-items: center;
}

.scroll-animation-section:last-child {
    margin-bottom: 0;
}

.image-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.content-side {
    padding: 2rem;
}

/* Enhanced image animations */
.scroll-animation-section .image-card {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease-out;
}

/* Content fade animations */
.scroll-animation-section .content-side {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.3s ease-out;
}

/* Loading state */
.scroll-animation-container.loading {
    opacity: 0.7;
}

.scroll-animation-container.loading::after {
    content: 'Loading...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: #666;
    z-index: 1000;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .scroll-animation-section,
    .scroll-animation-content,
    .content-side h2,
    .content-side .subheading,
    .content-side p,
    .content-side .points li,
    .image-side,
    .image-card {
        transition: none !important;
        animation: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .image-card {
        border: 2px solid currentColor;
    }
    
    .content-side .points li::before {
        color: currentColor;
    }
}

/* Print styles */
@media print {
    .scroll-animation-container {
        height: auto !important;
    }
    
    .scroll-animation-content {
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    .scroll-animation-section {
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        page-break-inside: avoid;
        margin-bottom: 2rem;
    }
}