/* ================================
   抹茶紅豆主題自定義樣式
   Matcha & Red Bean Theme Custom CSS
   ================================ */

/* === 配色變量定義 === */
:root {
  /* Nightcord 25 時 · 粉紫夜色系 */
  --primary: #C6A7E2;        /* 主粉紫 */
  --primary-light: #E1CFF2;  /* 淡粉紫 */
  --primary-lighter: #F1E8FA;
  --primary-lightest: #F8F4FC;
  --primary-dark: #9B7BB8;
  --primary-darker: #6E5A8A;

  /* 夜色輔助色（偏藍紫） */
  --accent: #7F8CCF;
  --accent-dark: #5F6FB0;
  --accent-light: #E6E9FA;
  --accent-lighter: #F3F5FD;

  /* 夜間霧感背景 */
  --bg-main: #FAF9FC;
  --bg-soft: #F3F1F7;

  /* 陰影（偏紫灰，不要綠色） */
  --shadow-soft: 0 2px 8px rgba(155, 123, 184, 0.15);
  --shadow-medium: 0 4px 16px rgba(155, 123, 184, 0.25);
}

/* 舊變數對應到 Nightcord 新配色 */
:root {
  --matcha-primary: var(--primary);
  --matcha-light: var(--primary-light);
  --matcha-lighter: var(--primary-lighter);
  --matcha-lightest: var(--primary-lightest);
  --matcha-dark: var(--primary-dark);
  --matcha-darker: var(--primary-darker);

  --azukii-primary: var(--accent);
  --azukii-dark: var(--accent-dark);
  --azukii-darker: #4B4F85;
  --azukii-light: var(--accent-light);
  --azukii-lighter: var(--accent-lighter);

  --cream: var(--bg-main);
  --cream-light: var(--bg-soft);
}


/* === 導航欄美化 === */
#nav {
  background: linear-gradient(135deg, var(--matcha-primary) 0%, var(--matcha-dark) 100%);
  box-shadow: var(--shadow-medium);
  backdrop-filter: blur(10px);
}

#nav a {
  transition: all 0.3s ease;
}

#nav a:hover {
  color: var(--azukii-light) !important;
  transform: translateY(-2px);
}

/* === 主要內容區美化 === */
#page-header {
  background: linear-gradient(135deg, var(--matcha-lighter) 0%, var(--cream) 100%);
}

/* === 卡片樣式 === */
.card-widget {
  border: 2px solid var(--matcha-lighter);
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease;
}

.card-widget:hover {
  border-color: var(--matcha-primary);
  box-shadow: var(--shadow-medium);
  transform: translateY(-5px);
}

/* === 按鈕美化 === */
button,
.button,
.btn {
  background: linear-gradient(135deg, var(--matcha-primary) 0%, var(--matcha-dark) 100%);
  border: none;
  transition: all 0.3s ease;
}

button:hover,
.button:hover,
.btn:hover {
  background: linear-gradient(135deg, var(--azukii-primary) 0%, var(--azukii-dark) 100%);
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

/* === 標籤美化 === */
.tag-cloud a {
  background: var(--matcha-lightest);
  border: 1px solid var(--matcha-lighter);
  color: var(--matcha-darker);
  transition: all 0.3s ease;
}

.tag-cloud a:hover {
  background: var(--azukii-light);
  border-color: var(--azukii-primary);
  color: var(--azukii-darker);
  transform: scale(1.05);
}

/* === 文章卡片封面 === */
.post-card .post-cover {
  border: 3px solid var(--matcha-lighter);
  transition: all 0.3s ease;
}

.post-card:hover .post-cover {
  border-color: var(--azukii-primary);
}

/* === 引用塊美化 === */
blockquote {
  border-left: 4px solid var(--matcha-primary) !important;
  background: var(--matcha-lightest) !important;
  padding: 1rem 1.5rem;
  border-radius: 8px;
}

blockquote::before {
  content: '🍵';
  font-size: 1.5rem;
  margin-right: 0.5rem;
}

/* === 代碼塊美化 === */
code {
  background: var(--matcha-lightest) !important;
  color: var(--azukii-dark) !important;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--matcha-lighter);
}

