/* =================================================================
 * 漢堡選單修正 CSS - 修復 Joomla 5 升級後的問題
 * 問題1: 點擊漢堡選單後頁面變黑消失
 * 問題2: 右邊滑出來的選單分成2列
 * ================================================================= */

/* 修正問題1: 防止頁面變黑 - 調整遮罩層透明度和行為 */
.offcanvas-overlay {
    background: rgba(0,0,0,0.05) !important; /* 大幅降低遮罩層透明度 */
    opacity: 0.1 !important; /* 設定非常低的透明度，幾乎透明 */
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 9998 !important; /* 確保在正確的層級 */
}

/* 確保點擊遮罩層時的行為正常 */
.offcanvas .offcanvas-overlay {
    visibility: visible !important;
    opacity: 0.1 !important;
    background: rgba(0,0,0,0.05) !important;
}

/* 確保主要內容在遮罩層開啟時保持可見 */
.offcanvas .body-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 修正問題2: 強制選單內容為單列顯示 */
.offcanvas-menu .offcanvas-inner {
    width: 100% !important;
    display: block !important;
    flex-direction: column !important;
}

.offcanvas-menu .offcanvas-inner .sp-module {
    width: 100% !important;
    display: block !important;
    margin-bottom: 20px !important;
    float: none !important;
}

/* 確保選單項目垂直排列 */
.offcanvas-menu .offcanvas-inner .sp-module ul {
    width: 100% !important;
    display: block !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.offcanvas-menu .offcanvas-inner .sp-module ul li {
    width: 100% !important;
    display: block !important;
    float: none !important;
    clear: both !important;
}

/* 修正選單項目的連結樣式 */
.offcanvas-menu .offcanvas-inner .sp-module ul li a {
    display: block !important;
    width: 100% !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

/* 子選單也要單列顯示 */
.offcanvas-menu .offcanvas-inner .sp-module ul li ul {
    width: 100% !important;
    display: block !important;
    margin-left: 0 !important;
}

.offcanvas-menu .offcanvas-inner .sp-module ul li ul li {
    width: 100% !important;
    display: block !important;
}

.offcanvas-menu .offcanvas-inner .sp-module ul li ul li a {
    padding-left: 40px !important; /* 子選單項目縮排 */
}

/* 確保漢堡選單按鈕正常工作 */
#offcanvas-toggler {
    cursor: pointer !important;
    z-index: 9999 !important;
}

/* 修正選單動畫和過渡效果 */
.offcanvas-menu {
    transition: transform 0.3s ease !important;
    will-change: transform !important;
}

.body-wrapper {
    transition: transform 0.3s ease !important;
    will-change: transform !important;
}

/* 確保關閉按鈕可見且可用 */
.close-offcanvas {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 10001 !important;
    color: #fff !important;
    font-size: 18px !important;
    cursor: pointer !important;
    padding: 5px !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 50% !important;
    width: 35px !important;
    height: 35px !important;
    text-align: center !important;
    line-height: 23px !important;
}

.close-offcanvas:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
}

/* 禁用可能導致問題的 CSS Grid 或 Flexbox 屬性 */
.offcanvas-menu * {
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    column-count: 1 !important;
}

/* 修正響應式問題 */
@media (max-width: 768px) {
    .offcanvas-menu {
        width: 300px !important;
    }
    
    .offcanvas-menu .offcanvas-inner .sp-module ul li a {
        font-size: 14px !important;
        padding: 12px 20px !important;
    }
}

@media (max-width: 480px) {
    .offcanvas-menu {
        width: 280px !important;
    }
}

/* 確保選單標題正確顯示 */
.offcanvas-menu .offcanvas-inner .sp-module .sp-module-title {
    color: #fff !important;
    font-size: 16px !important;
    margin-bottom: 15px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    padding-bottom: 10px !important;
}

/* 修正可能的 JavaScript 衝突 - 重新定義offcanvas狀態 */
body.offcanvas {
    overflow: hidden !important;
}

body.offcanvas .body-wrapper {
    transform: translateX(-320px) !important;
    opacity: 1 !important; /* 確保主內容保持可見 */
    visibility: visible !important;
}

