/* ============================================================
   SEO/GEO 落地 · 移动端触摸目标优化
   标记：SEO-TAP 2026-09-10
   ------------------------------------------------------------
   背景：移动端存在大量 h<32px 的可点文字链接（页脚导航 18px、
         文章卡标签/分类 20px、分类筛选 36px），低于可用性建议。
   做法：仅 <=768px 生效，用 min-height + inline-flex 抬高热区，
         不改字号、配色与字号层级；>768px 桌面端零影响。
   回滚：删除本文件即可。
   ============================================================ */
@media (max-width: 768px) {
  /* 1) 页脚：导航菜单、版权、ICP/公安备案链接（原 18-20px） */
  footer a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }

  /* 2) 分类筛选 chips（原 36px） */
  #filters a,
  #filters button {
    min-height: 40px;
  }

  /* 3) 文章卡内的分类 / 标签 / 作者行内链接（原 20px） */
  a.italic,
  #post-list a.cursor-pointer {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }

  /* 4) 分页与列表导航控件 */
  nav[role="navigation"] a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}


/* ============================================================
   SEO-TAP2 2026-09-11 · 移动端触摸热区补齐（标签链）
   ------------------------------------------------------------
   问题：文章页标签行（a.italic，20px）与侧栏标签 chips（26px）热区偏小。
   做法：仅 <=768px 生效，用绝对定位伪元素把热区抬到 40px；
         不改字号、配色、行高 —— 视觉零变化。
   为何不重叠：容器 gap-2=8px、chip 26px → 行距 34px；
         40px 热区上下各外扩 7px，仍在 8px 间隙内。
   回滚：删除本段即可。
   ============================================================ */
@media (max-width: 768px) {
  a[href^="/tags/"] {
    position: relative;
  }
  a[href^="/tags/"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 40px;
    transform: translateY(-50%);
  }
  /* 页脚内联链接：由 32px 抬到 40px（footer 是 flex + space-x-6，横向不重叠） */
  footer a {
    min-height: 40px;
  }
}


/* ============================================================
   SEO-TABLE 2026-09-12 · 移动端表格横向滚动
   ------------------------------------------------------------
   问题：正文 <table> 为裸标签，无 overflow 容器；站内多篇教程含
         3~4 列数据表（如「公会的收入从哪来」「拉新平台对比」），
         在 <=768px 窄屏下会撑破内容区、整页出现横向滚动条，
         或单元格文字被挤压成竖排 —— 移动端可读性差。
   做法：
     1) 给表格外层包一个可横向滚动的容器（纯 CSS，不改 HTML 结构）；
     2) 窄屏下限制表格宽度为内容区宽度、允许表格自身横向滚动；
     3) 给首列在滚动时保持可辨识（避免看到「它是谁」时已滚走）。
   注意：用 display:block + overflow-x:auto 作用在 table 自身，
         这是无 HTML 改动下最稳的实现；桌面端(>768px)完全不受影响。
   回滚：删除本段即可（或还原 custom-seo.css.bak-table-<ts>）。
   ============================================================ */
@media (max-width: 768px) {
  /* 正文区域内的表格：可横向滚动，不撑破页面 */
  .markdown-body table,
  article table,
  #content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;   /* iOS 惯性滚动 */
    overscroll-behavior-x: contain;      /* 滚到边界不带动整页 */
    white-space: nowrap;                 /* 单元格不折成竖排 */
    font-size: 13px;                     /* 略缩字号，一屏能多显示一列 */
    border-collapse: collapse;
  }

  /* 表头与单元格留白收紧，窄屏更紧凑 */
  .markdown-body table th,
  .markdown-body table td,
  article table th,
  article table td {
    padding: 8px 10px;
    white-space: nowrap;
  }

  /* 表格底部留一点滚动提示空间 */
  .markdown-body table::-webkit-scrollbar,
  article table::-webkit-scrollbar {
    height: 6px;
  }
  .markdown-body table::-webkit-scrollbar-thumb,
  article table::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.45);
    border-radius: 3px;
  }
}