pre {
  background: var(--cream-light) !important;
  border: 2px solid var(--matcha-lighter);
  border-radius: 8px;
}

/* === 分頁按鈕 === */
.pagination .page-number,
.pagination .extend {
  background: var(--matcha-lightest);
  border: 1px solid var(--matcha-lighter);
  transition: all 0.3s ease;
}

.pagination .page-number:hover,
.pagination .extend:hover {
  background: var(--azukii-light);
  border-color: var(--azukii-primary);
  transform: scale(1.1);
}

.pagination .current {
  background: var(--azukii-primary) !important;
  color: white !important;
  border-color: var(--azukii-dark);
}

/* === 滾動條美化 === */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--matcha-lightest);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--matcha-primary) 0%, var(--matcha-dark) 100%);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--azukii-primary) 0%, var(--azukii-dark) 100%);
}

/* === 側邊欄美化 === */
#aside-content .card-widget {
  background: linear-gradient(135deg, var(--cream-light) 0%, white 100%);
}

/* === 頭像邊框 === */
.avatar-img {
  border: 4px solid var(--matcha-primary);
  box-shadow: 0 4px 12px rgba(127, 183, 126, 0.3);
  transition: all 0.3s ease;
}

.avatar-img:hover {
  border-color: var(--azukii-primary);
  transform: rotate(5deg) scale(1.05);
  box-shadow: 0 6px 20px rgba(214, 118, 118, 0.4);
}

/* === 文章標題 === */
.post-title,
.post-card-title {
  color: var(--matcha-darker);
  transition: color 0.3s ease;
}

.post-title:hover,
.post-card-title:hover {
  color: var(--azukii-primary);
}

/* === 時間軸樣式 === */
.timeline::before {
  background: linear-gradient(180deg, var(--matcha-primary) 0%, var(--azukii-primary) 100%);
}

.timeline-item::before {
  border-color: var(--matcha-primary);
  background: var(--azukii-light);
}

/* === 返回頂部按鈕 === */
#go-up {
  background: var(--matcha-primary) !important;
  transition: all 0.3s ease;
}

#go-up:hover {
  background: var(--azukii-primary) !important;
  transform: translateY(-5px);
}

/* === TOC 目錄美化 === */
#toc .toc-link {
  color: var(--matcha-dark);
  transition: all 0.3s ease;
}

#toc .toc-link:hover,
#toc .toc-link.active {
  color: var(--azukii-primary);
  border-left-color: var(--azukii-primary);
}

/* === 標籤頁面標籤 === */
.tag-item {
  background: linear-gradient(135deg, var(--matcha-lightest) 0%, var(--matcha-lighter) 100%);
  border: 2px solid var(--matcha-light);
  transition: all 0.3s ease;
}

.tag-item:hover {
  background: linear-gradient(135deg, var(--azukii-lighter) 0%, var(--azukii-light) 100%);
  border-color: var(--azukii-primary);
  transform: translateY(-3px);
}

/* === 搜索框美化 === */
#local-search-input {
  border: 2px solid var(--matcha-lighter);
  transition: all 0.3s ease;
}

#local-search-input:focus {
  border-color: var(--azukii-primary);
  box-shadow: 0 0 0 3px var(--azukii-lighter);
}

/* === 友鏈卡片 === */
.flink-item {
  border: 2px solid var(--matcha-lighter);
  transition: all 0.3s ease;
}

.flink-item:hover {
  border-color: var(--matcha-primary);
  background: var(--matcha-lightest);
  transform: translateY(-5px);
}

/* === 頁腳美化 === */
#footer {
  background: linear-gradient(135deg, var(--matcha-darker) 0%, var(--matcha-dark) 100%);
  color: var(--cream-light);
}

/* === 抹茶紅豆裝飾元素 === */
/* 在文章標題前添加裝飾 */
.post-title::before {
  content: '🍵';
  margin-right: 0.5rem;
  font-size: 0.9em;
}

/* 在標籤前添加裝飾 */
.post-meta-tag::before {
  content: '🫘';
  margin-right: 0.3rem;
}

