/*[ MOTTO 導覽列（注入至 Quartz 產生的頁面） ]
---------------------------------------------------------
複製自 main-page 的 styles/Home.module.css 與 globals.css 的 --app-* 色票。
原站用 float 排版，這裡改用 flex —— 視覺結果相同，但不必依賴 float 的堆疊順序。

變數一律加 --mottojp- 前綴，避免和 Quartz 自己的 --* 撞名。
深色模式跟隨 Quartz 的 [saved-theme]，沒有該屬性時（JS 尚未執行）退回
prefers-color-scheme。 */
:root {
    --mottojp-nav-height: 2.5rem;
    --mottojp-nav-bg: rgba(255, 255, 255, 0.82);
    --mottojp-nav-solid: #ffffff;
    --mottojp-nav-text: #1b2430;
    --mottojp-nav-muted: #5b6673;
    --mottojp-nav-subtle: #8a95a2;
    --mottojp-nav-border: rgba(16, 24, 40, 0.08);
    --mottojp-nav-hover: rgba(16, 24, 40, 0.05);
    --mottojp-nav-surface: #ffffff;
    --mottojp-nav-sunken: #edf0f5;
    --mottojp-nav-accent: #3563e9;
    --mottojp-nav-accent-hover: #2a51c8;
    --mottojp-nav-accent-contrast: #ffffff;
    --mottojp-nav-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --mottojp-nav-shadow-md: 0 2px 8px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.05);
    --mottojp-nav-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.13), 0 2px 8px rgba(16, 24, 40, 0.06);
    --mottojp-nav-ease: cubic-bezier(0.2, 0, 0.2, 1);
    --mottojp-nav-duration: 160ms;
    --mottojp-nav-duration-lg: 260ms;
}

@media (prefers-color-scheme: dark) {
    :root:not([saved-theme="light"]) {
        --mottojp-nav-bg: rgba(18, 21, 27, 0.82);
        --mottojp-nav-solid: #14171d;
        --mottojp-nav-text: #e6e9ee;
        --mottojp-nav-muted: #a3adba;
        --mottojp-nav-subtle: #7c8593;
        --mottojp-nav-border: rgba(255, 255, 255, 0.08);
        --mottojp-nav-hover: rgba(255, 255, 255, 0.07);
        --mottojp-nav-surface: #171a20;
        --mottojp-nav-sunken: #12151b;
        --mottojp-nav-accent: #6b8dff;
        --mottojp-nav-accent-hover: #89a4ff;
        --mottojp-nav-accent-contrast: #0e1014;
        --mottojp-nav-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --mottojp-nav-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.3);
        --mottojp-nav-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
    }
}

:root[saved-theme="dark"] {
    --mottojp-nav-bg: rgba(18, 21, 27, 0.82);
    --mottojp-nav-solid: #14171d;
    --mottojp-nav-text: #e6e9ee;
    --mottojp-nav-muted: #a3adba;
    --mottojp-nav-subtle: #7c8593;
    --mottojp-nav-border: rgba(255, 255, 255, 0.08);
    --mottojp-nav-hover: rgba(255, 255, 255, 0.07);
    --mottojp-nav-surface: #171a20;
    --mottojp-nav-sunken: #12151b;
    --mottojp-nav-accent: #6b8dff;
    --mottojp-nav-accent-hover: #89a4ff;
    --mottojp-nav-accent-contrast: #0e1014;
    --mottojp-nav-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --mottojp-nav-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.3);
    --mottojp-nav-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Quartz 的版面自己捲動，導覽列固定在視窗頂端，內容整體往下推。 */
body {
    padding-top: var(--mottojp-nav-height);
}

/*[ 嵌入模式（iframe） ]
---------------------------------------------------------
主站的「更多細節」是用 iframe 開知識庫筆記（DetailLinkBlock），彈窗裡再出現一次
同一條導覽列既是重複，也吃掉本來就只有 75vh 的高度。

判斷的依據是「有沒有被嵌」（window.self !== window.top，由 inject-navbar.mjs 注入
的 inline script 掛上這個 class），不是網址參數：彈窗開起來之後還會繼續點到別篇
筆記，不論走 SPA 還是整頁載入，參數都會在第一次跳頁就掉，被嵌這件事不會。

也不必擔心被外站觸發：只有 /knowledgebase/ 這個 location 回 X-Frame-Options
SAMEORIGIN，server 層的預設是 DENY（見 main-page 的 nginx/conf/service.conf）。 */
.mottojp-embedded body {
    padding-top: 0;
}

.mottojp-embedded .mottojp-nav,
.mottojp-embedded .mottojp-dropdown,
.mottojp-embedded .mottojp-left-panel,
.mottojp-embedded .mottojp-top-panel {
    display: none;
}

