/* ============================================================
   WP Diary → Hexo 主题的补充样式
   原主题 CSS 已复用 (parent.css / child.css / dark-mode.css)
   这里只补 Hexo 结构差异所需的部分
   ============================================================ */

/* ---- 主色变量 ---- */
:root {
  --primary: #EC9FA1;
  --text: #838383;
  --heading: #3d3d3d;
  --border: #e1e1e1;
}

/* ---- 布局骨架（沿用原主题的 float 方案: #primary 70% / #secondary 27%）---- */
.mt-container {
  width: 1320px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 50px;
}

.mt-container::after {
  content: '';
  display: table;
  clear: both;
}

#primary {
  float: left;
  width: 70%;
  padding: 40px 0;
}

.left-sidebar #primary {
  float: right;
}

#secondary {
  float: right;
  width: 27%;
  padding: 40px 0;
}

.left-sidebar #secondary {
  float: left;
}

.no-sidebar #primary {
  float: none;
  width: 100%;
}

@media (max-width: 991px) {
  .mt-container { width: 100%; padding: 0 20px; }
  #primary, .left-sidebar #primary { float: none; width: 100%; padding: 30px 0; }
  #secondary, .left-sidebar #secondary { float: none; width: 100%; padding: 0 0 30px; }
}

/* ---- 卡片网格 ----
   注意: 不要在这里覆盖 width/margin!
   子主题 child.css 已用 width:46% + margin-left:4% + inline-block 实现两列,
   若只覆盖 width 为 50% 而不同时清掉 margin-left:4%, 总宽 54% 会导致单列。
   原站就是靠 child.css 这套规则排两列的, 这里保持不动。
---- */

/* 清浮动兜底 (inline-block 方案其实不需要, 但防止意外) */
.mt-archive-posts-wrapper::after {
  content: '';
  display: table;
  clear: both;
}

/* ---- 文章卡片 (与 WP Diary 一致的外观) ---- */
#mt-masonry article .mt-post-content-wrapper,
#mt-masonry article .mt-post-thumbnail {
  background: #fff;
}

#mt-masonry article {
  transition: transform .3s ease;
}

#mt-masonry article > .mt-post-content-wrapper,
.archive-classic-post-wrapper article {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: box-shadow .3s ease;
  overflow: hidden;
}

#mt-masonry article:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}

#mt-masonry .mt-post-content-wrapper {
  padding: 24px;
}

.entry-meta {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 10px;
}

.entry-meta a {
  color: var(--text);
  text-decoration: none;
}

.entry-meta a:hover {
  color: var(--primary);
}

.entry-title {
  margin: 0 0 12px;
}

.entry-title a {
  font-family: "Be Vietnam Pro", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--heading);
  text-decoration: none;
  line-height: 1.35;
}

.entry-title a:hover {
  color: var(--primary);
}

.entry-content {
  color: var(--text);
  font-size: 15px;
  line-height: 1.75;
}

.entry-footer {
  margin-top: 16px;
}

.read-more {
  display: inline-block;
  font-size: 14px;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.read-more:hover {
  border-bottom-color: var(--primary);
}

/* ---- 单篇文章 ---- */
.single .entry-header {
  margin-bottom: 28px;
}

.single .entry-title {
  font-size: 32px;
  line-height: 1.4;
}

.single .entry-content {
  font-size: 16px;
  line-height: 1.9;
}

.single .entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.single .entry-content h2,
.single .entry-content h3,
.single .entry-content h4 {
  font-family: "Be Vietnam Pro", Helvetica, Arial, sans-serif;
  color: var(--heading);
  margin: 1.6em 0 .6em;
}

.single .entry-content a {
  color: var(--primary);
}

.single .entry-content blockquote {
  border-left: 3px solid var(--primary);
  padding-left: 16px;
  margin: 1.2em 0;
  color: var(--text);
  font-style: italic;
}

.single .entry-content pre {
  background: #2d2d2d;
  color: #f8f8f2;
  padding: 16px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 14px;
}

.single .entry-content code {
  font-family: Consolas, Monaco, monospace;
  font-size: 14px;
}

.single .entry-content :not(pre) > code {
  background: #f4f4f4;
  padding: 2px 6px;
  border-radius: 3px;
  color: #c7254e;
}

.tags-links {
  font-size: 14px;
  color: var(--text);
}

.tags-links a {
  color: var(--primary);
  text-decoration: none;
}

/* ---- 侧栏 widget ---- */
.widget {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.widget-title {
  font-family: "Be Vietnam Pro", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--primary);
  display: inline-block;
}

.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget ul li {
  padding: 8px 0;
  border-bottom: 1px dashed #f0f0f0;
  font-size: 14px;
}

.widget ul li:last-child {
  border-bottom: none;
}

.widget ul li a {
  color: var(--text);
  text-decoration: none;
}

.widget ul li a:hover {
  color: var(--primary);
  padding-left: 4px;
  transition: padding .2s;
}

/* 作者卡片 */
.author-bio-wrap {
  text-align: center;
}

.author-avatar img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary);
}

