/* ==========================================================================
   Super Module - 前台智慧目錄 (TOC) & 浮動按鈕樣式
   Version: 15.3 (修正版 - 左側☰圖示, 右側文字切換)
   ========================================================================== */

/* ==========================================================================
   1. 內嵌目錄樣式 (#toc_container)
   ========================================================================== */

#toc_container {
    margin: 30px auto 40px;
    box-sizing: border-box;
    padding: 25px 32px;
    background: #fff;
    border-top: 4px solid var(--hd-toc-theme-color, #6bb6ff);
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    border-radius: 8px;
    display: table;
}

/* --- 重置 --- */
#toc_container ul, #toc_container li {
    list-style: none !important;
    background: none !important;
    padding: 0; margin: 0;
}
.entry-content #toc_container ul li::before,
.entry-content #toc_container ul li::after {
    content: none !important;
}

/* --- 標題 --- */
#toc_container .toc_title {
    font-weight: bold;
    font-size: 1.2rem;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #333;
}

/* ▼▼▼【核心修正：左側主圖示樣式】▼▼▼ */
/* 移除舊的 Dashicon ::before 樣式 */
#toc_container .toc_title::before {
    content: none !important;
}
/* 為新的 ☰ span 添加樣式 */
#toc_container .toc-main-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px; /* 可改為 50% 變圓形 */
    background-color: var(--hd-toc-theme-color, #6bb6ff);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}
/* ▲▲▲【修正結束】▲▲▲ */


/* ▼▼▼【核心修正：右側文字切換按鈕樣式】▼▼▼ */
#toc_container .toc_toggle { margin-left: auto; }
#toc_container .toc_toggle a {
    font-size: 13px;
    font-weight: normal;
    padding: 2px 6px;
    color: #888;
    background-color: #f0f0f0;
    border-radius: 4px;
    text-decoration: none;
}
/* ▲▲▲【修正結束】▲▲▲ */


/* --- 列表容器 --- */
#toc_container p.toc_title + ul.toc_list {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid #eee;
}

/* --- 列表通用 --- */
#toc_container li { position: relative; }
#toc_container a { text-decoration: none; display: inline-block; transition: color .2s; color: #333; line-height: 1.7; }
#toc_container a:hover { color: var(--hd-toc-theme-color, #6bb6ff); }
/* H2 主層級 */
#toc_container > ul.toc_list > li { display: flex; align-items: center; padding: 8px 0; }
#toc_container > ul.toc_list > li > a { font-size: 1rem; font-weight: bold; }
#toc_container { counter-reset: toc-h2-counter; }
#toc_container > ul.toc_list > li::before { counter-increment: toc-h2-counter; content: counter(toc-h2-counter) !important; display: flex !important; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin-right: 12px; border-radius: 50%; background-color: var(--hd-toc-theme-color, #6bb6ff); color: #fff; font-size: 14px; font-weight: bold; }
/* H3 子層級 */
#toc_container > ul.toc_list > li > ul.toc_list { margin-top: 8px; padding-left: 14px; position: relative; width: 100%; }
#toc_container > ul.toc_list > li.has-children > ul.toc_list::before { content: '' !important; display: block !important; position: absolute; top: -8px; bottom: 8px; left: 0; border-left: 2px dashed #d0e0f0; }
#toc_container > ul.toc_list > li > ul.toc_list li { padding: 4px 0 4px 25px; }
#toc_container > ul.toc_list > li > ul.toc_list li a { font-size: 0.9rem; font-weight: normal; color: #555; }
#toc_container > ul.toc_list > li > ul.toc_list li::before { content: '\f141' !important; font-family: dashicons; display: flex !important; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); left: 0; color: var(--hd-toc-theme-color, #6bb6ff); font-size: 16px; }

/* --- RWD --- */
@media only screen and (max-width: 667px) {
    #toc_container { padding: 20px; width: auto; display: block; }
}

/* ==========================================================================
   2. 浮動按鈕 (TOC & Back to Top)
   ========================================================================== */
.hd-floating-buttons { position: fixed; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
.hd-floating-buttons.pos-right { right: 20px; }
.hd-floating-buttons.pos-left { left: 20px; }
.hd-floating-buttons:not([class*="btt-fixed-"]) { top: 50%; transform: translateY(-50%); }
.hd-floating-buttons.btt-fixed-bottom-right { top: auto; bottom: 30px; right: 20px; left: auto; transform: none; }
.hd-floating-buttons.btt-fixed-bottom-left { top: auto; bottom: 30px; left: 20px; right: auto; transform: none; }
.hd-floating-buttons.btt-pos-above { flex-direction: column-reverse; }
#hd-toc-floating-button, #hd-back-to-top-button { width: 50px; height: 50px; border-radius: 50%; color: white; border: none; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.2s, background-color 0.2s; }
#hd-toc-floating-button:hover, #hd-back-to-top-button:hover { transform: scale(1.1); }
#hd-toc-floating-container { position: relative; }
#hd-toc-floating-button { font-size: 24px; line-height: 1; padding: 0; }
#hd-toc-floating-nav { position: absolute; top: 50%; background: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); width: 300px; max-height: 70vh; padding: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: scale(0.95) translateY(-50%); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; }
.hd-floating-buttons.pos-right #hd-toc-floating-nav { right: calc(100% + 10px); transform-origin: right center; }
.hd-floating-buttons.pos-left #hd-toc-floating-nav { left: calc(100% + 10px); transform-origin: left center; }
#hd-toc-floating-container.is-active #hd-toc-floating-nav { opacity: 1; visibility: visible; transform: scale(1) translateY(-50%); }
.hd-toc-nav-inner { padding: 15px 20px; overflow-y: auto; flex-grow: 1; }
#hd-toc-floating-nav .toc_title { font-size: 16px; font-weight: bold; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
#hd-toc-floating-nav ul, #hd-toc-floating-nav li { list-style: none; padding: 0; margin: 0; }
#hd-toc-floating-nav a { text-decoration: none; color: #333; display: block; padding: 6px 0; border-radius: 4px; transition: background-color 0.2s; }
#hd-toc-floating-nav a:hover { background-color: #f0f0f0; }
#hd-toc-floating-nav .toc-level-3 a { padding-left: 20px; }
#hd-toc-floating-nav .toc-level-4 a { padding-left: 40px; }
#hd-toc-floating-nav .toc-level-5 a { padding-left: 60px; }
#hd-toc-floating-nav .toc-level-6 a { padding-left: 80px; }
.hd-toc-btt-wrapper { padding: 10px 20px; border-top: 1px solid #e9ecef; }
.hd-toc-back-to-top { font-weight: bold; }
#hd-back-to-top-button { background: rgba(0, 0, 0, 0.5); flex-direction: column; line-height: 1; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.3s, visibility 0.3s, transform 0.3s; }
#hd-back-to-top-button:hover { background: rgba(0, 0, 0, 0.7); }
#hd-back-to-top-button.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.hd-btt-arrow { font-size: 14px; }
.hd-btt-text { font-size: 10px; font-weight: bold; margin-top: 2px; }