/*
═══════════════════════════════════════════════════════════════
   NAV — 頂部導覽列
═══════════════════════════════════════════════════════════════
*/

.nav-wrap {
    position: sticky;
    top: 0;
    z-index: 80;
    background: var(--bone);
    /* border-bottom 移除（v0.4.5：依使用者要求拿掉 Header / Footer 明顯分界線）。
       若要還原，改回 border-bottom: 1px solid var(--linen); */
    border-bottom: none;
    transition: background .35s ease, border-color .35s ease;
}

/* v0.4.9：is-hidden 只收 nav-right + hamburger（向上 fade-out），logo 留在原地不動。
   nav-wrap 本身不再 translateY 整個容器。 */
.nav-wrap.is-hidden .nav-right,
.nav-wrap.is-hidden .nav-burger {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}
.nav-burger {
    transition: opacity .35s var(--ease-moon), transform .35s var(--ease-moon);
}
.nav-wrap .dusk-bar { transition: opacity .35s ease; }

/* 滾動向下時：壓縮成 pill 形狀 */
.nav-wrap.compact {
    background: transparent;
    border-bottom-color: transparent;
    pointer-events: none;
}
.nav-wrap.compact .dusk-bar { opacity: 0; }
.nav-wrap.compact .nav-logo,
.nav-wrap.compact .nl,
.nav-wrap.compact .nav-tools button,
.nav-wrap.compact .nav-tools a { pointer-events: auto; }

.nav {
    max-width: var(--max);
    margin: 0 auto;
    padding: 16px 40px;
    display: grid;
    /* 桌機：[Logo] [...1fr 填滿...] [nav-right 靠右] [hamburger 桌機隱藏] */
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 32px;
    transition: padding .35s cubic-bezier(.4, 0, .2, 1);
}
.nav-wrap.compact .nav { padding: 14px 40px; }
.nav-wrap.compact .nav-right {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}
.nav-right { transition: opacity .3s ease, transform .3s ease; }

/* nav-right：包 menu links + tools，靠右排列 */
.nav-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 28px;
}


/* ─── Hamburger（手機才顯示）────────────────── */
.nav-burger {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 38px;
    height: 38px;
    padding: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    justify-self: end;
}
.burger-bar {
    width: 22px;
    height: 1.5px;
    background: var(--twilight);
    transition: transform .35s var(--ease-moon), opacity .25s ease;
}
.nav-burger[aria-expanded="true"] .burger-bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.nav-burger[aria-expanded="true"] .burger-bar:nth-child(2) {
    opacity: 0;
}
.nav-burger[aria-expanded="true"] .burger-bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}


/* ─── Logo ─────────────────────────────────── */
.nav-logo {
    justify-self: start;
    cursor: pointer;
    line-height: 1;
    font-family: var(--ff-d);
    font-size: 26px;
    font-style: italic;
    font-weight: 300;
    letter-spacing: -.01em;
    color: var(--twilight);
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    transition: all .4s cubic-bezier(.4, 0, .2, 1), box-shadow .35s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    box-shadow: 0 0 0 rgba(31, 36, 51, 0);
    text-decoration: none;
}
.nav-logo .lg-sub {
    font-family: var(--ff-m);
    font-style: normal;
    font-size: 8.5px;
    letter-spacing: .32em;
    color: var(--mist);
    text-transform: uppercase;
    opacity: .8;
    transition: opacity .3s ease, max-height .35s ease;
    max-height: 14px;
    overflow: hidden;
}
/* v0.9.33：logo 放大。
   夜喃那組是「圓 + 中文 + 英文」三層資訊，40px 太小 ——
   英文那一行在 40px 高的時候只剩一團模糊。
   桌機 64px / 捲動後 44px / 手機 48px，
   三個狀態各自給值，不要讓它在捲動時突然縮一半。 */
.nav-logo-img {
    max-height: 76px;
    width: auto;
    /* v0.9.34：再放大一階。nav 的上下 padding 同步從 22 收到 16，
       76 + 32 = 108px 總高 —— 跟原本 58 + 44 = 102 差不多，
       但 logo 本身大了 31%。 */
    transition: max-height .35s cubic-bezier(.4, 0, .2, 1);
}

