/**
 * =============================================================
 *  奇艺文库主题 V2 —— 网站收录模块 · 分类页样式
 * -------------------------------------------------------------
 *  本文件集中存放"网站收录"模块的分类页样式。
 *  作用范围：
 *    · 父级分类页 (taxonomy-link_category-parent.php)
 *    · 子级分类页 (taxonomy-link_category-child.php)
 *
 *  加载方式：由 sites/sites-functions.php 的
 *  main_sites_enqueue_assets() 通过 is_tax('link_category') 条件加载，
 *  其它页面（首页 / 文章页 / 其它分类法页）不会引入。
 *
 *  本文件内容原位于 style.css 第 1270-1700 行，重构后统一
 *  迁到 sites/ 目录以便集中维护、独立加载、降低主样式表体积。
 *
 *  所有类名前缀 .lc-* 保持不变，两个模板及内联样式引用
 *  无需修改；后续所有分类页样式改动都应发生在本文件。
 * =============================================================
 */

/* =============================================================
   链接分类目录页
   ============================================================= */
.lc-directory-page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 16px 16px 40px;
}
.lc-content-body {
  min-height: 60vh;
  background: var(--bg-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
body.dark-mode .lc-content-body { background: #1e1e1e; }

/* ===== 分类页搜索栏 ===== */
.lc-nav-group {
  position: sticky;
  top: 0;
  z-index: 1000;
}
.lc-nav-group .site-nav {
  position: relative;
}
.lc-searchbar-wrap {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #e8eaed;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  position: relative;
  z-index: 1001;
}
.lc-searchbar-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  /* 居右：搜索框贴 .lc-searchbar-inner 的 padding-right (16px)，
     与顶部导航条最右侧菜单项收尾位置对齐。
     .lc-brand-group 是 position:absolute 定位在 left:20px，不受影响。*/
  justify-content: flex-end;
  position: relative;
}

/* 左侧品牌组：LOGO + 分隔线 + 分类名 */
.lc-brand-group {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
/* 小LOGO */
.lc-mini-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* 竖线分隔 */
.lc-brand-divider {
  width: 1px;
  height: 20px;
  background: #d0d5dd;
  flex-shrink: 0;
}
/* 分类名称 */
.lc-cat-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.lc-mini-logo img {
  height: 36px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}
.lc-mini-logo-text {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

/* 搜索框 */
.lc-search-box {
  flex: 1;
  max-width: 680px;
  display: flex;
  align-items: center;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  overflow: visible;
  position: relative;
}
.lc-search-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb),.12);
}

/* 搜索引擎切换 */
.lc-engine-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  flex-shrink: 0;
}
.lc-engine-trigger:hover { color: var(--primary); }
.lc-engine-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lc-engine-name { font-size: 14px; font-weight: 500; }
.lc-engine-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  padding: 4px 0;
  z-index: 1100;
  min-width: 120px;
  max-width: 150px;
  list-style: none;
}
.lc-engine-dropdown.open { display: block; }
.lc-eng-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  transition: background .15s;
}
.lc-eng-opt:hover { background: #f1f3f4; }
.lc-eng-opt.active { color: var(--primary); font-weight: 600; background: var(--primary-light); }
.lc-search-divider {
  width: 1px;
  height: 20px;
  background: #e0e0e0;
  flex-shrink: 0;
}
.lc-search-input {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  border: none;
  outline: none;
  font-size: 14px;
  background: transparent;
  min-width: 0;
}
.lc-search-btn {
  height: 36px;
  padding: 0 24px;
  margin: 2px;
  background: var(--search-btn-bg);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
}
.lc-search-btn:hover { background: var(--search-btn-hover); }

/* 响应式 */
@media (max-width: 768px) {
  .lc-searchbar-inner { padding: 8px 12px; gap: 10px; }
  .lc-mini-logo img { height: 28px; }
  .lc-mini-logo-text { width: 28px; height: 28px; font-size: 14px; }
  .lc-search-btn { padding: 0 16px; font-size: 13px; }
}
@media (max-width: 480px) {
  .lc-brand-group { display: none; }
}

/* 暗色模式 */
body.dark-mode .lc-searchbar-wrap { background: #1e1e1e; border-bottom-color: #303030; }
body.dark-mode .lc-cat-name { color: var(--primary); }
body.dark-mode .lc-brand-divider { background: #404040; }
body.dark-mode .lc-search-box { background: #252525; border-color: #404040; }
body.dark-mode .lc-search-input { color: #ddd; }
body.dark-mode .lc-engine-trigger { color: #ccc; }
body.dark-mode .lc-engine-dropdown { background: #252525; border-color: #404040; }
body.dark-mode .lc-eng-opt { color: #ccc; }
body.dark-mode .lc-eng-opt:hover { background: #333; }
body.dark-mode .lc-search-divider { background: #404040; }
body.dark-mode .lc-mini-logo-text { background: linear-gradient(135deg, var(--primary-dark), var(--primary-darker)); }

/* ===== 分类页链接卡片网格 ===== */
.lc-page-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.lc-page-layout .lc-content-body {
  flex: 1;
  min-width: 0;
  padding: 8px 20px 24px;
}
.lc-section {
  padding: 16px 0 8px;
}
.lc-section + .lc-section {
  border-top: 1px solid #f0f0f0;
}
.lc-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 12px;
}
.lc-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--primary);
  opacity: .8;
}
.lc-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.4;
}
.lc-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.lc-link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: background .18s, box-shadow .18s;
  cursor: pointer;
  min-width: 0;
}
.lc-link-card:hover {
  background: #f6f8fa;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.lc-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.lc-card-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 8px;
}
.lc-card-icon-text {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e8f0fe, #d2e3fc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
}
.lc-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.lc-card-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.lc-card-desc {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.lc-link-card:hover .lc-card-name {
  color: var(--primary);
}
.lc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: #bbb;
  gap: 12px;
  font-size: 14px;
}

/* ===== 右侧 TOC 目录 ===== */
.lc-toc-sidebar {
  width: 160px;
  flex-shrink: 0;
}
.lc-toc-sticky {
  position: sticky;
  top: 80px;
  background: var(--bg-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 14px;
}
.lc-toc-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  padding-left: 2px;
}
.lc-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lc-toc-list li + li {
  margin-top: 2px;
}
.lc-toc-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: #666;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lc-toc-link:hover {
  background: #f5f7fa;
  color: var(--primary);
}
.lc-toc-link.active {
  color: var(--primary);
  background: #e8f0fe;
  font-weight: 500;
}
.lc-toc-icon {
  font-size: 10px;
  flex-shrink: 0;
  opacity: .6;
}

/* ===== 分类页响应式 ===== */
@media (max-width: 1100px) {
  .lc-toc-sidebar { display: none; }
  .lc-links-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .lc-page-layout .lc-content-body { padding: 8px 12px 20px; }
  .lc-links-grid { grid-template-columns: repeat(2, 1fr); }
  .lc-link-card { padding: 10px 8px; gap: 10px; }
  .lc-card-icon, .lc-card-icon-text { width: 34px; height: 34px; }
  .lc-card-icon img { width: 30px; height: 30px; }
  .lc-card-name { font-size: 13px; }
  .lc-card-desc { font-size: 11px; }
}
@media (max-width: 480px) {
  .lc-links-grid { grid-template-columns: repeat(1, 1fr); }
}

/* ===== 分类页暗色模式 ===== */
body.dark-mode .lc-section + .lc-section { border-top-color: #303030; }
body.dark-mode .lc-section-title { color: #ddd; }
body.dark-mode .lc-link-card:hover { background: #2a2a2a; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
body.dark-mode .lc-card-name { color: #ccc; }
body.dark-mode .lc-card-desc { color: #777; }
body.dark-mode .lc-card-icon-text { background: linear-gradient(135deg, #2A2210, #1F1A14); color: var(--primary); }
body.dark-mode .lc-link-card:hover .lc-card-name { color: var(--primary); }
body.dark-mode .lc-toc-sticky { background: #1e1e1e; }
body.dark-mode .lc-toc-title { color: #ddd; }
body.dark-mode .lc-toc-link { color: #999; }
body.dark-mode .lc-toc-link:hover { background: #2a2a2a; color: var(--primary); }
body.dark-mode .lc-toc-link.active { background: #2A2210; color: var(--primary); }


/* =============================================================
   左侧分类导航：悬停时显示细滚动条
   -------------------------------------------------------------
   背景：模板内联 <style> 里把 .lc-left-nav 的滚动条全局隐藏
     - `scrollbar-width: none`            —— Firefox
     - `-ms-overflow-style: none`          —— IE/Edge
     - `::-webkit-scrollbar { display:none }` —— Chrome/Safari
   未悬停状态为 56px 宽的收起形态，此时确实不该有滚动条。

   问题：当 nav 被悬停展开、菜单项多到超过视口高度时，用户没办法
        直观感知"还有内容可滚"，也没法拖拽滚动条快速定位。

   方案：利用 CSS 优先级 —— `:hover` 选择器的特异度 (0,2,1) 高于
        基础规则的 (0,1,1)，所以下面的规则在悬停状态下会覆盖"隐藏
        滚动条"的基础规则，细滚动条即时显现；鼠标移开后恢复隐藏。

   样式参考：图2 侧栏那种 6px 宽、圆角、浅灰半透明的现代细滚动条。
   ============================================================= */

/* Firefox：细滚动条 + 半透明拇指/透明轨道 */
.lc-left-nav:hover {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.18) transparent;
    -ms-overflow-style: auto;
}

/* Chrome / Safari / Edge-Chromium：覆盖 display:none 并美化 */
.lc-left-nav:hover::-webkit-scrollbar {
    display: block;
    width: 6px;
}
.lc-left-nav:hover::-webkit-scrollbar-track {
    background: transparent;
}
.lc-left-nav:hover::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.18);
    border-radius: 3px;
    transition: background .15s;
}
.lc-left-nav:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,.32);
}

/* 暗色模式：拇指颜色反转为半透明白 */
body.dark-mode .lc-left-nav:hover {
    scrollbar-color: rgba(255,255,255,.22) transparent;
}
body.dark-mode .lc-left-nav:hover::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.22);
}
body.dark-mode .lc-left-nav:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.38);
}


/* =============================================================
   隐藏分类页的主导航条 (.site-nav)
   -------------------------------------------------------------
   图示红框中"首页 / 学术检索 / 中文 / 外文 / …" 这一行即 `.site-nav`，
   是 header.php 输出的全站共享导航，出现在所有页面顶部。

   用户希望仅在"网站收录"分类页（父级 + 子级）中把它移除，不影响
   首页、文章页、期刊页等其它页面的导航条。

   实现：
     规则带 body.is-sites-page 前缀作用域限定。
     .is-sites-page 由 sites-functions.php 的 main_sites_body_class()
     仅在 is_tax('link_category') / is_singular('nav_link') 时添加。

   为什么这样设计而不是靠"只在 sites 页面加载 sites.css"来隔离:
     —— sites.css 后续被其它模块(如期刊模块)作为共享资源复用(因为里面
        包含共享的 lc-searchbar-wrap 搜索栏样式)。如果"隐藏 nav"这条规则
        不带作用域,就会在加载方(期刊页)误伤导航条。
        加上 body.is-sites-page 后,无论 sites.css 被哪个模块加载,这条规则
        都只对真正的 sites 页面生效,模块边界自洽,避免共享污染。

   附加调整：
     `.lc-left-nav` 原先 `padding-top:110px` 是为了让左侧导航项从
     header + 主 nav + 搜索栏 之下开始。移除主 nav 后可以空出约
     `var(--nav-height, 44px)` 的高度，相应把 padding-top 减小，
     让左侧导航视觉上不会留出过大的顶部空白。
   ============================================================= */
body.is-sites-page .site-nav {
    display: none !important;
}

/* 左侧导航的顶部内边距相应收缩（原 110px → 约 66px） */
body.is-sites-page .lc-left-nav {
    padding-top: 66px !important;
}

/* 移动端同样收缩（原 60px → 约 20px，因为移动端 header 本身就矮） */
@media (max-width: 768px) {
    body.is-sites-page .lc-left-nav {
        padding-top: 20px !important;
    }
}


/* =============================================================
   左侧分类导航：始终展开模式
   -------------------------------------------------------------
   后台「分类页设置 → 左侧分类导航管理 → 始终展开」开关控制。

   开启后：
     · `<nav class="lc-left-nav lc-left-nav-pinned">`
     · 导航栏永远保持展开态（宽度 = 用户配置的 --lc-nav-w）
     · 菜单项文本常显、图标常显，不再依赖鼠标悬停

   下方规则等价于把模板内联 <style> 中 `.lc-left-nav:hover` / 
   `.lc-left-nav:hover a` / `.lc-left-nav:hover .lc-vtab-name` 的
   效果永久化。`.lc-left-nav:hover` 基础规则只有 (0,2,0) 的特异度，
   这里用 `.lc-left-nav-pinned` 同级 (0,2,0) 但后置于 cascade，
   并附加 !important 双保险确保覆盖。
   ============================================================= */
.lc-left-nav.lc-left-nav-pinned {
    width: var(--lc-nav-w) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-shadow: 2px 0 12px rgba(0,0,0,.08);
}
.lc-left-nav.lc-left-nav-pinned a {
    padding: 10px 14px !important;
    justify-content: flex-start !important;
}
.lc-left-nav.lc-left-nav-pinned .lc-vtab-name {
    opacity: 1 !important;
    width: auto !important;
}

/* 始终展开模式下的滚动条：和 :hover 状态一样用细滚动条 */
.lc-left-nav.lc-left-nav-pinned {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.18) transparent;
    -ms-overflow-style: auto;
}
.lc-left-nav.lc-left-nav-pinned::-webkit-scrollbar {
    display: block;
    width: 6px;
}
.lc-left-nav.lc-left-nav-pinned::-webkit-scrollbar-track {
    background: transparent;
}
.lc-left-nav.lc-left-nav-pinned::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.18);
    border-radius: 3px;
}
.lc-left-nav.lc-left-nav-pinned::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,.32);
}

/* 暗色模式 */
body.dark-mode .lc-left-nav.lc-left-nav-pinned {
    scrollbar-color: rgba(255,255,255,.22) transparent;
}
body.dark-mode .lc-left-nav.lc-left-nav-pinned::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.22);
}

