/* ===== 每日QT 索引頁（/daily-qt/、/daily-qt/otqt/、/daily-qt/ntqt/）=====
   列表圖標改用 Font Awesome CDN 的 fa-book-open（實心，Unicode \f518），顏色暖綠 #6B8E23。
   （FA 只在這些索引頁載入，見 layouts/_default/baseof.html）
   經節連結文字維持原本橙紅色（custom.css 的 .main__content a 控制，不在此改）。
   選擇器限定 .qt-index，不會影響站上其他清單。
   內容（標題、書卷目錄、經文連結清單）一律靠「文字框左緣」對齊，不縮排。
   文字框寬度＝全欄寬（文章框內容寬度）的 70%、置中——與文章內頁
   static/css/qt-article.css 的 .primary 同一套做法（70% 置中），全站視覺一致。
   換色只要改下面的 --qt-icon-color。
*/

.qt-index {
  --qt-icon-color: #6B8E23;

  /* 文字框＝全欄寬的 70%（文章框內寬 1030px → 約 721px），置中 */
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}

/* 小螢幕還原全寬，避免 70% 太窄（同 qt-article.css 的作法） */
@media (max-width: 860px) {
  .qt-index {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* 內容欄跟著 main 寬度（覆寫 custom.css 的 800px），標題與連結左緣對齊 */
.qt-index .main__content {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.qt-index .main__content ul {
  list-style: none;
  padding-left: 0;
  /* 清掉 custom.css 給 ul 的 40px 左縮排，讓經文連結左緣與標題／書卷目錄齊平 */
  margin-left: 0;
  margin-inline-start: 0;
}

.qt-index .main__content ul > li {
  margin-bottom: 0.35em;
}

/* 清掉舊的背景/mask 圖標，改用 Font Awesome fa-book-open（solid, \f518） */
.qt-index .main__content ul > li::before {
  content: "\f518";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;              /* solid 樣式 */
  color: var(--qt-icon-color);
  margin-right: 0.5em;
  display: inline-block;
  vertical-align: middle;
  background: none;
  -webkit-mask: none;
  mask: none;
}

/* ===== 頁面最上方的「書卷目錄」（分類表格：第一欄分類、第二欄聖經簡稱） ===== */
.qt-index .qt-toc {
  /* 隨文章框內容寬度（先前是比 600px 內容欄寬 140px，才需要負 margin 撐開） */
  width: 100%;
  margin: 0 0 1.6rem;
  padding: 1rem 1.15rem 1.1rem;
  background: linear-gradient(180deg, #f7faf3, #f1f6ea);
  border: 1px solid #e2e8db;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(80, 110, 30, .06);
}
.qt-index .qt-toc__title {
  margin-bottom: .7rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: #4b5b3a;
}
/* 覆寫全站表格樣式（外框、格線、灰底），改成乾淨的分類表 */
.qt-index .qt-toc__table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1rem;
}
.qt-index .qt-toc__table th,
.qt-index .qt-toc__table td {
  border: 0;
  text-align: left;
  line-height: 1.5;
}
.qt-index .qt-toc__table tbody tr + tr th,
.qt-index .qt-toc__table tbody tr + tr td {
  border-top: 1px solid #e7edde;
}
/* 第一欄：分類標題（不管幾個字都強制同一行，不斷行） */
.qt-index .qt-toc__cat {
  width: 1px;
  padding: .5rem 1.1rem .5rem 0;
  vertical-align: middle;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  background: none;
  font-size: .82rem;
  font-weight: 700;
  color: #46621a;
}
/* 第二欄：書卷簡稱 */
.qt-index .qt-toc__books {
  padding: .45rem 0;
  line-height: 2.1;
}
.qt-index .qt-toc__books a {
  display: inline-block;
  min-width: 1.75em;
  margin: 0 .2rem .25rem 0;
  padding: .12rem .38rem;
  border: 1px solid #dbe5d0;
  border-radius: 7px;
  background: #fff;
  color: #4d6b1f;
  font-size: .82rem;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: background .12s, color .12s, border-color .12s, transform .1s;
}
.qt-index .qt-toc__books a:hover,
.qt-index .qt-toc__books a:focus {
  background: #6B8E23;
  border-color: #6B8E23;
  color: #fff;
  transform: translateY(-1px);
}
/* 點目錄跳過去時，標題不要太貼上方 */
.qt-index .main__content h2 { scroll-margin-top: 1rem; }

/* ===== 右下方「回到最上面」按鈕（獨立上箭頭，無圓框） ===== */
.qt-top {
  position: fixed;
  /* 定位＝「文章框（.container，max-width 1080px）」的右下角，而不是視窗右下角。
     實際位置由 list.html 的 JS 依量測值設定（任何寬度都準）；這裡的算法是
     沒有 JS 時的後備值：視窗較寬時扣掉 (100% - 1080px) / 2，較窄時退回 1.3rem。 */
  right: max(1.3rem, calc((100% - 1080px) / 2 + 1.3rem));
  bottom: 1.4rem;
  z-index: 500;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
}
.qt-top::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #6B8E23;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: background-color .15s;
}
.qt-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.qt-top:hover { transform: translateY(-3px); }
.qt-top:hover::before { background-color: #4d6b1f; }
.qt-top:active { transform: translateY(0) scale(.92); }
.qt-top:focus-visible { outline: 3px solid rgba(107, 142, 35, .45); outline-offset: 3px; border-radius: 4px; }