/* 捲動後 nav 變窄，logo 跟著收，但不要收太多 */
.nav-wrap.compact .nav-logo-img {
    max-height: 52px;
}
/* 深淺色模式自動切換 Logo（用 !important 避免被其他規則蓋掉） */
.nav-logo-img-light                       { display: none !important; }
[data-theme="light"] .nav-logo-img-dark   { display: none !important; }
[data-theme="light"] .nav-logo-img-light  { display: inline-block !important; }
.nav-wrap.compact .nav-logo {
    font-size: 17px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    pointer-events: auto;
    justify-self: center;
    align-items: center;
}
.nav-wrap.compact .nav-logo .lg-sub {
    opacity: 0;
    max-height: 0;
    margin: 0;
}


/* ─── 選單連結 ─────────────────────────────── */
.nav-links {
    justify-self: center;
    display: flex;
    gap: 2px;
    align-items: center;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-links li { display: inline-flex; }
.nav-links a {
    font-family: var(--ff-m);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--twilight);
    padding: 7px 11px;
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 1.5px solid transparent;
    transition: color .15s, border-color .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
}
.nav-links a:hover,
.nav-links .current-menu-item a,
.nav-links .current_page_item a {
    color: var(--plum);
    border-bottom-color: var(--plum);
}


/* ─── 右側工具區（主題切換 + 語言切換）──────── */
.nav-tools {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.theme-tog {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    /* v0.4.11：改圓形（依使用者要求） */
    border-radius: 50%;
    border: 1px solid var(--linen-2);
    background: transparent;
    cursor: pointer;
    color: var(--mist);
    transition: color .2s, border-color .2s;
}
.theme-tog:hover { color: var(--plum); border-color: var(--plum); }
.theme-tog svg { width: 14px; height: 14px; display: block; }
.theme-tog .moon-i { display: block; }
.theme-tog .sun-i  { display: none; }
[data-theme="light"] .theme-tog .moon-i { display: none; }
[data-theme="light"] .theme-tog .sun-i  { display: block; }


/* ─── 語言切換（v0.4.11：大圓角藥丸形）─────────── */
.lang-tog {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--linen-2);
    /* 圓角極大 = 藥丸形（依使用者要求） */
    border-radius: 999px;
    overflow: hidden;
}
.lbtn {
    font-family: var(--ff-m);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .18em;
    padding: 7px 14px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--mist);
    transition: all .2s;
    text-decoration: none;
}
.lbtn:hover { color: var(--twilight); }
.lbtn.active { background: var(--twilight); color: var(--bone); }


/* ─── 手機版 ─────────────────────────────────── */
@media (max-width: 880px) {
    .nav {
        padding: 12px 20px;
        grid-template-columns: auto 1fr auto;
        gap: 8px;
    }
    .nav-logo { font-size: 18px; }
    .nav-logo .lg-sub { display: none; }
    .nav-logo-img { max-height: 60px; }
    .nav-wrap.compact .nav-logo-img { max-height: 44px; }

    /* 桌機的 nav-right 在手機變成 overlay：半透明、字小、靠上 */
    .nav-right {
        position: fixed;
        inset: 0;
        background: rgba(15, 20, 25, .82);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 22px;
        padding: 96px 24px 40px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity .35s var(--ease-moon),
                    transform .35s var(--ease-moon);
        z-index: 70;
    }
    [data-theme="light"] .nav-right {
        background: rgba(222, 225, 230, .82);
    }
    .nav-right.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* overlay 內的 menu links 大字直排 */
    .nav-right .nav-links {
        flex-direction: column;
        align-items: center;
        gap: 18px;
        max-width: none;
        overflow: visible;
        padding: 0;
        list-style: none;
    }
    .nav-right .nav-links a {
        font-size: 17px;
        font-family: var(--ff-d);
        font-weight: 300;
        padding: 2px 0;
        letter-spacing: -.01em;
    }

    /* hamburger 顯示 */
    .nav-burger {
        display: flex;
        position: relative;
        z-index: 75;
    }

    /* compact 狀態在手機不適用 */
    .nav-wrap.compact .nav-right {
        /* 不要動 opacity / pointer-events，由 .is-open 控制 */
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
    }
    .nav-wrap.compact .nav-right.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
}


