/*
 * @Description: 子主题自定义样式 —— 全类型卡片拟态(Neumorphism)风格
 * 作用范围：所有 .posts-item 卡片（网址 / 文章 / 应用 / 书籍，default / min / max / big 均适配）
 * 默认凸起，悬停变凹陷，图标做小凹槽。仅改子主题，父主题升级不受影响。
 */

/* ===== 拟态变量：浅色 ===== */
:root {
  --neu-bg: #eef1f6;
  --neu-bg-rgb: 238, 241, 246;   /* 渐变遮罩用，与 --neu-bg 同步 */
  --neu-shadow-dark: rgba(163, 177, 198, 0.60);
  --neu-shadow-light: rgba(255, 255, 255, 0.95);
  --neu-distance: 6px;   /* 阴影偏移 */
  --neu-blur: 14px;      /* 阴影模糊 */
  --neu-radius: 16px;    /* 卡片圆角 */
  --neu-inset: 2px;      /* 图标凹槽内阴影强度 */
}

/* ===== 拟态变量：暗色 ===== */
.io-black-mode {
  --neu-bg: #26282c;
  --neu-bg-rgb: 38, 40, 44;
  --neu-shadow-dark: rgba(0, 0, 0, 0.55);
  --neu-shadow-light: rgba(78, 82, 88, 0.55);
}

/* ========== 通用卡片：默认凸起 ========== */
.posts-item {
  background-color: var(--neu-bg) !important;
  border-radius: var(--neu-radius);
  box-shadow:
    var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow-dark),
    calc(-1 * var(--neu-distance)) calc(-1 * var(--neu-distance)) var(--neu-blur) var(--neu-shadow-light) !important;
  transition: box-shadow 0.28s ease, transform 0.28s ease, background-color 0.3s;
}

/* 覆盖父主题 .show-card .posts-item 的默认内阴影，避免叠加冲突 */
.show-card .posts-item {
  box-shadow:
    var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow-dark),
    calc(-1 * var(--neu-distance)) calc(-1 * var(--neu-distance)) var(--neu-blur) var(--neu-shadow-light) !important;
}

/* ========== 悬停：凸起变凹陷（压下去） ========== */
.posts-item:hover {
  box-shadow:
    inset var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow-dark),
    inset calc(-1 * var(--neu-distance)) calc(-1 * var(--neu-distance)) var(--neu-blur) var(--neu-shadow-light) !important;
  transform: translateY(0);
}

/* ========== 图标：小拟态凹槽（网址 / 应用 / 书籍通用） ========== */
/* 方形圆角：提升特异性(.posts-item.sites-item .item-media = 0-3-0)并加 !important，
   压过父主题 .posts-item.sites-item .item-media { border-radius: 40px } 的圆形 */
.posts-item.sites-item .item-media:where(.item-media) {
  background-color: var(--neu-bg);
  border-radius: 12px !important;
  box-shadow:
    inset var(--neu-inset) var(--neu-inset) 5px var(--neu-shadow-dark),
    inset calc(-1 * var(--neu-inset)) calc(-1 * var(--neu-inset)) 5px var(--neu-shadow-light);
}

.posts-item.sites-item .item-media:where(.item-media)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset var(--neu-inset) var(--neu-inset) 4px var(--neu-shadow-dark),
    inset calc(-1 * var(--neu-inset)) calc(-1 * var(--neu-inset)) 4px var(--neu-shadow-light);
}

/* 其余卡片(应用/书籍)图标同样方形 */
.posts-item.app-item .item-media:where(.item-media),
.posts-item.book-item .item-media:where(.item-media) {
  border-radius: 12px !important;
}

/* ========== 网址卡片：图标本体内缩露出凹槽 ========== */
.posts-item.sites-item .item-image {
  transform: scale(0.82);
}

/* 关闭父主题图标悬浮模糊背景光晕，避免与凹槽冲突 */
.posts-item.sites-item:hover .blur-img-bg {
  transform: scale(0);
}

/* ========== 文章卡片：封面大图不套凹槽，仅卡片本体浮雕 ========== */
.posts-item.post-item .item-media,
.posts-item.post-item .item-media::after {
  border-radius: var(--neu-radius);
  box-shadow: none;
}

/* ========== min 小卡：缩小阴影，避免拥挤 ========== */
.posts-item.style-sites-min,
.posts-item.style-post-min,
.posts-item.style-post-min-sm {
  --neu-distance: 4px;
  --neu-blur: 9px;
  --neu-radius: 12px;
}

/* ========== 卡片布局：不干预栅格 ========== */
/* 注意：父主题 .posts-item 原生 margin 由栅格系统(row-col-*a / --this-card-padding)计算，
   row-sm 容器里 --this-card-padding 是 home-card-padding 的一半。
   子主题曾用 .posts-item { margin: calc(0.5 * var(--home-card-padding)) } 覆盖，
   导致 row-col-2a 两列并排的卡片(排行榜小工具等)放不下、变成单列。
   教训：不要覆盖 .posts-item 的 margin/宽度，栅格怎么算就怎么来。 */

