/* Bootstrap 5.3.3 品牌色 override —— 目的：淨係要 Bootstrap 嘅 .btn/.form-control/.form-select/
   .form-check/.table 嗰種「手感」（padding、圓角、transition、驗證狀態），顏色一律keep返
   而家嘅森林綠(--forest)/金色(--gold)，唔用Bootstrap預設藍色。
   呢個檔要喺 bootstrap.min.css 之後、assets/style.css 之前載入。
   詳細計劃見 humble-pondering-lightning.md（Phase 0）。*/

:root{
  /* .form-control/.form-select 未focus嗰陣嘅邊框色係讀呢個變數，一改全站生效 */
  --bs-border-color:var(--border);
}

/* Bootstrap 嘅 .btn:hover/:active/:focus-visible 用 (0,2,0) specificity 讀
   --bs-btn-hover-bg 嗰類變數改background-color。呢個網站啲色系modifier class
   （.btn-gold/.btn-wa 靠background-image做gradient，唔受影響；但.btn-wine呢類
   單一class、純色background嘅，specificity淨係(0,1,0)，會俾Bootstrap嘅hover
   rule蓋過去，撳落去/focus嗰陣background會跌返做transparent「甩色」）。
   而家啲按鈕本身冇設計hover變色效果，所以最穩陣做法：喺 (0,3,0) 明文釘死
   hover/active/focus-visible嗰陣個background同base state一樣，覆蓋晒
   Bootstrap個(0,2,0) rule，唔理個別modifier係咪gradient定純色都啱用。*/
.btn.btn-gold:hover,.btn.btn-gold:active,.btn.btn-gold:focus-visible{background:linear-gradient(135deg,var(--gold),var(--gold-2))}
.btn.btn-outline:hover,.btn.btn-outline:active,.btn.btn-outline:focus-visible{background:transparent}
.btn.btn-wa:hover,.btn.btn-wa:active,.btn.btn-wa:focus-visible{background:linear-gradient(135deg,var(--wa),var(--wa-2))}
.btn.btn-wine:hover,.btn.btn-wine:active,.btn.btn-wine:focus-visible{background:var(--wine-cream)}
/* 後台三個modifier本身已經係(0,2,0)同Bootstrap個rule打平手，admin/index.html
   自己嗰嚿inline <style>又載入喺最後，打平手嗰陣後載入嘅贏——理論上唔使額外
   加，但保險起見一樣明文釘死，唔靠隱含嘅載入順序 tie-break */
.btn.adm-btn.primary:hover,.btn.adm-btn.primary:active,.btn.adm-btn.primary:focus-visible{background:linear-gradient(135deg,var(--gold),var(--gold-2))}
.btn.adm-btn.edit:hover,.btn.adm-btn.edit:active,.btn.adm-btn.edit:focus-visible{background:#e8f0e6}
.btn.adm-btn.del:hover,.btn.adm-btn.del:active,.btn.adm-btn.del:focus-visible{background:#fde8e6}

/* .form-control/.form-select/.form-check-input 嘅 focus 狀態，Bootstrap編譯後CSS係直接寫死
   #86b7fe/rgba(13,110,253,...)嘅藍色，冇用變數，一定要用selector直接override先做到金色 */
.form-control:focus,.form-select:focus,.form-check-input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 .25rem rgba(212,160,32,.25);
}
.form-check-input:checked{
  background-color:var(--forest);
  border-color:var(--forest);
}

/* 紅事(red.html/red-order.html)用緊獨立嘅酒紅色系（body.mode-red），focus色都跟住轉 */
body.mode-red .form-control:focus,body.mode-red .form-select:focus,body.mode-red .form-check-input:focus{
  border-color:var(--wine-accent);
  box-shadow:0 0 0 .25rem rgba(176,58,46,.25);
}
body.mode-red .form-check-input:checked{
  background-color:var(--wine);
  border-color:var(--wine);
}

/* 呢次淨係要換按鈕/表單樣式，唔係要換全站字體排版。但實測發現：現時22頁前台入面
   有十幾頁用緊完全冇class嘅裸 <h1>（靠瀏覽器預設樣式），Bootstrap Reboot會將呢啲
   標題全部強制改細（font-size:calc(1.375rem + 1.5vw)、font-weight:500），變相喺
   未經批准嘅範圍下改晒全站標題排版。用revert叫瀏覽器行返原生UA樣式，抵消返
   Bootstrap Reboot呢部分，其他Reboot嘅box-sizing/normalize效果唔受影響。 */
h1,h2,h3,h4,h5,h6{font-size:revert;font-weight:revert;line-height:revert;margin:revert}