/* === 響應式設計 === */
@media (max-width: 768px) {
  #nav {
    background: var(--matcha-primary);
  }
  
  .card-widget:hover {
    transform: none;
  }
}

/* === 深色模式適配 === */
[data-theme="dark"] {
  --primary: #B89AD9;
  --primary-light: #9E84C4;
  --primary-lighter: #5A4A6E;
  --primary-lightest: #3F354D;
  --primary-dark: #8A6FAE;
  --primary-darker: #6A548C;

  --accent: #8F9BE0;
  --accent-light: #2E334F;

  --bg-main: #18151F;
  --bg-soft: #221E2B;

  --shadow-soft: 0 2px 10px rgba(184, 154, 217, 0.15);
  --shadow-medium: 0 6px 20px rgba(184, 154, 217, 0.25);
}


/* === 動畫效果 === */
@keyframes matcha-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.card-widget {
  animation: matcha-float 3s ease-in-out infinite;
}

.card-widget:hover {
  animation: none;
}

/* === 載入動畫 === */
.loading::after {
  border-color: var(--matcha-primary) transparent var(--azukii-primary) transparent;
}

/* ================================
   橫幅圖片修復補丁
   Banner Image Fix Patch
   ================================ */

/* 將這段代碼添加到 matcha-redbean-theme.css 的末尾 */

/* === 橫幅圖片修復 === */

/* 重置橫幅容器的基礎樣式 */
#page-header {
  position: relative;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

/* 首頁橫幅 - 保持全屏效果 */
#page-header.full_page {
  height: 100vh;
  max-height: 100vh;
  background-size: cover !important;
  background-position: center !important;
}

/* 文章頁和其他頁面橫幅 - 固定合理高度 */
#page-header.not-home-page,
#page-header.post-bg {
  height: 400px !important;  /* 調整這個值來控制橫幅高度 */
  max-height: 400px !important;
  background-size: cover !important;
  background-position: center !important;
}

/* 如果你的圖片是橫向長圖（寬 >> 高），使用以下設置 */
/* 取消上面的註釋並使用這個 */
/*
#page-header.not-home-page,
#page-header.post-bg {
  height: 400px !important;
  max-height: 400px !important;
  background-size: 100% auto !important;
  background-position: center top !important;
  background-color: var(--cream-light);
}
*/

/* 如果你想要完整顯示圖片（不裁切），使用這個 */
/* 取消註釋以使用 */
/*
#page-header.not-home-page,
#page-header.post-bg {
  height: 500px !important;
  background-size: contain !important;
  background-position: center !important;
  background-color: var(--cream-light);
}
*/

/* 響應式調整 - 平板 */
@media (max-width: 992px) {
  #page-header.not-home-page,
  #page-header.post-bg {
    height: 350px !important;
    max-height: 350px !important;
  }
}

/* 響應式調整 - 手機 */
@media (max-width: 768px) {
  #page-header.full_page {
    height: 100vh;
  }
  
  #page-header.not-home-page,
  #page-header.post-bg {
    height: 280px !important;
    max-height: 280px !important;
  }
}

@media (max-width: 480px) {
  #page-header.not-home-page,
  #page-header.post-bg {
    height: 220px !important;
    max-height: 220px !important;
  }
}

/* 確保橫幅圖片加載流暢 */
#page-header {
  transition: background-image 0.3s ease-in-out;
}

/* 防止橫幅內容被圖片遮擋 */
#page-header #page-header-content {
  position: relative;
  z-index: 2;
}

/* 如果橫幅太高導致首屏內容不足，可以調整這個 */
#page-header.not-top-img {
  height: 280px !important;
}

/* ================================
   使用說明：
   
   1. 將這段代碼複製到 matcha-redbean-theme.css 的末尾
   2. 根據你的圖片特性選擇一種方案（取消對應的註釋）
   3. 執行 hexo clean && hexo generate
   4. 測試效果，如果不滿意可以調整 height 的數值
   
   推薦高度設置：
   - 桌面端：400px - 500px
   - 平板：350px
   - 手機：220px - 280px
   ================================ */