/* ========== 侧边栏：拟态化 ========== */
/* 注意：绝对不能改侧边栏容器的 padding/margin 或卡片的 margin，
   OneNav 侧边栏小工具(tab等)用 col-*a 百分比栅格 + --this-card-padding 精确算列宽，
   动了任何布局属性都会导致原本 2 列变 1 列。
   因此这里只改视觉(背景/圆角/阴影)，阴影不占布局宽度，安全。 */

/* 侧边栏小工具卡片：凸起浮雕（与主卡片一致） */
.sidebar-tools .card,
.sidebar .module-sidebar-widget,
.sidebar .widget {
  background-color: var(--neu-bg) !important;
  border-radius: var(--neu-radius) !important;
  box-shadow:
    var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow-dark),
    calc(-1 * var(--neu-distance)) calc(-1 * var(--neu-distance)) var(--neu-blur) var(--neu-shadow-light) !important;
  border: 0 !important;
}

/* 侧边栏卡片悬停：变凹陷（与主卡片一致） */
.sidebar-tools .card:hover,
.sidebar .module-sidebar-widget:hover,
.sidebar .widget:hover {
  box-shadow:
    inset var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow-dark),
    inset calc(-1 * var(--neu-distance)) calc(-1 * var(--neu-distance)) var(--neu-blur) var(--neu-shadow-light) !important;
}

/* 标题下划线改柔和，融入拟态背景 */
.sidebar-tools .card-header::before,
.sidebar-header .card-header::before,
.module-sidebar-widget .module-header::after {
  background: var(--neu-shadow-light);
  opacity: 0.8;
}

/* 搜索框：凹陷凹槽 */
.sidebar .card .searchform input[type=text],
.sidebar-tools input[type=text],
.sidebar .widget input[type=search],
.sidebar .widget input[type=text] {
  background: var(--neu-bg) !important;
  border: 0 !important;
  box-shadow:
    inset var(--neu-inset) var(--neu-inset) 4px var(--neu-shadow-dark),
    inset calc(-1 * var(--neu-inset)) calc(-1 * var(--neu-inset)) 4px var(--neu-shadow-light) !important;
  border-radius: 10px !important;
}

/* 小工具内列表项/标签：轻凹陷或透明，去掉突兀白底 */
.sidebar .widget ul li,
.sidebar .widget li {
  background: transparent !important;
  border: 0 !important;
}

/* 侧边栏内的小型按钮/徽章 */
.sidebar .btn,
.sidebar .badge,
.sidebar-tools .btn {
  background: var(--neu-bg) !important;
  box-shadow:
    inset calc(-1 * var(--neu-inset)) calc(-1 * var(--neu-inset)) 4px var(--neu-shadow-light),
    inset var(--neu-inset) var(--neu-inset) 4px var(--neu-shadow-dark) !important;
  border: 0 !important;
}

/* ========== 左侧网址分类导航：拟态化 ========== */
/* 容器 .aside-card：凸起浮雕（去白底、去毛玻璃，改同色系拟态面） */
.aside-card {
  background-color: var(--neu-bg) !important;
  border-radius: var(--neu-radius) !important;
  box-shadow:
    var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow-dark),
    calc(-1 * var(--neu-distance)) calc(-1 * var(--neu-distance)) var(--neu-blur) var(--neu-shadow-light) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 分类项按钮：默认凸起（与主卡片一致，浮在卡片面上） */
.aside-card .aside-btn {
  background-color: var(--neu-bg) !important;
  border-radius: 10px !important;
  box-shadow:
    var(--neu-inset) var(--neu-inset) 4px var(--neu-shadow-dark),
    calc(-1 * var(--neu-inset)) calc(-1 * var(--neu-inset)) 4px var(--neu-shadow-light) !important;
  margin-bottom: 4px;
}

/* 悬停：按钮变凹陷（压下去，与主卡片交互一致） */
.aside-card .aside-btn:hover {
  background-color: var(--neu-bg) !important;
  box-shadow:
    inset var(--neu-inset) var(--neu-inset) 4px var(--neu-shadow-dark),
    inset calc(-1 * var(--neu-inset)) calc(-1 * var(--neu-inset)) 4px var(--neu-shadow-light) !important;
  color: var(--main-color) !important;
}

/* 分类项图标文字颜色微调，避免被凹槽阴影影响 */
.aside-card .aside-btn .icon-fw {
  color: var(--main-color);
}

/* 底部收起按钮区：去掉父主题的分隔线，做成分隔凹槽 */
.aside-bottom {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 0 !important;
}
.aside-bottom::before {
  background: var(--neu-shadow-light) !important;
  height: 1px !important;
  box-shadow: 0 1px 0 var(--neu-shadow-dark);
}

/* 收起按钮也做凸起，与分类项一致 */
.aside-bottom .aside-btn {
  box-shadow:
    var(--neu-inset) var(--neu-inset) 4px var(--neu-shadow-dark),
    calc(-1 * var(--neu-inset)) calc(-1 * var(--neu-inset)) 4px var(--neu-shadow-light) !important;
  margin-bottom: 0;
}

