/* ==========================================================================
   WAGI Smart TOC — 主題整合覆寫
   顏色一律取自 assets/css/color-tokens.css，本檔不定義任何色碼
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero

   外掛原本是為了「header 不是固定定位」的主題寫的，版面直接從畫面最上緣開始。
   本主題的 .site-header 是 position:fixed，內容不往下推就會被壓在底下 ——
   麵包屑整條看不到。這塊 Hero 同時解決兩件事：把內容推下來，
   並給麵包屑一塊有品牌感的底。
   -------------------------------------------------------------------------- */
.wagi-hero {
    position: relative;
    width: 100%;
    /* 固定 header 的高度。手機版 style.css 會把 --header-height 改成 60px，
       這裡跟著變，不用另外寫 media query。 */
    margin-top: var(--header-height);
    background: linear-gradient(
        180deg,
        var(--color-gradient-from) 0%,
        var(--color-gradient-to) 100%
    );
    border-bottom: 1px solid var(--color-border-light);
    overflow: hidden;
}

/* 後台有設定 Hero 圖片時，圖片蓋在漸層上；沒設定就維持漸層 */
.wagi-hero--has-image {
    background-image: var(--wagi-hero-image);
    background-size: cover;
    background-position: center;
}

.wagi-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 26px 40px;
}

/* 有底圖時壓一層暗色，麵包屑才讀得到 */
.wagi-hero--has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(0 0 0 / 35%);
}

.wagi-hero--has-image .wagi-hero-inner {
    padding-top: 56px;
    padding-bottom: 56px;
}

/* --------------------------------------------------------------------------
   Hero 裡的麵包屑
   -------------------------------------------------------------------------- */
.wagi-hero .wagi-breadcrumb {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-light);
    /* 分類名稱長的時候寧可橫向捲動，也不要換行把 Hero 撐高 */
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wagi-hero .wagi-breadcrumb a {
    color: var(--color-text-light);
    text-decoration: none;
}

.wagi-hero .wagi-breadcrumb a:hover {
    color: var(--color-secondary);
}

.wagi-hero .wagi-breadcrumb-sep {
    margin: 0 8px;
    color: var(--color-grey);
}

.wagi-hero .wagi-breadcrumb-current {
    color: var(--color-text-muted);
}

/* 有底圖時底色變深，麵包屑要反白 */
.wagi-hero--has-image .wagi-breadcrumb,
.wagi-hero--has-image .wagi-breadcrumb a,
.wagi-hero--has-image .wagi-breadcrumb-current {
    color: var(--color-white);
}

.wagi-hero--has-image .wagi-breadcrumb a:hover {
    color: var(--color-accent-light);
}

.wagi-hero--has-image .wagi-breadcrumb-sep {
    color: var(--color-white);
    opacity: 0.6;
}

/* --------------------------------------------------------------------------
   內容區

   .wagi-main 原本沒有上方間距（外掛預期自己是頁面最上緣的元素）。
   Hero 已經負責把位置推下來，這裡只補內容與 Hero 之間的呼吸空間。
   -------------------------------------------------------------------------- */
.wagi-main {
    padding-top: 40px;
    /* 保險：萬一 Hero 沒輸出（例如版型被改回外掛原版），
       至少不要讓內容整片藏在固定 header 底下。
       正常情況下由下面那條把它歸零。 */
    margin-top: var(--header-height);
}

.wagi-hero + .wagi-main {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   手機版
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .wagi-hero-inner {
        padding: 18px 20px;
    }

    .wagi-hero--has-mobile-image {
        background-image: var(--wagi-hero-image-mobile);
    }

    .wagi-hero--has-image .wagi-hero-inner {
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .wagi-hero .wagi-breadcrumb {
        font-size: 12px;
    }

    .wagi-main {
        padding-top: 24px;
    }
}

/* --------------------------------------------------------------------------
   內文沒有 H2/H3 時的版面

   目錄整個不輸出（見 template-parts/wagi/single.php），
   左欄就會空出來 —— 讓內文自己往左補上，不要留一塊空白。
   -------------------------------------------------------------------------- */
.wagi-toc-inner--no-toc {
    justify-content: center;
}

.wagi-toc-inner--no-toc > .wagi-toc-article {
    max-width: 900px;
}