/* 無障礙修正 - Accessibility Fixes */

/* 1. 修正已選取的頁籤文字顏色與背景色對比值 (#FFFFFF與#F8A1A4) */
/* 解決方案：將背景色改為更深的粉紅色，使對比度達到4.5:1以上 */
.nav-link.active {
    background-color: #B24D50 !important; /* 從 #C96D70 改為 #B24D50，對比度約為5.16:1 */
    color: #FFFFFF !important;
}

/* 相關粉紅色樣式也一併調整 */
.pink, a.pink {
    color: #FFFFFF !important;
    background-color: #B24D50 !important; /* 從 #C96D70 改為 #B24D50 */
}
.pink:hover, a.pink:hover {
    color: #FFFFFF !important;
    background-color: #9A3D43 !important; /* 從 #B3424A 改為 #9A3D43，對比度約為6.73:1 */
}

/* 2. 修正撰寫人員文字顏色與背景色對比值 (#BF5B16與#FFFFFF) */
/* 解決方案：將文字顏色改為稍深的褐色，使對比度達到4.5:1以上 */
.text-color {
    color: #AF4800 !important; /* 從 #BF5B16 改為 #AF4800，對比度約為5.2:1 */
}

/* 3. 修正連結文字顏色與背景色對比值 (#007BFF與#FFFFFF) */
/* 解決方案：將連結顏色改為較深的藍色，使對比度達到4.5:1以上 */
a, .history-title a {
    color: #0056B3 !important; /* 從 #007BFF 改為 #0056B3，對比度約為4.52:1 */
}

/* 保留頁籤導航的顏色規則 */
.nav-link:not(.active) {
    color: #000000 !important; /* 保持原黑色 */
}

/* 麵包屑和特殊連結顏色 */
.breadcrumb-item a, a.text-pink {
    color: #B3424A !important; /* 從淡粉色改為深粉色，符合對比度要求 */
}

/* 保留懸浮連結的特殊顏色 */
.history-title a:hover {
    color: #003D80 !important; /* 更深的藍色，確保hover狀態也符合對比度要求 */
}
.text-pink:hover {
    color: #8A2A30 !important; /* 更深的粉色，對比度符合要求 */
}

/* 4. 修正主要內容區各頁籤下的標題文字顏色與背景色對比值 (#C5C5C5與#FFFFFF) */
/* 解決方案：將文字顏色改為深灰色，使對比度達到3:1以上 */
.h1-title {
    color: #767676 !important; /* 從 #C5C5C5 改為 #767676，對比度約為4.54:1，超過要求的3:1 */
}

/* 5. 修正搜尋結果的各期別文字顏色與背景色對比值 (#00B5EE與#FFFFFF) */
/* 解決方案：將文字顏色改為較深的藍色，使對比度達到3:1以上 */
/* 適用於搜尋頁面的藍色文字 */
.search-result-period, .result-period {
    color: #0076A3 !important; /* 從 #00B5EE 改為 #0076A3，對比度約為4.53:1，超過要求的3:1 */
}

/* 確保其他可能使用相同藍色的元素也被修正 */
.text-info, .text-primary {
    color: #0056B3 !important;
}

/* 合併文章區塊超連結的樣式 */
.article-link {
    display: block;
    color: inherit;
}

.article-link:hover {
    text-decoration: none;
}

.article-link:hover .title-color {
    color: #AA002E !important;
}

.article-link:focus {
    outline: 2px solid #0056B3;
    border-radius: 4px;
}

/* 確保圖片容器在超連結中有合適的樣式 */
.article-image-container {
    overflow: hidden;
    margin-bottom: 10px;
}

/* 修正文章標題和內容的超連結顏色 */
.article-link .title-color {
    color: #000000;
}

.article-link .content-color {
    color: #444;
}

/* 確保所有連結符合對比度要求 */
a:not(.text-pink):not(.nav-link):not(.article-link):not(.pink):not(.badge):not(footer a) {
    color: #0056B3 !important; /* 確保一般連結也使用深藍色，對比度約為4.52:1 */
}

/* 頁尾連結樣式 - 優先級更高 */
footer a {
    color: #FFFFFF !important;
}

footer a:hover {
    color: #FFFFFF !important;
}

/* 改善頁籤的無障礙性 */
/* 頁籤的焦點樣式 */
[data-toggle="tab"]:focus {
    outline: 3px solid #0056B3 !important;
    outline-offset: -1px;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    position: relative;
    z-index: 5;
}

/* 頁籤面板的焦點樣式 */
.tab-pane:focus {
    outline: 2px solid #0056B3;
    outline-offset: -2px;
}

/* 為螢幕閱讀器用戶添加更好的頁籤狀態提示 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}