@font-face {
  /* 为载入的字体取名字(随意) */
  font-family: 'xiawu';	
  /* 字体文件地址(相对或者绝对路径都可以) */
  src: url(../font/霞鹜文楷.woff2);
  /* 定义加粗样式(加粗多少) */
  font-weight: normal;
  /* 定义字体样式(斜体/非斜体) */
  font-style: normal;
  /* 定义显示样式 */
  font-display: block;
}

:root {
  --global-font: 'xiawu', 'Quicksand', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
  --trans-light: rgba(255, 255, 255, 0.88);
  --trans-dark: rgba(25, 25, 25, 0.88);
  --border-style: 1px solid rgb(169, 169, 169);
  --backdrop-filter: blur(5px) saturate(150%);
  /* Subtitle customization */
  --subtitle-color: #ffffff; /* main subtitle text color */
  /* Use a lighter, thinner stroke so white stays bright */
  --subtitle-stroke-color: rgba(96, 90, 90, 0.1); /* stroke color (dark, but semi-transparent) */
  --subtitle-stroke-width: 0.8px; /* stroke width */
  /* subtle dark halo fallback */
  --subtitle-halo: 0 0 1px rgba(99, 93, 93, 0.55), 0 1px 1px rgba(0,0,0,0.48), 0 -1px 1px rgba(0,0,0,0.48), 1px 0 1px rgba(0,0,0,0.48), -1px 0 1px rgba(0,0,0,0.48);
  --subtitle-light-halo: 0 0 2px rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.4);
  --subtitle-dark-stroke-color: rgba(255,255,255,0.9); /* stroke color to use in dark mode */
  /* Title customization (main site title) */
  --title-color: #ffffff;
  --title-stroke-color:rgba(96, 90, 90, 0.15);
  --title-stroke-width: 0.8px;
  --title-halo: 0 0 1px rgba(199, 175, 175, 0.55),0 2px 2px rgba(0,0,0,0.5), 0 -2px 2px rgba(0,0,0,0.5), 2px 0 2px rgba(0,0,0,0.5), -2px 0 2px rgba(0,0,0,0.5);
  --title-dark-stroke-color: rgba(255,255,255,0.95);
}

/* 使用全局字体变量 */
body {
  font-family: var(--global-font);
}

/* 首页文章卡片 */
#recent-posts > .recent-post-item {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 25px;
  border: var(--border-style);
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 18px;
  border: var(--border-style);
}

/* 文章页、归档页、普通页面 */
div#post,
div#page,
div#archive {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border: var(--border-style);
  border-radius: 20px;
}

/* 导航栏 */
#page-header.nav-fixed #nav {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: var(--backdrop-filter);
}

[data-theme="dark"] #page-header.nav-fixed #nav {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* 夜间模式遮罩 */
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
  background: var(--trans-dark);
}

/* 页脚与头图透明 */
#footer {
  background: transparent !important;
}
#page-header {
  background: transparent !important;
  
}


/* 白天模式遮罩透明 */
#footer::before {
  background: transparent !important;
}
#page-header::before {
  background: transparent !important;
}

/* 夜间模式遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}

/* 阅读模式 */
.read-mode #aside-content .card-widget {
  background: rgba(158, 204, 171, 0.5) !important;
}
.read-mode div#post {
  background: rgba(158, 204, 171, 0.5) !important;
}

/* 夜间模式下的阅读模式 */
[data-theme="dark"] .read-mode #aside-content .card-widget {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}
[data-theme="dark"] .read-mode div#post {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}

/* Social icon hover tooltip (show local QQ/WeChat images) */
.social-icon {
  position: relative; /* ensure positioning context */
}

.social-tooltip {
  position: fixed; /* use fixed to avoid overflow clipping */
  display: none;
  width: auto;
  max-width: 220px;
  padding: 6px;
  background: rgba(0,0,0,0.85);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  z-index: 99999;
  transition: opacity 150ms ease, transform 150ms ease;
  opacity: 0;
  transform: translateY(6px);
}

.social-tooltip.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.social-tooltip img {
  display: block;
  width: 180px;
  height: auto;
  max-height: 240px;
  object-fit: contain;
  border-radius: 6px;
}

/* small arrow under tooltip */
.social-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: rgba(0,0,0,0.85) transparent transparent transparent;
}
/* 小冰分类分类磁铁黑夜模式适配 */
/* 一般状态 */
[data-theme="dark"] .magnet_link_context {
  background: #1e1e1e;
  color: antiquewhite;
}
/* 鼠标悬浮状态 */
[data-theme="dark"] .magnet_link_context:hover {
  background: #3ecdf1;
  color: #f2f2f2;
}

.nav-fixed #nav{
  transform: translateY(58px)!important;
  -webkit-transform: translateY(58px)!important;
  -moz-transform: translateY(58px)!important;
  -ms-transform: translateY(58px)!important;
  -o-transform: translateY(58px)!important;
}
#nav{
  transition: none!important;
  -webkit-transition: none!important;
  -moz-transition: none!important;
  -ms-transition: none!important;
  -o-transition: none!important;
}

