/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 07 2026 | 03:43:21 */
/* =======================================================
    最新消息單元全域優化版 文章列表 + 分類頁 + 文章內頁
======================================================= */

/* ---------------------------------------------------
    1. 文章區塊卡片化 (共用設計)
--------------------------------------------------- */
/* 內頁與列表共用的卡片基礎外觀 */
.single-post .site-content .article-inner,
.woodmart-archive-blog .blog-post-loop .article-inner {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden; /* 確保內容不會超出圓角外框 */
}

/* 單篇文章專屬內距與陰影 */
.single-post .site-content .article-inner {
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04); 
}

/* 列表頁與分類頁文章卡片 (增加視覺微互動) */
.woodmart-archive-blog .blog-post-loop .article-inner {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 100%; 
}

.woodmart-archive-blog .blog-post-loop .article-inner:hover {
    transform: translateY(-6px); 
    box-shadow: 0 20px 38px rgba(55, 162, 70, 0.08); /* 融入淡淡品牌綠陰影，增加高級感 */
}

/* 列表縮圖圓角與 Hover 放大特效 */
.woodmart-archive-blog .blog-post-loop .entry-thumbnail {
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}
.woodmart-archive-blog .blog-post-loop .entry-thumbnail img {
    border-radius: 16px 16px 0 0;
    transition: transform 0.5s ease;
}
.woodmart-archive-blog .blog-post-loop .article-inner:hover .entry-thumbnail img {
    transform: scale(1.04); /* 懸浮時圖片微微放大，打破死板 */
}

/* 手機版內距優化，保留最大閱讀空間 */
@media (max-width: 768px) {
    .single-post .site-content .article-inner {
        padding: 24px 20px;
    }
}

/* ---------------------------------------------------
    2. 標題與內文排版 (Typography)
--------------------------------------------------- */
/* 單篇文章 H1 標題 */
.single-post h1.post-title.wd-entities-title {
    font-size: clamp(24px, 4vw, 34px) !important; 
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.3px;
    color: #1a1a1a;
    margin-bottom: 25px !important; 
}

/* 列表頁 H3 標題 */
.woodmart-archive-blog h3.post-title.wd-entities-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.45;
    margin: 15px 20px 10px; 
}
.woodmart-archive-blog h3.post-title.wd-entities-title a {
    color: #1a1a1a;
    transition: color 0.2s ease;
}
.woodmart-archive-blog h3.post-title.wd-entities-title a:hover {
    color: #37A246; /* 懸浮時標題變品牌綠 */
}

