/*
 Theme Name:   Hello Elementor Child
 Description:  Hello Elementor Child Theme for Multi-language Site
 Author:       GAO
 Template:     hello-elementor
 Version:      1.0.0
*/

/* CSS全局修复-手机端 */
@media (max-width: 767px) {

    /* 1. 彻底切断横向溢出，确保页面不晃动 */
    html, body {
      overflow-x: hidden !important;
      touch-action: pan-y !important;
      width: 100% !important;
      position: relative !important;
    }

    /* 2. 核心修复：允许换行 + 禁止压缩（解决只显示一列的问题） */
    .elementor-column, 
    .elementor-widget-wrap, 
    .elementor-element,
    .elementor-widget-container {
      flex-shrink: 0 !important;      /* 禁止高度塌陷 */
      flex-basis: auto !important;
      flex-wrap: wrap !important;      /* 关键：空间不够自动换行，实现垂直堆叠 */
    }

    /* 3. 容器宽度锁定：确保大容器不超出视口 */
    .elementor-section, 
    .elementor-container {
      width: 100vw !important;
      max-width: 100vw !important;
      left: 0 !important;
      margin-left: auto !important;
      margin-right: auto !important;
      display: flex !important;
      flex-wrap: wrap !important;      /* 确保多列在手机端能挤到下一行去 */
    }

    /* 4. 解决 Header/Footer 等多列挤在一起的问题 */
    /* 强制手机端的列（Column）宽度为 100%，除非手动设了很小的比例 */
    .elementor-column {
      width: 100% !important;          /* 强制列占满整行，实现自动垂直排列 */
      max-width: 100% !important;
    }

    /* 5. 高度保全 */
    .elementor-widget-wrap,
    .elementor-widget-container {
      min-height: min-content !important;
      height: auto !important;
    }
    
   /* 6. 解决 HFE 按钮偏移 (针对hfe-button-wrapper) */
.hfe-button-wrapper, 
.hfe-button-container {
    display: flex !important;
    justify-content: center !important; /* 纠正报告中的偏移 127px */
    width: 100% !important;
}

/* 7. 修正所有被 Edge 还原为 'normal' 的对齐属性 */
.elementor-widget-container,
.elementor-widget-wrap,
.e-con {
    display: flex !important;
    justify-content: center !important; /* 强制覆盖 normal，解决 39px/63px 偏移 */
    align-items: center !important;
}

/* 8. 逻辑对齐：保留 Padding/Margin 数值，但强制居中逻辑 */
/* 防止手动设置的单边间距把元素顶歪 */
.elementor-element {
    box-sizing: border-box !important;
}

.elementor-widget-button .elementor-button-wrapper,
.hfe-button-wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
    /* 左右 auto 会在保留 padding 的基础上，尝试寻找中轴线 */
}

/* 9. 强制所有可能导致溢出的容器满宽，但不改动其间距内容 */
.elementor-column, .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
}
 /* 1. 父容器：锁定 100vh 且强制底部对齐 */
    .home-banner-longhong {
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-end !important; /* 核心：内容推向底部 */
      height: 100vh !important;
      min-height: 100vh !important;
      width: 100% !important;
      margin: 0 !important;
      overflow: hidden !important;
    }

    /* 2. 文字子容器：利用 margin-top 产生物理推力 */
    .banner-right-text {
      width: 100% !important;
      margin-top: auto !important; /* 强制占满上方空间，将自身压到底部 */
      margin-bottom: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      flex-shrink: 0 !important;
    }

    /* 3. 针对 Edge 的内部层级强制拉伸 */
    .home-banner-longhong .elementor-widget-wrap {
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-end !important;
      align-items: center !important; /* 如果你文字需要水平居中 */
    }
    
}

/* 结束-CSS全局修复-手机端 */