body.offcanvas .offcanvas-menu {
    transform: translateX(0) !important;
    visibility: visible !important;
    z-index: 9999 !important;
}

/* 防止任何元素被意外隱藏 */
body.offcanvas .body-innerwrapper {
    opacity: 1 !important;
    visibility: visible !important;
}

body.offcanvas #sp-header {
    opacity: 1 !important;
    visibility: visible !important;
}

body.offcanvas #sp-main-body {
    opacity: 1 !important;
    visibility: visible !important;
}

/* =================================================================
 * 修正 900-991px 寬度範圍內 offcanvas 選單消失問題
 * 核心問題：Bootstrap 響應式斷點衝突
 * 影響範圍：Bootstrap sm 斷點 (768px-991px)
 * ================================================================= */

/* 修正 Bootstrap sm 斷點範圍內的選單顯示問題 */
@media (min-width: 768px) and (max-width: 991px) {
    /* 確保選單容器正確寬度 - 修正缺少 col-md-9 的問題 */
    #sp-menu {
        width: 75% !important; /* col-9 = 9/12 = 75% */
        float: left !important;
        display: block !important;
    }
    
    /* 強制顯示漢堡按鈕 - 確保 offcanvas 功能可用 */
    #offcanvas-toggler {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 隱藏桌面選單 - 解決 hidden-sm 類別衝突 */
    .sp-megamenu-parent {
        display: none !important;
    }
    
    /* 確保 offcanvas 選單在此範圍內正常工作 */
    .offcanvas-menu {
        display: block !important;
        position: fixed !important;
        right: -320px !important;
        top: 0 !important;
        width: 320px !important;
        height: 100% !important;
        background: #333 !important;
        z-index: 9999 !important;
        transition: transform 0.3s ease !important;
    }
    
    /* 當 offcanvas 開啟時的狀態 */
    body.offcanvas .offcanvas-menu {
        transform: translateX(-320px) !important;
    }
    
    body.offcanvas .body-wrapper {
        transform: translateX(-320px) !important;
    }
    
    /* 確保遮罩層在此範圍內正常工作 */
    body.offcanvas .offcanvas-overlay {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,0.05) !important;
        z-index: 9998 !important;
        opacity: 0.1 !important;
    }
}

/* 額外確保 - 針對可能的邊界情況 */
@media (min-width: 900px) and (max-width: 991px) {
    /* 在問題最嚴重的 900-991px 範圍內強制修正 */
    #offcanvas-toggler {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10000 !important;
    }
    
    /* 強制隱藏任何可能干擾的桌面選單元素 */
    .sp-megamenu-parent,
    .hidden-sm {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* 確保選單容器有正確的寬度和佈局 */
    #sp-menu {
        width: 75% !important;
        float: left !important;
        display: block !important;
        position: relative !important;
    }
}

/* =================================================================
 * 強力修正 Bootstrap 斷點問題 - 確保 offcanvas 在所有情況下可用
 * ================================================================= */

/* 覆蓋任何可能隱藏 offcanvas 按鈕的規則 */
@media (max-width: 991px) {
    /* 確保 offcanvas 按鈕在所有小於 992px 的螢幕上都顯示 */
    #offcanvas-toggler {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 隱藏桌面選單 */
    .sp-megamenu-parent {
        display: none !important;
    }
    
    /* 修正 Bootstrap Grid 類別缺失問題 */
    [class*="col-"][class*="menu"] {
        width: 75% !important;
        float: left !important;
    }
}

/* 特別針對 sm 斷點的強制修正 */
@media (min-width: 768px) and (max-width: 991px) {
    /* 強制覆蓋任何 hidden-sm 類別 */
    .hidden-sm {
        display: none !important;
    }
    
    /* 確保不是 hidden-sm 的元素正常顯示 */
    .sp-megamenu-parent:not(.hidden-sm) {
        display: none !important; /* 在這個斷點仍然要隱藏，使用 offcanvas */
    }
    
    /* 強制顯示 offcanvas 相關元素 */
    #offcanvas-toggler,
    .offcanvas-menu,
    .offcanvas-overlay {
        display: block !important;
        visibility: visible !important;
    }
}