@charset "utf-8";
/* ============================================================
   DPH UI 修正 v1  ·  2026-09-13
   落点：wp-content/themes/nab/assets/css/dph-ui.css
   挂载：functions.php 中在 dph-typography 之后 enqueue（priority 1001）
   回滚：删掉 functions.php 里那段 enqueue 即可，本文件随之失效
   ------------------------------------------------------------
   亮色 / 暗色 各自限定，互不影响：
     html:not(.darking)  → 只作用于亮色模式
     html.darking:root   → 只作用于暗色模式
   注意：主题的 .post-site .-lk:hover 是 (0,2,1)，本文件对 -meta 的
   覆盖是 (0,3,1)，若不管 hover 会把悬停变色吃掉 —— 故 hover 规则
   一并抬到 (0,3,2)。
   ============================================================ */

/* ---------- 1. 卡片「直达」对比度 2.48:1 → 4.57:1（WCAG AA） ----------
   线上 .post-site .-meta 用 --tb--gray(#a2a5a7)，白卡上仅 2.48:1，
   而它是每张卡唯一的外链出口，首页共 44 处。只改亮色：暗色下同一
   颜色在 #14181b 上是 7.21:1，本来就合格，不动。 */
html:not(.darking) .post-site .-meta { color: #6c7781; }
html:not(.darking) .post-site .-lk:hover { color: var(--tb--main); }

/* ---------- 2. 卡片标签 ----------
   由 dph-ui.js 把标题里的「【工具】」拆出来，插到 -metas 这一行最前。
   纯展示层，不动数据库、不动 post_title。
   配色用站点主色（nab_options.setting.primary_color = #0a41e6）：
   若用中性灰底(#f6f7fa)在白卡上几乎看不见，标签会和旁边的「直达」
   灰字混成一片 —— 换成淡蓝底后标签/链接一望即分，且自带品牌色。 */
.post-site .-metas > .dph-tag {
  display: inline-block;
  margin: 0 8px 0 0;
  padding: 0 6px;
  border-radius: 4px;
  background: #eef2ff;
  color: #0a41e6;
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
  vertical-align: middle;
  white-space: nowrap;
}
.post-site .-metas > .dph-tag:empty { display: none; }

/* 暗色：深色卡片上换深蓝底 + 淡蓝字（字/底 6.55，底/卡可辨） */
html.darking .post-site .-metas > .dph-tag { background: #16233d; color: #7ea6ff; }

/* ---------- 3. 页脚文字对比度 4.27:1 → 5.15:1 ---------- */
html:not(.darking) footer.tb-main-wraper .tb-footer,
html:not(.darking) footer.tb-main-wraper .tb-footer a,
html:not(.darking) footer.tb-main-wraper .tb-footer .-item,
html:not(.darking) footer.tb-main-wraper .tb-footer .-by { color: #5f6a76; }
footer.tb-main-wraper .tb-footer a:hover { color: var(--tb--base); }

/* ---------- 4. 暗色：卡片描述 3.91:1 → 6.18:1 ----------
   线上暗色没覆盖 --tb--content，把亮色模式的中灰直接用在深色卡上。
   该变量同时驱动卡片描述、标签块、页脚（页脚 4.20 → 6.64）。
   需压过主题的 .darking:root(0,2,0)，故写 html.darking:root(0,2,1)。 */
html.darking:root { --tb--content: #8f99a5; }

/* ---------- 5. 手机端卡片改两列 ----------
   主题原在 200–640px 用高优先级的 .m-site-list-one .l-bcst li{width:100%}
   锁死单列（641–768px 早就是两列）。此处只在 ≤640 覆盖，宽度公式沿用
   主题自己在 200–640 用的 calc(50% - 8px)；同权重、本文件后加载 → 生效。

   两列后单卡约 158–193px 宽，标题若仍按桌面那样「单行 + 省略号」，
   实测 390px 下 8/44 被截断、360px（安卓最常见宽度）下 13/44 被截断，
   名字读不全就失去了导航的意义 —— 故 ≤640 改为两行显示，并收紧
   内边距与图标，把标题可用宽度从 100px 提到 ~106px × 2 行。 */
@media (max-width: 640px) {
  .m-site-list-one .l-bcst li { width: calc(50% - 8px); }

  .post-site .info-wraper { padding: 11px 10px 30px; }
  .post-site .tb-thumb { flex: 0 0 24px; height: 24px; margin-right: 8px; }
  .post-site .p-t-w {
    font-size: 13px;
    line-height: 17px;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: 34px;
    text-overflow: ellipsis;
    overflow: hidden;
    overflow-wrap: break-word;
  }
  .post-site .tb-excerpt {
    font-size: 12px;
    line-height: 17px;
    margin-top: 5px;
    max-height: 17px;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
  .post-site .-metas { left: 10px; right: 10px; bottom: 8px; }
  .post-site .-meta { font-size: 11px; line-height: 18px; }
  .post-site .-metas > .dph-tag { font-size: 10px; line-height: 16px; margin-right: 6px; padding: 0 5px; }
}

/* ---------- 6. 首页「人物志」块（nab_posts 实例）----------
   该块用主题自带的 .post-news 版式（大图 + 两行标题 + 摘要 + 日期/阅读数），
   与站点卡的 .post-site 是两套样式，互不影响 —— 不动它，让它保持「可读内容」
   的视觉身份，和 44 张「外链导航卡」区分开。
   唯一要压掉的是 .post-ticky：那是 WP 的「置顶」运维标记，本块 7/8 张都带，
   读者看到的是「置顶」两个字而不是标题。纯展示层隐藏，不影响文章状态。 */
.tb-widget-posts .post-ticky { display: none; }

/* ---------- 7. 手机端人物志块：改「上图下文」----------
   主题在手机端把 .post-news 整体换成「左图右文」：.tb-thumb 变
   float:left / 80px×62px，.-metas 用 left:99px 钉在右侧空档里，
   留给标题的宽度只剩 51px —— 13–14px 字号下一行 3 个字，实测 390px
   下 8/8 个标题全被截成「她用一副扑…」「【David Sklar…」。标题读不全
   就等于这个区块白放，故改回「上图下文」，与站点卡的两列视觉同构。
   注：两列本身由主题的 .l-bcst li{calc(50% - 8px)} 提供（ul 同时带
   l-bcst 与 tb-row），这里只动卡片内部排版，不动列数。 */
@media (max-width: 640px) {
  .tb-widget-posts .post-news { height: auto; }
  .tb-widget-posts .post-news .info-wraper { padding: 10px 10px 28px; }
  .tb-widget-posts .post-news .tb-thumb {
    float: none;
    width: 100%;
    height: 0;
    padding-top: 62.5%;   /* 缩略图原始比例 320×200，不裁切 */
    margin-bottom: 8px;
  }
  .tb-widget-posts .post-news .tb-thumb img { width: 100%; height: 100%; }
  .tb-widget-posts .post-news .p-t-w {
    width: auto;
    font-size: 13px;
    line-height: 18px;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    max-height: 54px;
    text-overflow: ellipsis;
    overflow: hidden;
    overflow-wrap: break-word;
  }
  .tb-widget-posts .post-news .-metas { left: 10px; right: 10px; top: auto; bottom: 8px; }
  .tb-widget-posts .post-news .-meta { font-size: 11px; line-height: 18px; }
}

/* ---------- 8. 搜索横幅压缩 404 → 304（首屏多装下一整块）----------
   横幅高度不是写死的，是主题 style.css 堆出来的：
     .search-banner{padding:100px 48px} + .s-title{margin-bottom:24px}
     + .tb-search{margin-top:58px}
   1440px 下实测 404px，占掉首屏近一半（含顶栏 58px），第一块「全部网址」
   要滚屏才能看全。压到 304px 后第一块（477px）正好整块进 900px 视口。

   ⚠️ 只改 padding-top/bottom，**绝不碰左右内边距** ——
   主题在 ≤768px 用 `margin-left/right:-15px + padding-left/right:15px` 做通栏，
   若写成 padding 四值简写，会在 768 处把通栏改坏。

   ⚠️ 必须自己写媒体查询：主题在 ≤1024 / ≤640 用 `.search-banner.-white`
   （(0,2,0)）压过 `.search-banner`（(0,1,0)），只在桌面写一条会漏掉平板与手机。

   附带效果：304px 时盒子比例 1184/304 = 3.89 ≈ 源图 1920/500 = 3.84，
   于是 object-fit:cover 几乎零裁切 —— 那张横幅图从「只显示中间 76.4%」
   变成接近整幅可见（原 404px 下左右各裁 18%）。

   🔴 手机端有个坑：主题在 ≤640 把 **手机变体** `.tb-search.-m` 的
   margin-top 特意设成 0（搜索框贴标题），桌面换 `.tb-search.-pc`
   （margin-top:58px）。若只写一条通用的 `.search-banner .tb-search`
   margin-top，会把 0 顶成 34px —— 减掉的 20px 内边距当场被抵消，
   实测 390px 下总高只降 2px。故 ≤640 必须把手机变体的 margin-top 按回 0。 */
.search-banner { padding-top: 62px; padding-bottom: 62px; }
.search-banner .s-title { margin-bottom: 16px; }
.search-banner .tb-search { margin-top: 34px; }
@media (max-width: 1024px) {
  .search-banner.-white { padding-top: 38px; padding-bottom: 38px; }
}
@media (max-width: 640px) {
  .search-banner.-white { padding-top: 22px; padding-bottom: 22px; }
  .search-banner .tb-search { margin-top: 0; }
}