/*
 * Theme Name: Zibll Child
 * Template: zibll
 * Description: 咔游视觉覆盖子主题（青蓝 #0EA5E9 基调）。仅覆盖 CSS，不改动模板结构。
 */

:root {
  /* 主色统一为青蓝；!important 覆盖 zibll 后台注入的内联 --theme-color */
  --theme-color: #0EA5E9 !important;
  --theme-color-dark: #0284C7;
  --focus-color-opacity1: rgba(14, 165, 233, .12) !important;
  --focus-shadow-color: rgba(14, 165, 233, .45) !important;
  --kauiu-ink: #1E293B;
  --kauiu-muted: #64748B;
  --kauiu-line: #E6EBF2;
}

/* —— 排版基线：正文 16px、行高 1.7、中文黑体栈 —— */
html { -webkit-text-size-adjust: 100%; }
body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--kauiu-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* 戏剧化字号层级（标题比正文明显大，建立秩序） */
h1, .h1 { font-size: clamp(28px, 4vw, 34px); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
h2, .h2 { font-size: clamp(22px, 3vw, 26px); font-weight: 800; line-height: 1.3; }
h3, .h3 { font-size: 20px; font-weight: 700; line-height: 1.4; }
h4, .h4 { font-size: 17px; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--theme-color); text-decoration: none; }
a:hover { color: var(--theme-color-dark); }

/* —— 主按钮：跟随主色，hover 加深 —— */
.btn-primary,
.btn.btn-primary,
.theme-color {
  background-color: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn.btn-primary:hover { filter: brightness(.94); }
.text-theme { color: var(--theme-color) !important; }
.bg-theme { background-color: var(--theme-color) !important; }
.border-theme { border-color: var(--theme-color) !important; }

/* —— 卡片：圆角更柔、hover 微浮起 + 青蓝光晕（记忆点） —— */
.card,
.post-card,
.theme-card,
.list-box {
  border-radius: 14px !important;
  border-color: var(--kauiu-line) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover,
.post-card:hover,
.theme-card:hover,
.list-box:hover {
  transform: translateY(-3px);
  border-color: var(--theme-color) !important;
  box-shadow: 0 14px 30px rgba(14, 165, 233, .14);
}

/* —— 顶栏：底部 2px 青蓝渐变描边（克制的品牌记忆点） —— */
.header,
header,
.navbar,
.site-header {
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg, transparent, var(--theme-color), transparent) 1 !important;
}

/* —— 移动端：导航横向可滚动、间距合规（触摸目标 ≥44px） —— */
@media (max-width: 768px) {
  .nav,
  .navbar-nav,
  .nav-menu,
  .header-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
  }
  .nav .nav-item > a,
  .navbar-nav > li > a,
  .nav-menu > li > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
  }
  body { font-size: 16px; }
}

/* —— 尊重减弱动效偏好 —— */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}