/**
 * R/S Megamenu 樣式 v2.0.6
 *
 * v2.0.6 變更（2026-03-24）：
 * - 大小版型 dropdown 統一使用 fixed 定位，貼齊 bar 底部
 * - 新增 CSS 變數 --rs-megamenu-bar-height（預設 90px），控制 dropdown top 值
 *   不同站點只需覆寫此變數即可，不再需要外部 !important
 * - 小版型改為 fixed 定位後，JS 動態計算 left 對齊觸發的選單項目
 * - 移除小版型舊的 margin-top: 8px
 *
 * v2.0.5 變更（2025-11-19）：
 * - 修正手機版第一層選單對齊問題
 * - 移除 .rs-megamenu-nav 的 padding，讓選單完全靠左對齊
 *
 * v2.0.4 變更（2025-11-19）：
 * - 手機版「直接導航」純連結項目樣式統一
 * - 所有第一層選單使用相同的 padding: 10px 16px
 *
 * v2.0.3 變更（2025-11-19）：
 * - 漢堡選單在桌面版隱藏，手機版顯示
 * - 移除漢堡選單的位置控制（position/top/right）
 * - 移除 .active 狀態的位置變化
 * - 手機版的位置完全由外部 CSS 或使用者控制
 *
 * v2.0.1 變更（2025-11-19）：
 * - 修正手機版第二層選單樣式，符合 Figma 規格
 * - 調整 .category-header-mobile padding: 10px 16px 10px 32px
 * - 增加 line-height: 25.60px 和 letter-spacing: 1.60px
 * - 增加背景色 #FCF3F1
 * - 更新 SVG 圖示為 20x20，位於 (2px, 2px)，顏色 #E17564
 *
 * v2.0.0 重大變更（架構重構）：
 * - 完全分離桌面版和手機版 HTML/CSS 結構
 * - 桌面版樣式完全保留，零影響
 * - 手機版使用全新的 -mobile 類別命名
 * - 刪除舊的手機版 @media 規則（約 220 行）
 * - 新增簡潔的手機版獨立樣式（約 220 行）
 * - 桌面版在 >= 1024px 時隱藏手機版 HTML
 * - 手機版在 < 1024px 時隱藏桌面版 HTML
 * - 手機版圖示改用 CSS background-image（不再需要 JS 控制）
 * - 手機版 3 層 Accordion：母選單 → 分類 → 連結
 * - 保持漢堡選單、全螢幕 popup、空白區域關閉等功能
 *
 * v1.7.7 變更：
 * - 修正桌面版誤顯示 toggle-icon（+ / - 圖示）
 *
 * v1.7.5 變更：
 * - 修正手機版捲軸邏輯：只有第一層有捲軸，第2/3層完全展開
 *
 * v1.7.4 變更：
 * - 修正手機版 L2 背景層級問題（符合 SDD 規範）
 *
 * @package RS_Megamenu
 * @since 2.0.0
 */

/* ========================================
   CSS 變數
   ======================================== */
:root {
    --rs-megamenu-red: #E83743;
    --rs-megamenu-orange-red: #E17564;
    --rs-megamenu-gray: #88888C;
    --rs-megamenu-light-pink: #FCF3F1;
    --rs-megamenu-dark-gray: #505050;
    --rs-megamenu-darker-gray: #333333;
    --rs-megamenu-white: #FFFFFF;
    --rs-megamenu-font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* 導覽列（bar）高度，大小版型 dropdown 都貼齊此高度 */
    --rs-megamenu-bar-height: 90px;
}

/* ========================================
   第一層選單容器（零外部間距）
   ======================================== */
.rs-megamenu-nav {
    background: transparent;
    /* ✅ 零外部間距：適合嵌入 */
    padding: 0;
    margin: 0;
    /* ✅ 移除 sticky 定位 */
    position: relative;
}

.rs-megamenu-container {
    display: flex;
    align-items: center;
    /* ✅ 選單水平和垂直置中 */
    justify-content: center;
    /* ✅ 零外部間距 */
    padding: 0;
    margin: 0;
    max-width: none;
}

