@layer theme-custom {
/* ══════════════════════════════════════════════════════════════
   黃禮宏 個人品牌色彩系統 v1.2
   「墨藍的夜，托住一道金色的日出」
   規範全文：Leon is free/01_知識庫/品牌_黃禮宏個人品牌色彩系統_墨藍與金.md
   2026-08-10 建立｜08-16 第 11 節｜08-20 第 12 節

   七個實作前提（都是踩過才知道的，改動前先讀）：
   ① 平台把自訂 CSS 包在 @layer 內（優先權低於未分層的主題樣式），
      宣告必須加 !important 才生效。反過來說，**用 JS 注入未分層的
      <style> 是無效的**（2026-08-20 實測：黃銅 ::after 進得去，
      但 font-weight / letter-spacing 打不過主題）。要改樣式就改這一份。
   ② footer 在 div.content 之外（body > footer），色票 token 必須
      在兩個地方各宣告一次，否則 footer 讀不到變數。
   ③ 連結色規則一定要排除所有 class 含 btn 的元素——否則實心按鈕
      會變成「曙青字＋深底」，對比掉到 2 以下（404 頁踩過）。
   ④ 頁首其實有兩塊：nav.navbar 與 div.mobile-menu（放 logo 與
      搜尋／會員圖示），兩塊都要寫，只寫 nav.navbar 會漏掉一半。
   ⑤ 被排除的元素得各自補色，否則留在舊色。已補：.btn-full、
      .btn-outline-*、.blog-footer-btn（含內層）、.comment-counter。
   ⑥ ⚠️⚠️ 連結色規則還必須排除「自己帶 inline color 的 a」——
      !important 會蓋掉 inline style，文章內用 inline 做的按鈕
      （深底＋淺字）會被染成曙青字落在深底上，對比 2.45 全毀。
      判準：作者自己指定過顏色，就尊重他。
   ⑦ ⚠️ 第 2 節的 p 規則沒有任何 :not() 排除 → 墨藍反轉區裡
      不能用 <p>（會被輾成潭黑壓在墨藍上，對比 1.3）。深底區塊
      內的文字一律用 <div> / <span>。li / td / dd / blockquote 同理。
   ══════════════════════════════════════════════════════════════ */

/* ── 色票 token ── */
div.content,
footer {
  --hl-ink:       #0E2A42;  /* 墨藍  主色：標題、頁首、footer 底 */
  --hl-brass:     #B8873C;  /* 黃銅  品牌記號，永不做文字 */
  --hl-gold:      #D9B166;  /* 淺金  深底專用（on 墨藍 7.3 AAA） */
  --hl-paper:     #F6F3ED;  /* 紙白  深底上的文字 */
  --hl-sand:      #EBE7DC;  /* 紙白加深  標籤丸底（墨藍 on 它 11.9 AAA） */
  --hl-mist-ink:  #5C6B76;  /* 霧灰加深  淺底次要文字（4.96 AA） */
  --hl-mist-lite: #B7C3CC;  /* 霧灰提亮  墨藍底文字（8.18 AAA） */
  --hl-teal:      #0F6E73;  /* 曙青  行動色：連結、外框按鈕（5.42 AA） */
  --hl-abyss:     #141B21;  /* 潭黑  內文（15.69 AAA） */
}

/* ── 1. 標題：墨藍（含清單頁標題連結，原為 #008CDA） ───────── */
div.content #pjax-container h1,
div.content #pjax-container h2,
div.content #pjax-container h3,
div.content #pjax-container h4,
div.content #pjax-container h5,
div.content #pjax-container h1 a,
div.content #pjax-container h2 a,
div.content #pjax-container h3 a,
div.content #pjax-container h2.middle-title,
div.content #pjax-container h2.middle-title a,
div.content #pjax-container h2.title,
div.content #pjax-container h2.title a,
div.content #pjax-container h2.pagging-title {
  color: var(--hl-ink) !important;
}
div.content #pjax-container h1 a:hover,
div.content #pjax-container h2 a:hover,
div.content #pjax-container h2.middle-title a:hover {
  color: var(--hl-teal) !important;
}

/* ── 2. 內文：潭黑 ─────────────────────────────────────────── */
div.content #pjax-container p,
div.content #pjax-container li,
div.content #pjax-container td,
div.content #pjax-container dd,
div.content #pjax-container blockquote {
  color: var(--hl-abyss) !important;
}

/* ── 3. 連結：曙青 ─────────────────────────────────────────────
   ⚠️ 這一條同時是可及性修正：原連結色 #008CDA 在本站底色上
   對比僅 3.37，未達 WCAG AA（4.5）；曙青 5.42 通過。 */
