/* 自定義樣式文件 */
/* 您可以在這裡添加任何自定義 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 h3{
    margin-top: 2.5rem !important;
}

.md-typeset p{
    margin: 1rem 0 !important;
}

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

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

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

/* 表格滿版顯示 */
.md-typeset table {
    width: 100% !important;
    display: table !important;
    table-layout: auto !important;
}

.md-typeset__table thead th,
.md-typeset__table th:first-child {
    background-color: rgba(0, 0, 0, 0.035) !important;
}

.md-typeset__table{
    width: 100% !important;
    display: table !important;
    table-layout: auto !important;
}

/* 表格所有單元格添加縱向分隔線 */
.md-typeset table th,
.md-typeset table td {
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* 最後一列不需要右邊框 */
.md-typeset table th:last-child,
.md-typeset table td:last-child {
    border-right: none !important;
}

/* 嵌套列表樣式 - 讓不同層級有不同的視覺效果 */
.md-content__inner .md-typeset ul,
.md-content__inner .md-typeset ol {
    margin: 0.5rem 0 !important;
    padding-left: 1.5rem !important;
}

.md-content__inner .md-typeset li {
    margin: 0.25rem 0 !important;
    line-height: 1.6 !important;
}

/* 第一層列表 */
.md-typeset ul ul {
    list-style-type: circle !important;
}

/* 第二層嵌套列表（子項目）- 空心圓點（circle） */
.md-content__inner .md-typeset ul ul {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
    padding-left: 1.5rem !important;
    margin-left: 0 !important;
    list-style-type: circle !important;
}

.md-content__inner .md-typeset ul ul > li {
    list-style-type: circle !important;
    color: #666666 !important;
}

.md-content__inner .md-typeset ol ul {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
    padding-left: 1.5rem !important;
    margin-left: 0 !important;
}

.md-content__inner .md-typeset ol ul > li {
    list-style-type: circle !important;
    color: #666666 !important;
}

/* 第三層嵌套列表（更深層的子項目）- 方塊（square） */
.md-content__inner .md-typeset ul ul ul {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
    padding-left: 1.5rem !important;
    margin-left: 0 !important;
}

.md-content__inner .md-typeset ul ul ul > li {
    list-style-type: square !important;
    color: #888888 !important;
}

.md-content__inner .md-typeset ol ul ul {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
    padding-left: 1.5rem !important;
    margin-left: 0 !important;
}

.md-content__inner .md-typeset ol ul ul > li {
    list-style-type: square !important;
    color: #888888 !important;
}

/* 有序列表的嵌套 */
.md-content__inner .md-typeset ol ol {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
    padding-left: 1.5rem !important;
    margin-left: 0 !important;
}

.md-content__inner .md-typeset ol ol > li {
    color: #666666 !important;
}

/* 範例：調整連結顏色 */
.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);
    margin-top: 1rem !important;
}

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

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

/* 桌機版：header 與主內容區對齊（預設樣式） */
.md-header__inner {
    /* 與主內容區同寬並置中，讓 logo / 連結與內容左右對齊 */
    max-width: 72rem;
    margin: 0 auto;
    padding-block: 8px;
    padding-inline: 2.5rem;
}

/* Header 中的導航連結樣式（官網、Telegram） */
.md-header__nav-links {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-right: 1.5rem;
    z-index: 0 !important;
}

.md-header__nav-link {
    color: #001D2E !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    padding: 4px 0 !important;
}

