/* ======================================================== */
/* --- 嚴格隔離：導覽列專屬變數與 CSS 命名空間 (.header) --- */
/* ======================================================== */

/* 頂層導覽外殼：將變數綁定在此，達成完全私有化隔離 */
.header.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color var(--header-transition-speed) ease, box-shadow var(--header-transition-speed) ease;
    
    /* 頁首區塊專屬封裝變數 */
    --header-gold: #b89070;          /* 精緻燙金色 */
    --header-dark: #2a2a2a;          /* 極致時尚炭黑 */
    --header-bg-light: #faf7f4;      /* 法式奶油選單襯底 */
    --header-bg-darker: #f4eae1;     /* 溫慢奶茶色背景 */
    --header-text-light: #ffffff;    /* 首頁大圖透明時的文字白 */
    --header-white: #ffffff;
    --header-transition-speed: 0.3s;
}

/* 導覽列主容器 */
.header .header-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: padding var(--header-transition-speed) ease;
}

.header.site-header.is-sticky .header-container {
    padding: 4px 28px; /* 滾動固定時微縮高度 */
}

/* 品牌標誌 */
.header .nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: white;
    z-index: 1001;
}

.header .nav-logo .logo {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid #fff;
    object-fit: cover;
}

.header .nav-logo span {
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 1.1rem;
    transition: color var(--header-transition-speed);
}

/* SEO 優化：主要導覽專用區塊 (nav) */
.header .nav-zone {
    display: flex;
    align-items: center;
}

/* 主導覽選單清單 (ul) */
.header .nav-menu {
    display: flex;
    list-style: none;
    gap: 35px;
    align-items: center;
}

/* 選單項目 (li) */
.header .menu-item {
    position: relative;
}

/* 導覽連結 (a) */
.header .nav-link {
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    transition: color var(--header-transition-speed);
}

.header .nav-link:hover {
    color: var(--header-gold) !important;
}

/* 下拉選單小箭頭 */
.header .menu-item.has-submenu > .nav-link::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4.5px solid currentColor;
    transition: transform var(--header-transition-speed);
}

/* 二階下拉面板 (ul) */
.header .submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: var(--header-white);
    min-width: 180px;
    list-style: none;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(42,42,42,0.08);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--header-transition-speed), transform var(--header-transition-speed), visibility var(--header-transition-speed);
    padding: 12px 0;
    border: 1px solid rgba(234,220,210,0.4);
}

/* 下拉選單連結項目 */
.header .submenu-item a {
    display: block;
    padding: 10px 24px;
    color: var(--header-dark) !important;
    text-decoration: none;
    font-size: 13.5px;
    transition: background var(--header-transition-speed), color var(--header-transition-speed);
}

.header .submenu-item a:hover {
    background-color: var(--header-bg-light);
    color: var(--header-gold) !important;
}

/* 右側獨立動作區塊 (右側單一「立即預約」按鈕) */
.header .header-action-group {
    display: flex;
    align-items: center;
}

/* 立即預約：外框膠囊按鈕 */
.header .btn-nav-reserve {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    padding: 8px 22px;
    border-radius: 50px;
    border: 1px solid #b89070;
    background-color: transparent;
    transition: background-color var(--header-transition-speed), color var(--header-transition-speed), border-color var(--header-transition-speed);
    color: #b89070;
}

.header .btn-nav-reserve:hover {
    background-color: var(--header-gold) !important;
    border-color: var(--header-gold) !important;
    color: var(--header-white) !important;
}

/* 手機版隱藏專用包覆殼 */
.header .mobile-action-wrapper {
    display: none;
}

/* 桌機版滑入效果限制 (769px 以上) */
@media (min-width: 769px) {
    .header .menu-item.has-submenu:hover .submenu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
    .header .menu-item.has-submenu:hover > .nav-link::after {
        transform: rotate(180deg);
    }
}

/* RWD 漢堡選單按鈕 */
.header .burger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 17px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

/* 漢堡線條 */
.header .burger-bar {
    width: 100%;
    height: 1.5px;
    transition: transform var(--header-transition-speed) ease, opacity var(--header-transition-speed) ease, background-color var(--header-transition-speed) ease;
}

/* -------------------------------------------------------- */
/* 主題模式 A：【首頁透明大圖】狀態色彩 */
/* -------------------------------------------------------- */
.header.site-header.theme-transparent {
    background-color: transparent;
}
.header.site-header.theme-transparent .nav-logo span,
.header.site-header.theme-transparent .logo,
.header.site-header.theme-transparent .nav-link,
.header.site-header.theme-transparent .header-action-group {
    color: var(--header-text-light); /* 預設（頂部時）：文字為白色 */
}
.header.site-header.theme-transparent .burger-bar {
    background-color: var(--header-text-light);
}

/* 首頁頂部未下滑時：Hover / 滑入子選單時父連結顯示燙金色 #b89070 */
.header.site-header.theme-transparent:not(.is-sticky) .nav-link:hover,
.header.site-header.theme-transparent:not(.is-sticky) .menu-item:hover > .nav-link {
    color: var(--header-gold) !important;
}