.blog-design-masonry .post-title {
    font-size: 16px !important; /* 【可自行調整】例如：20px, 22px 或 1.4rem */
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

/* 單篇文章內文優化（黃金可讀性設定） */
.single-post .entry-content {
    font-size: 17px;
    line-height: 1.85;
    color: #333333;
    letter-spacing: 0.2px;
}
.single-post .entry-content p {
    margin-bottom: 24px;
}
.single-post .entry-content h2 {
    font-size: 24px;
    font-weight: 700;
    color: #37A246;
    margin: 45px 0 20px;
    padding-left: 14px;
    border-left: 5px solid #37A246; 
}
.single-post .entry-content ul {
    padding-left: 24px;
    margin-bottom: 30px;
}
.single-post .entry-content li {
    margin-bottom: 12px;
}
.single-post .entry-content a {
    color: #37A246;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 600;
}
.single-post .entry-content a:hover {
    color: #267031;
}

/* 列表頁摘要文字內距 */
.woodmart-archive-blog .entry-content.wd-entry-content {
    padding: 0 20px 20px;
    font-size: 14.5px;
    color: #666666;
    line-height: 1.6;
}

/* ---------------------------------------------------
    3. 分類標籤、日期與作者資訊
--------------------------------------------------- */
/* 分類標籤外框強制重置 (消除主題干擾，三頁同步：內頁 + news組件 + 原生分類頁) */
html body .wd-post-cat,
html body .meta-post-categories,
html body .meta-categories-wrapp {
    display: block !important;
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* 分類標籤本體質感大一統 (正綠色 6% 微綠底 + 6px 圓角) */
html body .wd-post-cat a,
html body .meta-post-categories a {
    display: inline-flex !important; 
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(55, 162, 70, 0.06) !important; 
    color: #37A246 !important; 
    padding: 6px 14px !important; /* 增加上下左右內距，提升質感 */
    border-radius: 6px !important; 
    font-size: 12px !important; 
    font-weight: 600 !important; 
    letter-spacing: 0.5px !important; 
    line-height: 1.2 !important; 
    text-transform: uppercase !important; 
    text-decoration: none !important; 
    border: 1px solid rgba(55, 162, 70, 0.12) !important; 
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    margin: 0 4px 4px 0 !important;
}

/* 分類標籤滑鼠懸浮特效大一統 */
html body .wd-post-cat a:hover,
html body .meta-post-categories a:hover {
    background-color: #37A246 !important; 
    color: #ffffff !important;
    border-color: #37A246 !important;
    transform: translateY(-2px) !important; 
    box-shadow: 0 4px 12px rgba(55, 162, 70, 0.2) !important; 
}

/* 日期作者列 */
.woodmart-archive-blog .entry-meta.wd-entry-meta,
.archive.category .entry-meta.wd-entry-meta {
    padding: 0 20px;
    margin-bottom: 15px;
}
.single-post .entry-meta-list {
    border-bottom: 1px solid #F0F0F0;
    padding-bottom: 20px;
    margin-bottom: 30px;
}
.single-post .meta-author img.avatar,
.woodmart-archive-blog .meta-author img.avatar,
.archive.category .meta-author img.avatar {
    border-radius: 50%;
}

/* ---------------------------------------------------
    4. 側邊欄 (Sidebar) 優化
--------------------------------------------------- */
.single-post aside.sidebar-container .widget-area,
.woodmart-archive-blog aside.sidebar-container .widget-area {
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.single-post aside.sidebar-container .widget-title,
.woodmart-archive-blog aside.sidebar-container .widget-title {
    font-size: 18px;
    font-weight: 700;
    color: #1A1A1A !important; 
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #F0F0F0;
    position: relative;
}

.single-post aside.sidebar-container .widget-title::after,
.woodmart-archive-blog aside.sidebar-container .widget-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: #37A246;
}

.single-post .widget_categories a,
.woodmart-archive-blog .widget_categories a {
    transition: all 0.2s ease;
    display: block;
    padding: 6px 0;
    color: #444444;
}
.single-post .widget_categories a:hover,
.woodmart-archive-blog .widget_categories a:hover {
    color: #37A246 !important; 
    padding-left: 8px; 
}

.single-post .woodmart-recent-posts-list .recent-posts-thumbnail img,
.woodmart-archive-blog .woodmart-recent-posts-list .recent-posts-thumbnail img {
    border-radius: 8px;
}

/* ---------------------------------------------------
    5. 消除主題冗餘視覺與強制重置 Bug (合併優化版)
--------------------------------------------------- */
.single-post .page-title.title-blog,
.single-post .entry-header .wd-post-date,
.woodmart-archive-blog .entry-header .wd-post-date {
    display: none !important;
}

.single-post .entry-header .entry-thumbnail img {
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

/* 強制展開與召回分類標籤 (消除橘色底與絕對定位) */
html body.woodmart-archive-blog .blog-post-loop .meta-categories-wrapp,
html body.woodmart-archive-blog .blog-post-loop .meta-post-categories.wd-style-with-bg,
.single-post .meta-post-categories {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important; 
    background: transparent !important; 
    height: auto !important;
}

.single-post .meta-post-categories {
    margin-bottom: 15px !important; 
    padding: 0 !important; 
}

html body.woodmart-archive-blog .blog-post-loop .meta-categories-wrapp {
    padding: 25px 20px 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

html body.woodmart-archive-blog .blog-post-loop .meta-post-categories.wd-style-with-bg {
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
}

html body.woodmart-archive-blog .blog-post-loop .meta-post-categories.wd-style-with-bg a {
    position: relative !important;
    z-index: 99 !important;
}

/* ---------------------------------------------------
    6. 喚醒被 WoodMart 原廠隱藏的「小字日期」
--------------------------------------------------- */
.single-post .entry-meta-list .modified-date,
.woodmart-archive-blog .entry-meta-list .modified-date {
    display: inline-flex !important; 
    align-items: center;
    margin-right: 15px; 
    color: #777777; 
    font-size: 14px;
}

.single-post .entry-meta-list .modified-date::before,
.woodmart-archive-blog .entry-meta-list .modified-date::before {
    content: "\f017"; 
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    margin-right: 6px;
    color: #37A246; 
}

.single-post .entry-meta-list .meta-reply,
.woodmart-archive-blog .entry-meta-list .meta-reply {
    display: none !important;
}

.woodmart-archive-blog .blog-post-loop.blog-style-flat .article-body-container {
    margin-top: 0 !important; 
}

/* =========================================================
    7. 全域表格優化 (修正為一致的品牌綠色系，精緻化細節)
========================================================= */
table.mobile-scroll-table, 
table.mobile-card-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 30px;
    font-size: 15px;
    line-height: 1.6;
    border: 1px solid #eef2ef; /* 使用非常淡的綠灰色邊框 */
    border-radius: 8px;
    overflow: hidden;
}

/* 【修正】：表頭背景改為專業深綠/深灰調，頂線改為品牌正綠色 */
table.mobile-scroll-table th, 
table.mobile-card-table th {
    background-color: #213A26; /* 沉穩的 B2B 特調深森林綠 */
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 16px;
    text-align: left;
    border-top: 4px solid #37A246; /* 【修正】原橘色改為 EasyPack 品牌綠點綴 */
    border-bottom: none;
}

table.mobile-scroll-table td, 
table.mobile-card-table td {
    padding: 16px;
    color: #333333;
    border-bottom: 1px solid #eef2ef; 
}

/* 隔行變色優化：使用更柔和的背景色 */
table.mobile-scroll-table tr:nth-child(even) td {
    background-color: #f9fbf9; /* 帶有極微量綠色調的白，視覺更舒適 */
}

/* 桌機版 Hover 效果修正 */
@media screen and (min-width: 769px) {
    table.mobile-scroll-table tbody tr:hover td {
        background-color: #edf6ee; /* 【修正】Hover 時由原本的橘色氛圍改為品牌綠點綴 */
        transition: background-color 0.2s ease;
    }
}

/* 手機版橫向滑動與凍結首欄優化 */
@media screen and (max-width: 768px) {
    table.mobile-scroll-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: inset -10px 0 12px -12px rgba(0,0,0,0.1); 
    }
    
    table.mobile-scroll-table tbody {
        display: table;
        min-width: 650px; 
    }

    table.mobile-scroll-table th:first-child,
    table.mobile-scroll-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        border-right: 2px solid #e2eee4; 
        box-shadow: 4px 0 8px -4px rgba(0,0,0,0.04); 
    }
    
    table.mobile-scroll-table th:first-child {
        background-color: #1a2d1e; /* 凍結首欄表頭加深 */
    }

    table.mobile-scroll-table td:first-child {
        background-color: #ffffff;
        font-weight: 600; 
        color: #1a1a1a;
    }

    table.mobile-scroll-table tr:nth-child(even) td:first-child {
        background-color: #f9fbf9; 
    }
}
/* =======================================================
    8. 解決 WPBakery Blog Shortcode 組件卡片跑版
======================================================= */

/* 1. 瞄準 Shortcode 卡片主體，強制轉為 flex 佈局並同步高度 */
.blog-shortcode .blog-post-loop .article-inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
}

