/* ==========================================================================
   flex gap 降级兜底（1.4.24）
   --------------------------------------------------------------------------
   为什么需要这个文件：
     flex 容器的 gap 需要 Chrome 84 / Firefox 63 / Safari 14.1，
     而国内 App 内置内核普遍低于此线：钉钉·支付宝 69、抖音 75、X5 77、UC·夸克 78。
     这些内核的 CSS 变量、Grid（含 Grid gap，57+）、WOFF2、object-fit、
     <details>、NodeList.forEach 全部可用 —— 唯一失效的就是 flex 容器的 gap。
     于是间距在它们上会「归零」：元素贴在一起，但不会报错、不会错位。

   启用条件：
     <html> 带 .no-flexgap 类（由 functions.php 的 hengjia_flexgap_probe() 判定）。
     为什么不用 @supports：flex gap 是官方确认的「不可用 @supports 检测」特性 ——
     Chromium 66 起已支持 Grid 的 gap，@supports 只检查声明能否分别解析，
     故 @supports (display:flex) and (gap:1em) 在 66-83 上会假阳性返回 true，
     降级分支永远不命中（csswg-drafts#3559）。探针改用真实布局实测：
     两个 1px 高的子项放进 column flex + row-gap:1px，量得 3px 即有 gap、2px 即无。

   为什么现代浏览器零影响：
     不带 .no-flexgap 时本文件一条规则都不生效，1.4.23 的渲染结果逐像素保留。

   回滚：
     删掉本文件 + functions.php 里的探针函数与本文件入队项即可。

   --------------------------------------------------------------------------
   改动范围与「目标选择器怎么筛出来的」（重要，别凭静态扫描直接下笔）
   --------------------------------------------------------------------------
   静态扫描出 37 个 flex+gap 规则块 → 去重 33 个选择器 → 6 个结构性两栏布局改 Grid
   （见 layout.css / page-*.css「1.4.24」注释）→ 余 27 个候选，经实测筛掉 12 个、
   跳过 1 个（gap:0，见 E 段）→ 最终 14 个：

   ① 声明 flex+gap，但 computed display 根本不是 flex（gap 从未生效）
        .breadcrumb ol / .breadcrumb__list
          被 supplement-common.css 的 `.breadcrumb .breadcrumb__list{display:inline}`
          （优先级 0,2,0 > 0,1,0）压成 inline，真实间距来自 HTML 里的空白符。
        .mobile-nav-panel__phone-link
          被 `.mobile-nav-panel a{display:block}`（0,1,1 > 0,1,0）压成 block。
          CDP getMatchedStylesForNode 实证，非推测。
       ⇒ 这两处的 gap 在所有浏览器里都没生效过，不是兼容性问题，不该进兜底。
         它们同时是主题自身的死样式（见交付报告「附带发现」）。

   ② 选择器与模板对不上，永不命中
        .mobile-bottom-nav__item a —— 模板把类名直接写在 <a> 上（footer.php），
        后代选择器永远匹配不到（主题笔误）。
        ❗1.4.26 已修正该选择器（BUG-01）→「gap:3px 从恒不生效变为真实生效」，
        故本文件同步在 B 段新增对应兜底条目（清单由 14 个增至 15 个）。

   ③ 「可见子项」不足 2 个 —— flex gap 只在两个「都在渲染流里」的相邻子项之间产生，
      子项 display:none 时它两侧都不产生 gap，但 `> * + *` 照样命中（最大陷阱）。
        .header-main__info —— 2 个子项在任何断点都恰好只有 1 个可见
          （.header-main__phone 在 ≤768px display:none，.menu-toggle 在 >768px display:none），
          所以 gap:15px 从未生效过。这条是 S1 vs S2 实测抓出来的（24 条差异全指向它）。
        .article-meta（1 个 <time>）、.header-main__logo（1 个 <a>）、
        .header-main__logo-link（1 个 <img>）、.related-posts__item（1 个 <a>）、
        .search-form__submit（2 个子项，但第 2 个是 .sr-only 即 position:absolute，
                             在流子项只有 1 个）、
        .contact-info-grid__card（只在 [hengjia_contact_info] 短代码里产出，且只有 1 个 <ul>）
       ⚠️ 但「可见子项仅 1 个」不等于必须剔除 —— 要看那个不可见的子项是不是**末位**：
          .float-bar 的 #hj-back-to-top 由 JS 内联 display:none 控制、位于末位，
          `> * + *` 只给它的前辈加 margin，行为正确，故保留。

   ④ 重复
        .home-links ul 与 .home-links__list 命中同一元素，只留后者。

   ⇒ 最终兜底 15 个选择器（1.4.26 新增 .mobile-bottom-nav__item，见 B 段）。另有 2 个「当前不渲染、内容一变就会出现」的容器
      （.product-docs__list a 依赖产品 product_doc_name_N/url_N，
        .home-links__list 依赖后台友情链接），一并防御性保留。

   --------------------------------------------------------------------------
   三种改法的选择依据
   --------------------------------------------------------------------------
   A 不换行的横向容器 → 相邻兄弟补 margin-left（不动父级盒模型，零溢出风险）
   B 纵向容器         → 相邻兄弟补 margin-top
   C 会换行的容器     → 子项补 margin-right/margin-bottom + 父级负外边距回吞
                        仅当「横向 gutter ≤ 父级内边距」时可用 —— 负外边距会让
                        块级 flex 容器自身宽出 gutter，靠父级 padding 吸收；
                        超出就会产生横向溢出（实测 .article-header__meta 的 20px
                        gutter 对 15px 容器内边距，正好溢出 5px）。
   D 高敏感区         → 直接改 Grid（Grid gap 自 Chrome 57 可用），不动盒模型
   ========================================================================== */

