/* ==========================================================================
   首頁頁內錨點選單(租車介紹/訂車流程/…)移入 header 後的樣式覆蓋

   - 原本這組選單是 Index.cshtml 裡的紅色橫幅 .page-menu-wp,現移到
     Views/Shared/_Header.cshtml,佔用 header 原本選單(.menu)的位置。
   - HTML 沿用 page-menu / page-menu-list / list-item / list-link 等 class,
     讓 app.js 既有的 GSAP 捲動與 active 判斷不必修改;
     容器同時掛上 .menu,讓 header 原本的桌機排版與手機滑入面板直接生效。
   - 本檔只負責把 app.css 裡屬於「紅色橫幅」的視覺蓋掉,不重寫 header 樣式。
   - 載入順序必須在 app.css 之後(見 _Layout.cshtml)。

   ※ 這裡大量依賴選擇器權重:app.css 的 #header .menu 是 (1,1,0),
     .page-menu 是 (0,1,0),所以 header 的規則本來就贏。只有 .page-menu
     獨有、header 沒定義的屬性(如 background-image、transform)才需要處理,
     否則會反過來把手機版滑入面板弄壞。
   ========================================================================== */

/* --------------------------------------------------------------------------
   共用:只清掉 header 沒有對應規則、會殘留的紅色橫幅屬性
   (background-color / position / display / transition 交給 #header .menu,
    這裡刻意不碰,否則手機版面板會失去灰底與滑入動畫)
   -------------------------------------------------------------------------- */
#header .page-menu {
    background-image: none; /* 紅色漸層,header 沒有對應規則會蓋不掉 */
    border-radius: 0;
    box-shadow: none;
    transform: none; /* 原本的 translateY(-50%),會讓手機面板整個上移 */
}

/* 這顆是原本手機版的下拉按鈕,改用漢堡鈕後不再顯示;
   但元素本身要留著,#page-menu-select-text 是 app.js ScrollTrigger 的寫入目標 */
#header .page-menu-button {
    display: none;
}

/* --------------------------------------------------------------------------
   桌機(≥992px):與 logo 同一列,靠右垂直置中,外觀走 #header .nav
   注意 app.css 的 .page-menu-list 斷點是 1072px,header 是 992px,
   此處統一拉齊到 992px,避免 992–1071 之間破版。
   -------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
    /* logo 原本是 margin: 38px 0 18px 16px,為了對齊右側「會員列 + 主選單列」的兩列式
       排版而上下不對稱,中心落在 58px,比 96px header 的中心(48px)低 10px。
       右側現在只剩一列錨點選單,改成上下各 28px 讓它置中。
       ※ 38+40+18 = 96 這個總高是 .container 唯一的高度來源(容器沒有設 height,
         靠最高的子元素撐開),所以只能改分配、不能改總和,否則整列會縮到 header 頂端。
       ※ 手機版(≤991px)的 margin-top:17px 本來就是置中的,不在此區塊內,不受影響。 */
    #header .logo {
        margin: 28px 0 28px 16px;
    }

    /* 蓋掉 #header .menu 的絕對定位與 min-width:916px(那是為兩列選單+搜尋框設計的) */
    #header .page-menu.menu {
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: auto;
        min-width: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        align-self: center;
        justify-content: flex-end;
        background-color: transparent;
        border-bottom: 0;
        transition: none;
        z-index: auto;
    }

    /* .nav 原本為了配合絕對定位的搜尋框保留了 min-width / margin-right */
    #header .page-menu .nav {
        min-width: 0;
        height: auto;
        align-self: center;
        padding-bottom: 0;
        margin-right: 0;
        border-top: 0;
    }

        #header .page-menu .nav > ul {
            width: auto;
            justify-content: flex-end;
        }

        #header .page-menu .nav > ul > li {
            margin: 0 16px;
        }

            #header .page-menu .nav > ul > li:last-child {
                margin-right: 0;
            }

    /* 清單:取消紅底下拉的絕對定位與白字 */
    #header .page-menu-list {
        display: flex !important;
        position: relative;
        top: auto;
        width: auto;
        color: inherit;
        background-color: transparent;
        border-top: 0;
        transform: none;
        z-index: auto;
    }

        /* 原本是 130x60 的方塊白字,改回 header 選單的文字連結 */
        #header .page-menu-list .list-link {
            width: auto;
            height: auto;
            display: block;
            text-align: left;
            color: #120703;
            transition: color 0.2s ease-in-out;
        }

            #header .page-menu-list .list-link:hover,
            #header .page-menu-list .list-link:focus {
                color: #d7000f;
            }

        /* 捲到哪一區就標紅底線(app.css 另有 li.active 的 font-weight:700) */
        #header .page-menu-list .list-item.active {
            border-bottom: 3px solid #d7000f;
        }

            #header .page-menu-list .list-item.active .list-link {
                color: #d7000f;
            }
}

/* 1110px 以下 app.css 會把 #header .nav 拉到 min-width:700px,這裡不需要 */
@media screen and (max-width: 1110px) and (min-width: 992px) {
    #header .page-menu .nav {
        min-width: 0;
    }

    #header .page-menu .nav > ul > li {
        margin: 0 10px;
    }
}

/* --------------------------------------------------------------------------
   手機(≤991px):完全沿用 header 原本的漢堡鈕 + 右側滑入面板
   面板本體(fixed / 灰底 / 100vh / 滑入動畫)由 app.css 的 #header .menu 提供,
   列項樣式(62px 高、左內距 20px、#dcdcdc 底線)由 #header .nav .name 提供,
   這裡只把紅色下拉殘留的絕對定位與白字清掉。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    /* .page-menu 的 justify-content:center 在直向面板會變成垂直置中 */
    #header .page-menu.menu {
        justify-content: flex-start;
    }

    /* app.css 的 .scroll .page-menu 會加上 left:0,與面板的 right:-100% 互相牴觸
       (同時給 left/width/right 時 right 會被忽略),導致面板永遠停在畫面上 */
    body.scroll #header .page-menu {
        left: auto;
        border-bottom: 0;
    }

    /* 清單改成面板內的一般區塊 */
    #header .page-menu-list {
        position: static;
        display: block !important;
        width: 100%;
        background-color: transparent;
        border-top: 0;
        transform: none;
        color: inherit;
        z-index: auto;
    }

        /* 列的高度與邊框交給 .name(沿用 header 原本的手機選單樣式) */
        #header .page-menu-list .list-item {
            border-bottom: 0;
        }

        #header .page-menu-list .list-link {
            display: block;
            width: 100%;
            height: auto;
            text-align: left;
            white-space: normal;
            color: #120703;
        }

        #header .page-menu-list .list-item.active .name {
            color: #d7000f;
            font-weight: 700;
        }
}

/* --------------------------------------------------------------------------
   捲動後把整個 header 固定在頂端
   —— 取代 app.css 原本 .scroll .page-menu 的 sticky 行為。
   只在首頁生效(body.has-page-menu 由 _Layout.cshtml 依路由加上)。
   -------------------------------------------------------------------------- */
body.has-page-menu.scroll #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    box-shadow: 2px 12px 10px -5px rgba(36, 36, 36, 0.1);
}

/* header 變成 fixed 後脫離文件流,用 padding 補回原本佔的高度,避免內容上跳。
   ※ 用直接子選擇器,避免誤中 Index.cshtml 裡同名的 section.page-wrapper */
body.has-page-menu.scroll > .page-wrapper {
    padding-top: 96px;
}

@media screen and (max-width: 991px) {
    body.has-page-menu.scroll > .page-wrapper {
        padding-top: 62px;
    }
}