.md-header__nav-link:hover {
    color: #E22F3D !important;
    text-decoration: none !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[data-md-level="0"] > .md-nav__list > .md-nav__item > .md-nav__link {
    font-weight: 700 !important;
}

/* 小類（第二層及以下）標題使用正常粗細 */
.md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item > .md-nav__link,
.md-nav[data-md-level="2"] > .md-nav__list > .md-nav__item > .md-nav__link {
    font-weight: 400 !important;
}

.md-search__input{
    font-size: 14px !important;
}

.md-nav__list{
    margin-bottom: 0.4rem !important;
}

.md-nav--primary .md-nav__list {
    padding-bottom: 0rem !important;
}

.md-nav__item{
    margin-bottom: 0.5rem !important;
}

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

/* 確保側邊欄導航連結使用正常粗細（除了大類標題） */
.md-nav__link {
    font-weight: 400 !important;
    /* 非選中狀態使用較不明顯的灰色，類似 Vortex 網站 */
    color: #666666 !important;
}

.md-nav__link--passed{
    color: #c8c8c8 !important;
}

/* 只有第一層（大類）的導航連結是粗體 */
.md-nav--primary[data-md-level="0"] > .md-nav__list > .md-nav__item > .md-nav__link {
    font-weight: 700 !important;
    color: #001D2E !important;
    transition: color 0.2s ease !important;
}

.md-nav--primary[data-md-level="0"] > .md-nav__list > .md-nav__item > .md-nav__link:hover{
    color: #E22F3D !important;
}

.md-nav--primary[data-md-level="0"] > .md-nav__list > .md-nav__item > .md-nav__link--active{
    color: #E22F3D !important;
}



/* 第二層（小類）及以下的導航連結保持正常粗細 */
.md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item > .md-nav__link,
.md-nav[data-md-level="2"] > .md-nav__list > .md-nav__item > .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;
}

/* 側邊欄連結 hover 和 focus 狀態 */
.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-content__inner {
    margin-bottom: 4rem !important;
}

/* 增加主內容區域頂部留白 */
.md-main__inner {
    padding-top: 1rem !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--primary .md-sidebar__scrollwrap {
    /* Firefox：預設隱藏 */
    scrollbar-width: none;
}

/* 當 hover 或滾動時顯示滾動條 */
.md-sidebar--primary .md-sidebar__scrollwrap.is-hovering,
.md-sidebar--primary .md-sidebar__scrollwrap.is-scrolling {
    scrollbar-width: thin;
    scrollbar-color: #cccccc transparent !important;
}

/* WebKit 瀏覽器（Chrome, Safari, Edge） */
.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

/* 移除上下箭頭 */
.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-button {
    display: none;
}

/* hover 或滾動時顯示滾動條 */
.md-sidebar--primary .md-sidebar__scrollwrap.is-hovering::-webkit-scrollbar,
.md-sidebar--primary .md-sidebar__scrollwrap.is-scrolling::-webkit-scrollbar {
    width: 8px;
}

.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-track {
    background: transparent !important;
}

.md-sidebar--primary .md-sidebar__scrollwrap.is-hovering::-webkit-scrollbar-track,
.md-sidebar--primary .md-sidebar__scrollwrap.is-scrolling::-webkit-scrollbar-track {
    background: transparent !important;
}

.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
    background: transparent !important;
    border-radius: 4px;
}

.md-sidebar--primary .md-sidebar__scrollwrap.is-hovering::-webkit-scrollbar-thumb,
.md-sidebar--primary .md-sidebar__scrollwrap.is-scrolling::-webkit-scrollbar-thumb {
    background: #cccccc !important;
}

.md-sidebar--primary .md-sidebar__scrollwrap.is-hovering::-webkit-scrollbar-thumb:hover,
.md-sidebar--primary .md-sidebar__scrollwrap.is-scrolling::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3 !important;
}

/* 右側邊欄（目錄）滾動條 - 預設隱藏，滾動時顯示（類似蘋果預設） */
.md-sidebar--secondary .md-sidebar__scrollwrap {
    /* Firefox：預設隱藏 */
    scrollbar-width: none;
}

/* 當 hover 或滾動時顯示滾動條 */
.md-sidebar--secondary .md-sidebar__scrollwrap.is-hovering,
.md-sidebar--secondary .md-sidebar__scrollwrap.is-scrolling {
    scrollbar-width: thin;
    scrollbar-color: #cccccc transparent !important;
}

/* WebKit 瀏覽器（Chrome, Safari, Edge） */
.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

/* 移除上下箭頭 */
.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-button {
    display: none;
}

/* hover 或滾動時顯示滾動條 */
.md-sidebar--secondary .md-sidebar__scrollwrap.is-hovering::-webkit-scrollbar,
.md-sidebar--secondary .md-sidebar__scrollwrap.is-scrolling::-webkit-scrollbar {
    width: 8px;
}

.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-track {
    background: transparent !important;
}

.md-sidebar--secondary .md-sidebar__scrollwrap.is-hovering::-webkit-scrollbar-track,
.md-sidebar--secondary .md-sidebar__scrollwrap.is-scrolling::-webkit-scrollbar-track {
    background: transparent !important;
}

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

