/* ==========================================================
   中医药网 - 补充样式（仅承载 Tailwind 不便表达的状态样式）
   布局与外观主体由 Tailwind utility classes 完成
   ========================================================== */

/* hidden 属性保护：防止 display 类（如 flex）覆盖隐藏状态 */
[hidden] { display: none !important; }

/* ---------- 侧边栏：移动端抽屉 ----------
   Tailwind v4 的 translate-x 工具类使用的是 `translate:` 属性（不是 transform），
   所以这里必须同时覆盖 translate，否则抽屉不会滑出。 */
#sidebar.mobile-open {
  --tw-translate-x: 0px;
  translate: 0 0;
  transform: none;
  transition: translate .3s ease, transform .3s ease;
}

/* ---------- 侧边栏：桌面端收起状态（≥768px） ---------- */
@media (min-width: 768px) {
  .layout.collapsed #sidebar { width: 60px; }

  /* 收起：隐藏文字与长方形 logo，显示正方形 logo */
  .layout.collapsed .nav-text,
  .layout.collapsed .logo-full { display: none; }
  .layout.collapsed .logo-square { display: block !important; }

  /* 收起：切换按钮图标（收起箭头 → 展开箭头） */
  .layout.collapsed .icon-collapse { display: none; }
  .layout.collapsed .icon-expand { display: block !important; }

  /* 收起：头部纵向堆叠（正方形 logo 在上，展开按钮在下） */
  .layout.collapsed .sidebar-header {
    flex-direction: column;
    height: auto;
    padding: 10px 0;
    gap: 8px;
  }

  /* 收起：导航项居中 */
  .layout.collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }

  /* 收起：鼠标悬停显示名称提示 */
  .layout.collapsed .nav-item:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(31, 41, 55, .95);
    color: #fff;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    z-index: 999;
  }
}

/* ---------- 栏目导航展开/收起（全端：点击右侧三横后下拉展示全部栏目） ---------- */
.subnav-wrap .subnav-scroll {
  position: relative;
}
/* 展开态：溢出栏目下拉显示 */
.subnav-wrap.expanded {
  z-index: 40;
}
.subnav-wrap.expanded .subnav-scroll {
  flex-wrap: wrap;
  overflow-x: hidden;
}
.subnav-wrap:not(.expanded) .subnav-scroll {
  flex-wrap: nowrap;
}

/* ---------- 标签页（今日新增 / 七日热门 / 热门讨论） ---------- */
.tag-tab {
  color: #6b7280;
  border-bottom: 2px solid transparent;
  transition: color 0.2s;
}
.tag-tab:hover {
  color: #059669;
}
.tag-tab-active {
  color: #059669;
  border-bottom-color: #059669;
  font-weight: 600;
}

/* ---------- 排行行悬停选择效果 ---------- */
.rank-row { transition: background-color .15s; cursor: pointer; }
.rank-row:hover { background-color: #f0fdf4; }
.rank-row:hover a { color: #047857 !important; font-weight: 500; }

/* ---------- 栏目导航：隐藏横向滚动条（保留滑动能力） ---------- */
.subnav-scroll {
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/旧 Edge */
}
.subnav-scroll::-webkit-scrollbar {
  display: none;                   /* Chrome/Safari */
}

/* ---------- 三横按钮：白色底 + 左侧渐隐遮罩，避免盖住最后一个栏目（全端可用） ---------- */
.subnav-toggle {
  z-index: 2; /* 高于渐隐遮罩，确保三横可见 */
  box-shadow: 0 0 12px 10px #fff; /* 白色光晕遮住按钮下方滚过的栏目，等效少显示一个 */
}
.subnav-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 55%);
  pointer-events: none;
}
@media (min-width: 768px) {
  .subnav-wrap::after {
    width: 64px;
  }
}
.subnav-wrap.expanded::after {
  display: none; /* 展开态全部可见，无需遮罩 */
}

