/* --- 1. 基礎穩定設定 --- */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}


body {
  line-height: 1.8;
  /* 徹底解決字距拉大問題：改用靠左對齊 */
  text-align: left; 
  font-size: 16px;
  background-color: transparent !important;
  color: #d1d1d1;
  transition: none !important; 
}

/* 確定主題加載後才開啟顏色切換動畫 */
body.quarto-light, 
body.quarto-dark {
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* 內容區塊寬度統一：讓首頁與 About 頁面標題對齊 */
#quarto-content {
  max-width: 1000px;
  margin: 0 auto;
}

/* 導覽列規格 (微調加大版) */
.navbar-brand, .navbar-title {
  /* 維持你喜歡的原始字體設定 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: -0.01em !important;
  font-weight: 700 !important;
  
  /* [修改] 字體略為加大 (標準約 1.2rem -> 改為 1.5rem) */
  font-size: 1.6rem !important; 
}

.navbar {
  /* [修改] 高度略為加高 (原本 60px -> 改為 85px) */
  /* 這樣背景色就會往下延伸一些 */
  min-height: 85px !important; 
  
  /* [修改] 上下留白稍微增加，讓文字垂直置中更舒適 */
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
  padding-left: 1rem !important; 
  padding-right: 1rem !important;
}

/* [新增] 右邊選項 (Home, About) 也按比例微調，才不會標題大、選項太小 */
.navbar-nav .nav-link {
  font-size: 1.1rem !important; 
}

/* --- 2. 修正 TOC 目錄顏色  --- */
#quarto-toc-column .nav-link {
  color: #7e909a !important; /* 莫蘭迪灰藍 */
  transition: color 0.2s ease;
  opacity: 0.8;
}

/* 深色模式下的目錄顏色優化 */
body.quarto-dark #quarto-toc-column .nav-link {
  color: #a0acb5 !important;
}

#quarto-toc-column .nav-link:hover,
#quarto-toc-column .nav-link.active {
  color: #ffffff !important;
  opacity: 1;
  border-left-color: #7e909a !important;
}

/* --- 3. 淺色模式：上灰藍下白 --- */
body.quarto-light {
  background-color: #ffffff !important;
  color: #4a4a4a !important;
}

body.quarto-light .navbar {
  background-color: #7e909a !important;
}

/* 確保淺色模式下所有圖示與連結為白色 */
body.quarto-light .navbar-title, 
body.quarto-light .nav-link,
body.quarto-light .quarto-color-scheme-toggle,
body.quarto-light .quarto-search-toggle,
body.quarto-light .bi {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* --- 4. 深色模式：上藍下黑 --- */
body.quarto-dark {
  background-color: #1a1a1a !important;
  color: #d1d1d1 !important;
}

body.quarto-dark .navbar {
  background-color: #333644 !important;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

body.quarto-dark .navbar-title, 
body.quarto-dark .nav-link,
body.quarto-dark .bi {
  color: #e0e0e0 !important;
}

/* 移除深色模式內文連結的預設綠色 */
body.quarto-dark a {
  color: #a0acb5;
}

/* --- 5. 連結、標題與 Listing 列表細節 --- */
.navbar-brand:hover, .navbar-title:hover, .nav-link:hover {
  text-decoration: underline !important;
  text-decoration-color: white !important;
}

a {
  color: #7e909a;
  text-decoration: none;
  transition: 0.2s;
}

a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

h1, h2, .title {
  color: #7e909a;
  border-bottom: none !important;
}

/* 隱藏 Listing 列表中不需要的資訊 (作者與摘要) */
.listing-author, .listing-description {
  display: none !important;
}

/* 分類標籤樣式優化 */
.quarto-listing-category {
  background-color: rgba(126, 144, 154, 0.15) !important;
  color: #7e909a !important;
  border: none !important;
  border-radius: 4px !important;
}


/* --- 6. 標題大小分開控制 (請貼在最下方) --- */

/* 1. 文章最上面的【主標題】 (Title) */
/* 這裡設定你要的「更大」 */
header .title, h1.title {
  font-size: 2.5rem !important;   /* 約 40px (最大) */
  line-height: 1.2 !important;
  margin-bottom: 1rem !important;
}

/* 2. 內文中的【# 章節標題】 (H1) */
/* 使用 :not(.title) 語法，確保這行只會影響內文，不會影響主標題 */
h1:not(.title) {
  font-size: 1.8rem !important;   /* 約 29px (比主標題小，建立層次感) */
  margin-top: 2rem !important;
}