/* 自定義樣式文件 */
/* 您可以在這裡添加任何自定義 CSS 來覆蓋 Material 主題的默認樣式 */

/* 修改全站字體 */
:root {
    --md-text-font: "Noto Sans SC", sans-serif;
    --md-code-font: "Roboto Mono", "Consolas", "Monaco", monospace;
}

/* 內文使用 Noto Sans SC - 正常粗細 */
html,
body,
.md-typeset,
.md-typeset p,
.md-typeset li,
.md-typeset td,
.md-typeset th,
.md-typeset ul,
.md-typeset ol,
.md-typeset blockquote,
.md-content,
.md-typeset span,
.md-typeset div {
    font-family: "Noto Sans SC", sans-serif !important;
}

/* 標題使用 Noto Serif SC 粗體 */
.md-typeset h1, 
.md-typeset h2, 
.md-typeset h3, 
.md-typeset h4, 
.md-typeset h5, 
.md-typeset h6,
.md-content h1,
.md-content h2,
.md-content h3,
.md-content h4,
.md-content h5,
.md-content h6 {
    font-family: "Noto Serif SC", "Noto Sans SC", "Microsoft YaHei", serif !important;
    color: #001D2E !important;
    font-weight: bold !important;
}


.md-typeset strong {
    color: #001D2E !important;
}

/* 範例：調整內容區域的最大寬度 */
.md-content {
    max-width: 1200px;
}

/* 範例：調整代碼塊樣式 */
.md-typeset pre {
    border-radius: 8px;
}

/* 範例：調整連結顏色 */
.md-typeset a {
    color: #E22F3D;
}

.md-typeset a:hover {
    color: #E22F3D;
    text-decoration: underline;
}

/* 範例：調整圖片樣式 */
.md-typeset img {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 您可以在這裡添加更多自定義樣式 */

/* 修改頂部導航欄背景色 */
.md-header {
    background-color: white !important;
    color: #001D2E !important;
}

.md-header__inner {
    padding: 8px 16px;
}

/* Header 中的登录和注册按鈕樣式 */
.md-header__button-group {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;

}

.md-header__button--login,
.md-header__button--register {
    padding: 6px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.md-header__button--login {
    color: #001D2E !important;
    background-color: transparent !important;
    border: 1px solid #cccccc !important;
}

.md-header__button--login:hover {
    background-color: rgba(0, 29, 46, 0.05) !important;
    color: #001D2E !important;
}

.md-header__button--register {
    color: white !important;
    background-color: #E22F3D !important;
    border: 1px solid #E22F3D !important;
}

.md-header__button--register:hover {
    background-color: #c01e2b !important;
    border-color: #c01e2b !important;
    color: white !important;
}

.md-header__topic{
    font-weight: 700 !important;
}

.md-header--shadow {
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1);
}

.md-search__form {
    background-color: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
}

.md-search__scrollwrap {
    border-radius: 8px !important;
}

/* 修改搜尋框 placeholder 文字顏色 */
.md-search__input::placeholder {
    color: #999999 !important;
    opacity: 1; /* 確保顏色顯示 */
}

/* 針對不同瀏覽器的 placeholder 樣式 */
.md-search__input::-webkit-input-placeholder {
    color: #999999 !important;
}

.md-search__input::-moz-placeholder {
    color: #999999 !important;
    opacity: 1;
}

.md-search__input:-ms-input-placeholder {
    color: #999999 !important;
}

/* 修改搜尋圖標顏色 */
.md-search__icon {
    color: #001D2E !important;
}

.md-search__icon svg {
    fill: currentColor !important;
}

/* 搜尋圖標 hover 效果 */
.md-search__icon:hover {
    color: #001D2E !important;
    opacity: 0.8;
}

.md-container{
    background-color: white !important;
}

.md-nav__title {
    color: #001D2E !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

/* 確保側邊欄導航連結使用正常粗細（除了標題） */
.md-nav__link {
    font-weight: 400 !important;
}

/* 確保側邊欄導航項目使用正常粗細 */
.md-nav__item {
    font-weight: 400 !important;
}

.md-nav__item .md-nav__link--active, .md-nav__item .md-nav__link--active code {
    color: #E22F3D !important;
}

.md-nav__link[for]:focus, .md-nav__link[for]:hover, .md-nav__link[href]:focus, .md-nav__link[href]:hover {
    color: #E22F3D !important;
}

.md-nav__icon:hover {
    background-color: rgba(226, 47, 61, 0.05) !important;
}


.md-footer {
    background-color: #001D2E !important;
}

/* Footer 中的連結樣式 */
.md-footer a {
    color: #E22F3D !important;
    text-decoration: none;
}

.md-footer a:hover {
    color: #c01e2b !important;
    text-decoration: underline;
}

.md-copyright a {
    color: #E22F3D !important;
}

/* 修改右側邊欄（目錄）的滾動條顏色 - 不顯眼的灰色 */
.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar {
    width: 8px;
}

.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-track {
    background: #f5f5f5 !important;
    border-radius: 4px;
}

.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
    background: #cccccc !important;
    border-radius: 4px;
}

.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3 !important;
}

