/* ============================================================
   The Cyclink — css/site-chrome.css
   全站共用 header／footer／浮動 WhatsApp 按鈕嘅最終樣式層（唯一調校位置）。

   由邊度嚟／為咗咩：
     · header 基礎樣式＝css/styles.css（.nav／.lang-btn／.footer… 設計系統）
       ＋ css/v2.css（≥900px 導覽項目間距）——兩個檔全站本來已經共用，冇改。
     · 本檔只放「以前只有首頁有」嘅最後一層調校（原本喺 css/home-redesign.css
       第 5 輪嘅導覽 CTA 配色、第 14 輪嘅 footer 收緊），改成唔綁 body.cyclink-redesign，
       令 15 個頁面全部一模一樣。
     · 本檔要喺 styles.css／v2.css 之後載入（每個頁面嘅最後一個 stylesheet）。
   只沿用現有 tokens（--ink／--cream／--yellow／--yellow-soft／--yellow-deep／
   --font-body／--ease 等），冇新顏色、冇新字體、冇新圓角。
   ============================================================ */

/* ---------- 1. Footer：整體收緊（原本首頁第 14 輪數值，全站沿用） ---------- */
.footer { padding: 40px 0 36px; }
.footer__grid { align-items: start; }
.footer__logo { gap: 0.5rem; }
.footer__logo .logo__mark { margin-bottom: 0; }
.footer__logo .logo__word {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}
.footer__h { margin-bottom: 0.75rem; }
.footer__col ul { gap: 0.35rem; }
.footer__col a { font-weight: 500; color: rgba(255, 249, 236, 0.9); padding-block: 2px; }
.footer__bottom { margin-top: 1.7rem; padding-top: 1rem; color: rgba(255, 249, 236, 0.72); }

@media (min-width: 480px) {
  /* 兩欄：品牌橫跨兩欄，三個連結組自然換行 */
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .footer { padding: 48px 0 44px; }
}
@media (min-width: 1024px) {
  /* 桌面四欄，各欄頂部對齊 */
  .footer__grid {
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.35fr);
    gap: 2rem;
  }
  .footer__brand { grid-column: auto; }
}

/* ---------- 2. 品牌 logo ＋ 名稱＝去首頁嘅連結 ----------
   外觀同未加連結之前一樣（唔加底線、顏色照舊 --cream）；
   hover／focus 沿用 footer 連結本身嘅做法（轉 --yellow），對比清晰。 */
a.footer__logo { text-decoration: none; color: var(--cream); border-radius: 8px; }
a.footer__logo:hover .logo__word { color: var(--yellow); }
a.footer__logo:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }

/* ---------- 3.「運動探索」下面嘅細字 ----------
   ⚠ 第 24 輪：footer 已按客戶指示移除呢行招生細字（連結保留），提示改喺導覽
   「所有課程」展開目錄顯示（js/main.js 用同一個 .nav__drop-note 樣式）。
   即 .footer__note 暫時冇任何元素引用，規則保留以便日後還原。
   同一條連結嘅第二行：字級／字重明顯細過主連結，顏色較淡但仍清楚可讀
   （--ink 深啡底上約 6.6:1，達 WCAG AA）。冇 emoji、冇動畫。 */
.footer__note {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: rgba(255, 249, 236, 0.62);
}

/* ---------- 4. 導覽 CTA 配色跟導覽底色狀態 ----------
   導覽未捲動（.nav 未有 .is-scrolled）＝深啡底 ＋ 奶白字；
   捲動後回復 .btn--yellow 原有黃底深啡字。
   所有頁面同一行為（首頁黃色首屏、其他頁奶白底都一樣，唔會再有兩種色）。 */
.nav:not(.is-scrolled) .nav__cta,
.nav:not(.is-scrolled) .nav__cta:hover,
.nav:not(.is-scrolled) .nav__cta:active {
  background: var(--ink);
  color: var(--cream);
  border-color: transparent;
}

/* ---------- 5. 當前頁面高亮（每頁高亮自己嗰項） ----------
   桌面導覽行用 .nav__link[aria-current="page"] 底線（css/styles.css 原有）。
   導覽項目收起喺「所有課程」下拉選單／手機選單時，用同 hover 一樣嘅淺黃底顯示。

   第 28 輪（客戶指示：目錄唔可以多項同時高亮）：
     · 「目前課程」嘅判斷已由 js/main.js 改成「檔名 ＋ hash」，courses.html 冇 hash 時
       下拉目錄嘅 4 個課程項目唔會再加 aria-current → 唔會一次過幾項黃底。
     · 呢度只補一條：手機「所有課程」目錄入面嘅「運動探索」本身係淺黃底招生條，
       做「目前頁面」時要用深一級黃先睇得出（同桌面 .nav__drop-link--sports 一致；
       .nav__menu a[aria-current="page"] 嘅 specificity 高過 sports 本身嘅黃底，
       所以要指明呢個組合先夠力）。 */
.nav__drop-link[aria-current="page"] { background: var(--yellow-soft); }
/* 「運動探索」本身已經係淺黃底，當前頁改用深一級黃先睇得出 */
.nav__drop-link--sports[aria-current="page"] { background: var(--yellow-deep); }
.nav__menu a[aria-current="page"] { background: var(--yellow-soft); }
.nav__menu .nav__drop-link--sports[aria-current="page"] { background: var(--yellow-deep); }
/* 當前頁面喺「所有課程」群組入面（例如 courses.html／adults.html）＝群組標題提示 */
.nav__menu .nav__menu-group-btn.is-current { background: var(--yellow-soft); }
/* hover／focus 行為冇改：hover 底色由 css/styles.css 提供，只影響當下指向嗰一項；
   鍵盤 focus 照用全球 :focus-visible 規則（css/styles.css），冇移除、冇覆蓋。 */