/*
═══════════════════════════════════════════════════════════════
   FOG WIDGET — 浮動指引（迷茫按鈕）
   v0.4.6：全面重做樣式，對齊 Night Murmur 設計（大字、列表、分隔線）
═══════════════════════════════════════════════════════════════
*/

/* ─── 浮動按鈕（FAB）──────────────────────── */
.fog-fab {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 90;
    /* 預設圓形（沒 label 時）；有 label 時自動變藥丸形 */
    width: 52px;
    height: 52px;
    border-radius: 50%;
    /* background-color + box-shadow 由 inline style 套用 ACF 設定 */
    color: var(--bone);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform .3s var(--ease-moon);
    overflow: hidden;
}
.fog-fab:hover { transform: translateY(-3px) scale(1.05); }

/* 有文字 label 時：自動變藥丸形 */
.fog-fab.has-label {
    width: auto;
    height: 52px;
    border-radius: 28px;
    padding: 0 18px 0 20px;
    gap: 10px;
}

.fog-fab-label {
    font-family: var(--ff-m);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: inherit;
    white-space: nowrap;
}
.fog-fab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}
.fmoon-svg {
    width: 22px;
    height: 22px;
}
.fog-fab-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}


/* ─── Modal 背景（遮罩 · 模糊原網頁）──────────── */
.fog-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(31, 36, 51, .6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity .3s ease;
}
.fog-modal.open {
    display: flex;
    opacity: 1;
    animation: fogFadeIn .25s ease;
}
[data-theme="light"] .fog-modal {
    background: rgba(222, 225, 230, .55);
}

@keyframes fogFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fogSlideUp {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}


/* ─── Modal 面板（彈跳視窗）──────────────── */
.fog-panel {
    background: var(--bone);
    border: 1px solid var(--linen);
    max-width: 780px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 48px 56px 40px;
    position: relative;
    box-shadow:
        0 0 80px rgba(138, 122, 170, calc(.15 * var(--glow-strength))),
        0 24px 60px rgba(0, 0, 0, .45);
    animation: fogSlideUp .35s ease-out;
}

.fog-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--mist);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: color .2s, transform .2s;
}
.fog-close:hover {
    color: var(--twilight);
    transform: rotate(90deg);
}


/* ─── Header 區 ─────────────────────────── */
.fog-head {
    margin-bottom: 32px;
}
.fh-eb {
    font-family: var(--ff-m);
    font-size: 11px;
    letter-spacing: .28em;
    color: var(--plum);
    text-transform: uppercase;
    margin-bottom: 18px;
    font-weight: 500;
}
.fh-t {
    font-family: var(--ff-d);
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 300;
    color: var(--twilight);
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0 0 16px;
}
.lang-en .fh-t { font-style: italic; }
.fh-s {
    font-size: 14px;
    line-height: 1.65;
    color: var(--mist);
    font-weight: 300;
    margin: 0;
}


/* ─── 分流選項列表 ───────────────────────── */
.fog-opts {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--linen-2);
}

.fog-opt {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 22px 6px;
    border-bottom: 1px solid var(--linen-2);
    cursor: pointer;
    transition: background .25s var(--ease-moon),
                padding .25s var(--ease-moon);
    text-decoration: none;
    color: inherit;
}
.fog-opt:hover {
    background: var(--bone-2);
    padding-left: 18px;
    padding-right: 18px;
}

/* 編號區（預設彎月 SVG / 自訂 icon / 自訂圖） */
.fog-opt-n {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--plum);
}
.fog-opt-n .fog-opt-moon {
    width: 32px;
    height: 32px;
    transition: transform .35s var(--ease-moon), color .25s;
}
.fog-opt:hover .fog-opt-moon {
    transform: rotate(-12deg) scale(1.08);
    color: var(--plum-hi);
}
.fog-opt-n img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* 中間：標題 + 引言 */
.fog-opt-t strong {
    display: block;
    font-family: var(--ff-d);
    font-size: clamp(17px, 1.8vw, 21px);
    font-weight: 300;
    color: var(--twilight);
    line-height: 1.3;
    letter-spacing: -.01em;
    margin-bottom: 6px;
}
.fog-opt-t span {
    display: block;
    font-family: var(--ff-d);
    font-style: italic;
    font-size: 13.5px;
    color: var(--mist);
    font-weight: 300;
    line-height: 1.55;
}

/* 右側 CTA */
.fog-opt-a {
    font-family: var(--ff-m);
    font-size: 10.5px;
    letter-spacing: .2em;
    color: var(--plum);
    text-transform: uppercase;
    white-space: nowrap;
    font-weight: 500;
    transition: color .2s, letter-spacing .2s;
}
.fog-opt:hover .fog-opt-a {
    color: var(--twilight);
    letter-spacing: .24em;
}


/* ─── 手機版 ─────────────────────────────── */
@media (max-width: 760px) {
    .fog-fab { right: 16px; bottom: 16px; width: 48px; height: 48px; }
    .fog-modal { padding: 56px 20px 40px; }

    .fog-head { margin-bottom: 36px; }

    .fog-opt {
        grid-template-columns: 48px 1fr;
        grid-template-rows: auto auto;
        gap: 6px 16px;
        padding: 24px 8px;
    }
    .fog-opt:hover { padding-left: 16px; padding-right: 16px; }

    .fog-opt-n {
        grid-row: 1 / span 2;
    }
    .fog-opt-n .fog-opt-moon { width: 26px; height: 26px; }
    .fog-opt-n img { width: 26px; height: 26px; }
    .fog-opt-t {
        grid-column: 2;
        grid-row: 1;
    }
    .fog-opt-t strong { font-size: 18px; }
    .fog-opt-t span   { font-size: 13.5px; }

    .fog-opt-a {
        grid-column: 2;
        grid-row: 2;
        margin-top: 6px;
        justify-self: start;
        font-size: 10px;
    }
}