div.content #pjax-container a:not([class*="btn"]):not(.badge):not(.label):not(.article-tag):not([style*="color" i]) {
  color: var(--hl-teal) !important;
}
div.content #pjax-container a:not([class*="btn"]):not(.badge):not(.label):not(.article-tag):not([style*="color" i]):hover {
  color: var(--hl-ink) !important;
}

/* ── 4. 次要資訊（日期、摘要、說明、留言數）：霧灰加深 ─────── */
div.content #pjax-container .date,
div.content #pjax-container .post-date,
div.content #pjax-container .article-date,
div.content #pjax-container .text-muted,
div.content #pjax-container small,
div.content #pjax-container .description,
div.content #pjax-container .comment-counter,
div.content #pjax-container .comment-counter span {
  color: var(--hl-mist-ink) !important;
}

/* ── 5. 頁首兩塊：nav.navbar ＋ div.mobile-menu ──────────────── */
div.content nav.navbar a,
div.content nav.navbar .nav-link,
div.content nav.navbar i,
div.content nav.navbar .fas,
div.content nav.navbar .far,
div.content nav.navbar .fab,
div.content .mobile-menu a,
div.content .mobile-menu a.logo-text,
div.content .mobile-menu i,
div.content .mobile-menu .fas,
div.content .mobile-menu .far,
div.content .mobile-menu .fab {
  color: var(--hl-ink) !important;
}
div.content nav.navbar a:hover,
div.content nav.navbar a:hover i,
div.content .mobile-menu a:hover,
div.content .mobile-menu a:hover i {
  color: var(--hl-teal) !important;
}

/* ── 6. 頁尾：墨藍底＋霧灰提亮字＋淺金標題 ────────────────── */
body > footer {
  background-color: var(--hl-ink) !important;
  color: var(--hl-mist-lite) !important;
}
body > footer p,
body > footer li,
body > footer ul,
body > footer span,
body > footer div,
body > footer small {
  color: var(--hl-mist-lite) !important;
}
body > footer a {
  color: var(--hl-mist-lite) !important;
}
body > footer a:hover {
  color: var(--hl-gold) !important;
}
body > footer h4,
body > footer h5,
body > footer .small-title {
  color: var(--hl-gold) !important;
}
body > footer hr,
body > footer .border-top {
  border-color: rgba(183, 195, 204, 0.25) !important;
}

/* ── 7. 實心按鈕：墨藍底＋紙白字（13.27 AAA） ───────────────── */
div.content #pjax-container .btn-primary,
div.content #pjax-container .btn-dark,
div.content #pjax-container .btn-full,
div.content #pjax-container button.btn-primary,
div.content #pjax-container button.btn-full,
div.content #pjax-container input[type="submit"],
div.content #pjax-container .style404-btn.primary {
  background-color: var(--hl-ink) !important;
  border-color: var(--hl-ink) !important;
  color: var(--hl-paper) !important;
}
div.content #pjax-container .btn-primary:hover,
div.content #pjax-container .btn-full:hover,
div.content #pjax-container .style404-btn.primary:hover {
  background-color: var(--hl-teal) !important;
  border-color: var(--hl-teal) !important;
  color: var(--hl-paper) !important;
}

/* ── 7b. 外框／幽靈按鈕：曙青（含內層圖示與計數） ───────────── */
div.content #pjax-container .btn-border,
div.content #pjax-container a.btn-border,
div.content #pjax-container .style404-btn.ghost,
div.content #pjax-container .btn-outline-secondary,
div.content #pjax-container .btn-outline-primary,
div.content #pjax-container .btn-outline-dark,
div.content #pjax-container a.blog-footer-btn,
div.content #pjax-container a.blog-footer-btn * {
  background-color: transparent !important;
  color: var(--hl-teal) !important;
  border-color: var(--hl-teal) !important;
}
div.content #pjax-container .btn-border:hover,
div.content #pjax-container a.btn-border:hover,
div.content #pjax-container .style404-btn.ghost:hover,
div.content #pjax-container .btn-outline-secondary:hover,
div.content #pjax-container .btn-outline-primary:hover,
div.content #pjax-container .btn-outline-dark:hover,
div.content #pjax-container a.blog-footer-btn:hover,
div.content #pjax-container a.blog-footer-btn:hover * {
  background-color: var(--hl-teal) !important;
  border-color: var(--hl-teal) !important;
  color: var(--hl-paper) !important;
}

/* ── 7c. 標籤丸：暖砂底＋墨藍字（11.9 AAA） ─────────────────── */
div.content #pjax-container a.article-tag {
  background-color: var(--hl-sand) !important;
  color: var(--hl-ink) !important;
  border-color: var(--hl-sand) !important;
}
div.content #pjax-container a.article-tag:hover {
  background-color: var(--hl-ink) !important;
  color: var(--hl-paper) !important;
  border-color: var(--hl-ink) !important;
}

