/* 移动端头部导航样式 - 基于 ycongraeducom-yd 设计，使用前缀类名避免冲突 */

/* 默认隐藏移动端导航，仅在移动端显示 */
.mobile-nav-wrapper {
  display: none;
  visibility: hidden;
  opacity: 0;
  height: 16vw !important;
  min-height: 60px !important;
}

/* 移动端专用导航栏样式 - 仅在768px及以下显示 */
@media (max-width: 768px) {
  
  /* 重置任何可能的flex-direction覆盖 */
  * {
    box-sizing: border-box;
  }
  /* 显示移动端导航包装器 */
  .mobile-nav-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* 导航栏主容器 - 强制横向布局 */
  .mobile-nav-main {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    z-index: 1314999;
    height: 16vw !important;
    padding: 0 4vw !important;
    background: linear-gradient(135deg, #114084 0%, #0A2B5C 100%) !important;
    box-shadow: 0 0.53vw 2.67vw rgba(0,0,0,0.1) !important;
    backdrop-filter: blur(2.67vw) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #fff !important;
    flex-wrap: nowrap !important;
  }

  /* 确保没有其他样式覆盖 */
  body .mobile-nav-main,
  html .mobile-nav-main,
  div .mobile-nav-main {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Logo区域 */
  .mobile-nav-logo {
    width: 20vw !important;
    height: 8vw !important;
    min-width: 21.33vw !important;
    min-height: 8.53vw !important;
    max-width: 32vw !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  .mobile-nav-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* 电话区域 */
  .mobile-nav-phone {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  .mobile-nav-phone img {
    width: 4.5vw !important;
    height: 4.5vw !important;
    min-width: 4.8vw;
    min-height: 4.8vw;
    margin-right: 2vw !important;
  }

  .mobile-nav-phone a {
    font-size: 3.5vw !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-decoration: none !important;
    text-shadow: 0 0.27vw 0.53vw rgba(0,0,0,0.1) !important;
    white-space: nowrap !important;
  }

  /* 菜单按钮 */
  .mobile-nav-menu-btn {
    min-width: 16vw !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
  }

  .mobile-nav-menu-btn i {
    font-size: 4vw !important;
    margin-right: 2vw !important;
    color: #fff !important;
  }

  .mobile-nav-menu-btn span {
    font-size: 3.5vw !important;
    font-weight: 500 !important;
    color: #fff !important;
    white-space: nowrap !important;
  }

  /* 下拉菜单容器 */
  .mobile-nav-box {
    position: fixed !important;
    top: 16vw !important;
    min-top: 16vw;
    right: 0 !important;
    width: 3.702rem !important;
    max-width: 85vw;
    background: #114084 !important;
    box-shadow: 0.53vw 0.53vw 5.33vw rgba(0,0,0,0.3);
    transform: translateX(100%) !important;
    transition: transform 0.3s ease-in-out;
    z-index: 1314998;
  }

  .mobile-nav-box.translate-x-0 {
    transform: translateX(0) !important;
  }

  /* 菜单项样式 */
  .mobile-nav-item {
    position: relative;
    display: block !important;
    height: 0.812rem !important;
    line-height: 0.812rem !important;
    padding-left: 0.426rem !important;
    font-size: 0.373rem !important;
    color: rgba(255,255,255,0.9) !important;
    border-bottom: 0.27vw solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: 400;
  }

  .mobile-nav-item:hover,
  .mobile-nav-item--active {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    transform: translateX(0.107rem);
  }

  .mobile-nav-item:last-child {
    border-bottom: none;
  }

  /* 下拉菜单项图标 */
  .mobile-nav-icon {
    position: absolute;
    right: 0.213rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.170rem !important;
    transition: transform 0.3s ease;
    color: rgba(255,255,255,0.6);
  }

  .mobile-nav-icon.rotate-90 {
    transform: translateY(-50%) rotate(90deg);
    color: #fff;
  }

  /* 展开状态的菜单项 */
  .mobile-nav-item--expanded {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
  }

  /* 子菜单样式 */
  .mobile-navItemsProject {
    position: fixed !important;
    top: 16vw !important;
    right: -100% !important;
    min-width: 3.7rem !important;
    max-width: 80vw;
    background: #fff !important;
    border-radius: 2.13vw 0 0 2.13vw;
    box-shadow: -0.53vw 0.53vw 5.33vw rgba(0,0,0,0.3);
    max-height: calc(100vh - 16vw);
    overflow-y: auto;
    padding: 5.33vw !important;
    transform: translateX(0);
    transition: right 0.3s ease-in-out;
    z-index: 1314998;
    opacity: 0;
    visibility: hidden;
  }
  
  .mobile-navItemsProject.show {
    right: 3.702rem !important;
    opacity: 1;
    visibility: visible;
  }

  /* 子菜单区域标题 */
  .mobile-navItemsProject span[class*="text-[#0E3E83]"] {
    font-size: 0.341rem !important;
    font-weight: 600;
    color: #0E3E83 !important;
    padding: 0.107rem 0;
    display: block;
    width: 18.67vw;
  }

  .mobile-navItemsProject .nav-area {
    display: flex;
  }
   .mobile-navItemsProject .nav-area + .nav-area {
    margin-top: 2.67vw;
   }

  /* 子菜单链接 */
  .mobile-submenu-link {
    font-size: 3.73vw !important;
    color: #666 !important;
    padding: 1.33vw 0 !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    display: block !important;
  }

  .mobile-submenu-link:hover {
    color: #0E3E83 !important;
    padding-left: 3.2vw !important;
    background-color: #f8f9fa !important;
  }
  
  .mobile-submenu-link:last-child {
    border-bottom: none;
  }

  /* 遮罩层 */
  .mobile-nav-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(0.8vw);
    z-index: 1314997;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease;
  }

  /* 防止菜单打开时背景滚动 */
  body.mobile-menu-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
  }

  /* 横屏适配 */
  @media (orientation: landscape) and (max-height: 500px) {
    .mobile-nav-main {
      height: 13.33vw !important;
    }
    
    body {
      padding-top: 13.33vw !important;
    }
    
    .mobile-nav-box {
      top: 13.33vw !important;
    }
    
    .mobile-navItemsProject {
      top: 13.33vw !important;
      max-height: 60vh;
    }
    
    .mobile-nav-item {
      height: 0.639rem !important;
      line-height: 0.639rem !important;
      padding-left: 0.320rem !important;
      font-size: 0.298rem !important;
    }
  }
}

/* 平板端适配 (769px - 1024px) - 隐藏移动端导航 */
@media (min-width: 769px) and (max-width: 1024px) {
  .mobile-nav-wrapper {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* PC端和平板端强制隐藏移动端导航 - 769px及以上 */
@media (min-width: 769px) {
  /* 隐藏移动端导航容器 */
  .mobile-nav-wrapper,
  .mobile-nav-main,
  .mobile-nav-box,
  .mobile-navItemsProject,
  .mobile-nav-mask {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -1 !important;
  }
  
  /* 确保移动端导航组件内部元素完全隐藏 */
  .mobile-nav-wrapper *,
  .mobile-nav-wrapper .mobile-nav-main,
  .mobile-nav-wrapper .mobile-nav-box,
  .mobile-nav-wrapper .mobile-navItemsProject,
  .mobile-nav-wrapper .mobile-nav-mask {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* 重置body padding（移动端添加的） */
  body {
    padding-top: 0 !important;
  }
  
  /* 移除移动端菜单打开时的body样式 */
  body.mobile-menu-open {
    overflow: auto !important;
    position: static !important;
    width: auto !important;
  }
}

/* 触摸优化 */
@media (hover: none) and (pointer: coarse) {
  .mobile-nav-item {
    -webkit-tap-highlight-color: rgba(255,255,255,0.1);
    tap-highlight-color: rgba(255,255,255,0.1);
  }
  
  .mobile-nav-item:active {
    background: rgba(255,255,255,0.2) !important;
  }
}

/* 无障碍支持 */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-box,
  .mobile-navItemsProject,
  .mobile-nav-mask,
  .mobile-nav-item,
  .mobile-nav-icon {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .mobile-nav-main {
    background: #000 !important;
    border-bottom: 0.53vw solid #fff;
  }
  
  .mobile-nav-item {
    border-bottom: 0.27vw solid #fff !important;
  }
  
  .mobile-navItemsProject {
    background: #fff !important;
    border: 0.53vw solid #000;
  }
}

/* AOS动画支持 */
.mobile-nav-box[data-aos="slide-right"] {
  transform: translateX(0) !important;
}

.mobile-nav-box[data-aos="slide-right"].aos-animate {
  transform: translateX(0) !important;
}

.mobile-navItemsProject[data-aos="slide-left"] {
  opacity: 0;
  right: -100%;
}

.mobile-navItemsProject[data-aos="slide-left"].aos-animate {
  opacity: 1;
  right: 0;
}