/* 收起按钮悬停：凹陷（与分类项一致） */
.aside-bottom .aside-btn:hover {
  box-shadow:
    inset var(--neu-inset) var(--neu-inset) 4px var(--neu-shadow-dark),
    inset calc(-1 * var(--neu-inset)) calc(-1 * var(--neu-inset)) 4px var(--neu-shadow-light) !important;
}

/* ========== 博客页面：横排列表卡片(style-post-card)拟态 ========== */
/* 由子主题 template-blog.php 输出 get_post_card('card')，封面在左 16:9、文字在右 */
.posts-item.style-post-card {
  flex-direction: row !important;   /* 覆盖父主题 column，改横排 */
  overflow: hidden;
  padding: 0 !important;
}

/* 封面区：左侧 16:9 大图，保持完整显示不被裁切 */
.posts-item.style-post-card .item-header {
  position: relative;
  flex: 0 0 268px;
  width: 268px;
  max-width: 268px;
  margin: 0 !important;
  border-radius: var(--neu-radius) 0 0 var(--neu-radius);
  overflow: hidden;
  align-self: flex-start;           /* 不被 flex 拉伸，高度由 16:9 决定 */
}

/* 沉浸式过渡：封面右侧加遮罩，多段渐变缓入卡片背景色，过渡平滑自然 */
.posts-item.style-post-card .item-header::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(var(--neu-bg-rgb), 0) 0%,
    rgba(var(--neu-bg-rgb), .15) 25%,
    rgba(var(--neu-bg-rgb), .45) 52%,
    rgba(var(--neu-bg-rgb), .78) 76%,
    rgba(var(--neu-bg-rgb), 1) 100%);
  pointer-events: none;
}

.posts-item.style-post-card .item-media {
  width: 100%;
  padding-bottom: 56.25% !important;  /* 封面固定 16:9 */
}
.posts-item.style-post-card .item-media,
.posts-item.style-post-card .item-media::after {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 正文区：标题 + 摘要 + meta，右侧内边距充足 */
.posts-item.style-post-card .item-body {
  padding: 14px 18px 14px 16px !important;
}

/* 标题：加粗加大，单行省略号（不依赖父主题 .line1，属性写全避免贴边截断） */
.posts-item.style-post-card .item-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  min-height: auto !important;
  margin: 0 0 5px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* 链接块级化，保证省略号作用在可见行内文本上 */
.posts-item.style-post-card .item-title a {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* 文章描述：最多两行，超出省略号截断（省略号提前由服务端截断保证不贴边） */
.posts-item.style-post-card .sub-post-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.55;
}

/* 封面悬停轻微放大(沿用父主题 .post-item:hover 逻辑，这里确保开启) */
.posts-item.style-post-card .item-media img {
  transition: transform 0.4s ease;
}
.posts-item.style-post-card:hover .item-media img {
  transform: scale(1.04);
}

/* 窄屏：封面收窄，给文字留位置 */
@media (max-width: 767.98px) {
  .posts-item.style-post-card .item-header {
    flex-basis: 120px;
    width: 120px;
    min-width: 120px;
  }
  /* 窄屏渐变遮罩同步收窄，避免盖住太多封面 */
  .posts-item.style-post-card .item-header::after {
    width: 60px;
  }
  .posts-item.style-post-card .item-body {
    padding: 10px 12px 10px 10px !important;
  }
}

/* ========== 网址详情页：动态访问方式徽章 ========== */
.single-sites .site-access-badge {
  position: absolute;
  z-index: 4;
  top: -47px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  max-width: calc(100% - 8px);
  padding: 0 13px 0 10px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(135deg, #5966ff, #6578f7);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(86, 103, 244, .28);
}

@media (max-width: 767.98px) {
  .single-sites .site-access-badge {
    top: -44px;
    right: 0;
    font-size: 16px;
  }
}

/* ========== 文章目录小工具（侧边栏） ========== */
.sub-toc-widget {
  font-size: 13px;
  color: var(--text-color, #5f5f5f);
  padding: 10px 15px 12px;   /* 与父主题小工具内容区对齐，拉开与标题线的距离 */
}
.sub-toc-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sub-toc-widget li {
  margin: 1px 0;
  position: relative;
  padding-left: 20px;
}
.sub-toc-widget li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e24b4a;
  transition: background .2s ease, box-shadow .2s ease;
}
.sub-toc-widget li.sub-toc-h3 {
  padding-left: 30px;
}
.sub-toc-widget li.sub-toc-h3::before {
  width: 4px;
  height: 4px;
  background: #f09595;
}
.sub-toc-widget a {
  display: block;
  padding: 5px 8px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  line-height: 1.5;
  transition: background .2s ease, color .2s ease;
}
.sub-toc-widget a:hover {
  background: #e6f0ff;
  color: #2563eb;
}
.sub-toc-widget li:hover::before {
  background: #d5433e;
  box-shadow: 0 0 0 3px rgba(213,67,62,.18);
}
.sub-toc-widget .active a {
  background: #dbeafe;
  color: #2563eb;
  font-weight: 500;
}
.sub-toc-widget .text-muted {
  color: var(--muted-2-color, #999);
}