/* ==========================================
   contact.html 專屬樣式
   ========================================== */
/* ==========================================
   內頁標頭
   ------------------------------------------
   背景圖寫在 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，也不會產生「兩張通用圖並存、日後要判斷用哪張」的分叉。
      日後某一頁要換成專屬照片時才改這一條。
   ========================================== */
.contact-hero {
  background-image: url('../../images/hero/page-hero.jpg');
}

.contact-section {
  padding: 64px var(--page-gutter) 96px;
}

/* 🔴 軌道一定要寫 minmax(0, 1fr)，不可以只寫 1fr。
   `1fr` 的自動最小值是 min-content，欄裡只要有一段擺不下的內容，軌道自己就會撐得比容器寬。
   實測 320px ＋ 放大字級「大」：軌道被撐到 296.77px（容器只有 272px），
   整頁 scrollWidth 321 ＝ 溢出 1px。撐它的是聯絡資訊裡的 tpacc2005@gmail.com（不可斷字）。
   ⚠️ 這與 CLAUDE.md 四之二節記的「頁尾 email 撐出捲動」是同一個 email、同一個病，
      只是換到本頁；修法也一樣，見下面 .contact-list 那兩條。 */
.contact-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

@media (min-width: 900px) {
  .contact-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 64px;
  }
}

.contact-desc {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-muted);
  margin: 16px 0 32px;
}

.contact-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 🔴 min-width: 0 是必要的，不是保險：flex 項目預設 min-width: auto
   ＝「不得小於 min-content」，而 tpacc2005@gmail.com 是一整串不可斷字，
   min-content 就等於整個 email 的寬度 → 窄螢幕撐爆上層 grid 軌道（見 .contact-inner）。 */
.contact-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

/* overflow-wrap: anywhere 讓 email／電話這種長串在真的擺不下時可以斷開，
   min-content 才會降到 1 個字元。⚠️ 兩個屬性缺一個都還會溢出：
   只加 min-width 是「允許被壓縮」，只加 overflow-wrap 是「允許斷字」，
   要同時成立瀏覽器才會把它壓進欄寬（320px ＋ 字級「大」實測 sw 321 → 320）。 */
.contact-list li>span:last-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 1rem;
  color: var(--color-text);
}

.contact-list li strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--purple-300);
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--gray-50);
  color: var(--color-primary);
}

.contact-icon svg {
  width: 32px;
  height: 32px;
}

.contact-follow-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 12px;
}

.contact-socials {
  display: flex;
  gap: 12px;
}

/* 客戶 2026-08-12 第 40 項：這兩顆要放大、而且「要有 hover」。
   🔴 它本來就有 hover——.social-icon:hover 是 --color-primary → --color-primary-hover，
      實測對比 **1.24**（1 ＝完全沒變化；Q4 換主色後同一組是 1.53，一樣看不出來），
      所以客戶看到的等於沒有效果。
      這與 CLAUDE.md 七之二節記的根因是同一個：深紫加深長輩看不出來。
      所以不是「補一個 hover」，是把既有那個無效的 hover 換成全站金色標準（對比 6.27）。
   🔴 金底上的圖示一律 --color-on-gold，不可留白色（白配金只有 2.x）。
   ⚠️ 這裡刻意只選 .contact-socials 底下的：.social-icon 是共用元件，
      手機選單（partials/header.html，全 15 頁）也在用它，
      改共用元件本體會把手機選單裡的兩顆一起放大。
   ⚠️ 尺寸 48px → 56px，與同頁 .contact-icon（58px）視覺量體對齊，不是隨手放大。 */
.contact-socials .social-icon {
  width: 56px;
  height: 56px;
  background-color: var(--color-primary);
  color: #FFFFFF;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, transform 0.2s ease-out;
}

.contact-socials .social-icon svg {
  width: 30px;
  height: 30px;
}

.contact-socials .social-icon:hover,
.contact-socials .social-icon:focus-visible {
  background-color: transparent;
  background-image: linear-gradient(135deg, var(--gold-from), var(--gold-to));
  color: var(--color-on-gold);
  transform: translateY(-2px);
}

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

  .contact-socials .social-icon {
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
  }

  .contact-socials .social-icon:hover,
  .contact-socials .social-icon:focus-visible {
    transform: none;
  }
}

/* .contact-map 的三條規則已於 2026-08-12 刪除：
   客戶指定把嵌入地圖換成聯絡表單，那個 class 在 contact.html 已無消費端。
   ⚠️ 被取代卻留著的舊規則就是隱形分叉——下一個人會以為這頁還有地圖。
   要看地圖的入口改成左欄「地址」那一行的連結（見 contact.html 的註解）。 */
/* ==========================================
   線上諮詢表單：個資同意列
   ------------------------------------------
   2026-08-12 客戶指定把原本的 Google Maps 嵌入換成聯絡表單。
   表單本體完全沿用既有共用元件（.register-box／.register-form-grid／.input／.btn），
   只有這一列需要自己的樣式——checkbox 與說明文字並排是共用元件沒有的版型。
   ========================================== */
.contact-consent {
  /* flex ＋ align-items: flex-start：說明文字有兩行，
     置中對齊會讓勾選框浮在文字中間，看起來像跟哪一行都沒關係 */
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-muted);
  /* 整列可點：長輩用滑鼠不容易精準點到 13px 的勾選框，
     包在 <label> 裡並讓整列都是點擊區域 */
  cursor: pointer;
}

.contact-consent input[type="checkbox"] {
  /* 1.125rem ＝ 20px（預設 18px 根字級）。瀏覽器預設的 13px 對長輩太小。
     ⚠️ 用 rem 讓它跟著文字大小切換一起放大；寫死 px 按「大」時
        文字變大、勾選框不變，會越來越難點。 */
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  /* margin-top 讓勾選框與第一行文字的視覺中線對齊
     （行高 1.7 時文字上方有一段留白，不補這個會顯得偏高） */
  margin-top: 0.25rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.contact-consent a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 🔴 隱私權政策這個連結一定要有 hover／focus 的變化：
   它與周圍文字都在同一段裡，不變色的話使用者不知道哪裡可以點。
   沿用全站金色標準會讓一行文字中間出現一塊金底，太搶眼，
   所以這裡只加深色並加粗底線——兩個訊號，範圍限在連結本身。 */
.contact-consent a:hover,
.contact-consent a:focus-visible {
  color: var(--brand-purple-dark);
  text-decoration-thickness: 2px;
}