/* ── 7d. 文章內用 inline style 做的深底按鈕（只補 hover） ────── */
div.content #pjax-container a[style*="background" i][style*="0E2A42" i]:hover {
  background-color: var(--hl-teal) !important;
  color: var(--hl-paper) !important;
}

/* ── 8. 黃銅記號＝品牌指紋 ────────────────────────────────────
   金只做記號、永不做文字。h1 下方 56px 細線，
   與電子報信頭、訂閱表單標題下方那條金線是同一個記號。

   ⭐ 這條線的「對」不在絕對長度，在**它相對於字的比例**：
      56px ÷ 每字 34.6px ＝ **1.62 個字寬**（快要兩個字，但沒到）。
      任何地方要再畫這道記號，就照 1.62 個字寬去算，見第 12 節。 */
div.content #pjax-container h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background-color: var(--hl-brass);
  margin: 14px 0 0;
}
div.content #pjax-container hr {
  border-top-color: rgba(184, 135, 60, 0.35) !important;
}

/* ── 9. 選取字反白：淺金底＋墨藍字 ─────────────────────────── */
div.content ::selection {
  background-color: var(--hl-gold);
  color: var(--hl-ink);
}

/* ── 10. 歷史色回歸防線 ───────────────────────────────────────
   ⚠️ 2026-08-11 教訓：防線擋不住 border / background（:not 排除掉了），
   真正的解法是動手前先讀規範，不是靠這一節補救。 */
div.content #pjax-container [style*="ff6600" i],
div.content #pjax-container [style*="ff6600" i] * {
  color: var(--hl-ink) !important;
}
div.content #pjax-container [style*="B4551F" i]:not([style*="border" i]) {
  color: var(--hl-teal) !important;
}

/* ── 11. 文章清單改為純文字（2026-08-16） ─────────────────────
   平台在文章沒有封面時會塞一張灰色佔位圖
   /static/default_images/blog-list-img.jpg，全站都長一樣。
   ⚠️ 首頁與清單頁是兩套不同結構，兩個都要寫：
     首頁   div.blog-row > div.img-box       （flex）
     清單頁 div.col-md-4 > div.row > div.col-12（grid）
   只鎖定「佔位圖」而不是所有清單圖 → 之後若某篇掛上真實封面，
   那一篇會正常顯示，不必改 CSS。 */
div.content #pjax-container .img-box:has(img[src*="blog-list-img" i]),
div.content #pjax-container [class*="col-"]:has(> a > picture > img[src*="blog-list-img" i]) {
  display: none !important;
}

/* ── 12. 網站名稱＝文字 logo（2026-08-20） ────────────────────
   ⚠️ 這是全站唯一「看得見」的回首頁入口，動它之前先想清楚。

   背景：主題保留了四個指向首頁的連結，但四個原本全是 0×0：
     .navbar-brand（置中，只吃圖片，沒圖就是空的）
     .logo-img / .logo-text（手機版，同理）
     .web-title a（置中的網站名稱）
   在後台「網站設定 → 網站名稱」填入「黃禮宏」之後，
   只有 .web-title a 長出內容，成為唯一可點的回首頁入口。

   ⚠️ .navbar-brand 在這個佈景**不是左上角，是置中**，
   實測用 ::before 塞文字會跟 .web-title 上下疊成兩個「黃禮宏」。
   要做圖形 logo 時記得這件事。

   ⚠️ 頁首有三個互不對齊的左緣（1920px 下實測）：
     導覽列項目 x=31｜.web-title 的容器 x=315｜頁面內文 x=570
   這是佈景本來就有的結構。這裡採用 .web-title 自己容器的左緣
   （text-align:left），響應式安全；若要推到跟選單切齊得用
   −284px 負邊距，換窗寬就會歪，不採用。

   ⭐ 黃銅細線 65px 的來歷（2026-08-23，別隨手改成整數）：
     h1 的線是 56px，h1 每字 34.6px → **1.62 個字寬**。
     網站名稱每字 40.1px（含 letter-spacing .14em），
     1.62 × 40.1 ＝ **65px**。兩處的線因此在視覺上是同一個記號。
     ⚠️ 一度寫成 width:100%（涵蓋三個字，120px），太長，
     金變成「底線」而不是「記號」，違反第 8 節的原則。
     ⚠️ 也不要改成 h1 的 56px——那是 h1 的字級算出來的，
     直接搬過來會偏短。**改字級或改站名時要重算，不是照抄。**
   墨藍 on 紙白 13.27 AAA。 */
div.content .web-title {
  text-align: left !important;
}
div.content .web-title a {
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  color: var(--hl-ink) !important;
  text-decoration: none !important;
  display: inline-block !important;
}
div.content .web-title a::after {
  content: "";
  display: block;
  width: 65px;
  height: 2px;
  background-color: var(--hl-brass);
  margin: 6px 0 0;
}
div.content .web-title a:hover {
  color: var(--hl-teal) !important;
}
}