/* Elementor Compatibility CSS for Three H 2024 Theme */
/* This file resolves width conflicts between the theme and Elementor */

/* Fix side menu appearing open on Elementor pages */
.elementor-page:not(.site-menu) #site-menu-inner {
    pointer-events: none !important;
}

.elementor-page:not(.site-menu) #site-menu {
    pointer-events: none !important;
}

.elementor-page.site-menu #site-menu {
    pointer-events: auto !important;
}

.elementor-page.site-menu #site-menu-inner {
    pointer-events: auto !important;
}

/* Fix side menu positioning - ensure it's not cut off at the top on all screen sizes */
.elementor-page #site-menu {
    position: fixed !important;
    top: var(--wp-admin--admin-bar--height, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

.elementor-page #site-menu-outer {
    width: 100% !important;
    left: 0px !important;
    position: absolute !important;
    box-sizing: border-box !important;
    top: 0px !important;
    bottom: 0px !important;
    pointer-events: none !important;
}

.elementor-page.site-menu #site-menu-outer {
    pointer-events: auto !important;
}

.elementor-page #site-menu-inner {
    opacity: 0 !important;
    position: absolute !important;
    top: 0 !important;
    right: calc(12.6px * -33.33 - 1px) !important;
    width: calc(12.6px * 33.33) !important;
    bottom: 0 !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    background: var(--wp--preset--color--white) !important;
    white-space: nowrap !important;
    transition: right 0.7s, opacity 0.4s !important;
    display: flex !important;
    flex-direction: column !important;
    border-left: 1px solid var(--wp--preset--color--black, #000) !important;
}

.elementor-page.site-menu #site-menu-inner {
    opacity: 1 !important;
    right: 0px !important;
}

@media (max-width: 782px) {
    .elementor-page #site-menu-inner {
        width: 100% !important;
    }
}

/* Ensure close button and menu content are properly positioned on all screens */
.elementor-page #site-menu-close {
    position: absolute !important;
    top: 0 !important;
    width: calc(12.6px * 33.33 - var(--scrollbar-width, 0px)) !important;
    z-index: 1 !important;
}

@media (max-width: 782px) {
    .elementor-page #site-menu-close {
        width: 100% !important;
    }
}

.elementor-page #site-menu-close-reserve {
    display: block !important;
    text-align: right !important;
}

.elementor-page #site-menu-close-reserve span {
    padding: var(--wp--preset--spacing--grid-margin) !important;
    height: calc(2em - 1px) !important;
    display: block !important;
    width: calc(100% - var(--wp--preset--spacing--grid-margin) * 2) !important;
}

/* Fix for wide screens - ensure menu width is correct */
@media (min-width: 783px) {
    .elementor-page #site-menu-inner {
        width: calc(12.6px * 33.33) !important;
        max-width: calc(12.6px * 33.33) !important;
    }
}

/* Fix z-index issue - ensure side menu appears above Elementor tabs and sticky elements */
.elementor-page #site-menu {
    z-index: 99999 !important;
}

.elementor-page #site-menu-outer {
    z-index: 99999 !important;
}

.elementor-page #site-menu-inner {
    z-index: 99999 !important;
}

.elementor-page #site-menu-blocker {
    z-index: 99998 !important;
}

/* Fix oversized images in side menu on Elementor pages */
/* Reset --vw variable for side menu to prevent oversized images */
.elementor-page #site-menu-inner {
    --vw: 12.6px !important;
}

.elementor-page #site-menu-inner figure img {
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
}

.elementor-page #site-menu-inner figure {
    max-width: 100% !important;
    width: 100% !important;
}

.elementor-page #site-menu-inner .sitemenunewarrival {
    max-width: 100% !important;
}

.elementor-page #site-menu-inner .sitemenunewarrival figure {
    max-width: 100% !important;
    width: 100% !important;
}

.elementor-page #site-menu-inner .sitemenunewarrival img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* Ensure side menu width stays consistent on Elementor pages */
.elementor-page #site-menu-inner {
    width: calc(12.6px * 33.33) !important;
    max-width: calc(12.6px * 33.33) !important;
    min-width: calc(12.6px * 33.33) !important;
}

/* Ensure menu doesn't overflow on wide screens */
@media (min-width: 1920px) {
    .elementor-page #site-menu-inner {
        width: 420px !important;
        max-width: 420px !important;
        min-width: 420px !important;
    }
}

/* Override theme's CSS variables that constrain width to 1260px */
.elementor-page {
    --vw: 1vw !important;
    --bodywidth: 100vw !important;
    --fullwidth: 100vw !important;
}

/* Override theme's CSS variables at the root level for Elementor pages */
.elementor-page html {
    --vw: 1vw !important;
    --bodywidth: 100vw !important;
    --fullwidth: 100vw !important;
}

/* Override theme's body element width constraints for Elementor pages */
.elementor-page body {
    --bodywidth: 100vw !important;
    width: 100vw !important;
    max-width: none !important;
    overflow-x: visible !important;
}

/* Elementor Full-Width Override - Allow Elementor to break out of theme width constraints */
.elementor-page .elementor-section.elementor-section-stretched,
.elementor-page .elementor-section.elementor-section-stretched .elementor-container,
.elementor-page .elementor-section.elementor-section-stretched .elementor-row,
.elementor-page .elementor-section.elementor-section-stretched .elementor-column,
.elementor-page .elementor-section.elementor-section-stretched .elementor-widget-wrap,
.elementor-page .elementor-section.elementor-section-stretched .elementor-widget,
.elementor-page .elementor-section.elementor-section-stretched .elementor-widget-container {
    max-width: none !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
}