.md-sidebar--secondary .md-sidebar__scrollwrap.is-hovering::-webkit-scrollbar-thumb,
.md-sidebar--secondary .md-sidebar__scrollwrap.is-scrolling::-webkit-scrollbar-thumb {
    background: #cccccc !important;
}

.md-sidebar--secondary .md-sidebar__scrollwrap.is-hovering::-webkit-scrollbar-thumb:hover,
.md-sidebar--secondary .md-sidebar__scrollwrap.is-scrolling::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3 !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;
}

/* 桌機版：增加左右兩側邊欄與內容區之間的留白，讓版面更寬鬆（參考 Vortex 網站，預設樣式） */
.md-main__inner {
    /* 控制整體內容寬度並置中 */
    max-width: 72rem;
    margin: 0 auto;

    /* 左右內距，讓整體離瀏覽器邊緣有空間 */
    padding-inline: 2.5rem;

    /* 左側導航、主內容、右側目錄之間的間距 */
    column-gap: 3rem;
}

/* 手機版：防止側邊欄自動滾動到當前頁面位置，強制顯示最外層 */
/* 手機版：所有手機版樣式統一在這裡 */
@media screen and (max-width: 768px) {
    /* 覆蓋上面的規則，只有直接指向當前頁面的連結顯示為選中 */
    /* 注意：只針對左側導航（.md-nav--primary），不影響右側目錄 */
    /* 左側導航：父級項目（只有 for 屬性的標題）不顯示為選中 */
    
    /* 左側導航：只有直接指向當前頁面的連結顯示為選中 */
    .md-nav--primary .md-nav__item--active > .md-nav__link[href].md-nav__link--active {
        color: #E22F3D !important;
    }
    
    /* 防止側邊欄自動滾動到當前頁面位置，強制顯示最外層 */
    /* 當側邊欄打開時，確保從頂部開始顯示 */
    .md-nav--primary .md-sidebar__scrollwrap {
        scroll-behavior: auto !important;
    }
    
    /* 確保側邊欄打開時顯示最外層 */
    .md-nav--primary[data-md-level="0"] .md-nav__list {
        scroll-margin-top: 0 !important;
    }
    
    /* 防止自動滾動到活動項目 */
    .md-nav--primary .md-nav__item--active {
        scroll-margin: 0 !important;
    }
    
    /* 手機版：只在側邊欄打開時強制隱藏嵌套導航（初始狀態） */
    /* 注意：這不會阻止用戶點擊展開，因為 Material 主題會自動設置 aria-expanded="true" */
    /* 手機版 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__link .md-nav__link--active{
        color: #E22F3D !important;
    }

    /* 手機版導航連結 hover 顏色 */
    .md-nav--primary .md-nav__link:hover {
        color: #E22F3D !important;
    }
    
    /* 手機版：只有直接指向當前頁面的連結（有 href 且是 active）顯示為選中（紅色） */
    .md-nav--primary .md-nav__item--active > .md-nav__link[href].md-nav__link--active {
        color: #E22F3D !important;
    }
    
    
    /* 手機版導航項目背景 */
    .md-nav--primary .md-nav__item {
        background-color: transparent !important;
    }

    .md-nav__icon:hover {
        background-color: rgba(226, 47, 61, 0.05) !important;
    }
    
    /* 手機版主內容區域背景和樣式重置 */
    .md-main__inner {
        background-color: white !important;
        /* 重置桌機版樣式 */
        max-width: none;
        margin: 0;
        padding-inline: 0;
        column-gap: 0;
    }
    
    /* 手機版容器背景 */
    .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__nav-links{
        margin-right: 0rem;
        gap: 0.5rem;
        padding: 0 0.5rem;
    }

    .md-header__nav-link {
        font-size: 13px !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;
    }
    
    /* 手機版：header 與主內容區對齊 */
    .md-header__inner {
        /* 手機版重置桌機版樣式 */
        max-width: none;
        margin: 0;
        /* 手機版使用與主內容相同的左右 padding */
        padding-inline: 1rem;
        padding-block: 8px;
    }
    
    /* 手機版：主內容區域的左右 padding */
    .md-content {
        padding-inline: 1rem;
    }
}