/**
 * Elementor Stretch & Full-Screen Width Styles
 *
 * Provides complete control over section and container widths, expanding
 * across large monitors without being restricted by theme .container defaults,
 * while preserving all other sections and layouts.
 *
 * @package Nexus_Pro
 */

/* ============================================================
   SAFE HORIZONTAL OVERFLOW HANDLING
   Uses overflow-x: clip on html to prevent horizontal scrolling
   across large monitors without creating a secondary scroll container
   on body or #page, preserving position: sticky, Lenis smooth scroll,
   and GSAP ScrollTrigger pinning.
   ============================================================ */
html {
    overflow-x: clip;
}

body {
    overflow-x: visible !important;
}

#page,
.site {
    overflow: visible !important;
}


/* ============================================================
   OPT-IN FULL SCREEN CONTAINER / SECTION
   ============================================================ */

/* 1. Full Viewport Width (100vw Breakout) */
.nexus-full-screen-yes.nexus-stretch-mode-viewport,
[class*="nexus-full-screen-yes"][class*="nexus-stretch-mode-viewport"] {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;
}

/* If nested inside theme's centered .container */
.container > .elementor .nexus-full-screen-yes.nexus-stretch-mode-viewport,
.site-main > .container .nexus-full-screen-yes.nexus-stretch-mode-viewport,
.container .nexus-full-screen-yes.nexus-stretch-mode-viewport {
    left: auto !important;
    right: auto !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

/* 2. 100% Full Width Mode */
.nexus-full-screen-yes.nexus-stretch-mode-full,
[class*="nexus-full-screen-yes"][class*="nexus-stretch-mode-full"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* 3. Custom Maximum Width Mode */
.nexus-full-screen-yes.nexus-stretch-mode-custom,
[class*="nexus-full-screen-yes"][class*="nexus-stretch-mode-custom"] {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* ============================================================
   INNER BOXED CONTENT CENTERING
   ============================================================ */
.nexus-full-screen-yes.nexus-inner-boxed-yes > .e-con-inner,
.nexus-full-screen-yes.nexus-inner-boxed-yes > .elementor-container,
[class*="nexus-full-screen-yes"][class*="nexus-inner-boxed-yes"] > .e-con-inner,
[class*="nexus-full-screen-yes"][class*="nexus-inner-boxed-yes"] > .elementor-container,
.gamenexa-stretch-full-width.gamenexa-inner-boxed > .e-con-inner,
.gamenexa-stretch-full-width.gamenexa-inner-boxed > .elementor-container {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* ============================================================
   ELEMENTOR EDITOR PREVIEW COMPATIBILITY
   ============================================================ */
body.elementor-editor-active .nexus-full-screen-yes.nexus-stretch-mode-viewport {
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

/* Tablet (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .nexus-full-screen-yes.nexus-stretch-mode-viewport {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .nexus-full-screen-yes.nexus-inner-boxed-yes > .e-con-inner,
    .nexus-full-screen-yes.nexus-inner-boxed-yes > .elementor-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Mobile (max-width: 767px) */
@media screen and (max-width: 767px) {
    .nexus-full-screen-yes.nexus-stretch-mode-viewport,
    .container > .elementor .nexus-full-screen-yes.nexus-stretch-mode-viewport,
    .site-main > .container .nexus-full-screen-yes.nexus-stretch-mode-viewport {
        left: 0 !important;
        right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .nexus-full-screen-yes.nexus-inner-boxed-yes > .e-con-inner,
    .nexus-full-screen-yes.nexus-inner-boxed-yes > .elementor-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px;
        padding-right: 16px;
    }
}