/* Firefox 滾動條樣式 */
.md-sidebar--secondary .md-sidebar__scrollwrap {
    scrollbar-width: thin;
    scrollbar-color: #cccccc #f5f5f5 !important;
}

.md-search-result mark {
    color: #E22F3D !important;
}

/* 搜尋結果面板的滾動條顏色 - 不顯眼的灰色 */
.md-search__scrollwrap::-webkit-scrollbar {
    width: 8px;
}

.md-search__scrollwrap::-webkit-scrollbar-track {
    background: #f5f5f5 !important;
    border-radius: 4px;
}

.md-search__scrollwrap::-webkit-scrollbar-thumb {
    background: #cccccc !important;
    border-radius: 4px;
}

.md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3 !important;
}

/* Firefox 搜尋結果滾動條樣式 */
.md-search__scrollwrap {
    scrollbar-width: thin;
    scrollbar-color: #cccccc #f5f5f5 !important;
}

.md-search-result__link:focus, .md-search-result__link:hover {
    background-color: rgba(226, 47, 61, 0.05) !important;
}

/* 手機版樣式統一 - 確保與桌機版一致 */
@media screen and (max-width: 76.1875em) {
    /* 手機版 header 背景色改為白色 */
    .md-header {
        background-color: white !important;
        color: #001D2E !important;
    }
    
    /* 手機版導航抽屜背景色 */
    .md-nav--primary .md-nav__title {
        background-color: white !important;
        color: #001D2E !important;
    }
    
    /* 手機版導航抽屜內容背景色 */
    .md-nav--primary {
        background-color: white !important;
    }
    
    /* 手機版導航連結顏色 */
    .md-nav--primary .md-nav__link {
        color: #001D2E !important;
    }
    
    /* 手機版導航連結 hover 和 active 顏色 */
    .md-nav--primary .md-nav__link:hover,
    .md-nav--primary .md-nav__link--active {
        color: #E22F3D !important;
    }
    
    /* 手機版導航項目背景 */
    .md-nav--primary .md-nav__item {
        background-color: transparent !important;
    }
    
    /* 手機版導航項目 active 背景 */
    .md-nav--primary .md-nav__item--active .md-nav__link {
        color: #E22F3D !important;
        background-color: transparent !important;
    }

    .md-nav__icon:hover {
        background-color: rgba(226, 47, 61, 0.05) !important;
    }
    
    /* 手機版主內容區域背景 */
    .md-main__inner {
        background-color: white !important;
    }
    
    /* 手機版容器背景 */
    .md-container {
        background-color: white !important;
    }
    
    /* 手機版導航抽屜覆蓋層 */
    .md-overlay {
        background-color: rgba(0, 0, 0, 0.54) !important;
    }

    
    /* 手機版 logo 區域 - 縮小尺寸 */
    .md-header__button.md-logo {
        color: inherit !important;
    }
    
    /* 手機版 header 中的 logo 圖片 */
    .md-header__button.md-logo img {
        height: 1.2rem !important;
    }

    .md-header__button-group {
        gap: 8px;
    
    }

    .md-header__button--login,
    .md-header__button--register {
        margin: 0 !important;
    }
    
    /* 手機版側邊欄中的 logo */
    .md-nav__button.md-logo img {
        height: 1.2rem !important;
    }
    
    /* 手機版側邊欄 logo 區域整體縮小 */
    .md-nav__button.md-logo {
        padding: 0.4rem 0.6rem !important;
    }
    
    /* 手機版導航抽屜標題文字 */
    .md-nav--primary .md-nav__title .md-nav__button {
        color: #001D2E !important;
    }
    
    /* 手機版導航項目展開時的樣式 */
    .md-nav--primary .md-nav__item--nested > .md-nav__link::after {
        color: #001D2E !important;
    }
}