/*!
 * Theme Name:   H&C Diesel Generator
 * Theme URI:    https://generatordieselchina.com/
 * Description:  为 generatordieselchina.com 定制的经典主题。页面版式来自确认过的静态蓝本（preview/*.html），
 *               正文内容仍由 WordPress 管理 —— 作者可继续使用 Githuber MD 等编辑器在后台写文章。
 * Author:       H&C
 * Version:      1.0.6
 * Requires PHP: 7.4
 * License:      Proprietary
 * Text Domain:  hc-diesel
 *
 * 样式加载顺序（见 functions.php）：
 *   1) assets/tailwind.css  — 预编译 + purged 的 Tailwind（由工具 tools/build-css.mjs 生成）
 *   2) article.css          — 文章正文样式层：让「插件输出的普通 HTML」直接呈现确认过的效果
 *   3) style.css（本文件）  — 主题级微调 + 集合页分页
 */

/* 主题级微调放在这里。正文排版请改 article.css，不要写进本文件。 */

/* ⚠️ 必须分层！tailwind.css 用 CSS 级联层（@layer theme, base, components, utilities）。
   未分层的规则优先级【高于】任何分层规则（与选择器权重无关），
   所以不写 @layer 的话，下面的 img 规则会压掉所有工具类（h-12 / max-w-* 等）—— logo 变大的 bug 就是这么来的。 */
@layer base {
  body { margin: 0; }
  img { max-width: 100%; height: auto; }
}

/* ============================================================================
   集合页分页（/blog/、分类归档、搜索）
   ----------------------------------------------------------------------------
   对应确认过的集合页设计；原蓝本没有分页（只有 10 张写死的卡），
   这里按同一套配色补做：浅灰底 + 橙色当前页。
   标记由 home.php 的 paginate_links() 输出（已把 page-numbers 换成 hc-page）。
   ========================================================================== */
@layer components {

.hc-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 3rem;
}
.hc-pagination .hc-page,
.hc-pagination .dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 .75rem;
  border-radius: .5rem;
  background: #e2e8f0;            /* slate-200 */
  color: #334155;                 /* slate-700 */
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.hc-pagination a.hc-page:hover {
  background: #cbd5e1;            /* slate-300 */
  color: #ea580c;                 /* orange-600 */
}
.hc-pagination .hc-page.is-current {
  background: #f97316;            /* orange-500 */
  color: #fff;
  cursor: default;
}
.hc-pagination .dots {
  background: transparent;
  color: #64748b;
}
.hc-pagination .hc-page.prev,
.hc-pagination .hc-page.next { padding: 0 1rem; }

} /* @layer components */