/* 页面最小宽度限制 - 在顶部声明确保优先级 */
html, body, #app {
  min-width: 380px;
}

/* 当设备实际宽度小于380px时，确保内容不压缩 */
@media (max-width: 380px) {
  /* 允许水平滚动 */
  html, body {
    overflow-x: auto !important;
  }
  
  /* 确保各布局容器遵循最小宽度 */
  .navbar-container,
  .navbar,
  .main-content,
  .footer-content {
    min-width: 380px !important;
  }
  
  /* 确保移动菜单遵循最小宽度 */
  .mobile-menu-drawer {
    min-width: 320px !important;
  }
}

/* 移动端强制样式 - 确保移动端菜单正常显示 */

/* 强制汉堡菜单显示 */
@media (max-width: 768px) {
  /* 导航栏固定在顶部 */
  .navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background-color: rgba(255, 255, 255, 0.95) !important; /* 亮色模式背景 */
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    height: 60px !important; /* 确保导航栏高度固定 */
  }
  
  /* 暗黑模式下导航栏背景 */
  .dark .navbar {
    background-color: rgba(18, 18, 18, 0.95) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* 为固定导航栏添加内容偏移 */
  .main-content {
    padding-top: 120px !important; /* 进一步增加内边距 */
    margin-top: 0 !important; /* 移除可能存在的上边距 */
  }
  
  /* 对特定页面类型的顶部间距进行调整 */
  .page-header,
  .section-title,
  .home .hero,
  .about .about-header,
  .page-container > *:first-child {
    padding-top: 30px !important;
    margin-top: 0 !important;
  }
  
  /* hero-section 不需要额外的 padding-top，因为会影响背景图定位 */
  .hero-section {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* 特别为About页面增加额外的顶部间距 */
  .about-page .hero-section {
    margin-top: 60px !important;
    margin-bottom: 40px !important;
  }
  
  /* 为其他页面增加移动端顶部间距 */
  .project-page .hero-section {
    margin-top: 60px !important;
    margin-bottom: 40px !important;
  }
  
  .ecosystem-page .hero-section {
    margin-top: 60px !important;
    margin-bottom: 40px !important;
  }
  
  .whitepaper-page .hero-section {  
    margin-top: 60px !important;
    margin-bottom: 40px !important;
  }
  
  .participate-page .hero-section {
    margin-top: 60px !important;
    margin-bottom: 40px !important;
  }
  
  .team-page .hero-section {
    margin-top: 60px !important;
    margin-bottom: 40px !important;
  }
  
  .resources-page .hero-section {
    margin-top: 60px !important;
    margin-bottom: 40px !important;
  }
  
  /* Contact页面顶部间距 */
  .contact-page {
    margin-top: 60px !important;
  }
  
  /* 调整导航栏布局，确保所有元素对齐 */
  .navbar-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 15px !important;
    height: 60px !important;
  }
  
  /* 汉堡菜单按钮样式 - 进一步缩小 */
  .mobile-menu-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 9999 !important;
    width: 16px !important; /* 更小的宽度 */
    height: 14px !important; /* 更小的高度 */
    flex-direction: column !important;
    justify-content: space-between !important;
    margin-right: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
  }
  
  .mobile-menu-button span {
    display: block !important;
    height: 1.5px !important; /* 更细的线条 */
    width: 100% !important;
    background-color: var(--text-color) !important;
    border-radius: 1px !important;
    margin: 0 !important;
  }
  
  /* 暗黑模式下的汉堡菜单 */
  .dark .mobile-menu-button span {
    background-color: white !important;
  }
  
  /* 强制隐藏桌面导航 - 仅在移动端 */
  .navbar-menu {
    display: none !important;
  }
  
  /* 移动端导航栏样式 */
  .navbar-logo-section {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }
  
  .navbar-logo-section .logo-wrapper {
    padding: 5px !important;
    border-radius: 8px !important;
  }
  
  .navbar-logo-section .logo-wrapper img {
    height: 25px !important;
    width: auto !important;
  }
  
  .navbar-logo-section .logo-text {
    font-size: 1.4rem !important;
    margin-left: 8px !important;
  }
  
  /* 右侧操作按钮对齐 */
  .navbar-actions-section {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  
  .navbar-actions-section .el-button {
    padding: 8px !important;
    height: 32px !important;
    width: 32px !important;
  }
  
  .navbar-actions-section .el-icon {
    font-size: 16px !important;
  }
  
  /* 移动端语言按钮样式 */
  .navbar-actions-section .globe-icon {
    width: 16px !important;
    height: 16px !important;
  }
  
  /* 移动菜单抽屉样式增强 - 从左侧弹出 */
  .mobile-menu-drawer {
    width: 85% !important;
    max-width: 320px !important;
    z-index: 10000 !important;
    left: -100% !important; /* 从左侧开始 */
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5) !important; /* 调整阴影方向 */
    transition: left 0.3s ease !important; /* 更改动画方向 */
  }
  
  .mobile-menu-drawer.open {
    left: 0 !important; /* 打开时位置为0 */
  }
  
  .mobile-menu-overlay {
    z-index: 9990 !important;
  }
  
  /* 锁定移动端body滚动，但只在移动菜单打开时 */
  body.mobile-menu-open {
    overflow: hidden !important;
  }
  
  /* Home页面标题间距调整 - 避免被导航栏遮挡 */
  .home h1 {
    margin-top: 40px !important;
    padding-top: 20px !important;
  }
}

/* 确保标题在移动端正确显示 */
@media (max-width: 768px) {
  h1, h2 {
    font-size: 1.8rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
    width: 100% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }
} 

/* 确保所有页面的标题不被导航栏遮挡 */
.about h1,
.project h1,
.ecosystem h1,
.whitepaper h1,
.participate h1,
.team h1,
.resources h1,
.contact h1,
.hero-title,
.page-title {
  margin-top: 40px !important;
  padding-top: 20px !important;
}