/* =========================
   🌸 加载字体
   ========================= */

@font-face {
  font-family: 'ArkPixel';
  src: url('../fonts/ark-pixel-12px-monospaced.ttf') format('truetype');
}

@font-face {
  font-family: 'FusionPixel';
  src: url('../fonts/fusion-pixel.ttf') format('truetype');
}

@font-face {
  font-family: 'LXGWWenKai';
  src: url('../fonts/LXGWWenKai-Regular.ttf') format('truetype');
}

/* =========================
   🌸 全站正文字体
   ========================= */

html, body, p, span, div, li,
.post-meta, .post-subtitle,
.navbar-nav > li > a,
footer, footer p,
table, td, th {
  font-family: 'LXGWWenKai', serif !important;
}
/* =========================
   🌸 主站标题（左上角站名）
   ========================= */

.navbar-brand {
  font-family: 'ArkPixel', monospace !important;
  font-size: 18px;
  letter-spacing: 1px;
}

/* =========================
   🌸 首页正中央大标题（月之碗）
   ========================= */

.intro-header .site-heading h1,
.intro-header .page-heading h1 {
  font-family: 'ArkPixel', monospace !important;
  font-size: 72px !important;
  letter-spacing: 2px;
}

/* =========================
   🌙 首页副标题（page-subheading）
   ========================= */

/* 副标题悬停轻快摇晃 */
.page-subheading {
  font-family: 'FusionPixel', monospace !important;
  font-size: 18px !important;
  letter-spacing: 2px;
  display: inline-block;      /* 必须！让 transform 生效 */
  color: #CFDEE3;
  transition: all 0.2s ease;  /* 悬停过渡 */
}

.page-subheading:hover {
  animation: floatShake 0.2s ease-in-out infinite; /* 悬停摇晃，速度快 */
  cursor: default;
}