/* 移动端：开启"始终展开"仍要尊重窄屏约束（避免占满半屏） */
@media (max-width: 768px) {
    .lc-left-nav.lc-left-nav-pinned {
        /* 在窄屏下 --lc-nav-w 本身可能过宽，限制上限 */
        max-width: 60vw;
    }
}


/* =============================================================
   左侧分类导航：固定项 / 虚线分割 / 滚动项 的三段结构
   -------------------------------------------------------------
   模板现在把导航项分成两组渲染：
     .lc-nav-pinned   ← 固定项，不滚动，永远可见
     .lc-nav-divider  ← 固定与滚动之间的虚线分隔
     .lc-nav-scroll   ← 滚动项，内容溢出时出现细滚动条

   关键：把"谁在滚动"从 .lc-left-nav 整体下放到 .lc-nav-scroll 内层，
         这样 .lc-nav-pinned 永远在顶部，不会随滚轮消失。
   模板内联 CSS 中 .lc-left-nav 原本的 overflow-y:auto 被这里 !important
   覆盖为 hidden，整体变成 flex 列容器。
   ============================================================= */
.lc-left-nav {
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;   /* 覆盖原 overflow-y:auto */
}

/* 固定区：不会滚动的置顶项 */
.lc-nav-pinned {
    flex-shrink: 0;
}