/* ---------- 搜索频道按钮（pill 胶囊样式，选中态实心绿底） ---------- */
.scope-btn {
  background: #fff; color: #4b5563; cursor: pointer;
  border-radius: 9999px; padding: 4px 14px; font-size: 13px;
  border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(16,185,129,.05);
  transition: all .18s ease; white-space: nowrap;
}
.scope-btn:hover { color: #059669; border-color: #a7f3d0; box-shadow: 0 2px 6px rgba(16,185,129,.12); }
.scope-btn.active { background: #10b981; color: #fff; border-color: #10b981; font-weight: 600; box-shadow: 0 2px 8px rgba(16,185,129,.3); }

/* ---------- 栏目导航选中下划线 ---------- */
.subnav-active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: #059669;
}

/* ---------- 右下角公告弹窗 ---------- */
.notice-pop {
  animation: notice-pop-in 0.35s ease-out;
}
@keyframes notice-pop-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 两行截断（标签面板产地分布等） ---------- */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 首行缩进 2 字符（中文排版） */
.indent-2char { text-indent: 2em; }

/* ---------- 标签面板：隐藏滚动条（保留滚轮滑动） ---------- */
.tag-panel {
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/旧 Edge */
}
.tag-panel::-webkit-scrollbar {
  display: none;                   /* Chrome/Safari */
}

/* ---------- 列表页：筛选 chips（无边框，选中绿底） ---------- */
.f-chip {
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.6;
  color: #4b5563;
  background: transparent;
  cursor: pointer;
  transition: all .15s;
}
.f-chip:hover {
  color: #059669;
  background: #ecfdf5;
}
.f-chip-active,
.f-chip-active:hover {
  background: #059669;
  color: #fff;
}

/* ---------- 可访问性：全局键盘焦点环（仅键盘 Tab 触发，鼠标点击不显示） ---------- */
:focus-visible {
  outline: 2px solid #059669;
  outline-offset: 2px;
  border-radius: 4px;
}
/* 输入框已有 Tailwind 的 focus:ring / focus:shadow 反馈，不再重复描边 */
input:focus-visible,
textarea:focus-visible {
  outline: none;
}

/* ---------- 移动端触摸目标加大（WCAG 2.5.5，目标 ≥ 40px） ---------- */
@media (max-width: 768px) {
  /* 顶栏汉堡 / 侧栏收起按钮：32px → 44px（header 高 56px，可容纳） */
  #menuBtn,
  #sidebarToggle {
    min-width: 44px;
    min-height: 44px;
  }
  /* 栏目导航「三横」展开按钮：36×32 → 40×40 */
  #subnavToggle {
    min-width: 40px;
    min-height: 40px;
  }
  /* 卡片收藏角标：24px → 32px（44px 会遮挡卡片首字块，取折中） */
  .fav-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px;
  }
  /* 卡片「对比」按钮：约 20px → 约 30px */
  .cmp-btn {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
  /* A-Z 字母索引：24px → 32px */
  .az-btn {
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 8px !important;
  }
  /* 筛选 chips：约 25px → 约 31px */
  .f-chip {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}
/* ==========================================================
   UI 精细化打磨（2026-11-01）
   目标：保持绿色国风视觉不变，只优化信息层级、触控与性能
   ========================================================== */

/* ---------- 全站基础 ---------- */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  -webkit-tap-highlight-color: transparent;
}
::selection {
  background: #d1fae5;
  color: #065f46;
}
[id] {
  scroll-margin-top: 96px;
}

/* ---------- 列表页卡片 ---------- */
/* 5000+ 卡片一次性渲染时，content-visibility 可显著降低首屏与滚动开销 */
.list-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 330px;
}
.list-card .card-thumb img {
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.list-card:hover .card-thumb img {
  transform: scale(1.045);
}
.list-card:hover {
  transform: translateY(-2px);
}
.list-card:active {
  transform: translateY(0);
}
@media (max-width: 640px) {
  #listGrid {
    gap: .625rem;
  }
  .list-card {
    contain-intrinsic-size: auto 300px;
  }
}