/* 2. 修正 Shortcode 中的內文與標題包裹區，讓它自動垂直長大撐滿空間 */
.blog-shortcode .blog-post-loop .article-inner > .entry-content,
.blog-shortcode .blog-post-loop .article-body-container {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; /* 核心：強迫中間多餘空間自動延伸 */
    padding: 0 20px 20px !important;
    margin: 0 !important;
}

/* 3. 實施 line-clamp 技術：限制該區塊中的 H3 標題最多只顯示 2 行 */
.blog-shortcode h3.post-title.wd-entities-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* 限制標題最多 2 行 */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    
    /* 設定安全最小高度：即使標題只有 1 行，也會空出 2 行的水平空間對齊隔壁 */
    min-height: 2.8em !important; 
    margin: 15px 0 12px 0 !important;
    padding: 0 !important;
}

/* 4. 限制該區塊中的文章簡介摘要最多只顯示 3 行 */
.blog-shortcode .entry-content.wd-entry-content p,
.blog-shortcode .blog-post-loop .entry-content:not(.wd-entry-content) {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 15px !important;
}

/* 5. 強制將卡片最底部的「日期/作者資訊」推到卡片的最底端 */
.blog-shortcode .blog-post-loop .entry-meta.wd-entry-meta,
.blog-shortcode .blog-post-loop .meta-categories-wrapp,
.blog-shortcode .blog-post-loop .hovered-social-icons {
    margin-top: auto !important; /* 關鍵：利用 flex 剩餘空間推回底部對齊 */
}