/* ============================================================
   侧边栏自定义卡片（source/_data/widget.yml）样式
   当前用于 top 位"通讯录"卡片（#friend-link-card）
   样式移植自 hexo-theme-Fomalhaut 的 card_friend_link.styl
   数据来源 source/_data/link.yml，由 scripts/widget-friend-link.js 构建时渲染
   ============================================================ */

/* 明暗模式配色变量 */
:root {
  --card-friend-class-desc-bgcolor: #e7e7e7;
  --card-friend-name-color: #000;
  --card-friend-item-hover: var(--text-bg-hover);
  --card-friend-descr-color: #797979;
}

[data-theme="dark"] {
  --card-friend-class-desc-bgcolor: #111111;
  --card-friend-name-color: #fff;
  --card-friend-item-hover: var(--text-bg-hover);
  --card-friend-descr-color: #797979;
}

/* 列表容器：限高滚动，隐藏滚动条（Fomalhaut 原版样式） */
#friend-link-card .card-friend-link-container {
  max-height: 460px;
  overflow-y: auto;
  scrollbar-width: none;
}

#friend-link-card .card-friend-link-container::-webkit-scrollbar {
  display: none;
}

/* 分组标题（可折叠 details/summary）：展开时吸顶 */
#friend-link-card summary.card-friend-class-desc {
  padding: 0 15px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

#friend-link-card details.card-friend-class-name[open] summary.card-friend-class-desc {
  position: sticky;
  top: 0;
  background: var(--card-friend-class-desc-bgcolor);
  z-index: 1;
}

/* 友链条目：头像 + 名字/描述，单行省略 */
#friend-link-card a.card-friend-item {
  padding: 0 15px;
  height: 60px;
  width: auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  text-decoration: none;
  border-radius: 0;
  transition: all 0.3s ease-in-out;
}

#friend-link-card a.card-friend-item:hover {
  background-color: var(--card-friend-item-hover);
  border-radius: 12px;
}

#friend-link-card img.card-friend-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

/* 失联友链头像置灰 */
#friend-link-card .offline-friend-link img.card-friend-avatar {
  filter: grayscale(100%);
}

/* 名字 + 描述两行（min-width:0 保证描述可以收缩省略） */
#friend-link-card .card-friend-details {
  width: auto;
  height: 60px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  flex: 1;
}

#friend-link-card .card-friend-name {
  color: var(--card-friend-name-color);
}

#friend-link-card .card-friend-descr {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: var(--card-friend-descr-color);
}