/*
 * 用於字體放大縮小功能的自訂樣式
 */

/* 1. 使用 CSS 變數來控制根字體大小，方便 JavaScript 修改 */
:root {
  --font-size-multiplier: 1.0; /* 預設乘數為 1 */
}

/* 2. 將網站主要內容的字體大小與上面的變數掛鉤 */
.md-typeset {
  /* calc() 函數讓字體大小可以動態計算 */
  font-size: calc(1rem * var(--font-size-multiplier));
}

/* 3. 字體控制按鈕的容器樣式 */
.font-size-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 按鈕間的距離 */
  margin-right: 0.8rem; /* 與右側搜尋按鈕的距離 */
}

/* 4. 字體控制按鈕本身的樣式 */
.font-size-controls button {
  background-color: transparent;
  border: 1px solid currentColor; /* 邊框顏色隨主題文字顏色變化 */
  border-radius: 50%; /* 圓形按鈕 */
  color: var(--md-text-color); /* 按鈕文字顏色隨主題變化 */
  cursor: pointer;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transition: background-color 0.2s; /* 平滑的 hover 效果 */
}

/* 5. 滑鼠懸浮在按鈕上時的樣式 */
.font-size-controls button:hover {
  background-color: var(--md-ripple-color); /* 使用主題的漣漪效果顏色 */
}
#back-to-top {
    display: none;
    position: fixed;
    bottom: 40px;
    right: 40px;
    padding: 10px 15px;
    background: #3f51b5;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: opacity 0.3s ease;
}
#back-to-top:hover {
    background: #303f9f;
}
/* 讓頂部選單多層次子選單呈現 */
.md-nav__item--has-children > a::after {
  content: " ▼"; /* 在有子選單的項目後加小箭頭 */
  font-size: 0.7em;
}

/* 子選單隱藏 */
.md-nav__sublist {
  display: none;
  position: absolute;
  background: white;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 0.5em 0;
  z-index: 1000;
}

/* 展開子選單 */
.md-nav__item--expanded > .md-nav__sublist {
  display: block;
}

/* 子選單連結樣式 */
.md-nav__sublist a {
  display: block;
  padding: 0.4em 1.5em;
  white-space: nowrap;
  color: #333;
}

.md-nav__sublist a:hover {
  background-color: #f0f0f0;
}
#reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 9999;
  background: linear-gradient(90deg, #1976d2, #64b5f6);
}
#reading-progress-badge {
  position: fixed;
  right: 16px;
  bottom: 48px;
  z-index: 9999;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 12px;
}
#reading-remaining-time {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  padding: 4px 8px;
  border-radius: 12px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 12px;
}