/* 滾動 10px 後 Sticky 轉為暖奶茶底、時尚炭黑字 */
.header.site-header.theme-transparent.is-sticky {
    background-color: var(--header-bg-darker);
    box-shadow: 0 2px 15px rgba(42,42,42,0.05);
}
.header.site-header.theme-transparent.is-sticky .nav-logo span,
.header.site-header.theme-transparent.is-sticky .logo,
.header.site-header.theme-transparent.is-sticky .nav-link,
.header.site-header.theme-transparent.is-sticky .header-action-group {
    color: var(--header-dark); /* 往下滑動後：文字同步轉為炭黑深色 */
}
.header.site-header.theme-transparent.is-sticky .burger-bar {
    background-color: var(--header-dark);
}

/* -------------------------------------------------------- */
/* 主題模式 B：【內頁直接顯示】狀態色彩 */
/* -------------------------------------------------------- */
.header.site-header.theme-direct {
    background-color: var(--header-bg-darker);
    box-shadow: 0 2px 15px rgba(42,42,42,0.05);
}
.header.site-header.theme-direct .nav-logo span,
.header.site-header.theme-direct .nav-link,
.header.site-header.theme-direct .header-action-group {
    color: var(--header-dark); /* 直接顯示炭黑深色狀態 */
}
.header.site-header.theme-direct .burger-bar {
    background-color: var(--header-dark);
}

/* -------------------------------------------------------- */
/* 響應式 RWD 手機版側欄智慧重組 */
/* -------------------------------------------------------- */
@media (max-width: 768px) {
    .header .header-container {
        padding: 12px 28px;
    }
    .header.site-header.is-sticky .header-container {
        padding: 14px 28px;
    }

    .header .burger-menu { 
        display: flex; 
    }
    
    /* 桌機版的右側按鈕在行動端先隱藏，智慧移入側欄最底部 */
    .header .header-container > .header-action-group {
        display: none;
    }

    .header .burger-menu.is-open .burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .header .burger-menu.is-open .burger-bar:nth-child(2) { opacity: 0; }
    .header .burger-menu.is-open .burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* 手機版選單打開時，X 按鈕轉為炭黑深色 #2a2a2a */
    .header.site-header.theme-transparent:not(.is-sticky) .burger-menu.is-open .burger-bar {
        background-color: var(--header-dark) !important;
    }

    /* 手機版右側側欄抽屜 (將 nav-zone 變為滿版覆蓋殼) */
    .header .nav-zone {
        position: fixed; 
        top: 0; 
        right: -100%; 
        width: 280px; 
        height: 100vh;
        background-color: var(--header-bg-darker);
        transition: right var(--header-transition-speed) ease;
        box-shadow: -5px 0 25px rgba(42,42,42,0.08);
        z-index: 1001;
    }
    .header .nav-zone.is-open { 
        right: 0; 
    }

    .header .nav-menu {
        flex-direction: column; 
        gap: 0; 
        padding: 100px 30px 40px 30px;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        align-items: flex-start;
    }

    .header .menu-item { 
        width: 100%; 
        border-bottom: 1px solid rgba(184,144,112,0.2); 
    }
    .header .nav-link { 
        padding: 16px 0; 
        font-size: 15px; 
        justify-content: space-between; 
        width: 100%; 
    }

    /* 手機版抽屜內最底部的預約按鈕優化 */
    .header .mobile-action-wrapper {
        display: flex;
        width: 100%;
        margin-top: 35px;
    }
    .header .mobile-action-wrapper .btn-nav-reserve {
        width: 100%;
        padding: 12px;
        font-size: 14px;
        border-color: var(--header-dark);
        color: var(--header-dark);
    }

    .header.site-header.theme-transparent:not(.is-sticky) .nav-link { 
        color: var(--header-dark); 
    }
    .header.site-header.theme-transparent:not(.is-sticky) .burger-bar { 
        background-color: var(--header-text-light); 
    }

    /* 手機二階摺疊選單 */
    .header .submenu {
        position: relative; 
        top: 0; 
        left: 0; 
        transform: none; 
        box-shadow: none; 
        width: 100%;
        max-height: 0; 
        opacity: 0; 
        visibility: hidden; 
        overflow: hidden; 
        padding: 0; 
        border: none;
        background-color: rgba(255, 255, 255, 0.4);
        transition: max-height var(--header-transition-speed) ease, opacity var(--header-transition-speed) ease;
    }
    .header .menu-item.has-submenu.is-active > .submenu { 
        max-height: 300px; 
        opacity: 1; 
        visibility: visible; 
        padding: 6px 0; 
    }
    .header .submenu-item a { 
        padding: 12px 20px; 
    }
    .header .menu-item.has-submenu.is-active > .nav-link::after { 
        transform: rotate(180deg); 
    }
}