/* 添加自定义的 CSS 样式 */
/* =========================
   基础：根字体（移动优先）
========================= */
html { 
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

/* 小屏优化 */
@media screen and (max-width: 767px) {
    html {
        font-size: 15px;
    }
}

/* 大屏适配（1600px+） */
@media screen and (min-width: 1600px) {
    html {
        font-size: 20px;
    }
}

body { 
    line-height: 1.6; 
}

/* =========================
   核心布局：宽度1600px
========================= */
/* 基础盒模型重置 */
.e-con {
    box-sizing: border-box;
}

@media screen and (min-width: 1600px) {
    /* 顶级容器背景强制铺满全屏 */
    .elementor-element.e-con {
        width: 100% !important;
        max-width: 100% !important;
        --width: 100% !important;
        --content-width: 100% !important;
    }

    /* 核心逻辑：利用 calc 动态计算两侧边距，强行把内容区压在 1600px 并居中 */
    /* 这样背景能全屏，但内容绝不会超过 1600px，且不破坏原有布局方向 */
    .elementor-element.e-con {
        padding-left: calc((100% - 1600px) / 2) !important;
        padding-right: calc((100% - 1600px) / 2) !important;
    }
}

/* 针对视频版块的全局全屏修正 */
@media screen and (min-width: 1600px) {
    
    /* 1. 锁死父级插件容器：确保它不限制子级溢出 */
    body .elementor-element.elementor-element-3047991.elementor-widget-html {
        overflow: visible !important;
        /* 这里的 width 必须锁死，防止被篡改为 100% (1600px) */
        width: 100% !important; 
        max-width: none !important;
    }

    /* 2. 视频版块：利用负边距物理横跨视口 */
    /* 增加 body 和 ID 组合选择器提升优先级 */
    body #lh-section-79aa7d9.lh-super-container {
        display: block !important;
        /* 关键：强制设置 100vw，防止被篡改回 1600px */
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;

        /* 对冲公式：(3000 - 1600) / -2 = -700px */
        margin-left: calc((100vw - 100%) / -2) !important;
        
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* 3. 视频画面：强制 100vw */
    body #lh-section-79aa7d9 .lh-video-fixed {
        width: 100vw !important;
        min-width: 100vw !important;
        object-fit: cover !important;
    }

    /* 4. UI 绿色背景条：全屏拉伸 */
    body #lh-section-79aa7d9 .lh-ui-fixed {
        width: 100vw !important;
        left: 0 !important;
        background-color: rgba(87, 179, 159, 0.85) !important;
    }

    /* 5. UI 内容区：1200px 居中锁定 */
    body #lh-section-79aa7d9 .lh-row-container {
        max-width: 1200px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }
}

/* 针对 1600px 以上大屏的高德地图全屏补丁 */
@media screen and (min-width: 1600px) {
    
    /* 1. 解除 Elementor 插件容器的宽度封锁 */
    .elementor-element-269e7ef {
        width: 100vw !important;
        max-width: 100vw !important;
        /* 物理对冲：将容器向左拉回视口边缘 */
        margin-left: calc((100vw - 100%) / -2) !important;
        overflow: visible !important;
    }

    /* 2. 强制地图容器横跨视口 */
    #amap-container {
        width: 100vw !important;
        height: 31.25rem !important; /* 保持你设定的 500px 高度 */
        position: relative !important;
        left: 0 !important;
    }
}

/* 高德地图代码 */
/* 1. 强制高德地图容器和内部画布宽度达到 100% */
#amap-container,
#amap-container canvas {
    width: 100% !important;
}

/* 2. 强制让地图包裹层无视外部的 Padding 限制，强行左右拉伸到屏幕边缘 */
.elementor-widget-html:has(#amap-container) {
    width: 100vw !important;
    max-width: none !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
/* 3. 手机移动端专属响应式样式*/
@media (max-width: 767px) {
    /* 强制重置手机端地图的高度 */
    #amap-container {
        height: 250px !important; /* 降低高度，给上下文字内容留出视口空间 */
    }
}

/* ==========================================================================
   Footer修复1：物理拉满，左右两侧死死锁定 50px 物理内边距
   ========================================================================== */
html body div.elementor div.longhong-fullwidth-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important; /* 强制所有栏目严格靠左对齐，禁止居中缩进 */
    align-items: flex-start !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
    padding-inline-start: 50px !important;
    padding-inline-end: 50px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

/* ==========================================================================
   Footer修复2：子容器（e-child）物理舞台精准释放与 110px 边距彻底剔除
   ========================================================================== */
/* 第一栏（标志、电话、邮箱、地址）：完美独占大屏幕下的 28% 物理空间，清空内边距 */
html body div.elementor div.longhong-fullwidth-footer > .e-child:nth-child(1) {
    width: 28% !important;
    max-width: 28% !important;
    min-width: 28% !important;
    flex-basis: 28% !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    padding-left: 0px !important;   /* 物理切除 110px 留白污染 */
    padding-right: 0px !important;  /* 物理切除 110px 留白污染 */
    box-sizing: border-box !important;
}

