/* ============================================================================
 * h5-overrides.css — LinkItVPN 公开官网 H5 / 移动端自适配覆盖样式
 *
 * Scope:
 *   仅覆盖（override），不替换 style.css 的基础规则。
 *   只面向公开页面：首页、法律/关于、登录、注册、下载入口区。
 *   不影响 adminWeb 后台、登录后用户中心。
 *
 * Viewport 矩阵（与 SPEC §3.A1 一致）：
 *   - <= 480px : 360x740 / 390x844 等手机竖屏
 *   - <= 768px : 768x1024 平板
 *   桌面端 (>768px) 保持原样，确保桌面视觉零回归。
 *
 * Issue: PRJ_LINKITVPN-17
 * ==========================================================================*/

/* ---- 全局：根除水平滚动条（最常见 H5 故障） ----------------------------- */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }
  .container,
  .container-fluid {
    max-width: 100vw;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---- 头部导航：折叠菜单可点、链接触摸友好 ------------------------------ */
@media (max-width: 768px) {
  .th-header,
  .header-area,
  .menu-area {
    z-index: 1030;
  }
  .th-header .main-menu a,
  .menu-area a.nav-link,
  .menu-area .menu-item a {
    min-height: 44px;
    line-height: 1.4;
    padding: 10px 12px;
  }
  .th-header .menu-toggle,
  .header-area .menu-toggle,
  [data-bs-toggle="collapse"] {
    min-width: 44px;
    min-height: 44px;
  }
  .menu-area .nav-menu,
  .th-header .navbar-nav {
    flex-wrap: wrap;
  }
}

/* ---- Hero 区：标题/副标题/按钮组在窄屏可读可点 ------------------------- */
@media (max-width: 768px) {
  .hero-title,
  .th-hero-title,
  h1.hero-title {
    font-size: 32px !important;
    line-height: 1.2;
    word-break: break-word;
  }
  .hero-text,
  .th-hero-text {
    font-size: 15px;
    line-height: 1.6;
  }
  .th-hero-thumb,
  .hero-thumb {
    margin-top: 24px;
  }
  .hero-thumb img,
  .th-hero-thumb img {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 480px) {
  .hero-title,
  .th-hero-title,
  h1.hero-title {
    font-size: 26px !important;
  }
  .hero-text,
  .th-hero-text {
    font-size: 14px;
  }
}

/* ---- 下载按钮组：换行不重叠，触摸目标 >= 44px ------------------------- */
@media (max-width: 768px) {
  .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .btn-group .th-btn,
  .btn-group a.th-btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 12px;
  }
  .btn-group .th-btn img {
    max-height: 26px !important;
  }
}

/* ---- Section grid：单列堆叠，避免横排被挤裂 ---------------------------- */
@media (max-width: 768px) {
  .col-xxl-5,
  .col-xxl-6,
  .col-xxl-7,
  .col-xl-5,
  .col-xl-6,
  .col-xl-7,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row {
    margin-left: -8px;
    margin-right: -8px;
  }
  .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 16px;
  }
  .pricing-card,
  .feature-card,
  .service-card,
  .faq-card {
    margin-bottom: 16px;
  }
}

/* ---- 价格 / 功能 / FAQ 区块：标题与正文比例适配 ----------------------- */
@media (max-width: 768px) {
  h2,
  .sec-title {
    font-size: 26px !important;
    line-height: 1.25;
  }
  h3,
  .box-title {
    font-size: 20px !important;
  }
  .sec-title2,
  .sub-title {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  h2,
  .sec-title {
    font-size: 22px !important;
  }
  h3,
  .box-title {
    font-size: 18px !important;
  }
}

/* ---- Footer：链接换行不重叠 -------------------------------------------- */
@media (max-width: 768px) {
  .footer-area .widget,
  .footer-area .widget_nav_menu {
    margin-bottom: 24px;
  }
  .footer-area ul {
    padding-left: 0;
    list-style: none;
  }
  .footer-area ul li {
    display: block;
    margin-bottom: 6px;
  }
  .footer-area .copyright-wrap,
  .footer-area .copyright {
    text-align: center;
    flex-direction: column;
    gap: 8px;
  }
}

/* ---- 表单（登录 / 注册 / 联系）：input 全宽，font-size 16px 防 iOS 放大 - */
@media (max-width: 768px) {
  .login-form,
  .register-form,
  .contact-form,
  form .form-group,
  form .mb-3 {
    width: 100%;
  }
  input.form-control,
  textarea.form-control,
  select.form-control,
  .form-control-line,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"] {
    width: 100%;
    font-size: 16px;
    min-height: 44px;
  }
  button[type="submit"],
  .submit-btn,
  .login-btn,
  .register-btn {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }
}

/* ---- 法律 / 关于：长文不撑宽，留出边距 -------------------------------- */
@media (max-width: 768px) {
  .legal-content,
  .privacy-content,
  .terms-content,
  .cookies-content,
  .aboutus-content,
  article {
    padding-left: 16px;
    padding-right: 16px;
    word-break: break-word;
  }
  .legal-content table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
}