/* ===========================
   layouts - 全站共用樣式
   =========================== */

/* 頁面基礎佈局，使 footer 自動貼底；背景色與 footer 同色，讓下半部視覺統一 */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #343a40;
    margin: 0;
}

/* body 內層白色包覆區塊，涵蓋 header 與主內容，與深色 footer 區隔 */
.body-inner {
    background-color: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 頂部導覽列 */
.site-header {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 15px 0;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
}

/* 導覽列內部排版 */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 網站 Logo 樣式 */
.site-logo {
    font-size: 1.5em;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-logo:hover {
    text-decoration: none;
    color: #0056b3;
}

/* Logo 連結鍵盤聚焦指示 (WCAG 2.4.7 Focus Visible) */
.site-logo:focus-visible {
    outline: 2px solid #1e293b;
    outline-offset: 2px;
    border-radius: 4px;
}

/* 頁尾區塊 */
.site-footer {
    background-color: #343a40;
    color: #adb5bd;
    padding: 40px 0;
    margin-top: auto;
}

/* 主要內容區域，撐滿剩餘空間 */
.main-wrapper {
    flex: 1;
    width: 100%;
}

/* 頁尾連結樣式，確保對比度與聚焦可見 (WCAG 1.4.3 / 2.4.7) */
.site-footer a {
    color: #dee2e6; /* 淺灰白文字，與 #343a40 背景對比度約 9.5:1 */
    text-decoration: underline;
}

.site-footer a:hover {
    color: #fff;
}

.site-footer a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ===========================
   Cookie 同意橫幅
   =========================== */

/* 橫幅固定於頁面底部，確保使用者進入頁面時能立即看見 */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #1e293b;
    color: #e2e8f0;
    padding: 20px 0;
    z-index: 9999;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
}

/* 內部排版：左側文字、右側按鈕 */
.cookie-consent-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* 說明文字區塊佔據剩餘空間 */
.cookie-consent-text {
    flex: 1;
}

/* 標題文字樣式 */
.cookie-consent-title {
    font-size: 1.05em;
    font-weight: 700;
    margin-bottom: 6px;
    color: #fff;
}

/* Cookie 圖示與標題文字間距 */
.cookie-consent-title i {
    margin-right: 6px;
    color: #fbbf24;
}

/* 說明段落文字樣式 */
.cookie-consent-desc {
    font-size: 0.875em;
    line-height: 1.6;
    margin-bottom: 0;
    color: #cbd5e1;
}

/* 隱私權政策連結樣式，確保對比度符合 WCAG 1.4.3 */
.cookie-consent-desc a {
    color: #93c5fd;
    text-decoration: underline;
}

.cookie-consent-desc a:hover {
    color: #bfdbfe;
}

/* 隱私權政策連結鍵盤聚焦指示 (WCAG 2.4.7) */
.cookie-consent-desc a:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
    border-radius: 2px;
}

/* 按鈕容器，兩顆按鈕並排 */
.cookie-consent-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* 按鈕共用樣式 */
.cookie-consent-btn {
    white-space: nowrap;
    font-size: 0.875em;
    padding: 8px 20px;
    border-radius: 6px;
}

/* 「僅接受必要」按鈕邊框色彩 */
.cookie-consent-btn.btn-outline-secondary {
    border-color: #94a3b8;
    color: #e2e8f0;
}

.cookie-consent-btn.btn-outline-secondary:hover {
    background-color: #334155;
    border-color: #cbd5e1;
    color: #fff;
}

/* 按鈕鍵盤聚焦指示 (WCAG 2.4.7) */
.cookie-consent-btn:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

/* 小螢幕裝置：改為垂直堆疊排列 */
@media (max-width: 768px) {
    .cookie-consent-inner {
        flex-direction: column;
        text-align: center;
    }

    .cookie-consent-actions {
        width: 100%;
        flex-direction: column;
    }

    .cookie-consent-btn {
        width: 100%;
    }
}

/* Windows 高對比模式支援 - 全站共用元件 */
@media (forced-colors: active) {
    .site-logo:focus-visible {
        outline-color: Highlight;
    }

    /* 高對比模式下 Cookie 橫幅按鈕邊框可見 */
    .cookie-consent-btn:focus-visible {
        outline-color: Highlight;
    }
}

.adsbygoogle {
    display:block;
    text-align:center;
}

/* ===========================
   頁面雙欄佈局 (共用)
   =========================== */

/* 雙欄佈局外層容器，限制最大寬度並水平置中 */
.page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px;
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* 右側廣告側欄，固定寬度 300px 對應標準廣告尺寸 */
.page-sidebar {
    width: 300px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
}

/* 側欄中每則廣告的間距 */
.page-sidebar-ad {
    margin-bottom: 20px;
}

/* 平板以下側欄改為全寬並排列在主內容下方 */
@media (max-width: 992px) {
    .page-wrapper {
        flex-direction: column;
    }

    .page-sidebar {
        width: 100%;
        position: static;
    }
}

/* ===========================
   more-tools - 更多工具推薦區塊（跨頁面共用）
   =========================== */

/* 更多工具區塊外層，與上方內容保持間距 */
.more-tools {
    margin-top: 32px;
}

/* 更多工具標題 */
.more-tools-title {
    font-size: 1.375em;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 更多工具標題圖示顏色 */
.more-tools-title i {
    color: #64748b;
    font-size: 0.9em;
}

/* 更多工具卡片清單 */
.more-tools-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 更多工具卡片（整張卡片為連結） */
.more-tools-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* 卡片懸停效果 */
.more-tools-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

/* 工具資訊區域，自動填滿剩餘空間 */
.more-tools-info {
    flex: 1;
    min-width: 0;
}

/* 工具名稱 */
.more-tools-name {
    font-size: 1em;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px;
    line-height: 1.3;
}

/* 工具描述文字，超過兩行以省略號截斷 */
.more-tools-desc {
    font-size: 0.875em;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 右側箭頭圖示 */
.more-tools-arrow {
    color: #94a3b8;
    font-size: 0.875em;
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}

/* 懸停時箭頭向右移動並變色 */
.more-tools-card:hover .more-tools-arrow {
    transform: translateX(4px);
    color: #3b82f6;
}

/* 卡片鍵盤聚焦指示 (WCAG 2.4.7) */
.more-tools-card:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* 小螢幕時調整卡片內邊距 */
@media (max-width: 768px) {
    .more-tools-card {
        padding: 14px 16px;
        gap: 12px;
    }

    /* 小螢幕描述文字限制一行 */
    .more-tools-desc {
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
}

/* 尊重使用者減少動態效果的偏好設定 (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    .more-tools-card,
    .more-tools-arrow {
        transition: none;
    }
}

/* Windows 高對比模式支援 */
@media (forced-colors: active) {
    .more-tools-card {
        border-color: CanvasText;
    }

    .more-tools-card:focus-visible {
        outline-color: Highlight;
    }
}