/* style.css - 完全修复版本 */
/* 包含汉堡菜单、下拉菜单和滚动条问题修复 */

/* ==================== */
/* 基础样式和重置 */
/* ==================== */

/* 平滑过渡 */
.transition-smooth {
  transition: all 0.3s ease;
}

/* 图标动画 */
.icon-rotate {
  transition: transform 0.3s ease;
}

/* 红色分隔线 */
.red-divider {
  height: 2px;
  background-color: #a21441;
  width: 100%;
}

/* ==================== */
/* 导航栏样式 */
/* ==================== */
/* 确保导航栏有足够的z-index */
nav {
  z-index: 1000;
  position: relative;
}
/* 导航栏阴影 */
.nav-shadow {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* 导航项悬停效果 */
.nav-item:hover > button {
  color: #a21441;
}

.nav-item:hover .icon-rotate {
  transform: rotate(180deg);
}

/* ==================== */
/* 桌面端下拉菜单 */
/* ==================== */

/* 全屏下拉菜单样式 */
.mega-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: linear-gradient(135deg, #a21441 0%, #a21441 100%);
  box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.15),
    0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.4s ease;
  width: 100%;
  margin-left: calc(-50vw + 50%);
}
/* 下拉菜单激活状态 */
.mega-dropdown.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
.nav-item:hover .mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  z-index: 1001;
}

/* 确保下拉菜单覆盖整个屏幕宽度 */
.dropdown-container {
  position: static;
}
/* 修复轮播图的z-index，确保它不会覆盖导航 */
.in_part1,
.swiper,
.swiper-wrapper,
.swiper-slide {
  position: relative;
  z-index: 1 !important; /* 确保轮播图在导航下面 */
}
/* 确保导航项有正确的定位 */
.nav-item {
  position: relative;
}

/* 修复可能被覆盖的样式 */
.dropdown-container {
  position: static !important;
}
/* 简化下拉菜单样式 */
.simple-dropdown {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
}

.dropdown-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: white;
  font-size: 0.875rem;
  font-weight: 400;
  transition: all 0.3s ease;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.english-nav .dropdown-item,
[lang="en"] .dropdown-item,
.en-dropdown .dropdown-item {
    padding: 12px 20px !important; /* 增加上下内边距 */
    margin: 4px 0 !important; /* 增加项之间的外边距 */
    height: auto !important; /* 取消固定高度 */
    min-height: 45px !important; /* 设置最小高度 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dropdown-item:last-child {
  border-right: none;
}

.dropdown-item:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  background-color: white;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    width: 0;
  }
  to {
    width: 80%;
  }
}

/* ==================== */
/* 移动端菜单样式 */
/* ==================== */

/* 移动端菜单基础样式 */
#mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}

#mobile-menu.menu-open {
  display: block;
}

/* 遮罩层 */
#mobile-menu-overlay {
  position: absolute;
  inset: 0;
  background: black;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#mobile-menu.menu-open #mobile-menu-overlay {
  opacity: 0.3;
}

/* 侧边菜单面板 */
.mobile-menu-panel {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 83.333%;
  background: rgba(55, 65, 81, 0.95);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  
}

#mobile-menu.menu-open .mobile-menu-panel {
  transform: translateX(0);
}

/* 移动端下拉菜单容器 */
.mobile-dropdown-toggle {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  color: white;
  font-weight: normal;
  transition: all 0.3s ease;
  font-size: 15px
}

.mobile-dropdown-toggle:hover {
  color: #c0c0c0;
}

/* 下拉内容 - 默认隐藏 */
.mobile-dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.05);
}

/* 激活状态下显示 */
.mobile-dropdown-toggle.active + .mobile-dropdown-content {
  max-height: 500px;
}

/* 下拉菜单箭头动画 */
.mobile-dropdown-toggle i {
  transition: transform 0.3s ease;
}

.mobile-dropdown-toggle.active i {
  transform: rotate(180deg);
}

/* 下拉菜单项样式 */
.mobile-dropdown-content a {
  display: block;
  padding: 12px 24px;
  color: #c0c0c0;
  text-decoration: none;
  font-size: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.mobile-dropdown-content a:hover {
  color: #c0c0c0;
  background: rgba(255, 255, 255, 0.1);
  padding-left: 28px;
}

.mobile-dropdown-content a:last-child {
  border-bottom: none;
}

/* 移动端导航链接基础样式 */
#mobile-menu a {
  display: block;
  padding: 12px 16px;
  color: white;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  font-size: 15px;
  font-weight: 400;
}

#mobile-menu a:hover {
  color: #c0c0c0;
  background: rgba(255, 255, 255, 0.05);
}

