/* ========================================
   移动端菜单全面修复 - sitpcba.com
   解决首页汉堡菜单无法打开和非首页header显示错误问题
   ======================================== */

/* 确保在所有页面都正确应用移动端样式 */
@media screen and (max-width: 768px) {
  
  /* ===== 1. 修复header定位问题 ===== */
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 62px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    z-index: 1000 !important;
    /* 防止被其他样式覆盖 */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }

  /* ===== 2. 隐藏移动端联系方式和邮箱，给汉堡菜单腾出空间 ===== */
  .top-contact-info {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }

  /* ===== 3. 修复header-right容器 ===== */
  .header-right {
    position: static !important;
    float: none !important;
    padding: 0 !important;
    height: 62px !important;
    /* 强制使用flex布局 */
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -moz-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    gap: 8px !important; /* 减少间距，给汉堡菜单更多空间 */
    z-index: 10 !important;
    margin-left: auto !important;
    /* 防止收缩 */
    -webkit-flex-shrink: 0 !important;
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
    /* 内容右对齐 */
    -webkit-box-pack: end !important;
    -webkit-justify-content: flex-end !important;
    -moz-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
    /* 确保有足够空间容纳搜索和汉堡菜单 */
    min-width: 80px !important;
    /* 防止内容换行 */
    flex-wrap: nowrap !important;
    /* 重置PC端定位属性 */
    right: auto !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
  }

  /* ===== 4. 确保汉堡菜单按钮可见且可点击 ===== */
  .mobnav-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 100 !important;
    position: relative !important;
    flex-direction: column;
    justify-content: space-around;
    width: 30px !important;
    height: 24px !important;
    padding: 0 !important;
    margin: 0 0 0 5px !important; /* 左侧添加一点间距，与搜索按钮分开 */
    border: none !important;
    background: transparent !important;
    /* 移除系统默认的触摸反馈 */
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    user-select: none !important;
    outline: none !important;
    /* 确保汉堡菜单不被挤压 */
    flex-shrink: 0 !important;
    -webkit-flex-shrink: 0 !important;
    -ms-flex-negative: 0 !important;
    /* 确保在最右侧 */
    order: 2 !important;
    -webkit-order: 2 !important;
    -webkit-box-ordinal-group: 3 !important;
    -moz-box-ordinal-group: 3 !important;
    -ms-flex-order: 2 !important;
    /* 确保在所有情况下都显示，覆盖layout.css的规则 */
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
    /* 确保在所有屏幕尺寸下都正确显示 */
    float: none !important;
    clear: none !important;
    /* 确保不被其他样式覆盖 */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
  }

  /* ===== 4. 修复汉堡菜单三条线样式 ===== */
  .mobnav-btn span {
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    background: #333 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    position: absolute !important;
    left: 0 !important;
    pointer-events: none !important;
    /* 确保横线可见 */
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* 定义三条横线的位置 */
  .mobnav-btn span:nth-child(1) {
    top: 0 !important;
  }

  .mobnav-btn span:nth-child(2) {
    top: 8px !important;
  }

  .mobnav-btn span:nth-child(3) {
    top: 16px !important;
  }

  /* 确保三条横线都显示 */
  .mobnav-btn span:nth-child(1),
  .mobnav-btn span:nth-child(2),
  .mobnav-btn span:nth-child(3) {
    display: block !important;
    opacity: 1 !important;
  }

  /* 关闭状态样式 */
  .mobnav-btn.g_close span:nth-child(1) {
    transform: rotate(45deg) translateY(8px) !important;
  }

  .mobnav-btn.g_close span:nth-child(2) {
    opacity: 0 !important;
  }

  .mobnav-btn.g_close span:nth-child(3) {
    transform: rotate(-45deg) translateY(-8px) !important;
  }

  /* ===== 5. 修复导航菜单容器 ===== */
  .header-nav {
    position: fixed !important;
    top: 62px !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 62px) !important;
    background: #ffffff !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* 初始状态隐藏 */
    display: none !important;
  }

  /* ===== 5. 修复搜索按钮样式 ===== */
  .search-con {
    flex-shrink: 0 !important;
    -webkit-flex-shrink: 0 !important;
    -ms-flex-negative: 0 !important;
    /* 确保搜索按钮在汉堡菜单左侧 */
    order: 1 !important;
    -webkit-order: 1 !important;
    -webkit-box-ordinal-group: 2 !important;
    -moz-box-ordinal-group: 2 !important;
    -ms-flex-order: 1 !important;
  }

  /* ===== 6. 修复搜索框样式 ===== */
  .header-right .searchbox {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 62px !important;
    width: 100% !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    z-index: 9999 !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    /* 确保搜索框在页面切换时也能正确显示 */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    /* 防止被其他元素覆盖 */
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* ===== 7. 修复logo样式 ===== */
  .logo {
    padding: 0 !important;
    position: static !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    -webkit-flex-shrink: 0 !important;
    -ms-flex-negative: 0 !important;
    margin: 0 !important;
    /* 确保logo始终在左侧 */
    order: 1 !important;
    -webkit-order: 1 !important;
    -webkit-box-ordinal-group: 2 !important;
    -moz-box-ordinal-group: 2 !important;
    -ms-flex-order: 1 !important;
  }

  .logo img {
    height: 40px !important;
    max-width: 200px !important;
    display: block !important;
    /* 防止图片拉伸 */
    width: auto !important;
    object-fit: contain !important;
  }

  /* ===== 8. 修复二级菜单样式 ===== */
  .sub-nav {
    display: none !important;
    background: #f8f8f8 !important;
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    left: 0 !important;
    top: auto !important;
  }

  .header-nav li.cur .sub-nav {
    display: block !important;
  }

  /* ===== 9. 修复二级菜单链接样式 ===== */
  .sub-nav .sub-item h4 a {
    display: block !important;
    padding: 12px 20px 12px 35px !important;
    color: #555 !important;
    font-size: 14px !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    /* 确保点击区域足够大 */
    min-height: 44px !important;
    line-height: 1.5 !important;
    /* 禁用系统默认的触摸高亮 */
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .sub-nav .sub-item h4 a:hover,
  .sub-nav .sub-item h4 a:active {
    background: #eeeeee !important;
    color: #d82019 !important;
  }

  /* ===== 10. 修复展开/收起箭头 ===== */
  .phsearchicon {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    cursor: pointer !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .phsearchicon:after {
    content: '' !important;
    position: relative !important;
    top: -2px !important;
    right: 0 !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid #666 !important;
    border-bottom: 2px solid #666 !important;
    transform: rotate(45deg) !important;
    transition: transform 0.3s ease !important;
    display: block !important;
  }

  /* 二级菜单展开时箭头旋转 */
  .header-nav li.cur > .phsearchicon:after {
    transform: rotate(-135deg) !important;
    top: 2px !important;
  }

  /* ===== 11. 确保body顶部有正确的padding ===== */
  html body {
    padding-top: 62px !important; /* 匹配移动端header高度 */
    margin-top: 0 !important;
  }

  body {
    padding-top: 62px !important; /* 匹配移动端header高度 */
    margin-top: 0 !important;
  }

  html {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* ===== 12. 修复侧边导航样式 ===== */
  .headsideNav {
    position: fixed !important;
    top: 0 !important;
    right: -300px !important;
    width: 300px !important;
    height: 100vh !important;
    background: #fff !important;
    box-shadow: -2px 0 20px rgba(0, 0, 0, 0.1) !important;
    z-index: 10001 !important;
    transition: right 0.3s ease !important;
    overflow-y: auto !important;
  }

  .headsideNav.cur {
    right: 0 !important;
  }

  /* 同时兼容.active类（如果其他地方使用） */
  .headsideNav.active {
    right: 0 !important;
  }

  /* ===== 13. 修复遮罩层 ===== */
  .exit-off-canvas {
    display: none !important;
  }

  /* ===== 14. 首页特殊处理 ===== */
  /* 确保首页的导航栏也能正常工作 - 重置可能被首页CSS覆盖的样式 */
  body.home .header-nav {
    /* 移除 display: none !important 让 JavaScript 可以控制显示/隐藏 */
    position: fixed !important;
    top: 62px !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 62px) !important;
    background: #ffffff !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 首页：确保header不被其他样式覆盖 */
  body.home header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }

  /* 首页：确保导航按钮可见且可点击 */
  body.home .mobnav-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 100 !important;
    position: relative !important;
    /* 确保汉堡菜单在最右侧 */
    order: 2 !important;
    -webkit-order: 2 !important;
    -webkit-box-ordinal-group: 3 !important;
    -moz-box-ordinal-group: 3 !important;
    -ms-flex-order: 2 !important;
    margin-left: 5px !important;
  }

  /* 首页：隐藏联系方式和邮箱 */
  body.home .top-contact-info {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }

  /* 首页：确保搜索按钮在汉堡菜单左侧 */
  body.home .search-con {
    order: 1 !important;
    -webkit-order: 1 !important;
    -webkit-box-ordinal-group: 2 !important;
    -moz-box-ordinal-group: 2 !important;
    -ms-flex-order: 1 !important;
  }
}

/* 在中等屏幕尺寸下也隐藏联系方式，确保汉堡菜单有足够空间 */
@media screen and (max-width: 992px) {
  .top-contact-info {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
  
  .header-right {
    min-width: 80px !important;
    flex-wrap: nowrap !important;
  }
  
  .mobnav-btn {
    flex-shrink: 0 !important;
    -webkit-flex-shrink: 0 !important;
    -ms-flex-negative: 0 !important;
    order: 2 !important;
    -webkit-order: 2 !important;
    -webkit-box-ordinal-group: 3 !important;
    -moz-box-ordinal-group: 3 !important;
    -ms-flex-order: 2 !important;
    margin-left: 5px !important;
  }
  
  .search-con {
    order: 1 !important;
    -webkit-order: 1 !important;
    -webkit-box-ordinal-group: 2 !important;
    -moz-box-ordinal-group: 2 !important;
    -ms-flex-order: 1 !important;
    flex-shrink: 0 !important;
    -webkit-flex-shrink: 0 !important;
    -ms-flex-negative: 0 !important;
  }
}

/* ===== 15. 添加调试类（可选） ===== */
/* 如果需要调试，可以添加这个类来显示菜单 */
.mobile-menu-debug .header-nav {
  display: block !important;
}

.mobile-menu-debug .mobnav-btn {
  background-color: rgba(255, 0, 0, 0.3) !important;
}