/*
Theme Name: GeneratePress Child - Krisette & Co
Description: Child theme for Krisette & Co
Template: generatepress
Version: 1.0.0
*/

@import url("../generatepress/style.css");

/* Your custom styles go here */

/* =================================================================
   ANIMATED IMAGE COMPARE SLIDER
   Animates the slider from left to center on scroll
   ================================================================= */


/* Default: Disable transitions for normal interaction */
.juxtapose .jx-handle {
    transition: none !important;
}

/* Smooth image transitions during animation */
.juxtapose.animating .jx-image.jx-left,
.juxtapose.animating .jx-image.jx-right {
    transition: width 2s ease-in-out !important;
}

/* Allow transitions to be overridden when needed for animation */
.juxtapose.in-view .jx-handle {
    /* Transition will be set by JavaScript during animation */
}

/* Reset transitions after animation */
.juxtapose.animated-already .jx-handle,
.juxtapose.animated-already .jx-image.jx-left,
.juxtapose.animated-already .jx-image.jx-right {
    transition: none !important;
}


/* Default: Disable transitions for normal interaction */
.juxtapose .jx-handle {
    transition: none !important;
}

/* Allow transitions to be overridden when needed for animation */
.juxtapose.in-view .jx-handle {
    /* Transition will be set by JavaScript during animation */
}

/* Ensure smooth interaction after animation */
.juxtapose.animated-already .jx-handle {
    transition: none !important;
}

/* ADD THIS: Smooth image transitions during animation */
.juxtapose.in-view .jx-image.jx-left,
.juxtapose.in-view .jx-image.jx-right {
    transition: width 2s ease-in-out !important;
}

/* Reset image transitions after animation */
.juxtapose.animated-already .jx-image.jx-left,
.juxtapose.animated-already .jx-image.jx-right {
    transition: none !important;
}

/* Simplified: Show container by default, animate only when needed */
.wp-block-jetpack-image-compare.customize-finish-slide {
    opacity: 1 !important; /* Always visible */
    transform: translateY(0) !important; /* Normal position */
    transition: all 0.8s ease;
}

/* =================================================================
   GLOBAL RESPONSIVE AND OVERFLOW FIXES
   ================================================================= */

/* Prevent horizontal overflow on the entire page */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Mobile Header Responsive Fixes */
@media (max-width: 768px) {
    /* Make header container fully responsive */
    .site-header {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding: 10px 0 !important;
    }
    
    /* Fix the inside header container */
    .inside-header {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        overflow: hidden !important;
    }
    
    /* Make logo container responsive */
    .site-logo,
    .site-branding {
        flex-shrink: 0 !important;
        max-width: 60% !important;
    }
    
    /* Ensure logo image is responsive */
    .custom-logo,
    .site-logo img {
        max-width: 100% !important;
        height: auto !important;
        max-height: 40px !important;
    }
    
    /* Mobile menu toggle responsive */
    .menu-toggle {
        flex-shrink: 0 !important;
        margin-left: auto !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }
    
    /* Hide desktop navigation on mobile */
    .main-navigation:not(.toggled) .main-nav {
        display: none !important;
    }
}