/* --- 修正窄屏 Header 顯示邏輯 --- */
/* --- 1. 修改原本的 Hover 邏輯，增加媒體查詢 --- */
@media (min-width: 576px) {

    .lv-name,
    .lv-sub,
    .nav-link-lv,
    .lv-icon-btn {
        display: inline-block;

        text-align: left;

        transition: color 0.3s ease, text-shadow 0.3s ease;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }


    /* 初始白色模式 */
    .lv-name,
    .nav-link-lv,
    .lv-icon-btn {
        color: #ffffff !important;

        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.701);
    }

    .lv-name {
        font-weight: 300;
        line-height: 1.2;
        letter-spacing: 5px;
    }

    .lv-sub {
        font-size: 11px;
        line-height: 1.2;
        letter-spacing: 2px;
        white-space: nowrap;

        color: rgba(255, 255, 255, 0.95) !important;
        text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
    }

    .lv-icon-btn i {
        filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0));
        transition: filter 0.4s ease;
    }

    /* --- 變色切換邏輯 (Hover & Scrolled) --- */
    .lv-header:hover .lv-name,
    .lv-header.scrolled .lv-name,
    .lv-header:hover .nav-link-lv:not(:hover),
    .lv-header.scrolled .nav-link-lv:not(:hover),
    .lv-header:hover .lv-icon-btn,
    .lv-header.scrolled .lv-icon-btn {
        color: #000000 !important;

        text-shadow: 0 0 0 transparent !important;
    }

    .lv-header:hover .lv-sub,
    .lv-header.scrolled .lv-sub {
        color: #666666 !important;

        text-shadow: 0 0 0 transparent !important;
    }

    .lv-header:hover .lv-v-line,
    .lv-header.scrolled .lv-v-line {
        border-left: 1px solid #000000 !important;
    }

    .lv-header:hover .lv-logo-filter,
    .lv-header.scrolled .lv-logo-filter {
        filter: brightness(1) invert(0) drop-shadow(0 0 0 transparent);
    }

    /* --- 基礎佈局與導航包裹容器 --- */
    .lv-header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        width: 100%;
        min-height: 90px;
        background-color: rgba(255, 255, 255, 0);
        transition: background-color 0.4s ease, box-shadow 0.4s ease;
    }

    /* 狀態：白底模式 */
    .lv-header.scrolled,
    .lv-header:hover {
        min-height: 90px;

        border-bottom: 1px solid #e5e5e5 !important;

        background-color: #ffffff !important;
    }

    .nav-wrapper {
        display: block;
        /* 確保它在窄屏也會渲染 */
    }

    /* 只有在桌面端，懸停時才變白底 */
    .lv-header:hover {
        border-bottom: 1px solid #e5e5e5 !important;

        background-color: #ffffff !important;
    }

    .lv-header:hover .lv-name,
    .lv-header:hover .lv-icon-btn,
    .lv-header:hover .nav-link-lv:not(:hover) {
        color: #000000 !important;

        text-shadow: none !important;
    }

    .lv-header:hover .lv-logo-filter {
        filter: brightness(1) invert(0) !important;
    }

    .lv-header:hover .lv-v-line {
        border-left: 1px solid #000000 !important;
    }

    /* --- 內頁專用模式 (非首頁) --- */
    /* 當 body 標籤帶有 .inner-page 類別時執行 */
    body.inner-page .header-spacer {
        height: 140px;
    }



    /* 強制內頁 Header 的文字顏色為黑色 (覆蓋透明底的白字設定) */
    body.inner-page .lv-name,
    body.inner-page .nav-link-lv,
    body.inner-page .lv-icon-btn {
        color: #000000 !important;

        text-shadow: none !important;
    }

    body.inner-page .nav-link-lv:hover {
        color: #ffffff !important;
        background-color: #dc3545 !important;
    }

    body.inner-page .lv-sub {
        color: #666666 !important;

        text-shadow: none !important;
    }

    body.inner-page .lv-header {
        border-bottom: 1px solid #e5e5e5 !important;

        background-color: #ffffff !important;
    }

    body.inner-page .lv-v-line {
        border-left: 1px solid #000000 !important;
    }

    body.inner-page .lv-logo-filter {
        filter: brightness(1) invert(0) !important;
    }

    /* 確保內頁的導航欄也是可見的（除非滾動超過特定距離） */
    body.inner-page .nav-wrapper:not(.nav-hidden-mode) {
        background-color: #ffffff !important;
    }

}

/* --- 2. 窄屏模式 --- */




