/*
    OCEAN 前台 Header 樣式

    功能說明
    一 控制前台頁面的 Logo 區域
    二 控制右上方搜尋框
    三 控制右上方會員入口
    四 控制桌機版導覽選單
    五 控制手機版漢堡選單
*/

.front-page .header-wrapper {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.front-page .header {
    width: 100%;
    background: #ffffff;
    padding: 10px 80px;
    box-sizing: border-box;
    position: relative;
}

/*
    header-inner

    功能說明
    一 撐滿整體寬度
    二 不限制最大寬度
*/
.front-page .header-inner {
    width: 100%;
    margin: 0;
}

/*
    header-top

    功能說明
    一 桌機與手機第一排容器
    二 桌機時左側為 Logo
    三 桌機時右側為 header-tools
*/
.front-page .header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*
    Logo 區塊

    功能說明
    一 清除預設外距
    二 清除預設內距
*/
.front-page .logo {
    margin: 0;
    padding: 0;
}

/*
    Logo 圖片

    功能說明
    一 使用 clamp 控制最大與最小寬度
    二 桌機畫面可隨視窗寬度縮放
*/
.front-page .logo img {
    width: clamp(260px, 22vw, 360px);
    height: auto;
    display: block;
}

/*
    header-tools

    功能說明
    一 桌機時與 Logo 同排
    二 右側放置搜尋框與會員入口
*/
.front-page .header-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}

/*
    搜尋區塊

    功能說明
    一 控制搜尋框外層排列
*/
.front-page .search-bar {
    display: flex;
    align-items: center;
}

/*
    搜尋框

    功能說明
    一 使用淺灰色背景
    二 使用圓角膠囊外觀
    三 內部包含搜尋圖示與輸入框
*/
.front-page .search-box {
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    border-radius: 24px;
    padding: 10px 16px;
    box-sizing: border-box;
}

/*
    搜尋圖示

    功能說明
    一 固定搜尋圖示寬度
    二 與輸入文字保持距離
*/
.front-page .search-box img {
    width: 22px;
    height: auto;
    margin-right: 10px;
    display: block;
}

/*
    搜尋輸入框

    功能說明
    一 移除預設邊框
    二 使用透明背景
    三 使用 clamp 控制寬度
*/
.front-page .search-box input[type="text"] {
    border: none;
    background: transparent;
    width: clamp(220px, 20vw, 360px);
    font-size: 16px;
    color: #1f2a30;
    outline: none;
    box-sizing: border-box;
}

/*
    搜尋輸入框提示文字
*/
.front-page .search-box input[type="text"]::placeholder {
    color: #7a7a7a;
}

/*
    會員區外層

    功能說明
    一 控制登入與未登入狀態的外層排列
    二 放在 header-tools 右側
*/
.front-page .header-member-area {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
    已登入會員膠囊按鈕

    功能說明
    一 已登入時顯示會員頭像與會員名稱
    二 使用白色背景與淺色邊框
    三 使用膠囊圓角外觀
    四 點擊後進入會員 Dashboard
*/
.front-page .header-member-login-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 12px 6px 7px;
    border: 1px solid #d8e0ec;
    border-radius: 999px;
    background-color: #ffffff;
    color: #173058;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(23, 48, 88, 0.08);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/*
    已登入會員膠囊按鈕滑過

    功能說明
    一 滑過時維持主色文字
    二 背景改為淡藍灰
    三 增加陰影與輕微上移效果
*/
.front-page .header-member-login-box:hover {
    color: #173058;
    text-decoration: none;
    background-color: #f4f7fb;
    box-shadow: 0 5px 14px rgba(23, 48, 88, 0.14);
    transform: translateY(-1px);
}

/*
    已登入會員頭像外框

    功能說明
    一 固定頭像尺寸
    二 裁切成圓形
    三 若無頭像則可顯示預設會員圖示
*/
.front-page .header-member-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #edf2f8;
    border: 1px solid #c8d4e3;
    flex: 0 0 32px;
}

/*
    已登入會員頭像圖片

    功能說明
    一 讓圖片填滿圓形外框
    二 使用 object-fit cover 避免變形
*/
.front-page .header-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*
    已登入會員名稱

    功能說明
    一 使用 OCEAN 主色
    二 避免名稱過長撐開版面
    三 超出寬度時以省略符號顯示