/* 后四栏（关于我们、核心业务、产品中心、联系我们）：每一栏严格 18% 宽度，清空内边距 */
html body div.elementor div.longhong-fullwidth-footer > .e-child:nth-child(2),
html body div.elementor div.longhong-fullwidth-footer > .e-child:nth-child(3),
html body div.elementor div.longhong-fullwidth-footer > .e-child:nth-child(4),
html body div.elementor div.longhong-fullwidth-footer > .e-child:nth-child(5) {
    width: 18% !important;
    max-width: 18% !important;
    min-width: 18% !important;
    flex-basis: 18% !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    padding-left: 0px !important;   /* 物理切除 110px 留白污染 */
    padding-right: 0px !important;  /* 物理切除 110px 留白污染 */
    box-sizing: border-box !important;
}

/* 主页脚内部组件宽度释放，确保文字在 28% 全宽大像素下横向舒服平铺 */
html body div.elementor div.longhong-fullwidth-footer .elementor-widget,
html body div.elementor div.longhong-fullwidth-footer .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   Footer修复3：下方版权行（Copyright）大外壳：独立修正，恢复纵向堆叠并水平居中
   ========================================================================== */
html body div.elementor div.longhong-fullwidth-footer-copyright {
    display: block !important;          /* 彻底拒绝横向 Flexbox，防止文字缩去右下角 */
    padding-left: 50px !important;
    padding-right: 50px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    text-align: center !important;      /* 文本整体绝对水平居中 */
}

/* 强力解开版权内部所有小盒子的宽度束缚，使其全宽充满底层主舞台并保持居中 */
html body div.elementor div.longhong-fullwidth-footer-copyright .elementor-widget,
html body div.elementor div.longhong-fullwidth-footer-copyright .elementor-widget-container,
html body div.elementor div.longhong-fullwidth-footer-copyright .hfe-copyright-wrapper {
    display: block !important;
    width: 100% !important;             
    max-width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   Footer修复4：响应式文字换行控制：大显示器下空间管够横向平铺，窄显示器下安全折行
   ========================================================================== */
html body div.elementor div.longhong-fullwidth-footer *,
html body div.elementor div.longhong-fullwidth-footer-copyright * {
    white-space: normal !important;     /* 禁用流氓不换行属性 */
    word-break: break-word !important;  /* 长内容安全在比例边界内发生响应 */
}

/* ==========================================================================
   精准绝杀：直接锁死页脚外壳组件，彻底根除微小像素溢出导致的水平滚动条
   ========================================================================== */
html body div.footer-width-fixer,
html body footer#colophon,
html body div#page.site {
    overflow-x: hidden !important;
}

/* ==========================================================================
   响应式追加：手机端（屏幕小于 767px）5 栏垂直堆叠，100% 全宽
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. 强行把页脚大壳的外排方向从横向（row）扭转为纵向垂直堆叠（column） */
    html body div.elementor div.longhong-fullwidth-footer {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        padding-left: 20px !important;  /* 手机端 50px 边距太宽了，微调为 20px 体验更好，如果必须 50px 可以改成 50px */
        padding-right: 20px !important;
        padding-inline-start: 20px !important;
        padding-inline-end: 20px !important;
    }

    /* 2. 强行撕毁电脑端的 28% 宽度限制，让第一栏在手机端独占 100% 满宽 */
    html body div.elementor div.longhong-fullwidth-footer > .e-child:nth-child(1) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex-basis: 100% !important;
        margin-bottom: 10px !important; /* 每一栏底部留点间距，防止文字死死粘在一起 */
    }

    /* 3. 强行撕毁电脑端的 18% 宽度限制，让后四栏在手机端同样全部独占 100% 满宽 */
    html body div.elementor div.longhong-fullwidth-footer > .e-child:nth-child(2),
    html body div.elementor div.longhong-fullwidth-footer > .e-child:nth-child(3),
    html body div.elementor div.longhong-fullwidth-footer > .e-child:nth-child(4),
    html body div.elementor div.longhong-fullwidth-footer > .e-child:nth-child(5) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex-basis: 100% !important;
        margin-bottom: 10px !important; /* 每一栏底部留点间距 */
    }
    
    /* 4. 版权行外壳在手机端同步缩减两侧内边距 */
    html body div.elementor div.longhong-fullwidth-footer-copyright {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}