/* ========================================================================
   1. [全站核心]
   ======================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');

/* 全站字體設定 */
body, h1, h2, h3, h4, h5, h6, p, a, input, button, select, textarea { 
    font-family: "Noto Sans TC", sans-serif !important; 
}

/* 全站基本樣式 */
body { 
    font-size: 16px; 
    line-height: 1.6; 
    color: #333333 !important; /* 基本文字深灰 */
    background-color: #ffffff !important; 
    padding-top: 170px !important; 
}

/* 確保文章內容區文字絕對是深色 */
#sp-main-body, 
#sp-main-body .sppb-addon-content, 
#sp-main-body .article-details,
#sp-main-body p {
    color: #333333 !important;
}

/* ========================================================================
   2. [終極修正] 文章標題顏色 (強制桃紅色 #c7004c)
   說明：這段代碼會強制覆蓋所有層級的標題顏色，包含被 span 包住的文字
   ======================================================================== */
h1, h2, h3, h4, h5, h6, 
.article-title, .page-header h2, .sppb-addon-title, .entry-title,
/* 針對連結 */
h1 a, h2 a, h3 a, .article-title a,
/* 針對標題內可能存在的 span (這是導致之前沒變色的主因) */
h1 span, h2 span, h3 span, .article-title span,
h1 a span, h2 a span { 
    color: #c7004c !important; /* 核心目標色：桃紅色 */
    font-weight: 700 !important; 
    text-shadow: none !important; 
    text-decoration: none !important;
    background: transparent !important;
    fill: #c7004c !important; /* 預防圖標顏色 */
}

/* 滑鼠移上去的顏色 (加深一點的桃紅) */
.article-title a:hover, h2 a:hover, .article-title a:hover span {
    color: #a0003c !important; 
}

/* ========================================================================
   3. [電腦版專用排版] (> 992px)
   (維持原本穩定的 Header 與 Menu 排版)
   ======================================================================== */
@media (min-width: 992px) {
    /* (A) Logo 區 */
    #sp-header {
        background-color: #ffffff !important;
        position: fixed !important;
        top: 0 !important; left: 0 !important; width: 100% !important; height: 130px !important;
        z-index: 1000 !important;
        display: block !important; 
        box-shadow: none !important;
    }

    #sp-header > .container {
        max-width: 1280px !important; width: 95% !important; margin: 0 auto !important;
        height: 100% !important;
        display: flex !important;
        align-items: flex-start !important; 
        justify-content: space-between !important;
        padding: 30px 20px 0 20px !important; /* 上方保留空間 */
    }

    /* (B) 選單 區 (藍色底) */
    #sp-menu {
        background-color: #003366 !important;
        position: fixed !important;
        top: 130px !important; 
        left: 0 !important; width: 100% !important;
        z-index: 999 !important;
        margin: 0 !important; border-radius: 0 !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    }
    #sp-menu > .container {
        max-width: 1280px !important; width: 95% !important; margin: 0 auto !important; padding: 0 20px !important;
    }

    #sp-logo { order: 1 !important; margin-right: 20px !important; }
    .logo-image { max-height: 90px !important; width: auto !important; }
    
    /* (C) 右側按鈕與搜尋區 */
    #sp-top2 { 
        order: 2 !important; 
        flex: 1 !important; 
        display: flex !important; 
        justify-content: flex-end !important; 
        align-items: flex-start !important; 
        padding-top: 5px !important; 
        flex-wrap: wrap !important; /* 允許換行 */
    }
    
    /* 強制按鈕與搜尋分家 */
    #sp-top2 .sp-module { margin-bottom: 5px !important; }
    
    #sp-top2 .search, 
    #sp-top2 .sp-module-search {
        width: 100% !important; 
        min-width: 250px !important;
        margin-top: 15px !important; /* 拉開距離 */
        display: block !important;
        clear: both !important;
    }

    #sp-menu .burger-icon { display: none !important; }
    
    /* Menu 文字 */
    #sp-menu .sp-megamenu-parent > li > a, #sp-menu .sp-megamenu-parent > li > span { 
        color: #ffffff !important; font-weight: 500 !important; line-height: 50px !important; padding: 0 15px !important;
    }
    #sp-menu .sp-megamenu-parent > li > a:hover { color: #ffcc00 !important; }
}

/* ========================================================================
   4. [手機版專用排版] (< 991px)
   ======================================================================== */
@media (max-width: 991px) {
    body { padding-top: 150px !important; }

    #sp-header {
        background-color: #ffffff !important;
        position: fixed !important;
        top: 0 !important; left: 0 !important; width: 100% !important;
        z-index: 1000 !important;
        padding-bottom: 10px !important; height: auto !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    }

    #sp-menu {
        position: static !important; background: transparent !important;
        height: 0 !important; padding: 0 !important; margin: 0 !important; z-index: 1001 !important;
    }

    /* 漢堡按鈕 */
    #sp-menu .burger-icon {
        display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important;
        background-color: #003366 !important; border-radius: 4px !important;
        padding: 8px 12px !important; width: auto !important; height: 44px !important;
        position: fixed !important; top: 25px !important; right: 15px !important;
        z-index: 10002 !important; padding-left: 45px !important;
        transition: transform 0.3s ease-in-out !important;
    }
    #sp-menu .burger-icon::before {
        content: "選單" !important; color: #ffffff !important; font-size: 15px !important; font-weight: bold !important;
        position: absolute !important; left: 8px !important; top: 50% !important; transform: translateY(-50%) !important; display: block !important;
    }
    #sp-menu .burger-icon > span {
        display: block !important; width: 22px !important; height: 2px !important; background-color: #fff !important; margin: 2.5px 0 !important; border-radius: 2px !important;
    }

    .my-custom-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; }
    
    #sp-logo { 
        width: 100% !important; 
        padding: 25px 0 0 15px !important; 
        margin-bottom: 10px !important; 
    }
    .logo-image { max-height: 60px !important; width: auto !important; }

    #sp-top2 {
        width: 100% !important; display: flex !important; flex-wrap: wrap !important; 
        justify-content: flex-end !important; align-items: center !important; 
        padding-right: 15px !important; padding-bottom: 10px !important; gap: 5px !important;
    }
    #sp-top2 input[name="q"] { width: 130px !important; height: 32px !important; }
    .sp-module .btn, .sp-module a.btn { padding: 4px 8px !important; font-size: 13px !important; }
}

