/* ==========================================================================
   WechatApi · 移动端页头菜单 + 全站页脚文字导航
   新增文件，不修改任何既有样式规则。

   顶栏相关规则全部包在 @media (max-width:1023px) 内，与站内 Tailwind 的
   md: 断点（max-width:1023px）保持一致，因此 ≥1024px 的桌面端视觉完全不变。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 移动端页头菜单（≤1023px）
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {

  /* ≤1023px 就是站内的移动版页头（汉堡出现、导航项 md:hidden 的区间）。
     nav-center.css 在 769–1023px 之间把 #headbg 改成了 grid，这里统一回 flex，
     让整个移动区间用同一套布局。≥1024px 不受影响。 */
  #headbg {
    display: flex !important;
    flex-wrap: wrap;
    /* 中和顶栏 hover 脚本可能写入的行内 height:252px */
    height: auto !important;
  }

  #headbg > .nav-group {
    display: contents !important;
  }

  /* 第一行固定为「logo + 汉堡」，展开的菜单排在后面 */
  #headbg > .nav-group > div:first-child {
    order: 1;
    flex-wrap: wrap;
  }

  #headbg > .nav-group > .md\:hidden {
    order: 3;
  }

  /* 汉堡按钮：原 <div> 改为 <button> 后的样式重置，视觉与原图标一致 */
  .nav-toggle {
    order: 2;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 0;
    cursor: pointer;
    align-self: flex-start;
    margin-top: 10px;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-toggle:focus-visible {
    outline: 2px solid rgba(55, 198, 244, 0.75);
    outline-offset: 4px;
    border-radius: 6px;
  }

  /* 折叠态由 Tailwind 原有的 md:hidden 负责，这里无需额外规则 */

  /* ---- 展开态 ---- */
  /* 展开时需要不透明底色，否则正文会透上来。
     index.html 内联样式里有 #headbg{background:...!important}，这里必须同样 !important 才能覆盖；
     规则只在 ≤1023px 且菜单展开时生效，桌面端不受影响。 */
  #headbg[data-nav-open="true"] {
    background: #090c14 !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* logo 所在的内层容器带 Tailwind 的 h-11（固定 44px），展开后必须放开高度，
     否则换行出来的菜单项会溢出页头并互相重叠 */
  #headbg[data-nav-open="true"] > .nav-group > div:first-child {
    height: auto;
    row-gap: 0;
    align-items: center;
    align-content: flex-start;
  }

  /* 各菜单项恢复显示并各占一行 */
  #headbg[data-nav-open="true"] .nav-group .md\:hidden {
    display: flex !important;
  }

  #headbg[data-nav-open="true"] > .nav-group > div:first-child > .md\:hidden,
  #headbg[data-nav-open="true"] > .nav-group > .md\:hidden {
    flex: 0 0 100%;
    width: 100%;
    justify-content: flex-start;
  }

  #headbg[data-nav-open="true"] > .nav-group > div:first-child > .md\:hidden {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  #headbg[data-nav-open="true"] > .nav-group > div:first-child > .md\:hidden:first-of-type {
    margin-top: 10px;
  }

  /* 一级菜单项做成整行可点区域 */
  #headbg[data-nav-open="true"] .nav-group .md\:hidden > a {
    display: block;
    width: 100%;
  }

  #headbg[data-nav-open="true"] .nav-group .md\:hidden > a > div {
    padding-left: 0;
    padding-right: 0;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 15px;
    color: #e8edf6;
  }

  /* 「API开放平台」二级菜单：移动端直接内联展开，不依赖 hover */
  #headbg[data-nav-open="true"] .nav-group .submenu {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    margin-top: 0;
    padding: 0 0 8px;
    min-width: 0;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #headbg[data-nav-open="true"] .nav-group .submenu .pl-3 {
    padding-left: 0;
  }

  #headbg[data-nav-open="true"] .nav-group .submenu .pl-3 a {
    display: block;
    padding: 9px 0 9px 16px;
    font-size: 14px;
    color: #aeb9c9;
  }

  /* 「管理后台」按钮在展开的菜单里保持原样式，仅调整排布 */
  #headbg[data-nav-open="true"] > .nav-group > .md\:hidden {
    margin: 12px 0 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px;
  }
}

/* --------------------------------------------------------------------------
   2. 首屏「查看文档」/ 底部「联系咨询」：补齐点击展开
      原样式只有 :hover，触屏设备无法触发。保留 hover，另加 .is-open 与
      :focus-within 两条通路，键盘与触屏均可用。
   -------------------------------------------------------------------------- */
.hero-doc-dropdown.is-open .hero-doc-menu,
.hero-doc-dropdown:focus-within .hero-doc-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hero-consult-pop.is-open .hero-consult-panel,
.hero-consult-pop:focus-within .hero-consult-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.hero-doc-trigger:focus-visible,
.hero-consult-trigger:focus-visible {
  outline: 2px solid rgba(55, 198, 244, 0.75);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. 全站页脚固定文字导航
   -------------------------------------------------------------------------- */
/* 与既有页脚底栏同一套视觉：14px / white48 / 居中，不额外加分隔线，
   位置也放进底栏那一块，避免形成一条独立的横带 */
.site-foot-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 22px;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

.site-foot-nav a {
  color: rgba(255, 255, 255, 0.48);
  text-decoration: none;
  transition: color 0.15s ease;
}

/* 简版页脚（.cpf-page-foot）本身是居中小字，跟着它的节奏走 */
.cpf-page-foot .site-foot-nav {
  margin-top: 14px;
}

.site-foot-nav a:hover,
.site-foot-nav a:focus-visible {
  color: #fff;
}

/* 没有 <footer> 的页面（隐私政策 / 服务协议）单独使用，这里才需要一条分隔线 */
.site-foot-nav--standalone {
  max-width: 1160px;
  margin: 56px auto 32px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 640px) {
  .site-foot-nav {
    gap: 8px 16px;
    font-size: 13px;
    padding-top: 14px;
  }
}