.mottojp-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--mottojp-nav-height);
    background-color: var(--mottojp-nav-bg);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    color: var(--mottojp-nav-text);
    border-bottom: 1px solid var(--mottojp-nav-border);
    /* 站名過長時只截斷，不得把列撐高 —— 撐高會蓋住下面的內容，
       因為 body 的 padding-top 是固定值。 */
    overflow: hidden;
    z-index: 1000;
}

.mottojp-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.mottojp-nav .mottojp-title {
    margin: 0.25rem;
    font-size: 1.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* 站名要吃掉中間所有剩餘空間，把連結推到最右邊；min-width: 0 讓它在空間
   不足時真的能被壓縮，否則 flex 項目會撐到內容寬度而擠爆整列。 */
.mottojp-nav .mottojp-title:not(.mottojp-panel-control) {
    margin-right: auto;
    min-width: 0;
}

.mottojp-nav .mottojp-title img {
    height: 2rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.mottojp-nav .mottojp-title a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mottojp-nav .mottojp-title a,
.mottojp-nav .mottojp-link > a {
    color: inherit;
    text-decoration: none;
    background-image: none;
}

.mottojp-nav .mottojp-link {
    margin: 0 0.25rem;
    padding: 0 0.5rem;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    white-space: nowrap;
    color: var(--mottojp-nav-muted);
    border-radius: 0.375rem;
    transition: color var(--mottojp-nav-duration) var(--mottojp-nav-ease),
                background-color var(--mottojp-nav-duration) var(--mottojp-nav-ease);
}

/* 原站註解：以放大字級表示 hover 會讓整列跳動，改用色彩與底色回饋 */
.mottojp-nav .mottojp-link:hover {
    color: var(--mottojp-nav-text);
    background-color: var(--mottojp-nav-hover);
}

/*[ 面板開合鈕（CTA 側欄、手機選單） ]
---------------------------------------------------------*/
.mottojp-nav .mottojp-panel-control {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0.25rem;
    padding: 0 0.25rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--mottojp-nav-muted);
    border-radius: 0.375rem;
    transition: color var(--mottojp-nav-duration) var(--mottojp-nav-ease),
                background-color var(--mottojp-nav-duration) var(--mottojp-nav-ease);
}

.mottojp-nav .mottojp-panel-control:hover {
    color: var(--mottojp-nav-text);
    background-color: var(--mottojp-nav-hover);
}

.mottojp-nav .mottojp-panel-control[hidden] {
    display: none;
}

/*[ 管理員限定的項目 ]
---------------------------------------------------------
navbar.js 確認登入後才把 hidden 拿掉。.mottojp-link 之類的類別自己帶了
display，權重蓋得過 [hidden] 的瀏覽器預設值，所以比照上面明寫一條。 */
.mottojp-nav [data-mottojp-admin-only][hidden],
.mottojp-top-panel [data-mottojp-admin-only][hidden] {
    display: none;
}

/*[ 實驗功能下拉 ]
---------------------------------------------------------
下拉本體在 <nav> 外面（見 navbar.html 的說明），所以選擇器不能掛在
.mottojp-nav 底下。 */
.mottojp-nav .mottojp-menu-link > a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
}

/* 下拉箭頭跟著文字走，比字略大一點就好，不要喧賓奪主 */
.mottojp-nav .mottojp-menu-link > a > i {
    font-size: 1.2rem;
    line-height: 1;
}

/* 固定在導覽列正下方的右側，不依賴觸發元素的位置 —— 這正是它可以被搬到
   <nav> 外面的原因。留在裡面的話會被導覽列的 overflow: hidden 裁掉：
   backdrop-filter 使導覽列成為 fixed 子元素的 containing block，fixed 定位
   因此逃不出那個裁切。 */
.mottojp-dropdown {
    position: fixed;
    top: var(--mottojp-nav-height);
    right: 0.5rem;
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    min-width: 8rem;
    padding: 0.25rem;
    background-color: var(--mottojp-nav-solid);
    border: 1px solid var(--mottojp-nav-border);
    border-radius: 0.5rem;
    box-shadow: var(--mottojp-nav-shadow-lg);
    user-select: none;
    z-index: 1001;
}

.mottojp-dropdown[hidden] {
    display: none;
}

.mottojp-dropdown a {
    padding: 0.4rem 0.6rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    white-space: nowrap;
    color: var(--mottojp-nav-muted);
    text-decoration: none;
    background-image: none;
}

.mottojp-dropdown a:hover {
    color: var(--mottojp-nav-text);
    background-color: var(--mottojp-nav-hover);
}

