/* ==========================================
   網站導覽頁（sitemap.html）
   ------------------------------------------
   這類公會／政府單位網站慣例都有一頁完整的頁面清單（客戶指名參考
   北區國稅局與健保署的網站導覽）。
   🔴 內容全部是靜態 HTML，不靠 JS 產生：網站導覽是「找不到路時才會來」的頁面，
      如果它本身需要 JS 才看得見，等於在使用者最需要幫助的時候失效。
   ⚠️ 與 partials/footer.html 的網站導覽欄是兩份清單（footer 精簡、本頁完整含說明）。
      改導覽結構時兩邊都要更新——這是刻意的重複，因為兩者的資訊密度需求不同。
   ========================================== */
/* ==========================================
   內頁標頭
   ------------------------------------------
   背景圖寫在 CSS 而不是 inline style（2026-08-18 從 inline style 收進來；
   全站 11 個 .page-hero 現在一律走 CSS，沒有例外）。
   只寫 background-image：background-size: cover ＋ 置中由 .page-hero 提供，
   構圖靠上傳前裁好，不在 CSS 寫死縮放與位移。
   ⚠️ page-hero.jpg 是通用圖，**contact／downloads／links／member-center／privacy／sitemap
      六頁共用**（2026-08-26 更正：舊註解寫「五頁」且把 gallery 算進來，兩處都是錯的
      ——gallery 早在 2026-08-18 就換成自己的 gallery-hero.jpg，
      而 downloads／privacy 一直也在用這張）。
   ⚠️ S10（客戶 2026-08-26）換新圖的做法是**直接覆蓋 page-hero.jpg 這個檔名**，
      六頁一次到位、不必改 CSS，也不會產生「兩張通用圖並存、日後要判斷用哪張」的分叉。
      日後某一頁要換成專屬照片時才改這一條。
   ========================================== */
.sitemap-hero {
  background-image: url('../../images/hero/page-hero.jpg');
}

.sitemap-section {
  padding: 56px var(--page-gutter) var(--spacing-section);
}

.sitemap-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.sitemap-lead {
  max-width: 46rem;
  margin: 24px 0 40px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-muted);
}

.sitemap-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.sitemap-block {
  padding: 28px 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.sitemap-block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-heading);
}

.sitemap-block-title svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-primary);
}

/* 區塊標題本身是連結（連到該單元的落地頁）。
   底線＝主色紫 1px，刻意與 style.css 的 .nav-link::after 用同一組值
   （客戶 2026-08-12 指定：原本是 3px 金色漸層，太搶眼且與導覽不一致；
   同日第三批第 8 項再指定由 2px 細化為 1px）。
   🔴 要改粗細或顏色請三處一起改——底線的視覺語言全站只有一種：
      style.css 的 .nav-link::after ／ 本檔 ／ about.css 的區塊標題底線。
   ⚠️ 底線細化後不能只靠底線傳達 hover：文字同時轉主色紫（下一條規則），
      兩個訊號一起變，長輩才看得出來。 */
.sitemap-block-title a {
  position: relative;
  transition: color 0.2s ease-out;
}

.sitemap-block-title a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  border-radius: 0.5px;
  background-color: var(--color-primary);
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.sitemap-block-title a:hover,
.sitemap-block-title a:focus-visible {
  color: var(--color-primary);
}

.sitemap-block-title a:hover::after,
.sitemap-block-title a:focus-visible::after {
  opacity: 1;
}

.sitemap-block-desc {
  margin: 10px 0 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-muted);
}

.sitemap-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.sitemap-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}

/* hover 三個訊號一起給（淺灰底＋左側紫條＋文字轉主色紫），
   單靠文字顏色變化長輩察覺不到。

   🔴 底色 ＝ --color-bg-alt（#ECECEC）淺灰，是客戶 2026-08-12 第三批第 3 項的定案：
      「回到原本淺灰色系」。中間曾經改成全站金色漸層，原因與現在為什麼能改回來，
      是同一件事的兩面，寫在這裡免得有人又改回金色：

      ・當時的症狀不是「淺灰太淡」，而是「淺灰 hover 疊在淺灰底的區塊上」。
        「其他頁面」那一區（原 .sitemap-block-single）的底色**也是** --color-bg-alt，
        hover 前後實測對比 **1.00** ＝ 完全沒有變化。
      ・這一輪客戶要求把那一區改成白底（與其他區塊一致），
        **底色衝突的來源被拿掉了**，淺灰 hover 疊在白底上對比 **1.19**
        ——單看這個數字仍然偏弱，所以底色不是唯一訊號：
        左側 3px 主色紫條（透明 → #451470）與文字轉主色紫同時出現，
        形狀變化不依賴使用者分辨兩個相近的淺色。
   🔴 因此**不要把左側紫條或文字變色拿掉**，只留淺灰底就會回到「幾乎看不出」。 */
.sitemap-list li:hover {
  background-color: var(--color-bg-alt);
  border-left-color: var(--color-primary);
}

.sitemap-list li:hover>a {
  color: var(--color-primary);
}

.sitemap-list a {
  font-size: 1rem;
  font-weight: 500;
  transition: color 0.2s ease-out;
}

.sitemap-list a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

.sitemap-item-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* 「其他頁面」那一區：圖示與連結同一行。
   ⚠️ 這是本檔唯一還留給那一區的專屬樣式——它只描述「每一列的排法」，
      不碰底色也不碰欄數，所以那一區在版面上與其他區塊完全同級。
      客戶 2026-08-12 第三批第 3 項：「改成和其他區塊一樣白色背景就好，
      不需要另外建立不同樣式」，原本的 .sitemap-block-single
      （淺灰底 ＋ grid-column: 1 / -1 橫跨整列 ＋ 三欄清單）已整組移除。 */
.sitemap-list-flat li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 4px 10px;
}

.sitemap-list-flat svg {
  width: 20px;
  height: 20px;
  grid-row: span 2;
  margin-top: 2px;
  color: var(--color-primary);
}

@media (min-width: 640px) {
  .sitemap-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
  }
}

@media (min-width: 1024px) {
  .sitemap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sitemap-block {
    padding: 32px 28px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .sitemap-list li,
  .sitemap-list a,
  .sitemap-block-title a,
  .sitemap-block-title a::after {
    transition: none;
  }
}