.author-name {
  font-family: "Great Vibes", cursive;
  font-size: 26px;
  color: var(--heading);
  margin: 12px 0 8px;
}

.author-description {
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 12px;
}

.mt-social-icon-wrap {
  display: flex;
  justify-content: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mt-social-icon a {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f8f8f8;
  color: var(--text);
  text-decoration: none;
  transition: all .25s;
}

.mt-social-icon a:hover {
  background: var(--primary);
  color: #fff;
}

/* ---- 标签云 ---- */
.tagcloud a {
  display: inline-block;
  padding: 4px 10px;
  margin: 0 6px 6px 0;
  background: #f8f8f8;
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px !important;
}

.tagcloud a:hover {
  background: var(--primary);
  color: #fff;
}

/* ---- 分页 ---- */
.pagination {
  margin: 20px 0 40px;
}

.pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pagination a,
.pagination span {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.pagination .current {
  background: var(--primary);
  color: #fff;
}

.pagination a:hover {
  background: var(--primary);
  color: #fff;
}

/* ---- 文章内导航 ---- */
.post-navigation {
  background: #fff;
  border-radius: 8px;
  padding: 20px 24px;
  margin: 24px 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.post-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.post-navigation a {
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}

.post-navigation a:hover {
  color: var(--primary);
}

/* ---- 页头 ---- */
.site-header {
  background: #fff;
  box-shadow: 0 1px 8px rgba(0,0,0,.05);
}

.mt-logo-row-wrapper {
  padding: 30px 0;
}

.mt-logo-row-wrapper .mt-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.site-title {
  font-family: "Great Vibes", cursive;
  font-size: 42px;
  margin: 0;
  line-height: 1.2;
}

.site-title a {
  color: var(--heading);
  text-decoration: none;
}

.site-title a:hover {
  color: var(--primary);
}

.site-description {
  font-size: 14px;
  color: var(--text);
  margin: 6px 0 0;
}

.main-menu-wrapper {
  background: #fff;
  border-top: 1px solid var(--border);
}

#primary-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

#primary-menu .menu-item a {
  display: block;
  padding: 16px 20px;
  color: var(--heading);
  text-decoration: none;
  font-size: 15px;
  font-family: "Be Vietnam Pro", Helvetica, Arial, sans-serif;
  transition: color .2s;
}

#primary-menu .menu-item a:hover {
  color: var(--primary);
}

/* ---- 页脚 ---- */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 30px 0;
  text-align: center;
}

.site-info {
  font-size: 14px;
  color: var(--text);
  line-height: 2;
}

.site-info a {
  color: var(--primary);
  text-decoration: none;
}

/* ---- 深色模式模式切换按钮 ---- */
#mt-site-mode-wrap {
  position: fixed;
  right: 24px;
  bottom: 80px;
  z-index: 999;
}

#mode-switcher {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(236,159,161,.4);
}

#mode-switcher .fa-moon { display: none; }
#mode-switcher.dark-mode .fa-sun { display: none; }
#mode-switcher.dark-mode .fa-moon { display: inline; }

