/* ============================================================
 * ===== HAUZII CUSTOM OVERRIDES =====
 * ============================================================
 *
 * 這個檔案是「網站專屬的 CSS 覆寫」入口。
 * 位置:wp-content/hauzii-canvas-custom/custom.css
 *
 * 特性:
 *   - 它是「最後載入」的樣式表 → 你寫的規則疊在 plugin 所有樣式之上。
 *   - 它在 plugin 目錄「之外」→ 升級 plugin 不會動到它,你的客製不會遺失。
 *   - 想加什麼覆寫,直接寫在下面的 YOUR OVERRIDES 區即可。
 *
 * ------------------------------------------------------------
 * ★ 黃金鐵律(最重要,沒做到會「看起來沒效果」)
 * ------------------------------------------------------------
 * plugin 的 Design Token 樣式是用 `:root body .xxx` 這種高優先級寫的。
 * 你的覆寫「載入在後面」不代表一定贏 —— 優先級(specificity)不夠還是會輸。
 *
 *   做法:把 plugin 原本的 selector「原封不動抄過來」(連 :root body 一起),
 *         因為你載入在最後,同優先級就由你勝出。
 *
 *   ✅ 對: :root body .hz-filter-badge.is-active { background-color: red; }
 *   ❌ 錯:           .hz-filter-badge.is-active { background-color: red; }   (少了 :root body → 可能輸)
 *
 * 怎麼找 selector?在前台對著元素按右鍵 →「檢查 / Inspect」→
 * 看它套用的 class 與 plugin 寫的規則,整條 selector 抄過來。
 *
 * ------------------------------------------------------------
 * ★ 例外:inline style(寫在 HTML 標籤上的 style="...")
 * ------------------------------------------------------------
 * 若某個值是 plugin 直接寫在元素的 style="" 屬性上,CSS 檔蓋不過它,
 * 這時(也只有這時)需要加 !important:
 *
 *   :root body .some-element { background-color: red !important; }
 *
 * 平常請「不要」濫用 !important,只有遇到 inline style 才用。
 *
 * ------------------------------------------------------------
 * ★ 顏色請盡量用 Design Token 變數,不要寫死 hex
 * ------------------------------------------------------------
 * 可用的色票變數(跟著本站套用的 palette 自動變):
 *   --hz-color-01 (Primary) / --hz-color-02 (Secondary) / --hz-color-03 (Accent)
 *   --hz-color-04 (Black)   / --hz-color-05 (White)     / --hz-color-06 (Alert)
 *
 *   :root body .xxx { background-color: var(--hz-color-02); color: var(--hz-color-05); }
 *
 * ------------------------------------------------------------
 * ★ 範例(把下面的註解拿掉即可生效)—— 改部落格 filter 選中色
 * ------------------------------------------------------------
 *
 * :root body .hz-filter-badge.is-active {
 *     background-color: var(--hz-color-03);
 *     color: var(--hz-color-05);
 *     border-color: var(--hz-color-03);
 * }
 *
 * ============================================================ */


/* ===== YOUR OVERRIDES BELOW(在這行以下加你的覆寫)===== */