/* ==========================================================================
   A. 横向不换行容器 → 相邻兄弟补 margin-left
   ========================================================================== */

/* 原 gap: 15px（顶栏右侧链接） */
.no-flexgap .top-bar__links {
  gap: 0;
}
.no-flexgap .top-bar__links > * + * {
  margin-left: 15px;
}

/* 原 gap: 5px（分页控件，4 个子项） */
.no-flexgap .pagination ul {
  gap: 0;
}
.no-flexgap .pagination ul > * + * {
  margin-left: 5px;
}

/* 原 gap: 12px（相关文章卡片内的图文，2 个子项） */
.no-flexgap .related-posts__link {
  gap: 0;
}
.no-flexgap .related-posts__link > * + * {
  margin-left: 12px;
}

/* 原 gap: 14px（联系页信息卡：图标 + 文字，align-items:center） */
.no-flexgap .page-contact__card {
  gap: 0;
}
.no-flexgap .page-contact__card > * + * {
  margin-left: 14px;
}

/* 原 gap: 9px（页脚联系方式：图标 + 文字，align-items:flex-start） */
.no-flexgap .site-footer__contact {
  gap: 0;
}
.no-flexgap .site-footer__contact > * + * {
  margin-left: 9px;
}

/* 原 gap: 16px（页脚版权条：版权所有 + 备案号，2 个子项；未声明 flex-wrap → 不换行）。
   ≤640px 原规则改为纵向堆叠 gap:6px。
   （备案号为空时只剩 1 个子项，`> * + *` 自然不命中，与 gap 同样不生效，安全。） */
.no-flexgap .site-footer__bottom-inner {
  gap: 0;
}
.no-flexgap .site-footer__bottom-inner > * + * {
  margin-left: 16px;
}
@media (max-width: 640px) {
  .no-flexgap .site-footer__bottom-inner > * + * {
    margin-left: 0;
    margin-top: 6px;
  }
}

/* 原 gap: 8px（关于页「企业文化」条目名：四角星 + 文字）。
   ≤992px 原规则把 gap 收窄为 7px，方向不变。 */
.no-flexgap .page-culture__name {
  gap: 0;
}
.no-flexgap .page-culture__name > * + * {
  margin-left: 8px;
}
@media (max-width: 992px) {
  .no-flexgap .page-culture__name > * + * {
    margin-left: 7px;
  }
}

/* 原 gap: 8px（产品资料下载项：图标 + 文件名）。
   ❗这一条不是「相邻兄弟」结构：`<a>` 里只有 1 个元素子项（<svg>）+ 1 个文本节点，
     文本会变成匿名 flex 项，所以 gap 确实生效 —— 但 `> * + *` 匹配不到匿名文本项，
     必须改成给首个子项补 margin-right 才能等效。
   该模块仅在产品填了 product_doc_name_N / product_doc_url_N 时才渲染（single.php），
   当前站内产品均未填 → 实测 0 命中，属「内容一变就出现」的条件容器，故防御性保留。 */
.no-flexgap .product-docs__list a {
  gap: 0;
}
.no-flexgap .product-docs__list a > *:first-child {
  margin-right: 8px;
}

/* 原 gap: 10px（分享按钮，3 个子项） */
.no-flexgap .share-buttons__list {
  gap: 0;
}
.no-flexgap .share-buttons__list > * + * {
  margin-left: 10px;
}

/* 原 gap: 8px 14px（联系页地图下方按钮组）。
   声明了 flex-wrap:wrap，但实测 4 个断点下 2 个按钮始终单行（360px 宽也放得下），
   故只补横向；若日后新增按钮导致换行，需补 `margin-top: 8px`。 */