/* ---- 背景圆圈动画 ---- */
.blogger-diary-background-animation {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.blogger-diary-circles {
  position: absolute;
  border-radius: 50%;
  background: var(--primary);
  opacity: .07;
  animation: floatUp 20s infinite linear;
}

.blogger-diary-circles:nth-child(1) { width: 80px; height: 80px; left: 5%; animation-duration: 22s; }
.blogger-diary-circles:nth-child(2) { width: 40px; height: 40px; left: 15%; animation-duration: 18s; animation-delay: 2s; }
.blogger-diary-circles:nth-child(3) { width: 120px; height: 120px; left: 25%; animation-duration: 26s; animation-delay: 4s; }
.blogger-diary-circles:nth-child(4) { width: 60px; height: 60px; left: 38%; animation-duration: 20s; animation-delay: 1s; }
.blogger-diary-circles:nth-child(5) { width: 90px; height: 90px; left: 50%; animation-duration: 24s; animation-delay: 6s; }
.blogger-diary-circles:nth-child(6) { width: 50px; height: 50px; left: 62%; animation-duration: 19s; animation-delay: 3s; }
.blogger-diary-circles:nth-child(7) { width: 110px; height: 110px; left: 72%; animation-duration: 28s; animation-delay: 5s; }
.blogger-diary-circles:nth-child(8) { width: 70px; height: 70px; left: 84%; animation-duration: 21s; animation-delay: 8s; }
.blogger-diary-circles:nth-child(9) { width: 45px; height: 45px; left: 92%; animation-duration: 17s; animation-delay: 7s; }
.blogger-diary-circles:nth-child(10) { width: 100px; height: 100px; left: 45%; animation-duration: 25s; animation-delay: 10s; }
.blogger-diary-circles:nth-child(11) { width: 55px; height: 55px; left: 30%; animation-duration: 23s; animation-delay: 12s; }
.blogger-diary-circles:nth-child(12) { width: 85px; height: 85px; left: 68%; animation-duration: 27s; animation-delay: 9s; }

@keyframes floatUp {
  0%   { transform: translateY(110vh) scale(1); opacity: 0; }
  10%  { opacity: .07; }
  90%  { opacity: .07; }
  100% { transform: translateY(-20vh) scale(1.3); opacity: 0; }
}

/* 内容层要在动画之上 */
#page {
  position: relative;
  z-index: 1;
}

/* ---- 深色模式补充 (Hexo 结构) ---- */
.site-mode--dark #page {
  background: #101010;
}

.site-mode--dark body {
  background: #101010;
}

.site-mode--dark .site-header,
.site-mode--dark .main-menu-wrapper,
.site-mode--dark .site-footer {
  background: #171717;
  border-color: #2c2c2c;
}

.site-mode--dark .site-title a,
.site-mode--dark #primary-menu .menu-item a,
.site-mode--dark .widget-title,
.site-mode--dark .entry-title a,
.site-mode--dark .author-name {
  color: #fff;
}

.site-mode--dark .widget,
.site-mode--dark #mt-masonry article,
.site-mode--dark .post-navigation {
  background: #212121;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}

.site-mode--dark .entry-content,
.site-mode--dark .site-info,
.site-mode--dark .entry-meta,
.site-mode--dark .entry-meta a,
.site-mode--dark .widget ul li a {
  color: #bfbfbf;
}

.site-mode--dark .single .entry-content :not(pre) > code {
  background: #2d2d2d;
  color: #ff8a8a;
}

.site-mode--dark .tagcloud a,
.site-mode--dark .mt-social-icon a,
.site-mode--dark .pagination a,
.site-mode--dark .pagination span {
  background: #2d2d2d;
  color: #bfbfbf;
}

.site-mode--dark .blogger-diary-circles {
  opacity: .04;
}

/* ---- 响应式 ---- */
@media (max-width: 768px) {
  .site-title { font-size: 32px; }
  .single .entry-title { font-size: 24px; }
  #primary-menu { flex-direction: column; }
  #primary-menu .menu-item a { padding: 12px 16px; border-bottom: 1px solid var(--border); }
}

/* ---- 侧栏计数 ---- */
.cat-count,
.archive-count {
  color: #A6A6A6;
  font-size: 13px;
}

/* ---- 返回顶部按钮 ---- */
#mt-scrollup {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

#mt-scrollup:hover {
  background: var(--primary);
  color: #fff;
}

/* ---- 页头图标 ---- */
.mt-header-extra-icons {
  display: flex;
  align-items: center;
}

.mt-header-extra-icons .mt-social-icon-wrap {
  margin: 0;
}