/* 固定/滚动之间的虚线分隔 */
.lc-nav-divider {
    flex-shrink: 0;
    margin: 6px 4px;
    border-top: 1px dashed #d0d5dd;
    height: 0;
}
body.dark-mode .lc-nav-divider {
    border-top-color: #3a3a3a;
}

/* 滚动区：独立滚动，默认隐藏滚动条，悬停时显示 */
.lc-nav-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-height: 0;                 /* flex 子项允许收缩到 0 */
}
.lc-nav-scroll::-webkit-scrollbar {
    display: none;
}

/* 悬停 .lc-left-nav 时：滚动区显示细滚动条（6px, 半透明灰） */
.lc-left-nav:hover .lc-nav-scroll,
.lc-left-nav.lc-left-nav-pinned .lc-nav-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.18) transparent;
    -ms-overflow-style: auto;
}
.lc-left-nav:hover .lc-nav-scroll::-webkit-scrollbar,
.lc-left-nav.lc-left-nav-pinned .lc-nav-scroll::-webkit-scrollbar {
    display: block;
    width: 6px;
}
.lc-left-nav:hover .lc-nav-scroll::-webkit-scrollbar-track,
.lc-left-nav.lc-left-nav-pinned .lc-nav-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.lc-left-nav:hover .lc-nav-scroll::-webkit-scrollbar-thumb,
.lc-left-nav.lc-left-nav-pinned .lc-nav-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.18);
    border-radius: 3px;
}
.lc-left-nav:hover .lc-nav-scroll::-webkit-scrollbar-thumb:hover,
.lc-left-nav.lc-left-nav-pinned .lc-nav-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,.32);
}

