/* ==========================================================
   子比主题美化增强 - 前台样式
   ========================================================== */

/* ─── 全局变量（默认值，会被 PHP inline 覆盖）──────────────── */
:root {
  --zibe-primary:       #4e6ef2;
  --zibe-secondary:     #f5a623;
  --zibe-link-hover:    #ff6b6b;
  --zibe-card-bg:       #ffffff;
  --zibe-anim-speed:    0.35s;
  --zibe-font:          -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --zibe-font-size:     15px;
  --zibe-line-height:   1.8;
  --zibe-blur:          10px;
  --zibe-sidebar-alpha: 0.85;
  --zibe-radius:        12px;
  --zibe-card-radius:   12px;
  --zibe-scrollbar:     #4e6ef2;
}

/* ─── 1. 入场动画 ──────────────────────────────────────────── */
@keyframes zibeFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes zibeFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes zibeScaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes zibeSlideRight {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 文章列表卡片 */
.zib-post-list .zib-post-wrap,
.zib-post-list .item,
.site-card-list .item {
  animation: zibeFadeUp var(--zibe-anim-speed) ease both;
}
.zib-post-list .zib-post-wrap:nth-child(1)  { animation-delay: 0.05s; }
.zib-post-list .zib-post-wrap:nth-child(2)  { animation-delay: 0.10s; }
.zib-post-list .zib-post-wrap:nth-child(3)  { animation-delay: 0.15s; }
.zib-post-list .zib-post-wrap:nth-child(4)  { animation-delay: 0.20s; }
.zib-post-list .zib-post-wrap:nth-child(5)  { animation-delay: 0.25s; }
.zib-post-list .zib-post-wrap:nth-child(6)  { animation-delay: 0.30s; }
.zib-post-list .zib-post-wrap:nth-child(n+7){ animation-delay: 0.35s; }

/* 侧边栏 */
#sidebar .widget,
.zib-widget {
  animation: zibeSlideRight var(--zibe-anim-speed) ease both;
}
#sidebar .widget:nth-child(1) { animation-delay: 0.08s; }
#sidebar .widget:nth-child(2) { animation-delay: 0.16s; }
#sidebar .widget:nth-child(3) { animation-delay: 0.24s; }
#sidebar .widget:nth-child(n+4){ animation-delay: 0.32s; }

/* 评论区 */
.comment-list .comment {
  animation: zibeFadeUp var(--zibe-anim-speed) ease both;
}

/* ─── 2. 主色应用 ──────────────────────────────────────────── */
a:hover,
a:focus {
  color: var(--zibe-link-hover);
  transition: color var(--zibe-anim-speed) ease;
}

.zib-btn,
.btn-primary,
.site-btn {
  background: var(--zibe-primary) !important;
  border-color: var(--zibe-primary) !important;
  transition: filter var(--zibe-anim-speed), transform var(--zibe-anim-speed), box-shadow var(--zibe-anim-speed);
}
.zib-btn:hover,
.btn-primary:hover,
.site-btn:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

/* 排除搜索框相关按钮，避免污染子比搜索样式（如导航栏搜索图标） */
.navbar-search button,
.navbar-search input[type="submit"],
.search-form button,
.search-form input[type="submit"] {
  background: initial !important;
  border-color: initial !important;
}
.navbar-search button:hover,
.navbar-search input[type="submit"]:hover,
.search-form button:hover,
.search-form input[type="submit"]:hover {
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 标签 & 分类 */
.zib-tags a,
.post-tag,
.tag-link {
  background: linear-gradient(135deg, var(--zibe-primary), var(--zibe-secondary)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  transition: transform var(--zibe-anim-speed), box-shadow var(--zibe-anim-speed);
}
.zib-tags a:hover,
.post-tag:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 14px rgba(78,110,242,.35);
}

/* 搜索输入框 focus - 确保不被插件颜色覆盖 */
.navbar-search input[type="text"]:focus,
.search-form input[type="text"]:focus {
  border-color: initial !important;
  box-shadow: none !important;
}

/* ─── 3. 卡片美化 ──────────────────────────────────────────── */
.zib-post-wrap,
.zib-post-item,
.post-card,
.site-card,
.zib-widget,
#sidebar .widget {
  background: var(--zibe-card-bg) !important;
  border-radius: var(--zibe-card-radius) !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  transition:
    transform    var(--zibe-anim-speed) ease,
    box-shadow   var(--zibe-anim-speed) ease,
    border-color var(--zibe-anim-speed) ease;
  overflow: hidden;
}

/* 卡片悬停上浮（由 PHP 控制启用） */
.zibe-card-lift .zib-post-wrap:hover,
.zibe-card-lift .zib-post-item:hover,
.zibe-card-lift .post-card:hover,
.zibe-card-lift .site-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.14) !important;
  border-color: rgba(78,110,242,.2) !important;
}

