/* =========================================================================
   yanghongcheng.com — 纯呈现层增强样式表（mobile_enhance）
   作用：移动端防横向溢出 + 阅读舒适度 + 触控/可达性优化 + 视觉打磨
   铁律：不修改任何 HTML 文字、<title>、meta、JSON-LD 结构化数据；
        不 display:none 任何文字；不破坏桌面端既有布局；GEO 零影响。
   加载方式：由 inject_enhance_css.py 在每页 </head> 前幂等插入
           <link rel="stylesheet" href="/assets/site-enhance.css">
   ========================================================================= */

/* ---------- 1. 全局基础（对所有视口安全，纯视觉/交互） ---------- */
html {
  -webkit-text-size-adjust: 100%;          /* 禁止 iOS 自动放大字号 */
  text-size-adjust: 100%;
  scroll-behavior: smooth;                 /* 锚点平滑滚动，体验更顺 */
  scroll-padding-top: 72px;                /* 抵消 sticky 顶栏高度，锚点不被遮挡 */
}

body {
  overflow-wrap: break-word;               /* 超长英文/链接自动换行，杜绝溢出 */
  word-wrap: break-word;
  -webkit-tap-highlight-color: transparent;/* 去除移动端点击灰块，视觉更干净 */
}

/* 媒体永不超出视口（根治图片/视频导致的横向滚动） */
img, video, iframe, canvas, svg, object, embed {
  max-width: 100%;
  height: auto;
}

/* 代码/预格式化块不撑破布局 */
pre, code {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* 键盘可达性：可见焦点环（不影响鼠标用户，纯视觉增强） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #b91c1c;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- 2. 移动端适配（≤768px） ---------- */
@media (max-width: 768px) {

  /* 2.1 根治横向溢出（核心）：约束所有块级布局容器不超过视口宽度。
         用 !important 覆盖站点内联的固定像素宽度（768/980/1000/900px 等）。
         仅对“超出视口”的元素生效；小元素（如 150px 二维码）不受影响。 */
  div, section, article, main, header, footer, nav, aside,
  figure, figcaption, blockquote, form, fieldset, table,
  p, ul, ol, li, h1, h2, h3, h4, h5, h6 {
    max-width: 100% !important;
  }

  /* 媒体二次保险 */
  img, video, iframe, canvas, svg, object, embed, table {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 2.2 内容不贴边：给主内容容器一点呼吸空间（站点已设置则无位移，仅兜底） */
  .article-page,
  main,
  .content,
  .container,
  .wrap,
  .data-table-wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* 2.3 触控友好：对明确的按钮/导航类元素保证最小可点高度，减少误触 */
  .top-toggle,
  .back-link,
  .more-link a,
  .btn,
  button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 2.4 长英文词/链接强制换行（兜底防溢出） */
  p, li, span, a, h1, h2, h3, h4, h5, h6, td, th {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* ---------- 3. 超窄屏微调（≤480px） ---------- */
@media (max-width: 480px) {
  .article-page,
  main,
  .content,
  .container,
  .wrap,
  .data-table-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}