@keyframes floatShake {
  0%   { transform: translateY(0px) rotate(0deg); }
  25%  { transform: translateY(-2px) rotate(-1deg); }
  50%  { transform: translateY(0px) rotate(0deg); }
  75%  { transform: translateY(-2px) rotate(1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* =========================
   🌸 文章标题
   ========================= */

h1,h2, h3, h4, h5, h6 {
  font-family: 'FusionPixel', monospace !important;
  letter-spacing: 1px;
}

/* =========================
   🌸 文章一级标题左侧竖条
   ========================= */
h1[id] {
  border-left: 4px solid #FCBEC3;
  padding-left: 12px;
  color: #8E656F;
  font-family: 'FusionPixel', monospace;
}

/* =========================
   🌸 基础配色
   ========================= */

body {
  background-color: #FFF2E9;
  color: #8E656F;
  line-height: 1.8;
  font-size: 16px;
}

/* 页面卡片 */
.main-content {
  background-color: #ffffff;
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 6px 20px rgba(142, 101, 111, 0.15);
}

/* =========================
   🌸 首页标题颜色
   ========================= */

.blog-post h2 a {
  color: #8E656F;
  transition: 0.3s ease;
}

.blog-post h2 a:hover {
  color: #FCBEC3;
  text-decoration: none;
}

/* 文章页标题 */
.post-title {
  color: #8E656F;
  border-bottom: 3px dotted #FCBEC3;
  padding-bottom: 10px;
}

/* 副标题 */
.post-subtitle {
  color: #CFDEE3;
}

/* =========================
   🌸 导航栏
   ========================= */

.navbar {
  background-color: #FCBEC3;
  border: none;
}

.navbar-default .navbar-brand {
  color: #ffffff !important;
}

.navbar-default .navbar-nav > li > a {
  color: #ffffff !important;
}

.navbar-default .navbar-nav > li > a:hover {
  background-color: #8E656F !important;
  color: #FFF2E9 !important;
  border-radius: 8px;
}

/* =========================
   🌸 链接
   ========================= */

a {
  color: #8E656F;
  text-decoration: none;
  transition: 0.3s ease;
}

a:hover {
  color: #FCBEC3;
  text-decoration: underline;
}

/* =========================
   🌸 分页（无按钮）
   ========================= */

.pager li > a {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: #8E656F !important;
}

.pager li > a:hover {
  color: #FCBEC3 !important;
  text-decoration: underline;
}

/* =========================
   🌸 代码块
   ========================= */

pre {
  background-color: #FFF2E9 !important;
  border-radius: 12px;
  border: 1px solid #CFDEE3;
  padding: 15px;
}

code {
  background-color: #FFF2E9;
  color: #8E656F;
}

/* =========================
   🌸 引用块
   ========================= */

blockquote {
  border-left: 5px solid #FCBEC3;
  background-color: #FFF2E9;
  padding: 15px;
  border-radius: 10px;
}

/* =========================
   🌸 表格
   ========================= */

table {
  border-collapse: collapse;
}

table th {
  background-color: rgb(207, 222, 227);
  color: #8E656F;
}

table td, table th {
  border: 1px solid #FFF2E9;
  padding: 8px;
}

/* =========================
   🌸 按钮
   ========================= */

.btn-primary {
  background-color: #FCBEC3;
  border: none;
  border-radius: 20px;
}

.btn-primary:hover {
  background-color: #8E656F;
}

/* =========================
   🌸 页脚
   ========================= */

footer {
  background-color: #CFDEE3;
  padding: 20px 0;
  color: #8E656F;
}

footer a {
  color: #8E656F;
}

footer a:hover {
  color: #FCBEC3;
}

/* =========================
   🌸 滚动条
   ========================= */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: #FCBEC3;
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background: #FFF2E9;
}

/* =========================
   🌸 首页标题下方分割线
   ========================= */

.intro-header hr,
.intro-header .small,
hr.small {
  border: none !important;
  border-top: 2px dashed #CFDEE3 !important;
  width: 120px;
  margin: 20px auto;
  opacity: 1;
}

/* =========================
   🌙 首页头像完全取消圆形裁切
   ========================= */

/* 外层容器去掉圆形和阴影 */
.avatar-img-border {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: none !important;
  overflow: visible !important;
}

/* 图片本身取消圆形 */
.avatar-img {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 如果主题强制设为圆形 */
.intro-header .avatar-img,
.intro-header .avatar-img-border {
  border-radius: 0 !important;
}

/* =========================
   🌸 首页头像悬停效果
   ========================= */

/* 基础样式，保留原形状 */
.avatar-img {
  transition: transform 0.3s ease;
  cursor: pointer;           /* 鼠标悬停显示可交互 */
}

/* 悬停动画 */
.avatar-img:hover {
  transform: scale(1.05) rotate(-2deg);
  animation: shake 0.5s ease-in-out infinite alternate;
}

/* 摇晃关键帧 */
@keyframes shake {
  0% { transform: scale(1.05) rotate(-2deg); }
  25% { transform: scale(1.05) rotate(1deg); }
  50% { transform: scale(1.05) rotate(-1deg); }
  75% { transform: scale(1.05) rotate(2deg); }
  100% { transform: scale(1.05) rotate(-2deg); }
}

/* =========================
   🌸 小卡片便签风格（.well）
   ========================= */

.well {
  background-color: #F7E6DD !important;   /* 便签纸张颜色 */
  border: none !important;
  border-radius: 8px;                     /* 纸张圆角 */
  box-shadow: 0 6px 15px rgba(142, 101, 111, 0.12); /* 浮起效果 */
  padding: 20px 25px;
  font-family: 'LXGWWenKai', serif !important;
  font-size: 15px;
  line-height: 1.6;
  color: #8E656F;
}

/* 悬停轻微放大便签 */
.well:hover {
  transform: rotate(0deg) scale(1.02);
}

/* 小卡片标题 */
.well h2 {
  font-family: 'FusionPixel', monospace !important;
  font-size: 18px;
  margin-bottom: 10px;
  color: #8E656F;
}

/* 段落内容 */
.well p {
  margin: 0;
}