[data-theme="light"] {
  --background-color: #fff;
  --background-highlight-color: #F9F9F9;
  --hangover-color: #F1F1F1;
  --text-color: #000000;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --link-color: #00e; 
}

[data-theme="dark"] {
  --background-color: #121212;
  --background-highlight-color: #222;
  --hangover-color: #333;
  --text-color: #fff;
  --shadow-color: rgba(255, 255, 255, 0.1);
  --link-color: #1E90FF; 
}

body {
  color: var(--text-color);
  background-color: var(--background-color);
  display: flex;
  flex-direction: column; /* 垂直排列 */
  font-family: 'Noto Sans TC', sans-serif;
  line-height: 1.5;
  margin-top: 0;   /* 只設定上邊距 */
  margin-bottom: 0; /* 只設定下邊距 */
  margin-left: auto;   /* 左邊距自動，這樣會根據 max-width 對齊 */
  margin-right: auto;  /* 右邊距自動，這樣會根據 max-width 對齊 */
  max-width: 1024px;      /* 設定最大寬度 */
}

a {
  color: var(--link-color);
  text-decoration: none;
}

header {
  position: sticky;
  width: 100%;
  top: 0; /* 固定在視窗頂部 */
  z-index: 10;
  background-color: var(--background-color);
  box-shadow: 0 2px 4px var(--shadow-color);
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box; /* 確保 padding 包括在寬度內 */
  font-size: small;
}

.header-right {
  display: flex; 
  gap: 1rem;
}

.header a {
  color: var(--text-color);
}

.header a:hover {
  text-decoration: underline; 
}

.header-nav ul{
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.header-nav li {
  margin-left: 1rem;
}

.header-hamburger {
  display: none;
}

.sidebar {
  min-height: 100%; /* 至少與父物件同高 */
  height: 100%; /* 高度根據內容自動調整 */
  width: 0; /* 預設隱藏側邊欄 */
  position: fixed;
  top: 0;
  right: 0;
  background-color: var(--background-color);
  overflow-x: hidden;
  overflow-y: auto;
  transition: 0.3s; /* 讓側邊欄平滑滑入 */
  box-shadow: 2px 0 5px var(--shadow-color); /* 添加陰影效果 */
  z-index: 5;
}

.language-select-wrapper {
  position: relative;
  display: inline-block;
}

.language-select-wrapper .icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: medium; /* 地球圖標大小 */
  pointer-events: none; /* 防止干擾點擊 */
}

.language-select-wrapper select {
  font-family: 'Microsoft JhengHei', sans-serif;
  font-size: medium;
  font-weight: bold;
  appearance: none; /* 隱藏默認樣式 */
  padding: 5px 15px 5px 40px; /* 留出空間顯示圖標 */
  color: var(--text-color);
  background-color: var(--background-highlight-color);
  border: 1px solid var(--shadow-color);
  border-radius: 8px;
}

.language-select-wrapper select:hover {
  background-color: var(--hangover-color);
}

#theme-switch {
  font-size: medium; /* 地球圖標大小 */
  padding: 5px; /* 留出空間顯示圖標 */
  border: 1px solid var(--shadow-color);
  background-color: var(--background-highlight-color); 
  border-radius: 8px;
}

#theme-switch:hover {
  background-color: var(--hangover-color);
}

.sidebar a {
  color: var(--text-color);
  display: block; /* 讓 <a> 成為區塊元素，並且能影響高度 */
  padding-bottom: 5px;
}

.sidebar-nav {
  padding-left: 10px;
  font-weight: bold; /* 加粗字體 */
}

.sidebar ul {
  list-style: none;
  padding-left: 15px;
}

#TableOfContents ul {
  list-style: none;
  padding-left: 15px;
}

#TableOfContents a {
  color: var(--text-color);
  display: block; /* 讓 <a> 成為區塊元素，並且能影響高度 */
  padding-left: 10px;
  padding-bottom: 5px;
}

#TableOfContents a:hover {
  text-decoration: underline; /* 鼠標懸停時顯示下劃線 */
}

#TableOfContents a.active {
  font-weight: bold; /* 加粗字體 */
  text-decoration: underline; /* 鼠標懸停時顯示下劃線 */
}

main {
  flex-grow: 1;
  margin: 1rem;
}

/* 在你的 CSS 文件（例如：custom.css）中加入 */
blockquote {
  border-left: 4px solid #007acc; /* 左側添加色彩邊框 */
  padding-left: 1em; /* 內部留白 */
  font-style: italic; /* 文字樣式 */
  margin: 1em 0; /* 上下留白 */
}