/* 封面图缩放 */
.zib-post-wrap .zib-post-thumbnail img,
.post-card .post-thumbnail img,
.zib-post-item .item-img img {
  transition: transform 0.5s ease;
  display: block;
  width: 100%;
}
.zib-post-wrap:hover .zib-post-thumbnail img,
.post-card:hover .post-thumbnail img,
.zib-post-item:hover .item-img img {
  transform: scale(1.06);
}

/* ─── 4. 侧边栏毛玻璃 ──────────────────────────────────────── */
.zibe-sidebar-glass #sidebar .widget,
.zibe-sidebar-glass .zib-widget {
  background: rgba(255,255,255, var(--zibe-sidebar-alpha)) !important;
  backdrop-filter: blur(var(--zibe-blur)) saturate(180%) !important;
  -webkit-backdrop-filter: blur(var(--zibe-blur)) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  border-radius: var(--zibe-radius) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

/* 侧边栏标题 */
.zib-widget-title,
#sidebar .widget-title,
.zib-widget .widget-title {
  position: relative;
  padding-left: 14px;
  font-weight: 700;
}
.zib-widget-title::before,
#sidebar .widget-title::before,
.zib-widget .widget-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 70%;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--zibe-primary), var(--zibe-secondary));
}

/* ─── 5. 鼠标光效（由 JS 控制 --mx / --my）─────────────────── */
.zib-post-wrap,
.zib-post-item,
.site-card {
  --mx: 50%;
  --my: 50%;
}
.zibe-mouse-effect .zib-post-wrap::after,
.zibe-mouse-effect .zib-post-item::after,
.zibe-mouse-effect .site-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 180px at var(--mx) var(--my),
    rgba(255,255,255,.22), transparent 70%);
  transition: opacity 0.3s;
  z-index: 1;
}
.zibe-mouse-effect .zib-post-wrap:hover::after,
.zibe-mouse-effect .zib-post-item:hover::after,
.zibe-mouse-effect .site-card:hover::after {
  opacity: 1;
}
.zib-post-wrap,
.zib-post-item,
.site-card {
  position: relative;
}

/* ─── 6. 波纹效果 ──────────────────────────────────────────── */
.zibe-ripple-host {
  position: relative;
  overflow: hidden;
}
@keyframes zibeRipple {
  to { transform: scale(4); opacity: 0; }
}
.zibe-ripple-wave {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: zibeRipple 0.55s linear;
  background: rgba(255,255,255,.45);
  pointer-events: none;
  z-index: 9999;
}

/* ─── 7. 顶部进度条 ─────────────────────────────────────────── */
#zibe-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 99999;
  background: linear-gradient(90deg, var(--zibe-primary), var(--zibe-secondary));
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px var(--zibe-primary);
  transition: width 0.3s ease, opacity 0.4s ease;
}
#zibe-loading-bar.done {
  width: 100% !important;
  opacity: 0;
}

/* ─── 8. 美化滚动条 ─────────────────────────────────────────── */
::-webkit-scrollbar               { width: 6px; height: 6px; }
::-webkit-scrollbar-track         { background: transparent; }
::-webkit-scrollbar-thumb         { background: var(--zibe-scrollbar); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover   { filter: brightness(0.8); }
* { scrollbar-width: thin; scrollbar-color: var(--zibe-scrollbar) transparent; }

/* ─── 9. 文章内容排版 ────────────────────────────────────────── */
.zib-post-con h1,
.zib-post-con h2,
.zib-post-con h3,
.zib-post-con h4 {
  position: relative;
}
.zib-post-con h2::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 6px;
  background: linear-gradient(90deg, var(--zibe-primary), var(--zibe-secondary));
  border-radius: 2px;
}
.zib-post-con blockquote {
  border-left: 4px solid var(--zibe-primary) !important;
  background: rgba(78,110,242,.06);
  border-radius: 0 8px 8px 0;
}
.zib-post-con pre,
.zib-post-con code {
  border-radius: 8px !important;
}
.zib-post-con a {
  color: var(--zibe-primary);
  border-bottom: 1px dashed var(--zibe-primary);
  text-decoration: none;
  transition: color var(--zibe-anim-speed), border-color var(--zibe-anim-speed);
}
.zib-post-con a:hover {
  color: var(--zibe-link-hover);
  border-color: var(--zibe-link-hover);
}

/* ─── 10. 导航栏 ────────────────────────────────────────────── */
.zib-header,
.site-header,
#header {
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.zibe-header-scroll .zib-header,
.zibe-header-scroll .site-header,
.zibe-header-scroll #header {
  box-shadow: 0 2px 20px rgba(0,0,0,.12) !important;
}

