/* ============================================================
   legacy.css — 低版本浏览器兼容与错位兜底
   ------------------------------------------------------------
   目标：让站点在 IE11 及较旧的 WebKit/Blink 中也能正常排版，
   不出现“元素挤在一起 / 下划线错位 / 移动端菜单打不开”等问题。

   机制（配合 legacy.js）：
   - legacy.js 精确检测 flex gap 支持；不支持时给 <html> 加 .no-flexgap。
   - 本文件仅在 .no-flexgap 下用“子元素 margin”补 flex 间距，
     现代浏览器（支持 flex gap）不生效，因此不会出现双重间距。
   - 采用 margin-right（+换行容器 margin-bottom）而非 margin-left，
     避免覆盖 margin-left:auto 的右对齐逻辑（复制按钮、箭头、热度）。
   - CSS 自定义属性（var()）由 css-vars-ponyfill 在老浏览器中解析；
     本文件只负责布局层面的降级。
   ============================================================ */

/* ---------- 1. flex gap 缺失时的间距兜底（仅 .no-flexgap 生效） ---------- */
.no-flexgap .nav-bar > *,
.no-flexgap .cluster > *,
.no-flexgap .site-nav__list > *,
.no-flexgap .nav-actions > *,
.no-flexgap .friend-links > *,
.no-flexgap .suggest-demo__bar > *,
.no-flexgap .suggest-demo__field > *,
.no-flexgap .suggest-demo__item > *,
.no-flexgap .searchbox__field > *,
.no-flexgap .field-row > *,
.no-flexgap .check > *,
.no-flexgap .tabs > *,
.no-flexgap .copy-btn > *,
.no-flexgap .codeblock__bar > *,
.no-flexgap .results li[role="option"] > * {
  margin-right: 0.75rem;
}

.no-flexgap .nav-bar > * { margin-right: 1.25rem; }
.no-flexgap .site-nav__list > * { margin-right: 0.25rem; }
.no-flexgap .nav-actions > * { margin-right: 0.5rem; }
.no-flexgap .friend-links > * { margin-right: 0.6rem; }
.no-flexgap .suggest-demo__bar > * { margin-right: 0.4rem; }
.no-flexgap .suggest-demo__field > * { margin-right: 0.6rem; }
.no-flexgap .suggest-demo__item > * { margin-right: 0.6rem; }
.no-flexgap .searchbox__field > * { margin-right: 0.85rem; }
.no-flexgap .field-row > * { margin-right: 1rem; }
.no-flexgap .check > * { margin-right: 0.5rem; }
.no-flexgap .tabs > * { margin-right: 1px; }
.no-flexgap .copy-btn > * { margin-right: 0.4rem; }
.no-flexgap .codeblock__bar > * { margin-right: 0.75rem; }
.no-flexgap .results li[role="option"] > * { margin-right: 0.7rem; }

/* 补充：其它“图标/文字”型 flex + gap 容器（Chrome 51 不支持 flex gap） */
.no-flexgap .eyebrow > * { margin-right: 0.55rem; }
.no-flexgap .btn > * { margin-right: 0.55rem; }
.no-flexgap .brand > * { margin-right: 0.65rem; }
.no-flexgap .friend-links a > * { margin-right: 0.5rem; }
.no-flexgap .quicklinks a > * { margin-right: 0.75rem; }
.no-flexgap .faq summary > * { margin-right: 0.75rem; }

/* 可换行的 flex 容器：同时补行间距 */
.no-flexgap .site-footer__bottom > *,
.no-flexgap .toc > * {
  margin-right: 1.5rem;
  margin-bottom: 0.5rem;
}

/* 换行 flex 容器：再补行间距 */
.no-flexgap .search-help > *,
.no-flexgap .hero__meta > * {
  margin-right: 1.25rem;
  margin-bottom: 0.5rem;
}
.no-flexgap .hero__meta > * { margin-right: 2rem; margin-bottom: 0.75rem; }

/* ---------- 2. 移动端：导航按钮保持右对齐、菜单可展开 ---------- */
@media (max-width: 860px) {
  .nav-actions { margin-left: auto; }
  /* 兜底浏览器里 nav-bar 的 margin-right 在移动端会顶到按钮，复位即可 */
  .no-flexgap .nav-bar > * { margin-right: 0; }
}

/* ---------- 3. position: sticky 不支持时退化为静态定位 ---------- */
/* 老浏览器（如 IE11）不支持 sticky，header / 文档目录会变为普通流，
   不影响内容阅读，仅失去“吸顶”效果。此处无需额外代码。 */

/* ---------- 4. CSS Grid 不支持时（Chrome 51 等）---------- */
/* Chrome 51 不支持 CSS Grid（Chrome 57 才支持）。以下用 flex 做等价降级：
   - 多栏「split」型：移动端纵向堆叠（本就如此），≥720px 再并排；
   - 卡片型（feature/steps/info-grid）：纵向堆叠，用 1px 间距露出父级 --line 背景当分隔线；
   - 行式（notice / spec-list li）：保持横向，用子元素 margin 补间距。 */
@supports not (display: grid) {
  .hero__grid,
  .split,
  .search-layout,
  .doc-layout,
  .form-shell,
  .footer-grid,
  .feature-grid,
  .steps,
  .info-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  /* 行式布局：保持横向 */
  .notice,
  .spec-list li {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  /* 堆叠子元素：用 margin 替代 gap */
  .hero__grid > *,
  .split > *,
  .search-layout > *,
  .doc-layout > *,
  .form-shell > *,
  .footer-grid > * {
    margin-bottom: 2rem;
  }
  .feature-grid > *,
  .steps > *,
  .info-grid > * {
    margin-bottom: 1px;
  }

  /* 行式子元素：水平间距 */
  .notice > * + *,
  .spec-list li > * + * {
    margin-left: 1rem;
  }
  .spec-list li > :first-child {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 5rem;
    flex: 0 0 5rem;
  }
  .spec-list li > :last-child {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
  }

  /* 较宽屏：两栏并排 */
  @media (min-width: 720px) {
    .hero__grid,
    .split,
    .search-layout,
    .doc-layout,
    .form-shell {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }
    .hero__grid > *,
    .split > *,
    .search-layout > *,
    .doc-layout > *,
    .form-shell > * {
      -webkit-box-flex: 1;
      -ms-flex: 1 1 0%;
      flex: 1 1 0%;
      margin-bottom: 0;
    }
    .footer-grid {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }
    .footer-grid > * {
      -webkit-box-flex: 1;
      -ms-flex: 1 1 220px;
      flex: 1 1 220px;
      margin-bottom: 0;
    }
  }
}