/* 语言切换样式 */
#mobile-menu .flex.space-x-4 a {
  border: none;
  padding: 8px 12px;
  display: inline-block;
}

/* 关闭按钮样式 */
#mobile-menu-close {
  background: none;
  border: none;
  color: #c0c0c0;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

#mobile-menu-close:hover {
  background: rgba(162, 20, 65, 0.1);
}

/* ==================== */
/* Footer样式 */
/* ==================== */

/* Footer基础样式 */
.footer-nav-desktop {
  display: block;
}

.footer-nav-mobile {
  display: none;
}

.desktop-part1,
.desktop-divider,
.desktop-qrcode {
  display: block;
}

/* Footer Logo和联系方式布局 */
.desktop-part1 {
  display: flex;
  flex-direction: column;
}

/* 移动端折叠导航样式 */
.footer-mobile-item {
  position: relative;
}

.footer-mobile-toggle {
  background: none;
  border: none;
  color: white;
  font: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
}

.footer-mobile-toggle:hover {
  color: #c0c0c0;
}

.footer-mobile-toggle.active i {
  transform: rotate(180deg);
}

.footer-mobile-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-mobile-toggle.active + .footer-mobile-content {
  max-height: 500px;
}

/* ==================== */
/* 响应式设计 */
/* ==================== */

/* 移动端：768px及以下 */
@media (max-width: 768px) {
  /* 汉堡按钮 */
  #mobile-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: visible;
    opacity: 1;
    pointer-events: all;
  }
  
  /* 只隐藏顶部导航的桌面部分，不影响footer */
  header .hidden.md\:flex,
  nav .hidden.md\:flex {
    display: none;
  }
  
  /* Footer移动端样式 */
  .footer-nav-desktop {
    display: none;
  }
  
  .footer-nav-mobile {
    display: block;
  }
  
  /* 隐藏第一部分（Logo和联系方式）和分隔线 */
  .desktop-part1,
  .desktop-divider {
    display: none;
  }
  
  /* 隐藏二维码 */
  .desktop-qrcode {
    display: none;
  }
  
  /* 移动端折叠导航样式优化 */
  .footer-mobile-toggle {
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
  }
  
  /* 移动端底部间距调整 */
  .bg-\[url\(\'\.\/images\/img_05\.jpg\'\)\] {
    padding: 2rem 0;
  }
  
  .footer-mobile-content a {
    padding: 0.75rem 0;
  }
  
  /* 移动端footer导航字号控制 */
  .footer-mobile-toggle span {
    font-size: 16px;
    font-weight: 400;
  }
  
  .footer-mobile-content a {
    font-size: 16px;
    font-weight: 400;
  }
  
  /* 隐藏移动端的扫码下载电子样本项 */
  .footer-mobile-item:has(.desktop-qrcode) {
  display: none;
}
  
  /* 除了公司介绍和产品中心外，其余导航不需要二级菜单 */
 /* 修改：添加"联系我们"（第6个） */
.footer-mobile-item:not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(6)) .footer-mobile-toggle i {
    display: none;
}

.footer-mobile-item:not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(6)) .footer-mobile-content {
    display: none;
}
  /* 为没有二级菜单的项调整点击区域 
  .footer-mobile-item:not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(6)) .footer-mobile-toggle {
    cursor: default;
}*/
/* 改为：所有项都可以点击 */
  .footer-mobile-item .footer-mobile-toggle {
    cursor: pointer !important;
  }
/* 确保"联系我们"的内容默认显示 */
.footer-mobile-item:nth-child(6) .footer-mobile-content {
    display: block !important;
}
}

/* 平板端：769px - 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 隐藏汉堡按钮，显示桌面导航 */
  #mobile-menu-button {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  
  /* 只显示顶部导航的桌面部分，不影响footer */
  header .hidden.md\:flex,
  nav .hidden.md\:flex {
    display: flex;
  }
  
  /* 导航项调整 */
  .hidden.md\:flex.items-center.justify-end.flex-1 {
    gap: 2rem;
  }
  
  
  /* Footer桌面端样式 */
  .footer-nav-desktop {
    display: block;
  }
  
  .footer-nav-mobile {
    display: none;
  }
  
 
  
  /* 在平板端隐藏logo、服务热线、扫码下载电子样本和二维码 */
  .desktop-part1,
  .desktop-divider,
  .desktop-qrcode {
    display: none;
  }
  
  /* 特别隐藏2列布局时的二维码 */
  .footer-nav-desktop li:last-child,
  .footer-nav-desktop li.desktop-qrcode {
    display: none;
  }
}

