/* ============================================================
   高對比模式（WCAG 2.1 AA／1.4.3、1.4.6、1.4.11）
   由頁首「高對比」按鈕切換 <html class="hc">，設定存於 localStorage（frontHighContrast）。
   配色：黑底、白字（對比 21:1）、連結黃字（對比 19.6:1）、焦點黃色粗框。
   ============================================================ */

html.hc,
html.hc body {
    background: #000 !important;
    color: #fff !important;
}

html.hc body *:not(img):not(svg):not(video):not(iframe):not(canvas) {
    background-color: #000 !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 連結 */
html.hc a,
html.hc a *,
html.hc .nav-link,
html.hc .dropdown-item {
    color: #ff0 !important;
    text-decoration: underline !important;
}

/* 按鈕 */
html.hc .btn,
html.hc button {
    border: 2px solid #fff !important;
    color: #fff !important;
}

html.hc .btn:hover,
html.hc .btn:focus,
html.hc .btn.active,
html.hc button:hover,
html.hc a.btn:hover,
html.hc .dropdown-item:hover,
html.hc .btn-sort:hover {
    background-color: #ff0 !important;
    color: #000 !important;
    border-color: #ff0 !important;
}

html.hc .btn:hover *,
html.hc .btn:focus *,
html.hc .btn.active *,
html.hc .dropdown-item:hover *,
html.hc .btn-sort:hover * {
    color: #000 !important;
}

/* 表單元件 */
html.hc input,
html.hc select,
html.hc textarea,
html.hc .form-control,
html.hc .form-select {
    background-color: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}

html.hc ::placeholder {
    color: #ddd !important;
    opacity: 1;
}

/* 焦點：不可被隱藏 */
html.hc a:focus-visible,
html.hc button:focus-visible,
html.hc input:focus-visible,
html.hc select:focus-visible,
html.hc textarea:focus-visible,
html.hc [tabindex]:focus-visible {
    outline: 3px solid #ff0 !important;
    outline-offset: 2px !important;
}

/* 卡片、清單、表格、頁首頁尾邊界 */
html.hc .card,
html.hc .list-group-item,
html.hc .table,
html.hc .table td,
html.hc .table th,
html.hc .dropdown-menu,
html.hc .modal-content,
html.hc .header,
html.hc #footer,
html.hc .project-item,
html.hc .btn-sort,
html.hc .theme-card {
    border: 1px solid #fff !important;
}

/* 徽章保持可辨識 */
html.hc .badge {
    border: 1px solid #fff !important;
    background-color: #000 !important;
    color: #fff !important;
}

/* 圖片：Logo 等維持原樣，並加外框以利辨識 */
html.hc img {
    background: #fff;
}

/* 高對比切換按鈕啟用時的視覺提示 */
html.hc .contrast-toggle-btn {
    background-color: #ff0 !important;
    color: #000 !important;
    border-color: #ff0 !important;
}

html.hc .contrast-toggle-btn * {
    color: #000 !important;
}