/* ============================================================================
   CHTV健康100 · 全站统一 H5 适配层 v360
   说明：全站 251 页共享本文件（在各页内联样式之后加载，实现统一覆盖）。
   核心：移动端导航从「多行换行链接」升级为「汉堡抽屉」，
        抽屉内一级可就地展开二级（免一次页面跳转），并做全局细节打磨。
   断点：860px（与原站点导航断点一致）
   ========================================================================== */

/* ---------------------------------------------------------- 二级展开部件（默认隐藏，桌面端完全不出现） */
.nav-row { display: flex; align-items: center; }
.nav-expand { display: none; }
.nav-sub-list { display: none; }

/* ---------------------------------------------------------- 汉堡按钮（默认隐藏，桌面端不出现） */
.nav-toggle {
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0; margin-left: auto; flex: 0 0 auto;
  background: none; border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.nav-toggle > i {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--text, #1e293b); transition: transform .22s ease, opacity .22s ease;
}
.nav-mask {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(15, 23, 42, .42);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}

@media (max-width: 860px) {
  /* ================================================== 导航：单层 + 抽屉 */
  .navbar { padding-top: 0 !important; }

  .navbar .nav-inner {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    height: 56px !important; min-height: 56px !important;
    padding: 0 12px !important; gap: 10px !important;
    max-width: none !important;
  }
  .navbar .nav-logo { margin-right: auto; }
  .navbar .logo-img { width: 118px !important; height: 37px !important; }
  .navbar .nav-back { margin-left: 0; flex: 0 0 auto; }
  /* 有返回按钮时 logo 不再右推，让按钮组靠右 */
  .navbar .nav-back ~ .nav-toggle { margin-left: auto; }
  .navbar .nav-back ~ .nav-logo { margin-right: 0; }

  .navbar .nav-toggle { display: inline-flex !important; }

  /* 抽屉关闭态：两级链接全部隐藏 */
  .navbar .nav-links,
  .navbar .nav-links.sub { display: none !important; }

  /* 抽屉打开态 */
  html.nav-open { overflow: hidden; }
  html.nav-open body { overflow: hidden; }
  html.nav-open .navbar {
    max-height: 100vh; overflow-y: auto;
    background: #fff !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
  }
  /* 第一行：logo + 汉堡；链接整行换到下方（纯 flex 换行，无需定位 hack） */
  html.nav-open .navbar .nav-inner {
    flex-wrap: wrap !important;
    height: auto !important; min-height: 0 !important;
    padding: 8px 12px 12px !important;
  }
  html.nav-open .navbar .nav-logo,
  html.nav-open .navbar .nav-back { order: 0; align-self: center; }
  html.nav-open .navbar .nav-toggle { order: 1; margin-left: auto; }

  /* 汉堡变 X */
  html.nav-open .navbar .nav-toggle > i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  html.nav-open .navbar .nav-toggle > i:nth-child(2) { opacity: 0; }
  html.nav-open .navbar .nav-toggle > i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  html.nav-open .navbar .nav-links,
  html.nav-open .navbar .nav-links.sub {
    display: flex !important;
    flex-direction: column; flex-wrap: nowrap !important;
    order: 2; width: 100%; margin: 0 !important; gap: 2px !important;
    padding: 6px 0 0 !important;
    overflow: visible !important;
    background: none !important; border: none !important; border-radius: 0 !important;
  }
  html.nav-open .navbar .nav-links.sub {
    /* 当前栏目的二级常驻显示在抽屉底部（用户要求：二级要直接可见） */
    order: 3; margin-top: 6px !important;
    border-top: 1px dashed var(--border, #e5e7eb) !important;
    padding-top: 8px !important;
  }
  html.nav-open .navbar .nav-links .nav-link {
    width: 100%; flex: none !important;
    text-align: left; white-space: normal;
    padding: 11px 12px !important; font-size: 14px !important; font-weight: 500;
    color: var(--text, #1e293b) !important;
    background: none !important; border: none !important; border-radius: 8px !important;
  }
  html.nav-open .navbar .nav-links .nav-link.active {
    color: var(--brand, #1E5BB5) !important;
    background: var(--brand-50, #eef4fc) !important; font-weight: 600 !important;
  }
  html.nav-open .navbar .nav-links.sub .nav-link {
    font-size: 13px !important; font-weight: 400;
    color: var(--text-2, #475569) !important;
    padding: 9px 12px 9px 22px !important;
  }
  html.nav-open .navbar .nav-links.sub .nav-link.active {
    color: var(--brand, #1E5BB5) !important;
    background: var(--brand-50, #eef4fc) !important; font-weight: 600 !important;
  }

  /* 一级行：文字区 + 展开箭头 */
  html.nav-open .navbar .nav-links .nav-row {
    display: flex; align-items: center; width: 100%;
    gap: 2px; flex: none !important;
  }
  html.nav-open .navbar .nav-links .nav-row > .nav-link {
    flex: 1 1 auto; min-width: 0;
  }
  html.nav-open .navbar .nav-links .nav-expand {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 38px; height: 38px; padding: 0;
    background: none; border: none; cursor: pointer;
  }
  html.nav-open .navbar .nav-links .nav-expand > .chev {
    display: block; width: 8px; height: 8px;
    border-right: 1.6px solid var(--text-3, #94a3b8);
    border-bottom: 1.6px solid var(--text-3, #94a3b8);
    transform: rotate(45deg);
    transition: transform .22s ease;
    margin-top: -3px;
  }
  html.nav-open .navbar .nav-links .nav-expand.open > .chev {
    transform: rotate(-135deg); margin-top: 3px;
    border-color: var(--brand, #1E5BB5);
  }

  /* 展开的二级列表 */
  html.nav-open .navbar .nav-links .nav-sub-list {
    display: none; width: 100%;
    flex-direction: column; gap: 1px;
    padding: 2px 0 4px 14px !important;
    margin: 0 0 2px !important;
    border-left: 2px solid var(--brand-100, #d6e4ff);
  }
  html.nav-open .navbar .nav-links .nav-sub-list.open {
    display: flex;
  }
  html.nav-open .navbar .nav-links .nav-sub-list .nav-sub-link {
    width: 100%; text-align: left;
    padding: 9px 12px !important;
    font-size: 13px !important; font-weight: 400;
    color: var(--text-2, #475569) !important;
    background: none !important; border: none !important;
    border-radius: 8px !important; cursor: pointer;
    font-family: inherit;
  }
  html.nav-open .navbar .nav-links .nav-sub-list .nav-sub-link:active {
    background: var(--brand-50, #eef4fc) !important;
    color: var(--brand, #1E5BB5) !important;
  }

  html.nav-open .nav-mask { opacity: 1; pointer-events: auto; }

  /* 抽屉打开时隐藏悬浮返回胶囊（层级与遮罩相近，避免浮在遮罩上方） */
  html.nav-open .h5-back-fab { display: none !important; }

  /* ================================================== Hero 顶距（抽屉导航仅 56px 高） */
  .hero { padding-top: 92px !important; }

  /* ================================================== 通用细节打磨 */
  /* 浮动返回胶囊避开抽屉 */
  .nav-float-back, .float-back { z-index: 90; }

  /* 表格统一可横向滚动、不撑破版面 */
  table { max-width: 100%; }

  /* 底部悬浮按钮避让安全区 */
  .footer, .site-footer { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}