*/
.front-page .header-member-display-name {
    max-width: 120px;
    color: #173058;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
    原本會員 icon 入口

    功能說明
    一 保留原本 member-entry class
    二 主要用於未登入狀態
    三 避免影響舊有 HTML 結構
*/
.front-page .member-entry {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
    原本會員 icon 圖片

    功能說明
    一 保留原本 icon 尺寸
*/
.front-page .member-entry img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
}

/*
    未登入會員圖示連結

    功能說明
    一 未登入時顯示圓形會員入口
    二 點擊後進入會員登入頁
    三 使用白色底與淺色邊框
*/
.front-page .header-member-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid #d8e0ec;
    border-radius: 50%;
    background-color: #ffffff;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(23, 48, 88, 0.08);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/*
    未登入會員圖示連結滑過
*/
.front-page .header-member-icon-link:hover {
    background-color: #f4f7fb;
    box-shadow: 0 5px 14px rgba(23, 48, 88, 0.14);
    transform: translateY(-1px);
}

/*
    未登入會員圖示圖片
*/
.front-page .header-member-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

/*
    menu-bar

    功能說明
    一 桌機版滑過 Header 時顯示
    二 置於 Header 下方
*/
.front-page .menu-bar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    justify-content: center;
    gap: 2vw;
    padding: 10px 12px;
    background-color: white;
    border-top: 1px solid lightgray;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

/* .front-page .header-wrapper:hover .menu-bar {
    display: flex;
} */

/*
    menu-bar 連結
*/
.front-page .menu-bar a {
    text-decoration: none;
    font-size: 16px;
    color: #8ca3e6;
    transition: 0.3s;
}

/*
    menu-bar 連結滑過
*/
.front-page .menu-bar a:hover {
    color: #1f2a30;
    font-weight: bold;
}

/*
    漢堡按鈕

    功能說明
    一 桌機預設隱藏
    二 手機版才會顯示
*/
.mobile-menu-toggle {
    display: none;
    width: 34px;
    height: 26px;
    flex-direction: column;
    justify-content: space-between;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

/*
    漢堡按鈕線條
*/
.mobile-menu-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #1f2a30;
}

/*
    桌機版 hover 展開選單

    功能說明
    一 只在桌機版啟用 hover
    二 避免手機版 hover 行為造成干擾
*/
@media (min-width: 769px) {
    .front-page .header-wrapper:hover .menu-bar {
        display: flex;
    }
}

/*
    手機版

    功能說明
    一 第一排顯示 Logo 與漢堡按鈕
    二 第二排顯示搜尋框與會員入口
*/
@media (max-width: 768px) {

    .front-page .header {
        padding: 10px 14px;
    }

    /*
        手機版第一排
        僅顯示 Logo 與漢堡
    */
    .front-page .header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .front-page .logo img {
        width: clamp(180px, 60vw, 300px);
    }

    /*
        手機版第二排
        header-tools 變為整行
    */
    .front-page .header-tools {
        margin-top: 12px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .front-page .search-bar {
        flex: 1;
    }

    .front-page .search-box {
        width: 100%;
        padding: 8px 12px;
        border-radius: 20px;
    }

    .front-page .search-box input[type="text"] {
        width: 100%;
        font-size: 14px;
    }

    .front-page .member-entry {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    /*
        手機版已登入會員膠囊按鈕

        功能說明
        一 避免會員名稱過長擠壓搜尋框
        二 縮小高度與文字寬度
    */
    .front-page .header-member-login-box {
        min-height: 38px;
        padding: 4px 9px 4px 5px;
        gap: 6px;
    }

    .front-page .header-member-avatar {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
    }

    .front-page .header-member-display-name {
        max-width: 76px;
        font-size: 13px;
    }

    /*
        手機版未登入會員圖示
    */
    .front-page .header-member-icon-link {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    .front-page .header-member-icon {
        width: 28px;
        height: 28px;
    }

    /*
        手機隱藏 hover 行為
    */
    .front-page .header:hover .menu-bar {
        display: none;
    }

    /*
        手機選單改為點擊顯示
    */
    .front-page .menu-bar {
        position: static;
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        box-shadow: none;
        border-top: none;
        margin-top: 10px;
    }

    .front-page .menu-bar.active {
        display: flex;
    }

    .front-page .menu-bar a {
        font-size: 14px;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .front-page .header-top {
        flex-wrap: wrap;
    }

    .front-page .header-tools {
        width: 100%;
        order: 2;
        margin-top: 12px;
        justify-content: space-between;
    }
}

/*
    通用圖片保護

    功能說明
    一 避免圖片超出容器
*/
.front-page img {
    max-width: 100%;
    height: auto;
}

/*
    通用 input 保護

    功能說明
    一 清除瀏覽器預設樣式
    二 保持 box sizing 一致
*/
.front-page input {
    all: unset;
    box-sizing: border-box;
}