/* 暗色模式滚动条 */
body.dark-mode .lc-left-nav:hover .lc-nav-scroll,
body.dark-mode .lc-left-nav.lc-left-nav-pinned .lc-nav-scroll {
    scrollbar-color: rgba(255,255,255,.22) transparent;
}
body.dark-mode .lc-left-nav:hover .lc-nav-scroll::-webkit-scrollbar-thumb,
body.dark-mode .lc-left-nav.lc-left-nav-pinned .lc-nav-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.22);
}


/* =============================================================
   左侧分类导航 · 悬停展开子菜单（accordion 手风琴式内嵌展开）
   -------------------------------------------------------------
   父级分类 <a> 外包 <div class="lc-nav-item-wrap" data-has-submenu="1">，
   里面附加 <div class="lc-submenu">，包含该父级的所有子分类链接。

   行为：子菜单作为父项的内联兄弟块（不再是浮动弹出层），悬停父项
        容器时通过 max-height 过渡从 0 展开到自然高度，把后续导航
        项向下推开；移开鼠标后塌缩回 0。

   实现要点：
     · 不再用 position:fixed / JS 动态定位
     · 用 max-height 配合 overflow:hidden 做展开/收起动画
     · 纯 CSS，依赖 .lc-nav-item-wrap:hover 级联
     · 子项样式去掉弹出框的背景/阴影/圆角，改为内嵌层级样式
   ============================================================= */
