/* ==========================================================================
   侧边栏卡片折叠 / 展开 + 最新文章 1~5 分页
   --------------------------------------------------------------------------
   作用范围：只作用于 #aside-content 下由 sidebar-cards.js 接管的四张卡片
   （公告 .card-announcement / 最新文章 .card-recent-post / 分类
   .card-categories / 标签 .card-tags），不会影响天气、作者、归档等其它卡片。

   颜色全部走 Butterfly 主题 CSS 变量（--default-bg-color / --btn-bg /
   --btn-color / --card-meta / --font-color / --text-highlight-color /
   --dark-grey ...），深色模式由 [data-theme='dark'] 自动继承，不硬编码背景色。

   无 JS / JS 未执行时：折叠按钮默认隐藏、内容默认展开，界面与改造前一致。
   ========================================================================== */

/* ---------------------------- 卡片标题栏（四张卡片） ---------------------------- */

#aside-content .card-widget.card-announcement > .item-headline,
#aside-content .card-widget.card-recent-post > .item-headline,
#aside-content .card-widget.card-categories > .item-headline,
#aside-content .card-widget.card-tags > .item-headline {
  display: flex;
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
}

html.sidebar-cards-ready #aside-content .card-widget[data-aside-collapse] > .item-headline {
  cursor: pointer;
}

#aside-content .card-widget.card-announcement > .item-headline > i,
#aside-content .card-widget.card-recent-post > .item-headline > i,
#aside-content .card-widget.card-categories > .item-headline > i,
#aside-content .card-widget.card-tags > .item-headline > i {
  flex: 0 0 auto;
}

/* 分类卡片 headline 里由 aside_categories 助手生成的“更多”按钮 */
#aside-content .card-widget.card-categories > .item-headline .card-more-btn {
  margin-left: 8px;
  line-height: 1.4;
}

/* ------------------------------- 折叠按钮 ------------------------------- */

#aside-content .aside-collapse-btn {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--card-meta, #858585);
  font-family: inherit;
  font-size: .72em;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, color .2s;
}

html.sidebar-cards-ready #aside-content .aside-collapse-btn {
  display: inline-flex;
}

#aside-content .aside-collapse-btn:hover,
#aside-content .aside-collapse-btn:focus-visible {
  background: var(--btn-bg, #49b1f5);
  color: var(--btn-color, #fff);
}

#aside-content .aside-collapse-btn:focus-visible {
  outline: 2px solid var(--default-bg-color, #49b1f5);
  outline-offset: 2px;
}

#aside-content .aside-collapse-btn i {
  transition: transform .3s ease;
  transform: rotate(0deg);
}

#aside-content .card-widget[data-aside-collapsed='true'] > .item-headline .aside-collapse-btn i {
  transform: rotate(-90deg);
}

/* ----------------------------- 折叠内容区 ----------------------------- */

#aside-content .card-widget[data-aside-collapse] > .aside-collapse-content {
  overflow: hidden;
}

#aside-content .card-widget[data-aside-collapsed='true'] > .aside-collapse-content {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 首次渲染/无 JS 时不做动画，避免闪烁；JS 初始化成功后由 html.sidebar-cards-anim 打开过渡 */
html.sidebar-cards-anim #aside-content .card-widget[data-aside-collapse] > .aside-collapse-content {
  transition: max-height .35s ease, opacity .3s ease, visibility 0s;
}

html.sidebar-cards-anim #aside-content .card-widget[data-aside-collapsed='true'] > .aside-collapse-content {
  transition: max-height .35s ease, opacity .3s ease, visibility 0s .35s;
}

/* --------------------------- 最新文章分页控件 --------------------------- */

#aside-content .card-recent-post .aside-recent-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

#aside-content .card-recent-post .aside-recent-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-width: 24px;
  height: 24px;
  border: 1px solid var(--dark-grey, #cacaca);
  border-radius: 7px;
  background: transparent;
  color: var(--font-color, #1f2d3d);
  font-family: inherit;
  font-size: .8em;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, border-color .2s, color .2s;
}

#aside-content .card-recent-post .aside-recent-page:hover {
  border-color: var(--default-bg-color, #49b1f5);
  color: var(--default-bg-color, #49b1f5);
}

#aside-content .card-recent-post .aside-recent-page:focus-visible {
  outline: 2px solid var(--default-bg-color, #49b1f5);
  outline-offset: 2px;
}

#aside-content .card-recent-post .aside-recent-page.current {
  border-color: var(--default-bg-color, #49b1f5);
  background: var(--default-bg-color, #49b1f5);
  color: var(--btn-color, #fff);
  font-weight: 600;
}

#aside-content .card-recent-post .aside-recent-page.current:hover {
  color: var(--btn-color, #fff);
}

/* 分页时隐藏非当前页文章（选择器带 ID，压过主题的 display:flex） */
#aside-content .card-recent-post .aside-list > .aside-list-item.is-hidden {
  display: none;
}

/* ------------------------------ 深色模式微调 ------------------------------ */

[data-theme='dark'] #aside-content .card-recent-post .aside-recent-page {
  border-color: var(--dark-grey, rgba(255, 255, 255, .2));
  color: var(--font-color, rgba(255, 255, 255, .7));
}

[data-theme='dark'] #aside-content .card-recent-post .aside-recent-page:hover {
  border-color: var(--default-bg-color, #49b1f5);
  color: var(--default-bg-color, #49b1f5);
}

[data-theme='dark'] #aside-content .card-recent-post .aside-recent-page.current {
  border-color: var(--default-bg-color, #49b1f5);
  background: var(--default-bg-color, #49b1f5);
  color: #fff;
}

/* ------------------------------ 动效弱化适配 ------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html.sidebar-cards-anim #aside-content .card-widget[data-aside-collapse] > .aside-collapse-content,
  html.sidebar-cards-anim #aside-content .card-widget[data-aside-collapsed='true'] > .aside-collapse-content {
    transition: none;
  }

  #aside-content .aside-collapse-btn i {
    transition: none;
  }
}