.no-flexgap .page-contact__map-nav {
  gap: 0;
}
.no-flexgap .page-contact__map-nav > * + * {
  margin-left: 14px;
}

/* 原 gap: 20px（新闻详情页文章元信息，3 个子项）。
   虽然声明了 flex-wrap:wrap，但实测桌面 955px / 平板 749px 宽下始终单行。
   ❗不能走 C 段负外边距方案：20px gutter > 容器 15px 内边距，
     块级容器会宽出 5px → 横向溢出（实测确为 5px）。
   ≤768px 原规则改为纵向堆叠 gap:5px。 */
.no-flexgap .article-header__meta {
  gap: 0;
}
.no-flexgap .article-header__meta > * + * {
  margin-left: 20px;
}
@media (max-width: 768px) {
  .no-flexgap .article-header__meta > * + * {
    margin-left: 0;
    margin-top: 5px;
  }
}

/* ==========================================================================
   B. 纵向容器 → 相邻兄弟补 margin-top
   ========================================================================== */

/* 原 gap: 2px（右侧悬浮条）。≤1023px 该元素 display:none，无需关心。 */
.no-flexgap .float-bar {
  gap: 0;
}
.no-flexgap .float-bar > * + * {
  margin-top: 2px;
}

/* 原 gap: 3px（移动端底部导航项：图标 + 文字，纵向堆叠，2 个子项）。
   ❗1.4.26（BUG-01 修复）后新增：修复前选择器写作「.mobile-bottom-nav__item a」，
   恒不命中（类名写在 <a> 自身），故当时被排除在兜底清单外；修正为元素自身后
   gap:3px 真实生效，需补兜底，否则旧内核下图标与文字会贴在一起。
   该元素本身只在 ≤768px 参与渲染（父级 .mobile-bottom-nav 桌面 display:none），
   故无需额外媒体查询。 */
.no-flexgap .mobile-bottom-nav__item {
  gap: 0;
}
.no-flexgap .mobile-bottom-nav__item > * + * {
  margin-top: 3px;
}

/* ==========================================================================
   C. 可换行容器 → 子项补右侧/下侧外边距，父级用负外边距回吞
   --------------------------------------------------------------------------
   负外边距只影响父元素自身的盒宽/盒高，靠父级内边距吸收；
   父级统一只写 margin-right / margin-bottom 两个长属性，不写 margin 简写 ——
   避免覆盖 .home-links__list 既有的 margin-left:-20px 等既有值。
   ========================================================================== */

/* 原 gap: 10px（首屏友情链接列表）。
   同样只在后台有友情链接时才渲染（front-page.php 用 get_bookmarks() 判空），
   当前站内为空 → 实测 0 命中，属「内容一变就出现」的条件容器。
   链接条数是后台可控的，可能换行，故走完整换行方案（10px ≤ 15px 容器内边距，安全）。
   ≤480px 原规则改为纵向堆叠 → 撤销换行方案，改补 margin-top。 */
.no-flexgap .home-links__list {
  gap: 0;
  margin-right: -10px;
  margin-bottom: -10px;
}
.no-flexgap .home-links__list > * {
  margin-right: 10px;
  margin-bottom: 10px;
}
@media (max-width: 480px) {
  .no-flexgap .home-links__list {
    margin-right: 0;
    margin-bottom: 0;
  }
  .no-flexgap .home-links__list > * {
    margin-right: 0;
    margin-bottom: 0;
  }
  .no-flexgap .home-links__list > * + * {
    margin-top: 10px;
  }
}

/* ==========================================================================
   D. 高敏感区：热门关键词栏 → 改 Grid，而不是改 margin
   --------------------------------------------------------------------------
   该模块只有 2 个直接子项（.hot-keywords__left + .hot-keywords__search），
   且模块高度（桌面 65px / 手机 128px 区间实测 112.8px）与搜索控件尺寸
   （桌面 36px / 移动 32px）均已定稿 —— 改 margin 会动父级盒模型，
   有推高模块的风险。改为两列 Grid 后：
     - Grid 的 gap 自 Chrome 57 可用，间距完全保留；
     - 父级盒模型不变，高度不受影响；
     - 1fr + auto 与原来的 flex:1 + space-between 布局结果一致。
   ❗≤768px 必须把 gap 一起改成 6px：响应式原规则是 column + gap:6px，
     若这里沿桌面值写 16px，模块会被推高 10px（实测 112.8 → 122.8，已修）。
   ========================================================================== */
.no-flexgap .hot-keywords .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
}
@media (max-width: 768px) {
  .no-flexgap .hot-keywords .container {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}

/* ==========================================================================
   E. 无需处理
   --------------------------------------------------------------------------
   .hot-keywords__list 原 gap: 0 —— 本来就是零间距，无视觉影响，跳过。
   ========================================================================== */