/* ========================================================================
   5. [通用元件 & 卡片化]
   ======================================================================== */
div[itemprop="blogPost"], .blog-item, .item-page, .article-details, .article {
    background-color: #fffbfc !important; 
    /* 邊框顏色維持桃紅 */
    border-top: 4px solid #c7004c !important; 
    border-left: 1px solid #ffcdd2 !important; 
    border-right: 1px solid #ffcdd2 !important; 
    border-bottom: 1px solid #ffcdd2 !important; 
    box-shadow: 0 4px 10px rgba(199, 0, 76, 0.05) !important; 
    padding: 30px !important; 
    border-radius: 4px !important; 
    margin-bottom: 30px !important;
    color: #333333 !important;
}
.article-featured-badge, span.badge.bg-danger { display: none !important; }

div.attachmentsList table tr, div.attachmentsList table td { background: none !important; border-bottom: 1px solid #ffcdd2 !important; }
div.attachmentsList a { color: #0056b3 !important; } 
div.attachmentsList a:hover { color: #c7004c !important; }

/* ========================================================================
   6. [手機選單樣式]
   ======================================================================== */
.offcanvas-menu .sp-module-title { display: none !important; }
.offcanvas-menu ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.offcanvas-menu ul li { border-bottom: 1px solid rgba(0,0,0,0.05) !important; position: relative !important; }

/* 連結文字深色 */
.offcanvas-menu ul li a, .offcanvas-menu ul li span { 
    display: block !important; 
    padding: 12px 15px !important; 
    color: #333333 !important; 
    font-size: 15px !important; 
    font-weight: 500 !important; 
}
.offcanvas-menu ul li ul { display: none !important; background-color: #f8f9fa !important; padding-left: 20px !important; }
.offcanvas-menu ul li.menu-open > ul { display: block !important; }

/* 漢堡展開後的 + 號按鈕 (桃紅色) */
.my-custom-toggler { 
    position: absolute !important; top: 0 !important; right: 0 !important; 
    width: 50px !important; height: 48px !important; 
    display: flex !important; align-items: center !important; justify-content: center !important; 
    font-size: 20px !important; 
    color: #c7004c !important; /* 桃紅色 */
    font-weight: bold !important; cursor: pointer !important; z-index: 50 !important; 
}
.offcanvas-menu ul li.menu-open > .my-custom-toggler { transform: rotate(45deg); transition: transform 0.3s ease !important; }
.offcanvas-menu .menu-toggler, .offcanvas-menu .offcanvas-inner .menu-toggler { display: none !important; }
.offcanvas-menu ul li > a::after { display: none !important; }

/* ========================================================================
   7. [頂部按鈕與搜尋框] (深藍色系)
   ======================================================================== */
.sp-module .btn, 
.sp-module a.btn,
.wfu-top-btn { 
    background-color: #0b2447 !important; 
    color: #ffffff !important;            
    border: 1px solid #0b2447 !important;
    border-radius: 4px !important; 
    padding: 5px 15px !important; 
    text-decoration: none !important; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important; 
    margin-right: 5px !important;
    margin-bottom: 5px !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.sp-module .btn:hover, 
.sp-module a.btn:hover,
.wfu-top-btn:hover {
    background-color: #1a4a8d !important; 
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
}

.sp-module .search, 
#sp-top2 .search {
    margin-top: 15px !important; 
    display: block !important;
    clear: both !important;
    width: 100% !important;
}

.sp-module input[type="text"], 
#sp-top2 input[name="q"] {
    border-radius: 20px !important;
    border: 1px solid #ccc !important;
    padding: 5px 15px !important;
    background: #f9f9f9 !important;
    color: #333333 !important; 
    width: 100% !important;
    max-width: 300px !important; 
}

/* Header 動畫 */
#sp-header, #sp-menu { transition: transform 0.3s ease-in-out !important; }
body.smart-hidden #sp-header, body.smart-hidden #sp-menu, body.smart-hidden .burger-icon { transform: translateY(-300px) !important; }
.my-custom-header, #sp-logo, #sp-top2 { position: relative !important; transform: none !important; border: none !important; box-shadow: none !important; outline: none !important; }

/* ========================================================================
   8. [極小螢幕與零散設定補齊]
   ======================================================================== */
@media (max-width: 576px) {
    .logo-image, .logo-image-phone { 
        height: 36px !important; 
        max-height: 36px !important; 
    }
}

#sp-top2 { 
    background-color: #FFFFFF !important; 
}

/* ========================================================================
   9. [下拉選單懸停背景色]
   ======================================================================== */
#sp-menu .sp-dropdown li.sp-menu-item > a:hover,
#sp-menu .sp-dropdown li.sp-menu-item > span:hover {
    background-color: #f2f2f2 !important; /* 懸停時的背景色 (此為淺灰，可自訂色碼) */
    display: block !important;
    transition: background-color 0.2s ease !important;
}