/* ═══════════════════════════════════════════════════════════════
   v0.7.4：手機版漢堡選單體驗強化
   
   問題：Anny 反映手機版 toggle 跟漢堡並排，外面不要出現
   解法：
   1. 雙重保險：手機版 nav-right 非 is-open 時，nav-tools 完全隱藏
   2. Overlay 內 toggle 變大 + 加 label「切換模式」讓功能更明顯
═══════════════════════════════════════════════════════════════ */

@media (max-width: 880px) {
    /* 保險：除非 overlay 打開，否則 nav-tools 完全隱藏（雙重保險） */
    .nav-right:not(.is-open) .nav-tools {
        display: none !important;
    }

    /* Overlay 內：nav-tools 放大、置中 */
    .nav-right.is-open .nav-tools {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 12px;
        padding-top: 24px;
        border-top: 1px solid var(--linen-2);
        width: 100%;
        max-width: 280px;
        align-items: center;
    }

    /* Overlay 內 theme-tog：只放圖示，不放文字（v0.9.16）
       圖示本身已經說明用途，文字反而讓 overlay 變吵。
       無障礙靠 <button> 上的 aria-label，不受影響。 */
    .nav-right.is-open .theme-tog {
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
    }

    .nav-right.is-open .theme-tog::after { content: none; }

    .nav-right.is-open .theme-tog svg {
        width: 17px;
        height: 17px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   nav-btn（v0.8.0）
   後台「外觀 → 選單」給任一選單項目加上 CSS 類別「nav-btn」，
   該項目即變成與語言切換同款的框線藥丸按鈕。
═══════════════════════════════════════════════════════════════ */
.nav-links li.nav-btn a {
    border: 1px solid var(--linen-2);
    border-radius: 999px;
    padding: 7px 14px;
}
.nav-links li.nav-btn a:hover,
.nav-links li.nav-btn.current-menu-item a,
.nav-links li.nav-btn.current_page_item a {
    color: var(--plum);
    border-color: var(--plum);
}

@media (max-width: 880px) {
    /* 手機選單裡維持藥丸形（蓋過手機版 padding: 2px 0） */
    .nav-right .nav-links li.nav-btn a {
        padding: 8px 22px;
        font-size: 16px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   lang-circle（v0.8.2）
   語言切換改為單一圓圈：中文站顯示「中」、英文站顯示「En」，
   點擊切換到另一語言。
═══════════════════════════════════════════════════════════════ */
.lang-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--linen-2);
    border-radius: 50%;
    font-family: var(--ff-m);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--mist);
    text-decoration: none;
    transition: all .2s;
}
.lang-circle:hover {
    color: var(--plum);
    border-color: var(--plum);
}

@media (max-width: 880px) {
    .lang-circle {
        width: 40px;
        height: 40px;
        font-size: 12px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   v0.9.36 · Header 搜尋
   —— 放在語言切換旁邊。點一下才展開，不佔常駐空間。
   ═══════════════════════════════════════════════════════════════ */

.nav-search-tog {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--linen-2, var(--linen));
    border-radius: 50%;
    background: none;
    color: var(--mist);
    cursor: pointer;
    padding: 0;
    transition: color var(--t-hover) var(--ease-moon),
                border-color var(--t-hover) var(--ease-moon);
}
.nav-search-tog:hover {
    color: var(--plum);
    border-color: var(--plum);
}
.nav-search-tog svg { width: 15px; height: 15px; display: block; }
.nav-search-tog:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }

/* ─── Overlay ─────────────────────────────────
   桌機手機同一套。用 fixed 蓋滿，內容盒置中偏上。 */
.nav-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 20px 20px;
    opacity: 0;
    /* ⚠ v0.9.39 修正：display:flex 會蓋掉 HTML 的 hidden 屬性，
       結果 overlay 一直存在、蓋滿畫面，只是透明 —— 整個 header 點不到。
       用 [hidden] 明確關掉，並加 pointer-events 當第二道保險。 */
    pointer-events: none;
    transition: opacity .24s var(--ease-moon);
}
.nav-search-overlay[hidden] { display: none !important; }
.nav-search-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.nav-search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 14, .82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
[data-theme="light"] .nav-search-backdrop { background: rgba(240, 240, 243, .88); }