/* 桌面端：1025px及以上 */
@media (min-width: 1025px) {
  /* 隐藏汉堡按钮 */
  #mobile-menu-button {
    display: none;!important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  /* 只显示顶部导航的桌面部分，不影响footer */
  header .hidden.md\:flex,
  nav .hidden.md\:flex {
    display: flex !important;
  }
  .hidden.md\:flex.items-center.justify-end.flex-1 {
    gap: 4rem;
  }
  
  /* Footer第一部分布局 */
  .desktop-part1 {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }
  
  .desktop-part1 > div:first-child {
    flex-shrink: 0;
    margin-bottom: 0;
  }
  
  .desktop-part1 > div:last-child {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ==================== */
/* 滚动条修复 */
/* ==================== */

/* 修复移动菜单打开时滚动条消失问题 */
body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* 确保桌面端滚动正常 */
body:not(.menu-open) {
  overflow: auto;
  position: static;
  width: auto;
  height: auto;
}

/* ==================== */
/* 紧急修复样式 */
/* ==================== */

/* 强制修复移动菜单显示 */
#mobile-menu.menu-open {
  display: block;
  visibility: visible;
  opacity: 1;
}

#mobile-menu:not(.menu-open) {
  display: none;
}

/* 修复移动菜单面板显示 */
#mobile-menu.menu-open .mobile-menu-panel {
  display: flex;
  transform: translateX(0);
}

/* 修复遮罩层显示 */
#mobile-menu.menu-open #mobile-menu-overlay {
  display: block;
  opacity: 0.3;
}

/* 修复z-index层级 */
#mobile-menu {
  z-index: 99999;
}

.mobile-menu-panel {
  z-index: 100000;
}

#mobile-menu-overlay {
  z-index: 99998;
}

/* 紧急修复 - 下拉菜单默认折叠 */
.mobile-dropdown-content {
  max-height: 0;
  overflow: hidden;
  display: block;
}

.mobile-dropdown-toggle.active + .mobile-dropdown-content,
.mobile-dropdown-toggle[class*="active"] + .mobile-dropdown-content {
  max-height: 500px;
}

.mobile-dropdown-content > * {
  opacity: 1;
  visibility: visible;
  display: block;
}

.mobile-dropdown-content:not(.active) {
  max-height: 0;
}

#mobile-menu .mobile-dropdown-content {
  max-height: 0;
  overflow: hidden;
}

#mobile-menu .mobile-dropdown-toggle.active + .mobile-dropdown-content,
#mobile-menu .mobile-dropdown-toggle[class*="active"] + .mobile-dropdown-content {
  max-height: 500px;
}

/* ==================== */
/* 动画优化 */
/* ==================== */

/* 平滑的下拉菜单动画 */
.mobile-dropdown-content {
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 菜单面板滑入动画 */
.mobile-menu-panel {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 遮罩层淡入动画 */
#mobile-menu-overlay {
  transition: opacity 0.3s ease-in-out;
}

/* ==================== */
/* 性能优化 */
/* ==================== */

/* 减少重绘 */
.mobile-menu-panel {
  will-change: transform;
}

.mobile-dropdown-content {
  will-change: max-height;
}

/* 硬件加速 */
#mobile-menu.menu-open .mobile-menu-panel {
  transform: translate3d(0, 0, 0);
}

/* ==================== */
/* 可访问性改进 */
/* ==================== */

/* 焦点样式 */
#mobile-menu-button:focus-visible {
  outline: 2px solid #a21441;
  outline-offset: 2px;
}

.mobile-dropdown-toggle:focus-visible {
  outline: 2px solid #a21441;
  outline-offset: -2px;
}

/* 高对比度支持 */
@media (prefers-contrast: high) {
  #mobile-menu {
    background: rgba(0, 0, 0, 0.98);
  }
  
  .mobile-dropdown-content a {
    border-bottom-color: rgba(255, 255, 255, 0.3);
  }
}

/* 减少动画支持 */
@media (prefers-reduced-motion: reduce) {
  .transition-smooth,
  .mobile-menu-panel,
  .mobile-dropdown-content,
  .mega-dropdown,
  .icon-rotate {
    transition: none;
    animation: none;
  }
}

/* ==================== */
/* 浏览器兼容性修复 */
/* ==================== */

/* Edge/IE兼容性修复 */
@supports (-ms-ime-align: auto) {
  #mobile-menu {
    -ms-overflow-style: none;
  }
  
  .mobile-dropdown-content {
    -ms-transition: none;
  }
}

/* Firefox滚动条修复 */
@-moz-document url-prefix() {
  body.menu-open {
    overflow: hidden;
    margin-right: 0;
  }
}

/* Safari兼容性 */
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
    #mobile-menu.menu-open {
      -webkit-overflow-scrolling: touch;
    }
  }
}
.nav-item .mega-dropdown.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}