/* =========================================================
 * 檔案：src/styles/footer.css
 * 用途：頁尾 Footer 的樣式（與 halfmemo.com blog 相同，/add-footer-only 插入）。
 *       前半段是標準規格原樣；最後一段「本專案調整」是為了配合
 *       「整個畫面不出現卷軸」所做的修改。
 * 誰會用到：index.html 在 main.css 之後載入；
 *           顯示或隱藏由 src/views/layout.js 決定（木盒不會變小才顯示）。
 * ========================================================= */

/* ════════════════════════════════════════════════════════
   AJ 標準 Footer（/add-footer-only 注入，不含免責聲明）
   規格來源：halfmemo.com blog，2026-07-20 版
   全部用 aj- 前綴與 --aj-footer-* 變數，不影響專案既有樣式
   ════════════════════════════════════════════════════════ */

/* 淺色模式（= blog global.css :root 的同名變數值） */
:root {
  --aj-footer-surface: #ffffff;   /* blog --color-surface */
  --aj-footer-muted:   #888888;   /* blog --color-text-muted */
}

/* ── 深色模式（= blog global.css .dark 的同名變數值）──
   本專案沒有深色切換按鈕（只跟隨系統設定），所以 A / B / C 三段全插 */

/* A 段：class 切換（blog 同款，html 標籤加 .dark） */
.dark {
  --aj-footer-surface: #1c1d1f;
  --aj-footer-muted:   #9aa0a6;
}

/* B 段：data-theme 屬性切換 */
[data-theme="dark"] {
  --aj-footer-surface: #1c1d1f;
  --aj-footer-muted:   #9aa0a6;
}

/* C 段：跟隨系統偏好（只給「完全沒有深色切換機制」的專案用） */
@media (prefers-color-scheme: dark) {
  :root {
    --aj-footer-surface: #1c1d1f;
    --aj-footer-muted:   #9aa0a6;
  }
}

/* ── Footer ──
   字級基準說明：blog 的根字級是 17px（手機 16px），區塊內尺寸都是 rem。
   這裡把基準字級直接設在區塊上（px），內部改用 em，
   所以不管目標專案根字級是多少，算出來的尺寸都跟 blog 一模一樣。 */
.aj-site-footer {
  width: 100%;            /* 防呆：萬一還是被巢狀塞進置中版面，也不會被夾成小方塊 */
  margin-top: 4rem;       /* 與上方內容留白（blog 免責聲明區的同值） */
  background-color: var(--aj-footer-surface);
  font-size: 17px;
  line-height: 1.75;      /* blog body 的行高，footer 繼承同值 */
  font-family: "Segoe UI", "Inter", "PingFang TC", "Microsoft JhengHei",
    "微軟正黑體", "Noto Sans TC", system-ui, -apple-system, sans-serif;
  transition: background-color 0.2s, color 0.2s;
}

/* 品牌色漸層分隔線，貼在 footer 上緣
   （blog 原本掛在免責聲明下緣、正好在 footer 上方，視覺位置相同） */
.aj-site-footer::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(26, 122, 212) 25%,
    rgb(26, 122, 212) 75%,
    transparent 100%
  );
}

.aj-footer-inner {
  max-width: 80em;        /* = blog 的 80rem（17px 基準 → 1360px） */
  margin: 0 auto;
  padding: 1em 1.5em;
  text-align: center;
}

.aj-footer-copy {
  font-size: 0.875em;     /* 17px × 0.875 = 14.875px，同 blog */
  color: var(--aj-footer-muted);
  margin: 0;
}

/* 版權文字裡「半桶水的AI筆記」連結到 halfmemo.com：
   顏色沿用父層的 muted 色，預設不加底線，滑鼠移過去才顯示底線 */
.aj-footer-link {
  color: inherit;
  text-decoration: none;
}

.aj-footer-link:hover {
  text-decoration: underline;
}

/* ── RWD：blog 在 ≤767px 時根字級 17px → 16px，等比縮小 ── */
@media (max-width: 767px) {
  .aj-site-footer {
    font-size: 16px;
  }
}

/* ════════════════════════════════════════════════════════
   本專案調整（AJ 2026-09-29 核准：「空間夠才顯示」）
   遊戲畫面剛好佔滿一個螢幕、不能捲動，footer 必須放在螢幕「裡面」：
   - 拿掉上方 4rem 留白，省下的高度留給木盒
   - footer 不伸縮，遊戲主畫面（#app）吃掉剩下的高度（見 main.css 的 body）
   - 會不會顯示由 layout.js 決定：加上 footer 會讓木盒變小，就隱藏（hidden）
   ════════════════════════════════════════════════════════ */
.aj-site-footer {
  margin-top: 0;
  flex: none;
}

/* AJ 2026-09-29 要求：footer 高度少三分之一
   上下內距 1em → 0.4em，整體高度約 59px → 39px（左右內距不變） */
.aj-footer-inner {
  padding-top: 0.4em;
  padding-bottom: 0.4em;
}

/* 窄螢幕（小手機）：版權文字會折成兩行，footer 高度變成將近兩倍。
   縮小字體與左右留白，讓它維持一行（320px 寬也放得下） */
@media (max-width: 420px) {
  .aj-footer-inner {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
  .aj-footer-copy {
    font-size: 0.75em;      /* 16px × 0.75 = 12px */
    white-space: nowrap;
  }
}

/* AJ 2026-09-29 要求：footer 不要底色，讓遊戲的斜紋背景透出來
   （上緣的藍色漸層分隔線保留，在 ::before，不受影響） */
.aj-site-footer {
  background-color: transparent;
}

/* 背景透明後，文字直接壓在灰色斜紋上，原本的灰字（#888）在淺色模式幾乎看不見，
   所以改用遊戲本身的次要文字色 --ink-dim（main.css 定義，深淺色都已配好） */
.aj-footer-copy {
  color: var(--ink-dim);
}

/* AJ 2026-09-29 要求：「半桶水的AI筆記」用藍色，讓人一看就知道可以點
   顏色依背景（灰色斜紋）調整深淺，確保看得清楚：
   淺色模式（淺灰斜紋）用深一點的藍；深色模式（深灰斜紋）用亮一點的藍 */
:root {
  --aj-footer-link: #072f5f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --aj-footer-link: #8cc6f7;
  }
}
.dark,
[data-theme="dark"] {
  --aj-footer-link: #8cc6f7;
}
/* 與 main.css 一致：強制指定淺色時也要換回深藍 */
[data-theme="light"] {
  --aj-footer-link: #072f5f;
}
.aj-footer-link {
  color: var(--aj-footer-link);
}