/* ==========================================================================
   文档树：默认收起，点击展开
   --------------------------------------------------------------------------
   站点级补丁。主题的 docs 侧栏（xfm_docs_nav）输出的结构是
     <li class="xfm-nav-item has-children"> <span class="xfm-nav-text"> … </span>
                                          <button class="xfm-nav-toggle"><i class="xfm-arrow"></i></button>
                                          <ul class="xfm-nav-list"> … </ul> </li>
   而主题 CSS 只实现了 .xfm-nav-group（笔记侧栏）的折叠，.xfm-nav-toggle 既没有点击逻辑
   也没有箭头样式 —— 结果是整棵树始终全展开、点箭头无响应。
   这里在站点层补齐（不改主题 submodule），规则全部限定在 .xfm-sidebar-nav 内。

   收起状态由服务端产出：布局层已为「当前页所在分支」的各级祖先加上 .is-open，
   因此默认展开的只有你正在阅读的那条路径，其余分组一律收起（无 JS 也不会闪开）。
   后续新增文档无需任何额外处理，自动遵循同一规则。
   ========================================================================== */

/* 1) 有子级的分组行：两列栅格（标签 | 箭头），子列表独占一整行 */
.xfm-sidebar-nav .xfm-nav-item.has-children {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.xfm-sidebar-nav .xfm-nav-item.has-children > .xfm-nav-list {
  grid-column: 1 / -1;
}

/* 2) 分组标签：整行可点 */
.xfm-sidebar-nav .xfm-nav-item.has-children > .xfm-nav-text {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 4px 0 11px;
  border-radius: var(--xfm-radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text-soft);
  cursor: pointer;
  user-select: none;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.xfm-sidebar-nav .xfm-nav-item.has-children > .xfm-nav-text:hover {
  color: var(--c-text);
  background: var(--c-surface-hover);
}

/* 顶层「主题分组」再重一点，便于一眼分辨两套主题 */
.xfm-sidebar-nav .xfm-nav-list.depth-1 > .xfm-nav-item.has-children > .xfm-nav-text {
  color: var(--c-text);
  letter-spacing: 0.01em;
}

/* 3) 折叠开关按钮 */
.xfm-sidebar-nav .xfm-nav-item.has-children > .xfm-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--xfm-radius-sm);
  background: transparent;
  color: var(--c-text-muted);
  opacity: 1;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.xfm-sidebar-nav .xfm-nav-item.has-children > .xfm-nav-toggle:hover {
  color: var(--xfm-primary);
  background: var(--c-surface-hover);
}

/* 4) 箭头：主题只输出了一个空 <i class="xfm-arrow">，这里画出 chevron */
.xfm-sidebar-nav .xfm-nav-item.has-children > .xfm-nav-toggle .xfm-arrow {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
  transition: transform var(--t-base) var(--ease);
}

.xfm-sidebar-nav .xfm-nav-item.has-children:not(.is-open) > .xfm-nav-toggle .xfm-arrow {
  margin-top: 0;
  transform: rotate(-45deg);
}

/* 5) 核心规则：未展开的分组隐藏其子列表 */
.xfm-sidebar-nav .xfm-nav-item.has-children:not(.is-open) > .xfm-nav-list {
  display: none;
}

/* 6) 键盘可达性 */
.xfm-sidebar-nav .xfm-nav-item.has-children > .xfm-nav-toggle:focus-visible,
.xfm-sidebar-nav .xfm-nav-item.has-children > .xfm-nav-text:focus-visible {
  outline: 2px solid var(--xfm-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .xfm-sidebar-nav .xfm-nav-item.has-children > .xfm-nav-toggle .xfm-arrow,
  .xfm-sidebar-nav .xfm-nav-item.has-children > .xfm-nav-text {
    transition: none;
  }
}
