/* ============================================================
   移动端兼容修复样式
   ------------------------------------------------------------
   加载顺序：style.css 之后加载，用于覆盖窄屏下的错位问题。
   解决的问题：
   1. 小屏导航栏 logo + 按钮 + 汉堡菜单超出屏宽，右侧溢出错位
   2. 容器左右内边距 24px 在 375px 屏上过大，内容区过窄
   3. 长标题、表格、按钮在窄屏下溢出
   ============================================================ */

/* ---------- 全局：禁止横向溢出 ---------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, svg, video, table {
  max-width: 100%;
}

/* 长英文/URL/数字强制换行，避免撑破容器 */
.hero-desc,
.section-head p,
.service-card p,
.faq-body,
td, th {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ============================================================
   1. 导航栏错位修复（核心）
   ------------------------------------------------------------
   实测：导航完整展开需要 1117px 可用宽度
     logo 221 + 导航项 550 + 按钮区 243 + 间距 56 + 内边距 48
   style.css 原断点为 1080px，导致 1080~1116px 区间错位。
   此处在 1120px 精确接管断点（含折叠菜单样式），消除真空区。
   ============================================================ */
@media (max-width: 1120px) {
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .navbar.menu-open .nav-links,
  /* JS 失效时的纯 CSS 兜底：点击（聚焦）汉堡按钮也能展开菜单 */
  .navbar:focus-within .nav-links {
    display: flex;
    position: fixed;
    top: var(--nav-h, 68px);
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    gap: 0;
    padding: 10px 24px 20px;
    border-bottom: 1px solid var(--border, #E8ECF3);
    box-shadow: var(--shadow-md, 0 10px 30px rgba(16, 24, 40, .1));
    max-height: calc(100vh - var(--nav-h, 68px));
    overflow-y: auto;
  }
  .navbar.menu-open .nav-links a,
  .navbar:focus-within .nav-links a {
    padding: 13px 4px;
    font-size: 16px;
    border-bottom: 1px solid var(--gray-bg, #F5F7FA);
    color: var(--text-2, #46516B);
  }
  .navbar.menu-open .nav-links a.active,
  .navbar:focus-within .nav-links a.active {
    color: var(--primary, #1D5BD8);
  }
  .navbar.menu-open .nav-links a::after,
  .navbar:focus-within .nav-links a::after {
    display: none;
  }
}

/* 平板/中屏：导航容器铺满，避免居中留白导致菜单偏在中间 */
@media (max-width: 1200px) {
  .nav-inner {
    max-width: 100%;
  }
}

/* 折叠状态下修复右对齐：
   .nav-links 被 display:none 隐藏后，其 margin-left:auto 会让后续元素
   被推到中间，导致按钮和汉堡菜单不贴右边缘。让操作区自己撑到最右即可。 */
@media (max-width: 1120px) {
  .nav-actions {
    margin-left: auto;
    margin-right: 0;
    flex: 0 0 auto;
  }
}

@media (max-width: 900px) {
  /* 容器收窄内边距，给小屏腾出空间 */
  .nav-inner {
    gap: 10px;
    padding-left: 14px;
    padding-right: 14px;
  }

  /* logo 允许收缩，不再硬撑 */
  .logo {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }
  .logo-text {
    min-width: 0;
    overflow: hidden;
  }
  .logo-text strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .logo-text em {
    display: none;
  }
  .logo-icon svg {
    width: 32px;
    height: 32px;
  }

  /* 右侧动作区不收缩，保证按钮和汉堡菜单完整 */
  .nav-actions {
    flex: 0 0 auto;
    gap: 8px;
  }

  /* 汉堡菜单：多重加固，确保在任何浏览器下都稳定显示且不被裁切
     - display + visibility + opacity 三重显式声明
     - min/max 宽高锁死，杜绝被 flex 压缩或拉伸
     - 不参与收缩、不被遮挡 */
  .nav-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 8px;
    box-sizing: border-box;
    position: static;
    z-index: 2;
  }
  .nav-toggle span {
    display: block;
    width: 100%;
  }
}

/* ---------- 超小屏（≤430px，如 iPhone 12/13/14/15 竖屏）---------- */
@media (max-width: 430px) {
  .nav-inner {
    gap: 6px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .logo {
    gap: 7px;
  }
  .logo-icon svg {
    width: 28px;
    height: 28px;
  }
  .logo-text strong {
    font-size: 13px;
  }
  .nav-actions {
    gap: 6px;
    flex: 0 0 auto;
  }
  .nav-actions .btn-sm {
    padding: 8px 12px;
    font-size: 12.5px;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .nav-toggle {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 7px;
  }
  .nav-toggle span {
    height: 2.2px;
  }
}

/* ---------- 极窄屏（≤360px，如小屏安卓）---------- */
@media (max-width: 360px) {
  .logo {
    gap: 6px;
  }
  .logo-icon svg {
    width: 26px;
    height: 26px;
  }
  .logo-text strong {
    font-size: 12.5px;
    letter-spacing: -0.2px;
  }
  .nav-actions .btn-sm {
    padding: 7px 10px;
    font-size: 12px;
  }
  /* 极窄屏仍保证最小可点击尺寸 */
  .nav-toggle {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 6px;
  }
}

/* ============================================================
   2. 内容区容器内边距收窄
   ============================================================ */
@media (max-width: 720px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 430px) {
  .container {
    padding-left: 13px;
    padding-right: 13px;
  }
}

/* ============================================================
   3. 标题与正文排版
   ============================================================ */
@media (max-width: 720px) {
  .section-head h2,
  .page-hero h1 {
    font-size: 24px;
    line-height: 1.35;
  }
  .section-head p {
    font-size: 14.5px;
  }
}

@media (max-width: 430px) {
  .section-head h2,
  .page-hero h1 {
    font-size: 21px;
  }
  .section-head p,
  .hero-desc {
    font-size: 14px;
  }
  .section {
    padding: 48px 0;
  }
}

/* ============================================================
   4. 按钮：窄屏下保证可点击且不溢出
   ============================================================ */
@media (max-width: 720px) {
  .btn {
    white-space: nowrap;
  }
  .hero-cta {
    flex-wrap: wrap;
    gap: 12px;
  }
  .hero-cta .btn {
    flex: 1 1 auto;
    min-width: 150px;
    justify-content: center;
  }
}

@media (max-width: 430px) {
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta .btn {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   5. 表格（规格表）窄屏横向滚动，避免撑破布局
   ============================================================ */
@media (max-width: 720px) {
  .spec-table-wrap {
    -webkit-overflow-scrolling: touch;
  }
  table.spec-table {
    min-width: 520px;
  }
  th, td {
    padding: 10px 12px;
    font-size: 13.5px;
  }
}

/* ============================================================
   6. 表单：输入控件宽度自适应
   ============================================================ */
@media (max-width: 720px) {
  .form-group input,
  .form-group textarea,
  .form-group select {
    width: 100%;
    font-size: 16px; /* iOS 下输入框字号小于 16px 会触发页面自动缩放 */
    box-sizing: border-box;
  }
  .agent-form-wrap {
    padding: 26px 18px;
  }
}

/* ============================================================
   7. 卡片与网格：窄屏单列
   ============================================================ */
@media (max-width: 560px) {
  .services-grid,
  .process-steps,
  .advantages-grid,
  .pricing-grid,
  .voice-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 卡片内边距收窄 */
@media (max-width: 430px) {
  .service-card,
  .pricing-card,
  .voice-card {
    padding: 20px 16px;
  }
}

/* ============================================================
   8. 浮动按钮：避免遮挡内容
   ============================================================ */
@media (max-width: 430px) {
  .float-actions {
    right: 10px;
    bottom: 14px;
  }
  .float-actions a,
  .float-actions button {
    width: 48px;
    height: 48px;
  }
}

/* ============================================================
   9. 页脚
   ============================================================ */
@media (max-width: 430px) {
  .footer-inner {
    gap: 28px;
  }
  .footer-bottom-inner {
    font-size: 12.5px;
    line-height: 1.7;
  }
}

/* ============================================================
   10. 触屏优化：移除 hover 依赖，加大点击区域
   ============================================================ */
@media (hover: none) {
  .nav-links a:hover::after {
    right: 100%; /* 触屏不保留 hover 下划线 */
  }
  a, button {
    -webkit-tap-highlight-color: rgba(29, 91, 216, .12);
  }
}

/* ============================================================
   11. 触摸设备强制折叠导航（含手机开启「电脑版/桌面模式」）
   ------------------------------------------------------------
   手机开启桌面模式后，视口会被模拟为 1280px 甚至更宽，
   按宽度判断会走「桌面平铺导航」，但屏幕仍小、仍是手指操作，
   此时三道杠比平铺更好用。这里通过触摸能力识别设备，
   强制使用折叠菜单；真实电脑（鼠标操作）不受影响。
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 8px;
    box-sizing: border-box;
  }
  .nav-toggle span {
    display: block;
    width: 100%;
  }
  .nav-actions {
    margin-left: auto;
    margin-right: 0;
    flex: 0 0 auto;
  }
  .navbar.menu-open .nav-links,
  .navbar:focus-within .nav-links {
    display: flex;
    position: fixed;
    top: var(--nav-h, 68px);
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    gap: 0;
    padding: 10px 24px 20px;
    border-bottom: 1px solid var(--border, #E8ECF3);
    box-shadow: var(--shadow-md, 0 10px 30px rgba(16, 24, 40, .1));
    max-height: calc(100vh - var(--nav-h, 68px));
    overflow-y: auto;
  }
  .navbar.menu-open .nav-links a,
  .navbar:focus-within .nav-links a {
    padding: 13px 4px;
    font-size: 16px;
    border-bottom: 1px solid var(--gray-bg, #F5F7FA);
    color: var(--text-2, #46516B);
  }
  .navbar.menu-open .nav-links a.active,
  .navbar:focus-within .nav-links a.active {
    color: var(--primary, #1D5BD8);
  }
  .navbar.menu-open .nav-links a::after,
  .navbar:focus-within .nav-links a::after {
    display: none;
  }
}

/* ============================================================
   8. 多端兼容性修复（2026-10 排查）
   ============================================================ */

/* 8.1 面包屑触控目标过小（实测 26x22，标准要求 ≥44x44）
   用 padding 扩大热区、负 margin 抵消视觉位移 */
.breadcrumb a {
  padding: 10px 6px;
  margin: -10px -6px;
}

/* 8.2 规格表在窄屏是横向滑动设计，补一个滑动提示 */
.spec-table-wrap { -webkit-overflow-scrolling: touch; }
.spec-table-wrap::after {
  content: "← 左右滑动查看完整表格 →";
  display: block;
  text-align: center;
  font-size: 12px;
  color: #98A5BF;
  padding: 8px 0 10px;
  background: #FBFCFE;
  border-top: 1px dashed var(--border, #E5EAF3);
}
/* 桌面端表格不滚动，隐藏提示 */
@media (min-width: 721px) {
  .spec-table-wrap::after { display: none; }
}

/* 8.3 悬浮按钮文字 11px → 12px（老年用户可读性） */
.float-btn { font-size: 12px; }

/* 8.4 卡片"了解更多"链接高度 24px → 40px，易点中 */
.service-link {
  display: inline-block;
  padding: 9px 0;
}

/* 8.5 英雄区要点列表文字行高提升，链接热区加大 */
.hero-points li { min-height: 30px; }

/* 8.6 正文里的内联箭头链接（如"查看详细流程 →"）热区加大 */
.section-head a,
.cta-copy a,
p > a[class=""] {
  display: inline-block;
  padding: 8px 0;
}