/* 單行程式碼區塊 */
code {
  background-color: #333;
  color: #fff;
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

/* 針對多行程式碼區塊 */
pre {
  position: relative; /* 使按鈕能相對定位 */
  background-color: #333;
  color: #fff;
  border-radius: 8px;
  overflow-x: auto; /* 可水平滾動 */
  margin-bottom: 1.5em; /* 留出空間 */
  display: flex;
  flex-direction: column-reverse; /* 將元素順序反轉 */
}

pre code {
  display: block;
  background-color: transparent; /* 使背景透明，讓外層 pre 背景顯示 */
  padding: 1em;
  border-radius: 0; /* 不需要額外的圓角 */
}

.code-container {
  position: sticky;
  color: white;
  padding: 0.5rem 1rem 0.5rem 1rem;
  top: 0;
  left: 0;
  background-color: #222;
  justify-content: space-between; /* 讓子元素左右分開 */
  display: flex;
}

/* copy-button.css */
.copy-btn {
  background-color: #333;
  color: white;
  padding: 5px 10px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  border-radius: 3px;
}

button:hover {
  background-color: gray;
}

table {
  display: block; /* 將表格設定為區塊元素 */
  overflow-x: auto; /* 啟用水平滾動 */
  max-width: 100%; /* 限制表格寬度不超過父容器 */
  border-collapse: collapse; /* 使表格邊框更簡潔 */
  white-space: nowrap; /* 避免內容自動換行 */
  -webkit-overflow-scrolling: touch; /* 支援移動端滾動 */
}

table + table {
  margin-top: 1rem; /* 當兩個表格直接相鄰時增加額外間距 */
}

th, td {
  border: 1px solid var(--background-highlight-color); /* 每個儲存格的格線 */
  padding: 8px; /* 儲存格內邊距 */
  text-align: left; /* 文字對齊 */
}

/* 表頭的樣式（可選） */
th {
  background-color: var(--background-highlight-color);
  font-weight: bold;
}

footer {
  border-top: 1px solid #333;
  margin: 1rem;
}

.align-center{
  align-items: center;
}

.left-right{
  display: flex; 
  justify-content: space-between; 
}

.summary p {
  margin: 0;
  padding: 0;
}

.posts-item {
  display: flex;
  align-items: top;
  text-decoration: none;
  background-color: var(--background-highlight-color);
  border: 1px solid var(--shadow-color);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 0px var(--shadow-color);
  margin-bottom: 10px;
  color: var(--text-color);
}

.posts-item:hover {
  background-color: var(--hangover-color);
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
}

.posts-item .tag {
  color: var(--link-color);
}

.posts-item-image {
  flex: 0;
  width: 128px; 
  height: 128px; 
  background-color: rgba(0, 0, 0, 0);
}

.single{
  display: flex; 
  justify-content: space-between; 
  flex-direction: row-reverse; /* 使左右物件對調 */ 
}

.single-content{
  width: 80%;
}

.single-toc {
  display: flex; /* 设置父容器为 flex 布局 */
  flex-direction: column; /* 垂直排列子元素 */
  width: 29%;
  padding-left: 1%; /* 給右側物件一些右邊距離以防止靠得太近 */
  position: sticky; /* 讓 TOC 跟隨父容器滾動 */
  overflow-y: auto;
  flex-grow: 1;
}

.single-content img {
  width: 100%;
}

.btn {
  display: inline-block;
  font-size: x-large;
  color: var(--text-color);
  background-color: var(--background-highlight-color);
  border: 1px solid var(--shadow-color);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 0px var(--shadow-color);
  margin-bottom: 10px;
}

.katex-display {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px;
}

.gallery figure {
  margin: 5px;
}

.paginator a {
  font-family: 'Fira Code', monospace;
  background-color: var(--background-highlight-color);
  color: var(--text-color);
  border: 1px solid var(--shadow-color);
  padding: 0.2em 0.4em;
  border-radius: 4px;
  text-decoration: none;
}

.paginator a:hover {
  background-color: var(--hangover-color);
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
}

/* 媒體查詢：當畫面寬度小於 768px 時 */
@media (max-width: 1024px) {
  .header {
    align-items: flex-start;
  }

    /* 顯示漢堡菜單 */
  .header-hamburger {
    display: block;
  }

  /* 隱藏菜單 */
  .header nav {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  .single-toc{
    display: none;
  }

  .single-content{
    width: 100%;
  }
}

/* 設定搜尋欄的容器 */
#search-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  width: 100%;
  margin: auto;
}

/* 設定輸入框 */
#search-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  background: var(--background-highlight-color);
  color: var(--text-color);
  border: 2px solid var(--shadow-color);
}

/* 設定按鈕 */
#search-button {
  background: var(--background-highlight-color);
  color: var(--text-color);
  border: 2px solid var(--shadow-color);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
}

/* 滑鼠懸停時按鈕變色 */
#search-button:hover {
  background: var(--hangover-color);
}