/* ---------- 栏目导航：桌面端随页面滚动吸顶 ---------- */
@media (min-width: 768px) {
  .subnav-wrap {
    position: sticky;
    top: 3.5rem; /* 与 header 高度一致 */
    z-index: 15;
  }
}

/* ---------- 详情页：轮播圆点扩大触控热区（视觉尺寸不变） ---------- */
#carousel .car-dot {
  position: relative;
}
#carousel .car-dot::after {
  content: "";
  position: absolute;
  inset: -9px;
}

/* ---------- 筛选 chips 选中态更清晰 ---------- */
.f-chip-active {
  box-shadow: 0 1px 4px rgba(5, 150, 105, .28);
}

/* ---------- 移动端：卡片标题与摘要字号微调 ---------- */
@media (max-width: 640px) {
  .list-card h3 {
    font-size: 13.5px;
  }
  .list-card p {
    font-size: 11px;
  }
}

/* ---------- yc 频道：按功效找药 固定贴右侧浮窗（≥1280px 显示） ---------- */
.yc-side-aside {
  display: none;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
}
.yc-side-panel {
  width: 116px;
  /* 限高：保证浮窗垂直居中时顶部边缘 ≥120px，不遮挡吸顶的日期栏+栏目导航（约100px） */
  max-height: calc(100vh - 240px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-right: 0;
  border-radius: 12px 0 0 12px;
  box-shadow: -8px 0 24px rgba(0, 0, 0, .08);
  padding: 10px 8px;
}
.yc-side-title {
  font-size: 12px;
  font-weight: 600;
  color: #065f46;
  padding: 0 6px 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid #f3f4f6;
  white-space: nowrap;
}
.yc-side-link {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: #4b5563;
  padding: 5px 8px;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yc-side-link:hover { background: #ecfdf5; color: #047857; }
/* 滚动联动高亮（main.js 会给当前分类加 bg-emerald-50/text-emerald-700） */
.yc-side-link.bg-emerald-50 { background: #ecfdf5; color: #047857; font-weight: 600; }
.yc-side-panel::-webkit-scrollbar { width: 4px; }
.yc-side-panel::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }
@media (min-width: 1280px) {
  .yc-side-aside { display: block; }
}

/* ---------- 首页 Hero：水墨药草全幅锚点（P1） ---------- */
.home-hero {
  position: relative;
  padding: 68px 16px 92px;
  text-align: center;
  background: url('../img/hero-bg.jpg') center/cover no-repeat;
}
.home-hero-inner { max-width: 720px; margin: 0 auto; position: relative; }
.home-hero-title {
  font-family: STKaiti, KaiTi, serif;
  font-weight: 400;
  font-size: 58px;
  line-height: 1.15;
  letter-spacing: 18px;
  text-indent: 18px;
  color: #0c3f2e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.home-hero-sub {
  margin-top: 14px;
  font-size: 15px;
  letter-spacing: 5px;
  text-indent: 5px;
  color: #3f5c50;
}
.home-hero-kicker {
  margin-top: 7px;
  font-size: 12px;
  letter-spacing: 2px;
  color: #74897f;
}
@media (max-width: 640px) {
  .home-hero { padding: 46px 16px 72px; }
  .home-hero-title { font-size: 38px; letter-spacing: 12px; text-indent: 12px; }
  .home-hero-sub { font-size: 13px; }
}

/* ---------- 药名印章：无图占位（楷体单字 + 描边方章） ---------- */
.herb-seal {
  display: grid;
  place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, #f8fbf9 0%, #eef4f0 60%, #e7efe9 100%);
}
.herb-seal::before {
  content: '';
  grid-area: 1 / 1;
  width: 72px;
  height: 72px;
  border: 2px solid rgba(6, 95, 70, .35);
  border-radius: 8px;
  box-shadow: inset 0 0 0 3px rgba(6, 95, 70, .07);
}
.herb-seal > span {
  grid-area: 1 / 1;
  position: relative;
  font-family: STKaiti, KaiTi, serif;
  font-size: 40px;
  color: #0b5c44;
}

/* ---------- 内容页：去卡片化小节流（编号楷体标题 + 分隔线） ---------- */
.sec-panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 16, .05);
  padding: 6px 12px;
}
.sec-block { padding: 26px 14px 20px; border-radius: 12px; border-top: 1px solid #f0f2f0; }
.sec-block:first-child { border-top: 0; }
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  color: #0b5c44;
  margin-bottom: 12px;
}
.sec-head::before {
  content: attr(data-num);
  font-family: STKaiti, KaiTi, serif;
  font-weight: 400;
  font-size: 20px;
  color: #2f9e74;
}
.sec-block-taboo { background: #fffbeb; border-radius: 12px; padding: 22px 18px; }
.sec-head-taboo, .sec-head-taboo::before { color: #b45309; }

/* ---------- P2 动效：克制三件套 ---------- */
/* 1) 首页 Hero 进场（一次性错峰上浮） */
@keyframes ycHeroUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.home-hero-title      { animation: ycHeroUp .6s ease-out both; }
.home-hero-sub        { animation: ycHeroUp .6s ease-out .12s both; }
.home-hero-kicker     { animation: ycHeroUp .6s ease-out .2s both; }
.home-hero #searchScope { animation: ycHeroUp .6s ease-out .3s both; }
.home-hero #searchForm  { animation: ycHeroUp .6s ease-out .38s both; }
.home-hero #hotWordsWrap, .home-hero #hotRefresh { animation: ycHeroUp .6s ease-out .46s both; }

/* 2) 轮播 Ken Burns（当前图缓慢呼吸缩放，循环往复） */
@keyframes ycKenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
#carousel .slide img { animation: ycKenburns 9s ease-in-out infinite alternate; }

/* 3) 滚动 reveal（js-anim 由 main.js 添加：JS 失效时不隐藏内容） */
.js-anim .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.js-anim .reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .home-hero-title, .home-hero-sub, .home-hero-kicker,
  .home-hero #searchScope, .home-hero #searchForm,
  .home-hero #hotWordsWrap, .home-hero #hotRefresh { animation: none; }
  #carousel .slide img { animation: none; }
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 频道首页：主列宽自适应（有排行=4/6，无排行=通栏），不依赖 Tailwind 编译 ---------- */
.sec-main { min-width: 0; }
@media (min-width: 1280px) {
  .sec-main-rank { grid-column: span 4 / span 4; }
  .sec-main:not(.sec-main-rank) { grid-column: 1 / -1; }
}

/* ---------- 广告位（结合 CMS 交互-广告版位管理，posFlag 模式） ---------- */
.ad-slot {
  position: relative;
  background: #fff;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
}
.ad-mark {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 10px;
  color: #9ca3af;
  letter-spacing: 1px;
  z-index: 1;
}
.ad-slot > span[id^='_____jtop'] { width: 100%; }
.ad-slot:hover { border-color: #a7f3d0; }

/* 详情页原生广告占位接入（右侧栏 + 底部通栏） */
.ad-embed > span[id^='_____jtop'] { display: block; width: 100%; }

/* ---------- 安全声明（全站详情页固定内容，include: safety-notice.thtml） ---------- */
.safety-box {
  margin-top: 16px;
  background: linear-gradient(180deg, #f0fdf4, #ecfdf5);
  border: 1px solid #a7f3d0;
  border-left: 4px solid #10b981;
  border-radius: 12px;
  padding: 16px 18px;
}
.safety-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.safety-icon { width: 18px; height: 18px; color: #059669; flex-shrink: 0; }
.safety-title { font-size: 15px; font-weight: 700; color: #065f46; letter-spacing: 1px; }
.safety-body p { margin: 0 0 8px; font-size: 14px; line-height: 1.9; color: #14532d; }
.safety-body p:last-child { margin-bottom: 0; }
.safety-body strong { color: #047857; }