.nav-search-box {
    position: relative;
    width: 100%;
    max-width: 620px;
    max-height: 76vh;
    overflow-y: auto;
    background: var(--bone-2, var(--bone));
    border: 1px solid var(--linen-2, var(--linen));
    border-radius: 4px;
    padding: 30px 28px 26px;
    transform: translateY(-10px);
    transition: transform .28s var(--ease-moon);
}
.nav-search-overlay.is-open .nav-search-box { transform: translateY(0); }

.nav-search-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--mist);
    cursor: pointer;
    padding: 0;
    transition: color var(--t-hover) var(--ease-moon);
}
.nav-search-close:hover { color: var(--plum-hi); }
.nav-search-close svg { width: 18px; height: 18px; }

/* 開啟時鎖住背景捲動 */
html.nm-search-open,
html.nm-search-open body { overflow: hidden; }

/* ─── 輸入列 ─── */
.nav-search-form {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--linen-2, var(--linen));
    padding-bottom: 10px;
}
.nav-search-form:focus-within { border-bottom-color: var(--plum); }

.nav-search-form input[type="search"] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    outline: none;
    font-family: inherit;
    font-size: 19px;
    font-weight: 300;
    color: var(--twilight);
    padding: 6px 0;
    -webkit-appearance: none;
}
.nav-search-form input::placeholder { color: var(--mist-soft); }
.nav-search-form input::-webkit-search-cancel-button { -webkit-appearance: none; }

.nav-search-form button[type="submit"] {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--mist);
    cursor: pointer;
    padding: 0;
    transition: color var(--t-hover) var(--ease-moon);
}
.nav-search-form button[type="submit"]:hover { color: var(--plum); }
.nav-search-form button[type="submit"] svg { width: 17px; height: 17px; }

/* ─── 範圍提示 ─── */
.nav-search-scope {
    margin-top: 10px;
    font-family: var(--ff-m);
    font-size: 10.5px;
    letter-spacing: .1em;
    color: var(--mist-soft);
}

/* ─── 即時建議 ─── */
.nav-search-results {
    display: none;
    margin-top: 20px;
}
.nav-search-results.is-on { display: block; }

.nsr-group { margin-bottom: 16px; }
.nsr-group:last-of-type { margin-bottom: 8px; }

.nsr-label {
    font-family: var(--ff-m);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--plum-hi);
    margin-bottom: 6px;
    opacity: .85;
}

.nsr-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 8px 7px 0;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--linen);
    transition: color var(--t-hover) var(--ease-moon),
                padding-left var(--t-hover) var(--ease-moon);
}
.nsr-item:last-child { border-bottom: 0; }
.nsr-item:hover {
    color: var(--plum-hi);
    padding-left: 6px;
}
.nsr-item:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

.nsr-title {
    font-size: 14.5px;
    line-height: 1.5;
    font-weight: 300;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.nsr-meta {
    flex: none;
    font-family: var(--ff-m);
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--mist-soft);
}

.nsr-empty {
    margin: 4px 0;
    font-size: 13.5px;
    color: var(--mist);
}

.nsr-all {
    display: inline-block;
    margin-top: 6px;
    font-family: var(--ff-m);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--plum-hi);
    text-decoration: none;
}
.nsr-all:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 880px) {
    .nsr-title { font-size: 14.5px; }
    .nsr-item  { padding: 10px 8px 10px 0; }
}