.lc-nav-item-wrap {
    position: relative;
    display: block;
}

/* 父项右侧的"⌄"下拉指示符，仅在 nav 展开态（悬停或 pinned）可见；
   悬停父项时旋转 180° 变成"⌃"，暗示菜单已展开 */
.lc-submenu-caret {
    margin-left: auto;
    opacity: 0;
    color: #aaa;
    font-size: 12px;
    line-height: 1;
    transition: opacity .15s, color .15s, transform .25s;
}
.lc-left-nav:hover .lc-submenu-caret,
.lc-left-nav.lc-left-nav-pinned .lc-submenu-caret {
    opacity: 1;
}
.lc-nav-item-wrap:hover .lc-submenu-caret {
    color: var(--primary);
    transform: rotate(-180deg);
}

/* 子菜单：内联手风琴容器 ——
   默认 max-height:0 + overflow:hidden，完全塌缩不占空间；
   悬停父项容器时 max-height 扩到一个足够大的值（500px 对绝大多数
   分类足够），CSS 过渡自然撑开，把下方导航项挤下去。
   注意 max-height 不能是 auto —— CSS 不支持 auto 值的 transition。*/
.lc-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease-in-out;
    /* 不使用浮动弹出样式：去掉 position/box-shadow/border/background */
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}
.lc-nav-item-wrap:hover .lc-submenu {
    max-height: 500px;   /* 父项被悬停时展开 */
}

/* 自动展开：当前访问的就是这个父分类（或其子分类）时，它的子菜单
   常驻展开状态，不需要用户悬停才看到。同时 caret 保持旋转态提示。
   .is-active-parent 由 PHP 根据 $is_active 判定附加。 */
.lc-nav-item-wrap.is-active-parent .lc-submenu {
    max-height: 500px;
}
.lc-nav-item-wrap.is-active-parent .lc-submenu-caret {
    color: var(--primary);
    transform: rotate(-180deg);
}

/* 子菜单标题在内嵌模式下显得多余（父项名就在紧上方），隐藏掉 */
.lc-submenu-title {
    display: none;
}

/* 子菜单项：内嵌在父项下方，与父项同列对齐（左对齐，相同左 padding）
   父项展开态 padding 是 `10px 14px`，所以子项用 14px 左 padding 让两者
   左边缘完全一致，视觉上同处一列。
   注意选择器：用 `.lc-left-nav .lc-submenu-item`(0,2,0) 才能压住模板内联
   `.lc-left-nav a`(0,1,1) 的 display:flex / text-align:left / padding 等。 */