/*[ CTA 側欄 ]
---------------------------------------------------------
對應原站的 .leftPanel。收合是把寬度收成 0，而不是 display: none，
才有和原站一樣的滑出動畫。 */
.mottojp-left-panel {
    position: fixed;
    left: 0;
    top: var(--mottojp-nav-height);
    height: calc(100% - var(--mottojp-nav-height));
    width: 24rem;
    max-width: 90vw;
    padding: 0.5rem;
    overflow: hidden;
    background-color: var(--mottojp-nav-solid);
    color: var(--mottojp-nav-text);
    border-right: 1px solid var(--mottojp-nav-border);
    box-shadow: var(--mottojp-nav-shadow-lg);
    z-index: 999;
    transition: width var(--mottojp-nav-duration-lg) var(--mottojp-nav-ease),
                padding var(--mottojp-nav-duration-lg) var(--mottojp-nav-ease);
}

.mottojp-left-panel.mottojp-collapsed {
    width: 0rem;
    padding: 0rem;
    border-right-color: transparent;
    box-shadow: none;
}

.mottojp-left-panel-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 23rem;
    max-width: 100%;
}

/*[ CTA 區塊 ]
---------------------------------------------------------
對應 components/index/CTABlock.module.css。 */
.mottojp-cta {
    width: 100%;
    padding: 1rem;
    background-color: var(--mottojp-nav-surface);
    color: var(--mottojp-nav-text);
    border: 1px solid var(--mottojp-nav-border);
    border-radius: 0.5rem;
    box-shadow: var(--mottojp-nav-shadow-sm);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.mottojp-cta-title {
    font-weight: 600;
    color: var(--mottojp-nav-text);
}

.mottojp-cta-content {
    white-space: pre-wrap;
    color: var(--mottojp-nav-muted);
}

.mottojp-cta-button {
    padding: 0.35rem 0.9rem;
    margin-top: 0.5rem;
    background-color: var(--mottojp-nav-accent);
    color: var(--mottojp-nav-accent-contrast);
    border: 1px solid transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    font: inherit;
    transition: background-color var(--mottojp-nav-duration) var(--mottojp-nav-ease);
}

.mottojp-cta-button:hover:enabled {
    background-color: var(--mottojp-nav-accent-hover);
}

.mottojp-cta-button:disabled {
    cursor: not-allowed;
    background-color: var(--mottojp-nav-sunken);
    color: var(--mottojp-nav-subtle);
    border-color: var(--mottojp-nav-border);
}

/*[ 手機版選單 ]
---------------------------------------------------------
對應原站的 .topPanel。 */
.mottojp-top-panel {
    position: fixed;
    left: 0;
    top: var(--mottojp-nav-height);
    width: 100vw;
    height: auto;
    max-height: 14rem;
    overflow: hidden;
    background-color: var(--mottojp-nav-solid);
    color: var(--mottojp-nav-text);
    border-bottom: 1px solid var(--mottojp-nav-border);
    box-shadow: var(--mottojp-nav-shadow-md);
    z-index: 998;
    transition: max-height var(--mottojp-nav-duration-lg) var(--mottojp-nav-ease);
}

.mottojp-top-panel.mottojp-collapsed {
    max-height: 0rem;
    border-bottom-color: transparent;
    box-shadow: none;
}

.mottojp-top-panel ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.mottojp-top-panel li {
    padding: 0.5rem 1rem;
    text-align: right;
    color: var(--mottojp-nav-muted);
    transition: color var(--mottojp-nav-duration) var(--mottojp-nav-ease),
                background-color var(--mottojp-nav-duration) var(--mottojp-nav-ease);
}

.mottojp-top-panel li:hover {
    color: var(--mottojp-nav-text);
    background-color: var(--mottojp-nav-hover);
}

.mottojp-top-panel a {
    color: inherit;
    text-decoration: none;
    background-image: none;
}

/* 手機版沒有下拉空間，改用分組標題＋縮排項目呈現實驗功能 */
.mottojp-top-panel li.mottojp-group-title {
    padding-bottom: 0.15rem;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--mottojp-nav-subtle);
    cursor: default;
}

.mottojp-top-panel li.mottojp-group-item {
    padding-top: 0.15rem;
}

/*[ 斷點 ]
---------------------------------------------------------
原站在窄螢幕收起導覽列連結，改由 topPanel 提供。 */
/* 要和 .mottojp-nav .mottojp-panel-control 的 display: flex 同權重才蓋得過去，
   否則手機版的選單鈕在桌面也會露出來。 */
.mottojp-nav .mottojp-mobile-show {
    display: none;
}

@media all and (max-width: 800px) {
    .mottojp-nav .mottojp-mobile-hide {
        display: none;
    }

    .mottojp-nav .mottojp-mobile-show {
        display: flex;
    }
}