/* Override theme body width constraints for Elementor full-width sections */
.elementor-page .elementor-section.elementor-section-stretched {
    --bodywidth: 100vw !important;
    width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure Elementor containers can expand beyond theme constraints */
.elementor-page .elementor-container {
    max-width: none !important;
}

/* Override theme main element width for Elementor pages */
.elementor-page main {
    width: 100% !important;
    max-width: none !important;
}

/* Allow Elementor widgets to use full viewport width */
.elementor-page .elementor-widget {
    max-width: none !important;
}

/* Ensure Elementor sections can break out of theme grid system */
.elementor-page .elementor-section {
    box-sizing: border-box !important;
}

/* Ensure Elementor content can extend beyond theme boundaries */
.elementor-page .elementor-section.elementor-section-stretched .elementor-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Handle Elementor's boxed vs full-width layout options */
.elementor-page .elementor-section.elementor-section-boxed {
    max-width: 100vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Ensure Elementor editor compatibility */
.elementor-editor-active .elementor-section.elementor-section-stretched {
    width: 100vw !important;
    max-width: none !important;
}

/* Override any theme elements that might constrain Elementor width */
.elementor-page .elementor-section.elementor-section-stretched * {
    max-width: none !important;
}

/* Force Elementor full-width sections to break out of theme container */
.elementor-page .elementor-section.elementor-section-stretched {
    position: relative !important;
    z-index: 1 !important;
}

/* Override theme's max-page-width constraint */
.elementor-page {
    --max-page-width: none !important;
}

/* Ensure Elementor can override theme's viewport-based sizing */
.elementor-page .elementor-section.elementor-section-stretched .elementor-container {
    width: 100% !important;
    max-width: none !important;
}

/* Additional overrides for theme's CSS variable inheritance */
.elementor-page .elementor-section.elementor-section-stretched,
.elementor-page .elementor-section.elementor-section-stretched * {
    --bodywidth: 100vw !important;
    --vw: 1vw !important;
}

/* Override theme's main container constraints */
.elementor-page .elementor-section.elementor-section-stretched .elementor-container {
    max-width: none !important;
    width: 100% !important;
}

/* Ensure Elementor full-width sections can break out of theme's body width */
.elementor-page .elementor-section.elementor-section-stretched {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

/* Override theme's body overflow for Elementor full-width sections */
.elementor-page .elementor-section.elementor-section-stretched {
    overflow: visible !important;
}

/* Ensure Elementor content can extend beyond theme's body width */
.elementor-page .elementor-section.elementor-section-stretched .elementor-widget-container {
    max-width: none !important;
    width: 100% !important;
}

/* Mobile responsive support for Elementor full-width */
@media (max-width: 782px) {
    .elementor-page .elementor-section.elementor-section-stretched {
        width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    .elementor-page .elementor-section.elementor-section-stretched .elementor-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .elementor-page body {
        --bodywidth: 100vw !important;
        width: 100vw !important;
        overflow-x: visible !important;
    }
    
    .elementor-page html {
        --vw: 1vw !important;
        --bodywidth: 100vw !important;
    }
    
    .elementor-page .elementor-section.elementor-section-stretched {
        --bodywidth: 100vw !important;
        --vw: 1vw !important;
    }
}

/* Additional Elementor full-width support */
.elementor-page .elementor-section.elementor-section-stretched.elementor-section-full_width {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

/* Override theme's CSS variable inheritance at all levels */
.elementor-page,
.elementor-page *,
.elementor-page *::before,
.elementor-page *::after {
    --bodywidth: 100vw !important;
    --vw: 1vw !important;
}

/* Force Elementor sections to ignore theme width constraints */
.elementor-page .elementor-section.elementor-section-stretched {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
}

/* Override any potential CSS inheritance from parent elements */
.elementor-page .elementor-section.elementor-section-stretched .elementor-container,
.elementor-page .elementor-section.elementor-section-stretched .elementor-row,
.elementor-page .elementor-section.elementor-section-stretched .elementor-column {
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
}

/* Additional overrides to ensure maximum compatibility */
.elementor-page .elementor-section.elementor-section-stretched {
    transform: none !important;
    box-sizing: border-box !important;
}

/* Override any potential theme CSS that might use calc() with the --bodywidth variable */
.elementor-page .elementor-section.elementor-section-stretched,
.elementor-page .elementor-section.elementor-section-stretched * {
    width: auto !important;
    max-width: none !important;
}

/* Ensure Elementor can break out of theme's viewport-based sizing system */
.elementor-page .elementor-section.elementor-section-stretched .elementor-container {
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
}

/* Override theme's CSS variable inheritance for all Elementor elements */
.elementor-page .elementor-section,
.elementor-page .elementor-container,
.elementor-page .elementor-row,
.elementor-page .elementor-column,
.elementor-page .elementor-widget-wrap,
.elementor-page .elementor-widget,
.elementor-page .elementor-widget-container {
    --bodywidth: 100vw !important;
    --vw: 1vw !important;
}

/* Force Elementor to ignore theme's width calculations */
.elementor-page .elementor-section.elementor-section-stretched {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

/* Ensure Elementor editor can see the full-width effect */
.elementor-editor-active .elementor-section.elementor-section-stretched {
    width: 100vw !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}