.lc-left-nav .lc-submenu-item {
    display: block;
    padding: 7px 14px;                  /* 14px 左 padding 与父项对齐 */
    text-align: left;                   /* 文字靠左对齐 */
    font-size: 13px;
    color: #666 !important;
    text-decoration: none;
    transition: background .15s, color .15s;
    background: transparent !important;
    border-radius: 6px !important;
    margin: 1px 6px !important;          /* 轻微水平 margin 让 hover 背景有呼吸 */
    line-height: 1.4 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: flex-start;        /* 万一被外部重置成 flex 了，flex-start 兜底 */
}
.lc-submenu-item:hover {
    background: #f5f6f8 !important;
    color: var(--primary) !important;
}
.lc-submenu-item.active {
    color: var(--primary) !important;
    font-weight: 600;
    background: var(--primary-light, #e8f0fe) !important;
}

/* 收起状态下，子菜单名在 nav 收起态不可见 ——
   父级 `.lc-vtab-name` 本身就有 opacity:0，但子菜单项没有这层规则，
   需要手动让它在 nav 收起态下隐藏文字，避免宽度异常。 */
.lc-left-nav:not(:hover):not(.lc-left-nav-pinned) .lc-submenu-item {
    opacity: 0;
    pointer-events: none;
}

/* 暗色模式 */
body.dark-mode .lc-submenu-item {
    color: #999 !important;
}
body.dark-mode .lc-submenu-item:hover {
    background: #2a2a2a !important;
    color: var(--primary) !important;
}
body.dark-mode .lc-submenu-item.active {
    background: #1a2e22 !important;
}


/* =============================================================
   分类页内容区：每个子分类独立卡片（仿图 2 样式）
   -------------------------------------------------------------
   之前 .lc-main-content 自身是一个大白卡片，所有 .lc-section 内嵌
   在里面，只用细灰线（.lc-section + .lc-section border-top）分隔。

   现在让卡片样式从"整体外壳"下放到每个"子分类 section"，使视觉上
   每个子分类成为一张独立的圆角白卡，节与节之间有明显间距。

   优先级：模板内联 <style> 中的 .lc-main-content 规则特异度 (0,1,0)
   与这里一致，但内联在 DOM 中更靠后，所以必须用 !important 才能
   胜出。.lc-section 原本没有背景/阴影/圆角，可直接写而不需 !important。
   ============================================================= */
.lc-main-content {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: visible !important;          /* 让 section 的投影不被裁切 */
}

.lc-section {
    padding: 20px 24px !important;          /* 覆盖原 16px 0 8px */
    background: var(--bg-white, #fff);
    border-radius: var(--radius, 8px);
    box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.06));
    margin-bottom: 14px;                    /* 卡片之间的呼吸距 */
}
.lc-section:last-child {
    margin-bottom: 0;
}

/* 去掉原来 section 之间的细分割线，避免和卡片阴影重复 */
.lc-section + .lc-section {
    border-top: none !important;
}

/* 暗色模式 */
body.dark-mode .lc-section {
    background: #1e1e1e;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* 移动端：缩小卡片内边距和间距 */
@media (max-width: 768px) {
    .lc-main-content {
        padding: 0 !important;
    }
    .lc-section {
        padding: 14px 16px !important;
        margin-bottom: 10px;
        border-radius: 6px;
    }
}


/* =============================================================
   分类页 section 右上角排序按钮组
   -------------------------------------------------------------
   三个按钮：收录时间 / 点击量 / 收藏量（收藏量暂未实现，禁用状态）
   URL 参数 ?sort=date|visits  驱动，服务端渲染当前 active 状态。
   使用 `margin-left: auto` 让按钮组自动推到 .lc-section-header
   右端，与现有 flex 布局天然融合不需要改其他规则。
   ============================================================= */
.lc-sort-bar {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    flex-shrink: 0;
}
.lc-sort-btn {
    padding: 5px 11px;
    color: #888;
    text-decoration: none;
    border-radius: 12px;
    line-height: 1.4;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.lc-sort-btn:hover {
    color: var(--primary, #4285f4);
    background: #f0f2f5;
}
.lc-sort-btn.is-active {
    color: var(--primary, #4285f4);
    background: var(--primary-light, #e8f0fe);
    font-weight: 600;
}
.lc-sort-btn.lc-sort-btn-disabled,
.lc-sort-btn.lc-sort-btn-disabled:hover {
    color: #c8ccd1;
    background: transparent;
    cursor: not-allowed;
}

body.dark-mode .lc-sort-btn { color: #888; }
body.dark-mode .lc-sort-btn:hover { background: #2a2a2a; color: var(--primary); }
body.dark-mode .lc-sort-btn.is-active { background: #1a2e22; color: var(--primary); }
body.dark-mode .lc-sort-btn.lc-sort-btn-disabled,
body.dark-mode .lc-sort-btn.lc-sort-btn-disabled:hover { color: #555; }

/* 移动端：字号和间距收缩 */
@media (max-width: 768px) {
    .lc-sort-bar { font-size: 11px; gap: 0; }
    .lc-sort-btn { padding: 4px 8px; }
}