/* --- 核心文字與 Logo 穩定器 --- */
.lv-brand-group .ps-3 {
    display: flex;
    flex-direction: column;
    /* 確保上下排列 */
    justify-content: center;

    padding-left: 10px !important;
    /* 縮小左邊距，騰出空間給文字 */
}

.lv-logo-filter {
    filter: brightness(0) invert(1) drop-shadow(0px 1px 5px rgba(255, 207, 17, 0.946));
    transition: filter 0.4s ease;
}


.lv-brand-group .ps-3 {
    padding-left: 2rem !important;

}

/* 1. 確保定位容器不會限制內部的寬度 */
.position-absolute.translate-middle-x {
    min-width: max-content;
}

/* 2. 確保 a 標籤是一個完整的、可感應的區塊 */
.lv-brand-group {
    display: flex !important;

    width: 95%;
    /* 讓點擊事件更靈敏 */

    cursor: pointer;
}

/* 3. 防止文字因為容器限制而自動換行（換行會導致感應區縮短） */
.lv-name,
.lv-sub {
    display: block;
    white-space: nowrap;
}


/* --- 導航按鈕樣式 --- */
.nav-link-lv {
    display: inline-block;

    margin: 0 8px;
    padding: 12px 35px;
    border-radius: 0 !important;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    white-space: nowrap;

    transition: all 0.3s ease;

    text-decoration: none;
}

.nav-link-lv:hover {
    padding-right: 40px;
    padding-left: 40px;

    color: #ffffff !important;
    background-color: #dc3545 !important;

    text-shadow: none !important;
}



/* --- 捲動收縮與彈出邏輯 --- */
.transition-nav {
    max-height: 100px;

    opacity: 1;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    overflow: hidden;
}

.nav-hidden-mode #nav-desktop {
    max-height: 0;

    opacity: 0;

    pointer-events: none;
    transform: translateY(-10px);
}

#desktop-scroll-menu {
    transition: opacity 0.3s ease;
}

/* --- 修正彈出選單的高度與初始導航一致 --- */

.nav-wrapper.pop-out {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1060;

    width: 100%;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
    /* 輕微陰影增加層次感 */
    /* 這裡設為白色，確保彈出時有實色背景 */

    background-color: #ffffff !important;
}

.nav-wrapper.pop-out #nav-desktop {
    /* 高度與原本頂端導航一致 */
    max-height: 100px !important;

    padding: 0 !important;
    opacity: 1 !important;

    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* 彈出時的文字顏色：因為背景是白色，文字需設為黑色 */
.nav-wrapper.pop-out .nav-link-lv {
    color: #000000 !important;

    text-shadow: none !important;
}

/* Hover 效果保持與原本一致 */
.nav-wrapper.pop-out .nav-link-lv:hover {
    color: #ffffff !important;
    background-color: #dc3545 !important;
}




/* ----------------------------------------------------------------
1. 導航欄基礎佈局 - 確保物理對稱
----------------------------------------------------------------- */
.lv-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
}

/* 強制左右兩側區塊寬度完全一致，這是「絕對居中」的關鍵 */
.header-side-box {
    display: flex;
    align-items: center;

    width: 90px;
    /* 電腦版寬度 */

    flex-shrink: 0;
}

.header-side-box.left {
    justify-content: flex-start;
}

.header-side-box.right {
    justify-content: flex-end;
}

/* 中間區塊：自動填充剩餘空間 */
.header-center-box {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 內容水平居中 */

    flex-grow: 1;
    overflow: hidden;
    /* 防止內容溢出撐開 */
}

/* ----------------------------------------------------------------
2. 電腦版標題樣式
----------------------------------------------------------------- */
.header-logo-img {
    width: 55px;
    height: 55px;

    flex-shrink: 0;
}

.lv-name {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.2;
    color: #333;
}

.lv-sub {
    font-size: 12px;
    color: #666;
    opacity: 0.8;
}

