/**
 * Hero Section Fixes
 * - Vertical centering of content
 * - Background image positioning fixes
 * - Transparent navbar with hero background extending behind it
 *
 * @package MW_Marketing
 * @version 1.1.1
 */

/* ========================================
   Transparent Navbar
   ======================================== */

/* Make header/navbar transparent */
header[data-type="type-1"],
header.site-header,
.ct-header {
    background: transparent !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
}

/* Remove any background from header containers */
header[data-type="type-1"] > *,
.ct-header > *,
.site-header > * {
    background: transparent !important;
}

/* ========================================
   Hero Section - Vertical Centering
   ======================================== */

/* Hero section container - Full viewport height starting from top */
.elementor-1142 .elementor-element.elementor-element-352098f {
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    overflow: visible !important;
    padding: 0 !important;
    margin-top: 0 !important;
}

/* Inner content wrapper - viewport centering with two-column layout */
.elementor-1142 .elementor-element.elementor-element-8c12920 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
    min-height: 100vh !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hero left column - text content */
.hero-content-left {
    position: relative !important;
    z-index: 10 !important;
}

/* Hero right column - animation */
.hero-animation-right {
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Lottie animation container */
.hero-lottie-animation {
    width: 100% !important;
    max-width: 350px !important;
    height: auto !important;
    min-height: 280px !important;
}

/* Remove white background from dotlottie-player */
dotlottie-player,
.hero-lottie-animation {
    background: transparent !important;
}

/* Ensure no white backgrounds in animation containers */
.hero-animation-right,
.hero-animation-right * {
    background-color: transparent !important;
}

/* Fix for inner Elementor containers - only animation wrapper */
.elementor-1142 .elementor-element.elementor-element-7fb05f2 {
    background-color: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Transparent background only for elements inside animation container */
.hero-animation-right .e-con-full,
.hero-animation-right .e-con,
.hero-content-left .e-con-full,
.hero-content-left .e-con {
    background-color: transparent !important;
}

/* ========================================
   Background Image Fixes
   ======================================== */

/* Hide original background image - lines effect is global background */
.elementor-1142 .elementor-element.elementor-element-352098f:not(.elementor-motion-effects-element-type-background),
.elementor-1142 .elementor-element.elementor-element-352098f > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: none !important;
    background-color: transparent !important;
}

/* Extend background behind navbar - starts from absolute top */
.elementor-1142 .elementor-element.elementor-element-352098f > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    z-index: 0 !important;
}

/* Ensure content is above background and lines effect */
.elementor-1142 .elementor-element.elementor-element-8c12920 {
    position: relative !important;
    z-index: 10 !important;
}

/* Z-index stacking order:
   - Lines effect: 1
   - Hero content: 10
   - Navbar: 999
*/

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 1024px) {
    .elementor-1142 .elementor-element.elementor-element-8c12920 {
        gap: 40px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .hero-lottie-animation {
        max-width: 380px !important;
        min-height: 280px !important;
    }
}

@media (max-width: 767px) {
    /* Stack layout on mobile - text on top, animation on bottom */
    .elementor-1142 .elementor-element.elementor-element-8c12920 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        min-height: auto !important;
        padding-top: 100px !important;
        padding-bottom: 40px !important;
    }

    /* Hero section container - reduce height on mobile */
    .elementor-1142 .elementor-element.elementor-element-352098f {
        min-height: auto !important;
        height: auto !important;
        padding-top: 80px !important;
        padding-bottom: 40px !important;
    }

    /* Animation container - much smaller on mobile */
    .hero-animation-right {
        order: 2 !important;
        max-width: 240px !important;
        margin: 0 auto !important;
    }

    .hero-lottie-animation {
        max-width: 240px !important;
        min-height: 180px !important;
        height: 240px !important;
    }

    .hero-content-left {
        order: 1 !important;
    }
}