/**
 * TOBI Mobile UX Fixes
 * 修复移动端菜单、表单与适配性问题
 */

/* ============================================================
   1. 移动端菜单遮罩与滚动锁定
   ============================================================ */
html.mobile-menu-open,
body.mobile-menu-open {
  overflow: hidden;
  height: 100%;
}

body.mobile-menu-open::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(11, 31, 58, 0.55);
  backdrop-filter: blur(2px);
  z-index: 40;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

body.mobile-menu-open::before {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu {
  position: relative;
  z-index: 45;
}

.mobile-menu.open {
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   2. 汉堡按钮可访问性增强
   ============================================================ */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--tobi-primary-foreground);
  margin: 4px 0;
  transition: transform 0.25s ease, opacity 0.2s ease;
  border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* ============================================================
   3. 移动端表单优化（防止 iOS 聚焦缩放 + 增大触控区域）
   ============================================================ */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="url"],
  input[type="search"],
  textarea,
  select,
  .form-input {
    font-size: 16px !important;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 10px;
    -webkit-appearance: none;
  }

  textarea.form-input,
  textarea {
    min-height: 88px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
  }

  label:has(input[type="checkbox"]),
  label:has(input[type="radio"]) {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* 按钮触控区域 */
  button,
  .btn-flame,
  .btn-outline-dark,
  [role="button"] {
    min-height: 44px;
  }

  /* 导航链接触控区域 */
  .mobile-menu a {
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* 防止表格/图片撑破容器 */
  table,
  iframe,
  video,
  img {
    max-width: 100%;
  }

  /* 安全区适配（刘海屏） */
  .mobile-menu,
  nav {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ============================================================
   4. 小屏通用适配
   ============================================================ */
@media (max-width: 640px) {
  .section-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  /* 保证卡片/表格在小屏不溢出 */
  .overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}