/* ----------------------------------------------------------------
3. 手機版適配 (1:1 縮放並保持居中)
----------------------------------------------------------------- */
@media (max-width: 576px) {

    
/* 導航容器：初始隱藏 */
.nav-wrapper {
position: fixed;
top: 80px;
left: 0;
z-index: 1999;

display: block !important;

width: 100%;

background-color: #ffffff !important;
opacity: 0;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

pointer-events: none;
transform: translateY(-20px);
visibility: hidden;
}




/* 核心修正：強制解除桌面端的過渡高度限制 */
.nav-wrapper.pop-out .transition-nav {
max-height: none !important;
opacity: 1 !important;

overflow: visible !important;
pointer-events: auto !important;
transform: none !important;
}



.nav-wrapper.pop-out .nav-link-lv {
opacity: 1;

transform: translateY(0);
}


/* 隱藏桌面端的滾動選單按鈕，僅顯示手機專用的 menu 按鈕 */

.nav-wrapper.pop-out {
opacity: 1;

pointer-events: auto;
transform: translateY(0);
visibility: visible;
position: absolute;
top: 100%;
left: 0;
z-index: 9999;

display: block !important;

width: 100%;

margin: 0 !important;

padding: 0 !important;

border-bottom: 1px solid #e5e5e5;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

background-color: #ffffff !important;
}

/* 確保內層容器也是純白且沒有高度限制 */
.nav-wrapper.pop-out #nav-desktop {
max-height: none !important;

background-color: #ffffff !important;
/* 再次強化白底 */
opacity: 1 !important;

transform: none !important;
visibility: visible !important;
}


/* 連結樣式：確保文字清晰且有底線區隔 */
.nav-link-lv {
display: block !important;

width: 100% !important;

margin: 0 !important;

padding: 20px 0 !important;

border-bottom: 2px solid #f0f0f0;
/* 分隔線 */

text-align: center !important;

color: #000000 !important;
background-color: #ffffff !important;

text-shadow: none !important;
}












/* ok */
.header-spacer {
height: 80px;
}

#desktop-scroll-menu {
display: none;
}

    .lv-name,
.lv-icon-btn,
.nav-link-lv {
color: #000000 !important;
text-shadow: none !important;
}


    /* 縮小左右兩側的佔位寬度，為中間騰出空間 */
    .header-side-box {
        width: 65px !important;
    }

    .header-logo-img {
        width: 35px !important;
        height: 35px !important;
    }

/* ok */
    .lv-header {
        position: fixed !important;
        top: 0;
        left: 0;
        z-index: 2000;

        display: flex;
        align-items: center;

        width: 100%;
        height: 80px !important;
        min-height: 80px !important;

        border-bottom: 1px solid #f0f0f0 !important;

        background-color: #ffffff !important;
    }

    .lv-name {
        display: block;
        font-size: 13px !important;
        letter-spacing: 1px !important;
        white-space: nowrap !important;
    }

    .lv-sub {
        display: block;
        color: #666666 !important;
        text-shadow: none !important;
        width: max-content;
        font-size: 8px !important;
        letter-spacing: 0px !important;
        white-space: nowrap !important;
        transform: scale(0.85);
        transform-origin: left bottom;
    }

    #nav-desktop nav {
        flex-direction: column !important;
        padding: 0 !important;
        background-color: #ffffff !important;
    }

    
    .header-title-box {
        padding-left: 8px !important;
        /* 縮小邊界間距 */
    }

    /* 縮小左右按鈕圖標大小 */
    .lv-icon-btn {
        font-size: 1.3rem !important;
    }
}

/* 針對極窄手機 (如 iPhone SE) 的最後防線 */
@media (max-width: 360px) {
    .header-side-box {
        width: 55px !important;
    }

    .lv-name {
        font-size: 11px !important;
    }

    .lv-sub {
        display: none;
        /* 極窄螢幕隱藏英文副標題以保證中文居中 */
    }
}


#langnav.custom-dropdown {
/* 基础样式对齐 Footer */
background-color: hsl(0, 0%, 95%) !important;
border: 1px solid #222 !important;
border-radius: 0 !important;
padding: 15px 0 !important;
min-width: 150px;

/* 定位微调 */
position: absolute;
top: 100%; /* 距离图标下方一点 */
left: 0;
z-index: 9999;

/* 动画效果 */
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.4s ease;
}

/* 激活状态 */
#langnav.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

/* 菜单项样式 - 完全复制 Footer 的 .dropdown-item */
#langnav .dropdown-item {
color: #777 !important;
font-size: 11px !important;
padding: 10px 25px !important;
letter-spacing: 1px !important;
background: transparent !important;
text-decoration: none !important;
display: block;
transition: all 0.4s ease !important;
}

/* 悬停交互 - 完全复制 Footer 的 hover 效果 */
#langnav .dropdown-item:hover {
background-color: #1a1a1a !important;
color: #fff !important;
padding-left: 33px !important; /* 这里是那个优雅的左侧留白位移 */
}

/* 针对手机端的微调 */
@media (max-width: 576px) {
#langnav.custom-dropdown {
top: 110%;
left: -10px;
}
}