/* ─── 11. 返回顶部按钮 ──────────────────────────────────────── */
#zibe-back-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--zibe-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
  z-index: 9990;
  box-shadow: 0 4px 16px rgba(78,110,242,.4);
  border: none;
  font-size: 18px;
}
#zibe-back-top.visible {
  opacity: 1;
  transform: translateY(0);
}
#zibe-back-top:hover {
  filter: brightness(0.85);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(78,110,242,.5);
}

/* ─── 12. 页脚 ──────────────────────────────────────────────── */
.site-footer a:hover,
#footer a:hover {
  color: var(--zibe-primary) !important;
}

/* ─── 13. 选中文字 ──────────────────────────────────────────── */
::selection {
  background: var(--zibe-primary);
  color: #fff;
}

/* ─── 14. 图片查看器入场 ────────────────────────────────────── */
.zib-fancybox-opened,
.fancybox-opened {
  animation: zibeScaleIn 0.25s ease;
}

/* ─── 15. 评论区 ────────────────────────────────────────────── */
#comment-form input:focus,
#comment-form textarea:focus,
.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--zibe-primary) !important;
  box-shadow: 0 0 0 3px rgba(78,110,242,.18);
  transition: border-color 0.25s, box-shadow 0.25s;
}

/* ─── 移动端适配（统一断点）────────────────────────────── */
@media (max-width: 768px) {
  .zib-post-list .zib-post-wrap {
    animation-delay: 0.05s !important;
  }
  #zibe-back-top {
    bottom: 20px;
    right: 16px;
    width: 38px;
    height: 38px;
    font-size: 15px;
  }
  #zibe-dark-toggle {
    bottom: 76px;
    right: 16px;
    width: 38px;
    height: 38px;
    font-size: 17px;
  }
  #zibe-greeting {
    top: 66px;
    font-size: 13px;
    padding: 8px 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   17. 暗黑模式切换按钮
   ═══════════════════════════════════════════════════════════════ */
#zibe-dark-toggle {
  position: fixed;
  bottom: 88px;
  right: 32px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1e1e2e;
  color: #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9990;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  border: none;
  font-size: 20px;
  transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
}
#zibe-dark-toggle:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
body.zibe-dark #zibe-dark-toggle {
  background: #fbbf24;
  color: #1e1e2e;
}

/* ═══════════════════════════════════════════════════════════════
   18. 复制提示 Toast
   ═══════════════════════════════════════════════════════════════ */
#zibe-copy-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-120px);
  background: var(--zibe-primary, #4e6ef2);
  color: #fff;
  padding: 10px 28px;
  border-radius: 24px;
  font-size: 14px;
  z-index: 99999;
  box-shadow: 0 6px 24px rgba(0,0,0,.2);
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  white-space: nowrap;
}
#zibe-copy-toast.show {
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   19. 文章阅读进度条
   ═══════════════════════════════════════════════════════════════ */
#zibe-reading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--zibe-primary, #4e6ef2), var(--zibe-secondary, #f5a623));
  z-index: 99999;
  transition: width 0.15s linear;
  border-radius: 0 2px 2px 0;
}

/* ═══════════════════════════════════════════════════════════════
   20. 图片悬停旋转放大
   ═══════════════════════════════════════════════════════════════ */
body.zibe-img-rotate .zib-post-con img:not(.avatar):not(.wp-smiley),
body.zibe-img-rotate .wp-posts-content img:not(.avatar):not(.wp-smiley),
body.zibe-img-rotate .entry-content img:not(.avatar):not(.wp-smiley) {
  border-radius: var(--zibe-card-radius, 12px);
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.45s ease,
              border-radius 0.45s ease;
  cursor: zoom-in;
}
body.zibe-img-rotate .zib-post-con img:hover:not(.avatar):not(.wp-smiley),
body.zibe-img-rotate .wp-posts-content img:hover:not(.avatar):not(.wp-smiley),
body.zibe-img-rotate .entry-content img:hover:not(.avatar):not(.wp-smiley) {
  transform: scale(1.04) rotate(0.5deg);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   21. 时段问候语
   ═══════════════════════════════════════════════════════════════ */
#zibe-greeting {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  color: #374151;
  padding: 10px 26px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  z-index: 9998;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  opacity: 0;
  transition: opacity 0.5s ease, top 0.5s ease;
  pointer-events: none;
  white-space: nowrap;
}
#zibe-greeting.show {
  opacity: 1;
  top: 68px;
}
body.zibe-dark #zibe-greeting {
  background: rgba(39,39,42,.92);
  color: #e4e4e7;
}