@charset "utf-8";

/* =========================================
   1. 無障礙說明區塊 (Access Key Description)
   ========================================= */
.access-key-descr { background: #f8fafc; border-radius: 16px; padding: 40px; margin-bottom: 60px; border: 1px solid #e2e8f0; }
.access-key-descr h2 { font-size: 2rem; color: #0f172a; margin-bottom: 24px; font-weight: 800; letter-spacing: -0.025em; }
.access-key-descr p { color: #64748b; font-size: 1.1rem; line-height: 1.6; margin-bottom: 30px; }
.access-key-descr h3 { font-size: 1.35rem; margin: 30px 0 20px; color: #1e293b; display: flex; align-items: center; }
.access-key-descr h3::before { content: "●"; color: var(--primary-color); font-size: 0.8rem; margin-right: 10px; }
.access-key-descr ul { list-style: none; padding: 0; }
.access-key-descr ul li { margin-bottom: 15px; color: #475569; padding-left: 25px; position: relative; line-height: 1.7; }
.access-key-descr ul li::before { content: "→"; position: absolute; left: 0; color: #94a3b8; }

/* =========================================
   2. 虛擬鍵盤風格標籤 (Keyboard Style)
   ========================================= */
.keyborad { display: inline-block; min-width: 24px; text-align: center; background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%); border: 1px solid #cbd5e1; border-radius: 6px; padding: 2px 8px; margin: 0 3px; font-size: 0.85rem; font-weight: 600; color: #334155; box-shadow: 0 2px 0 #cbd5e1, 0 3px 0 rgba(0,0,0,0.05); font-family: var(--font-family); }

/* =========================================
   3. 網站地圖容器與網格 (Sitemap Grid)
   ========================================= */
.sitemap-container { margin-top: 40px; }
#ContentPlaceHolder1_wpSitemap { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; list-style: none; padding: 0; }

/* =========================================
   4. 網站地圖項目與連結 (Sitemap Items)
   ========================================= */
#ContentPlaceHolder1_wpSitemap > li { background: #ffffff; border: 1px solid #f1f5f9; border-radius: 12px; padding: 25px; transition: all 0.3s ease; }
#ContentPlaceHolder1_wpSitemap > li:hover { transform: translateY(-5px); box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1); border-color: var(--primary-color); }
#ContentPlaceHolder1_wpSitemap > li > a { display: block; font-size: 1.25rem; font-weight: bold; color: #1e293b; text-decoration: none; margin-bottom: 15px; position: relative; padding-bottom: 10px; }
#ContentPlaceHolder1_wpSitemap > li > a::after { content: ""; position: absolute; bottom: 0; left: 0; width: 30px; height: 3px; background: var(--primary-color); border-radius: 10px; }

/* =========================================
   5. 子選單清單 (Submenu)
   ========================================= */
.nav-submenu { list-style: none; padding: 0; }
.nav-submenu li { padding: 8px 0; border-bottom: 1px dashed #f1f5f9; }
.nav-submenu li:last-child { border: none; }
.nav-submenu li a { color: #64748b; text-decoration: none; font-size: 0.95rem; transition: all 0.2s ease; display: block; }
.nav-submenu li a:hover { color: var(--primary-color); transform: translateX(5px); }

/* =========================================
   6. 網站地圖響應式設計 (Sitemap RWD)
   ========================================= */
@media (max-width: 62rem) { #ContentPlaceHolder1_wpSitemap { grid-template-columns: repeat(2, 1fr); gap: 20px; } .access-key-descr { padding: 30px; } .access-key-descr h2 { font-size: 1.75rem; } }
@media (max-width: 48rem) { #ContentPlaceHolder1_wpSitemap { grid-template-columns: 1fr; } .access-key-descr { padding: 20px; margin-bottom: 40px; } .access-key-descr h2 { font-size: 1.5rem; } .access-key-descr p { font-size: 1rem; } }

/* =========================================
   針對 4.css 的深色模式補強 (Dark Mode for Sitemap & Access Keys)
   ========================================= */

/* 1. 無障礙說明區塊 (Access Key Description) */
.wrapper.dark .access-key-descr {
    background: #1e1e1e !important;   /* 深灰背景 */
    border-color: #333 !important;   /* 深色邊框 */
    color: var(--text-color) !important;
}

.wrapper.dark .access-key-descr h2 {
    color: #ffffff !important;
}

.wrapper.dark .access-key-descr p, 
.wrapper.dark .access-key-descr ul li {
    color: var(--text-muted) !important;
}

.wrapper.dark .access-key-descr h3 {
    color: var(--primary-color) !important;
}

.wrapper.dark .access-key-descr ul li::before {
    color: #555 !important; /* 箭頭顏色變暗 */
}

/* 2. 虛擬鍵盤風格標籤 (Keyboard Style) */
.wrapper.dark .keyborad {
    background: linear-gradient(180deg, #333 0%, #1a1a1a 100%) !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
    box-shadow: 0 2px 0 #000, 0 3px 0 rgba(0,0,0,0.3) !important;
}

/* 4. 網站地圖項目 (Sitemap Items) */
.wrapper.dark #ContentPlaceHolder1_wpSitemap > li {
    background: var(--card-bg) !important;
    border-color: #333 !important;
}

.wrapper.dark #ContentPlaceHolder1_wpSitemap > li:hover {
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.5) !important;
    border-color: var(--primary-color) !important;
}

.wrapper.dark #ContentPlaceHolder1_wpSitemap > li > a {
    color: #ffffff !important;
}

/* 5. 子選單清單 (Submenu) */
.wrapper.dark .nav-submenu li {
    border-bottom-color: #333 !important; /* 修改虛線顏色 */
}

.wrapper.dark .nav-submenu li a {
    color: var(--text-muted) !important;
}

.wrapper.dark .nav-submenu li a:hover {
    color: var(--primary-color) !important;
}

html.Font-Large .access-key-descr p { font-size:calc( 1.1rem * 1.1 ); }
html.Font-Small .access-key-descr p { font-size:calc( 1.1rem * 0.9 ); }
html.Font-Large .access-key-descr h3 { font-size:calc( 1.35rem * 1.1 ); }
html.Font-Small .access-key-descr h3 { font-size:calc( 1.35rem * 0.9 ); }
html.Font-Large #ContentPlaceHolder1_wpSitemap > li > a { font-size:calc( 1.25rem * 1.1 ); }
html.Font-Small #ContentPlaceHolder1_wpSitemap > li > a { font-size:calc( 1.25rem * 0.9 ); }
html.Font-Large .nav-submenu li a { font-size:calc( 0.95rem * 1.1 ); }
html.Font-Small .nav-submenu li a { font-size:calc( 0.95rem * 0.9 ); }