/* About page spacing adjustments */
.about-actions {
  display: flex;
  gap: 16px; /* 按钮间距 */
  margin-top: 18px;
  flex-wrap: wrap;
}

.about-actions .btn {
  padding: 10px 18px;
}

.social-links {
  display: flex;
  gap: 16px; /* 社交按钮间距 */
  margin-top: 16px;
}

/* Remove avatar-specific rules on about page to hide avatar if present */
.about-avatar { display: none !important; }

/* Social buttons: pill frame and hover effect */
.social-links .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px; /* pill shape */
  border: 1px solid rgba(0,0,0,0.12);
  background: transparent;
  color: inherit;
  text-decoration: none;
  transition: all 180ms ease-in-out;
  font-weight: 500;
}

.social-links .btn i {
  margin-right: 8px;
  /* 响应式图标大小：最小 14px，按视口宽度缩放，最大 20px */
  font-size: clamp(14px, 1.6vw, 20px);
  line-height: 1;
  transition: transform 160ms ease;
}

.social-links .btn:hover i {
  transform: scale(1.08);
}

.social-links .btn:hover,
.social-links .btn:focus {
  border-color: #000; /* 框变黑 */
  color: #000;        /* 文字变黑 */
  background: rgba(0,0,0,0.04);
  outline: none;
}

/* 深色主题下把悬停颜色调整为白色以保证可读性 */
[data-theme="dark"] .social-links .btn {
  border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .social-links .btn:hover,
[data-theme="dark"] .social-links .btn:focus {
  border-color: #fff;
  color: #fff;
  background: rgba(255,255,255,0.06);
}

/* Subtitle outline / halo to improve legibility on hero background */
#site-subtitle, #page-header #site-subtitle, #site-subtitle span#subtitle {
  color: var(--subtitle-color);
  /* Prefer native stroke when available */
  -webkit-text-stroke: var(--subtitle-stroke-width) var(--subtitle-stroke-color);
  /* Fully compatible fallback using multiple layered text-shadows to create an outline/halo */
  text-shadow: var(--subtitle-halo);
  /* Ensure subtitle sits above background layers */
  position: relative;
  z-index: 2;
}

/* Apply similar halo/stroke to main site title and page titles */
#site-title, #page-site-info h1 {
  color: var(--title-color);
  -webkit-text-stroke: var(--title-stroke-width) var(--title-stroke-color);
  text-shadow: var(--title-halo);
  position: relative;
  z-index: 2;
}

[data-theme="dark"] #site-title, [data-theme="dark"] #page-site-info h1 {
  -webkit-text-stroke: calc(var(--title-stroke-width) * 0.9) var(--title-dark-stroke-color);
  color: var(--title-color);
}

@media (max-width: 640px) {
  #site-title, #page-site-info h1 {
    -webkit-text-stroke: 1px var(--title-stroke-color);
    text-shadow: 0 0 2px rgba(0,0,0,0.45);
    font-size: 1.2rem;
  }
}

/* Slightly stronger halo in light theme when the background is bright */
#page-header:not([data-theme="dark"]) #site-subtitle, #site-subtitle:not([data-theme="dark"]) {
  /* For light theme, use darker stroke and a subtle light halo to separate from bright backgrounds */
  -webkit-text-stroke: var(--subtitle-stroke-width) var(--subtitle-stroke-color);
  text-shadow: var(--subtitle-light-halo);
}

/* In dark mode prefer a light stroke so the subtitle stays readable over dark backgrounds */
[data-theme="dark"] #site-subtitle, [data-theme="dark"] #page-header #site-subtitle {
  /* In dark mode prefer a light stroke so the subtitle stays readable over dark backgrounds */
  -webkit-text-stroke: calc(var(--subtitle-stroke-width) * 0.9) var(--subtitle-dark-stroke-color);
  text-shadow: 0 0 1px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.35);
  color: var(--subtitle-color); /* ensure color contrast */
}

/* Small screens: reduce stroke so text remains crisp */
@media (max-width: 640px) {
  #site-subtitle, #site-subtitle span#subtitle {
    -webkit-text-stroke: 1px var(--subtitle-stroke-color);
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    font-size: 0.95rem;
  }
}

/* === Disable avatar hover rotation ===
   Some third-party CSS/animations in the theme rotate the avatar on hover.
   The following rules force avatar images to have no transform/animation on hover.
   This is safe to keep in `source/css/custom.css`; remove these lines to restore original behavior. */
.avatar-img,
.avatar-img img,
.card-info .avatar-img,
.card-info .avatar-img img {
  -webkit-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
  -webkit-animation: none !important;
  animation: none !important;
}



/* 保证深色/浅色主题下视觉一致性 */
[data-theme="dark"] #twikoo-wrap .tk-avatar { opacity: 0.95; }
[data-theme="light"] #twikoo-wrap .tk-avatar { opacity: 1; }

/* 针对 Element UI / el-textarea 的特殊类名覆盖（优先级更高，覆盖内联高度） */
#twikoo-wrap .el-textarea__inner {
  min-height: 120px !important;
  height: auto !important;
  max-height: 600px !important;
  background-image: none !important; /* 去掉不必要的背景图 */
  box-sizing: border-box !important;
}