/* 漢堡選單（總是顯示，位置由外部控制）*/
.rs-megamenu-hamburger {
    width: 24px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    /* ✅ 使用自訂 SVG 作為背景 */
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="24" height="2" fill="%23333333"/%3E%3Crect y="8" width="24" height="2" fill="%23333333"/%3E%3Crect y="16" width="24" height="2" fill="%23333333"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 18px;
}

.rs-megamenu-hamburger span {
    display: none;
}

/* 展開狀態：漢堡按鈕不改變 */
.rs-megamenu-hamburger.active {
    /* 保持三條線不變 */
}

/* 第一層選單 */
.rs-megamenu-menu {
    display: flex;
    gap: 41px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rs-menu-item {
    font-family: var(--rs-megamenu-font-family);
    font-size: 16px;
    cursor: pointer;
    padding: 8px 0;
    position: relative;
    color: var(--rs-megamenu-darker-gray);
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.rs-menu-link {
    text-decoration: none;
    color: var(--rs-megamenu-darker-gray);
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.rs-menu-link:hover,
.rs-menu-link:active,
.rs-menu-link:focus,
.rs-menu-link:visited {
    color: var(--rs-megamenu-darker-gray);
    text-decoration: none;
    outline: none;
}

.rs-menu-text {
    display: inline-block;
    color: var(--rs-megamenu-darker-gray);
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* 手機版隱藏 */
.rs-hidden-mobile {
    display: flex;
}

/* ========================================
   Megamenu 區塊：大版型（桌面版）
   ======================================== */
.rs-megamenu-item.large {
    display: none;
    position: fixed;
    top: var(--rs-megamenu-bar-height, 90px);
    left: 0;
    width: 100vw;
    background: var(--rs-megamenu-white);
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.rs-megamenu-item.large.active {
    display: flex;
}

/* 左側分類 */
.rs-megamenu-left {
    display: flex;
    flex-direction: column;
    width: 320px;
    height: 433px;
    background: var(--rs-megamenu-red);
    padding: 20px 32px;
    gap: 17px;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    overflow-y: auto;
}

.category-tab {
    font-family: var(--rs-megamenu-font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: 25.60px;
    letter-spacing: 1.60px;
    color: rgba(255, 255, 255, 0.70);
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: right;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.category-tab:hover,
.category-tab.active {
    color: var(--rs-megamenu-white);
}

.category-tab:focus {
    outline: none;
}

/* 手機版分類項目區（桌面版隱藏）*/
.category-items-mobile {
    display: none;
}

/* 右側文字項目區（單欄布局）*/
.rs-megamenu-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 337px;
    max-height: 433px;
    overflow: auto;
    padding: 0;
}

.rs-megamenu-right.loading {
    position: relative;
    min-height: 200px;
}

.rs-megamenu-right.loading::before {
    content: '載入中...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--rs-megamenu-font-family);
    font-size: 16px;
    color: var(--rs-megamenu-gray);
}

/* 文字項目 */
.text-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-self: stretch;
    font-family: var(--rs-megamenu-font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: 25.60px;
    letter-spacing: 1.60px;
    color: var(--rs-megamenu-dark-gray);
    padding: 10px 20px;
    text-decoration: none;
    transition: all 0.2s ease;
    gap: 10px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.text-item:hover {
    color: var(--rs-megamenu-darker-gray);
}

.text-item:active,
.text-item:focus,
.text-item:visited {
    color: var(--rs-megamenu-dark-gray);
    text-decoration: none;
    outline: none;
}

/* ========================================
   Megamenu 區塊：小版型（桌面版）
   ======================================== */
.rs-megamenu-item.small {
    display: none;
    position: fixed;
    top: var(--rs-megamenu-bar-height, 90px);
    /* ✅ 不設 left，由 JS 動態計算水平位置對齊觸發的選單項目 */
    width: 160px;
    background: var(--rs-megamenu-white);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    margin-top: 0;
}

.rs-megamenu-item.small.active {
    display: block;
}

.rs-megamenu-text-links {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 小版型文字項目 */
.rs-megamenu-item.small .text-item {
    padding: 12px 20px;
}

/* 小版型文字項目 hover 和 active 樣式 */
.rs-megamenu-item.small .text-item:hover,
.rs-megamenu-item.small .text-item.active {
    background: #FCF3F1;
    color: #333;
}

/* ========================================
   RWD: 桌面版 (>= 1024px) - 隱藏手機版 HTML
   ======================================== */
@media (min-width: 1024px) {
    /* 隱藏所有手機版 HTML 結構 */
    .rs-megamenu-mobile {
        display: none !important;
    }

    /* 隱藏桌面版的 toggle-icon（+ / - 圖示）*/
    .toggle-icon {
        display: none !important;
    }

    /* 隱藏漢堡選單 */
    .rs-megamenu-hamburger {
        display: none !important;
    }
}

/* ========================================
   RWD: 手機版/平板版 (< 1024px)
   ======================================== */
@media (max-width: 1023px) {
    /* ========================================
       隱藏桌面版 HTML 結構
       ======================================== */
    .rs-menu-text {
        display: none !important;
    }

    .toggle-icon {
        display: none !important;
    }

    /* 強制隱藏桌面版 megamenu（包含 .active 狀態）*/
    .rs-megamenu-item.large,
    .rs-megamenu-item.large.active,
    .rs-megamenu-item.small,
    .rs-megamenu-item.small.active {
        display: none !important;
    }

    /* ========================================
       導覽列基礎樣式
       ======================================== */
    .rs-megamenu-nav {
        padding: 0; /* 移除 padding，讓選單完全靠左對齊 */
    }

    .rs-megamenu-container {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    /* ========================================
       漢堡選單（手機版顯示，位置由外部控制）
       ======================================== */
    .rs-megamenu-hamburger {
        display: block;
        /* 位置由外部 CSS 或 Elementor 控制，不在此設定 */
    }

    /* ========================================
       第一層選單容器
       ======================================== */
    .rs-megamenu-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .rs-megamenu-menu.open {
        display: flex;
        position: fixed;
        top: 60px;
        left: 0;
        width: 100vw;
        height: calc(100vh - 60px);
        overflow-y: auto;
        background: var(--rs-megamenu-white);
        z-index: 9998;
        margin: 0;
        padding-top: 0;
    }

    /* ========================================
       手機版隱藏項目
       ======================================== */
    .rs-hidden-mobile {
        display: none !important;
    }

    /* ========================================
       直接導航項目（純連結）
       ======================================== */
    .rs-menu-link {
        display: block;
        padding: 10px 16px; /* 與一般選單項目相同 */
        color: var(--rs-megamenu-darker-gray);
        font-family: var(--rs-megamenu-font-family);
        font-size: 16px;
        font-weight: 400;
        line-height: 25.60px;
        letter-spacing: 1.60px;
        text-decoration: none;
    }

    /* ========================================
       手機版 Megamenu 容器（通用）
       ======================================== */
    .rs-megamenu-mobile {
        width: 100%;
        background: var(--rs-megamenu-white);
    }

    /* ========================================
       第一層：選單標題 + 圖示
       ======================================== */
    .rs-menu-header-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px; /* Figma: py-2.5 px-4 */
        background: var(--rs-megamenu-white);
        cursor: pointer;
        position: relative;
        transition: all 0.2s ease;
    }

    /* 展開狀態：紅色背景 + 白色文字 */
    .rs-menu-item.active .rs-menu-header-mobile {
        background: var(--rs-megamenu-red);
    }

    .rs-menu-text-mobile {
        color: var(--rs-megamenu-darker-gray); /* Figma: #333333 */
        font-size: 16px;
        font-weight: 400;
        line-height: 25.60px; /* Figma: 精確值 */
        letter-spacing: 1.60px; /* Figma: 固定值 */
        transition: color 0.2s ease;
    }

    /* 展開狀態：文字變白色 */
    .rs-menu-item.active .rs-menu-text-mobile {
        color: var(--rs-megamenu-white);
    }

    .toggle-icon-mobile {
        width: 24px; /* Figma: size-6 */
        height: 24px;
        flex-shrink: 0;
        position: relative;
        /* 預設：灰色 + 號（未展開）- 與 Figma 完全一致 */
        background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cline x1="2" y1="9.89999" x2="18" y2="9.89999" stroke="%2388888C"/%3E%3Cline x1="10.1" y1="2" x2="10.1" y2="18" stroke="%2388888C"/%3E%3C/svg%3E');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px 20px;
        transition: background-image 0.2s ease;
    }

    /* 展開狀態：白色橫線 - 號 */
    .rs-menu-item.active .toggle-icon-mobile {
        background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cline x1="2" y1="9.89999" x2="18" y2="9.89999" stroke="white"/%3E%3C/svg%3E');
    }

    /* ========================================
       第二層：內容容器（分類列表或連結列表）
       ======================================== */
    .rs-megamenu-content-mobile {
        display: none;
        flex-direction: column;
        background: var(--rs-megamenu-light-pink);
    }

    /* 當父層 .rs-menu-item.active 時，顯示內容 */
    .rs-menu-item.active .rs-megamenu-content-mobile {
        display: flex;
    }

    /* ========================================
       大版型：第二層分類項目
       ======================================== */
    .category-item-mobile {
        width: 100%;
        background: var(--rs-megamenu-light-pink);
    }

    .category-header-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        padding: 10px 16px 10px 32px; /* Figma: 精確值 */
        background: var(--rs-megamenu-light-pink); /* Figma: #FCF3F1 */
        cursor: pointer;
        color: var(--rs-megamenu-gray); /* Figma: #88888C */
        font-family: var(--rs-megamenu-font-family);
        font-size: 16px;
        font-weight: 400;
        line-height: 25.60px; /* Figma: 精確值 */
        letter-spacing: 1.60px; /* Figma: 精確值 */
    }

    .category-icon-mobile {
        width: 24px; /* Figma: 容器大小 */
        height: 24px;
        flex-shrink: 0;
        position: relative;
        /* Figma: 20x20 SVG，位於 (2px, 2px)，顏色 #E17564 */
        background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cline x1="2" y1="9.89999" x2="18" y2="9.89999" stroke="%23E17564"/%3E%3Cline x1="10.1" y1="2" x2="10.1" y2="18" stroke="%23E17564"/%3E%3C/svg%3E');
        background-repeat: no-repeat;
        background-position: 2px 2px; /* Figma: SVG 偏移 (2px, 2px) */
        background-size: 20px 20px; /* Figma: SVG 實際大小 */
        transition: background-image 0.2s ease;
    }

    /* 分類展開時，圖示變為 - */
    .category-item-mobile.active .category-icon-mobile {
        /* Figma: 20x20 SVG，只有橫線，位於 (2px, 2px) */
        background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cline x1="2" y1="9.89999" x2="18" y2="9.89999" stroke="%23E17564"/%3E%3C/svg%3E');
    }

    /* ========================================
       大版型：第三層連結列表
       ======================================== */
    .category-links-mobile {
        display: none;
        flex-direction: column;
        background: var(--rs-megamenu-light-pink);
    }

    .category-item-mobile.active .category-links-mobile {
        display: flex;
    }

    .category-links-mobile .text-link-mobile {
        padding: 16px 16px 16px 48px;
        color: var(--rs-megamenu-gray);
        font-size: 14px;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .category-links-mobile .text-link-mobile:hover {
        background: rgba(0, 0, 0, 0.05);
    }

    /* ========================================
       小版型：第二層直接連結列表
       ======================================== */
    .rs-megamenu-mobile.small .rs-megamenu-content-mobile {
        padding: 0;
    }

    .rs-megamenu-mobile.small .text-link-mobile {
        padding: 16px 16px 16px 32px;
        color: var(--rs-megamenu-gray);
        font-size: 14px;
        text-decoration: none;
        display: block;
        transition: all 0.2s ease;
    }

    .rs-megamenu-mobile.small .text-link-mobile:hover {
        background: rgba(0, 0, 0, 0.05);
    }
}

/* ========================================
   無障礙輔助
   ======================================== */
.rs-menu-item:focus,
.text-item:focus,
.category-tab:focus,
.rs-menu-link:focus,
.rs-menu-text:focus {
    outline: none;
}

/* 高對比模式 */
@media (prefers-contrast: high) {
    .rs-megamenu-nav {
        border: 2px solid #000;
    }

    .text-item {
        border: 1px solid #000;
    }
}

/* 減少動畫模式 */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}