/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* 手機端選單樣式 */
@media only screen and (max-width: 48em) {
    /* 選單背景色 */
    .mfp-bg.main-menu-overlay {
        background-color: #004d40 !important;  /* 墨綠色 */
        opacity: 0.95;
    }
    
    #main-menu.mobile-sidebar {
        background-color: #004d40 !important;  /* 墨綠色 */
    }
    
    .mobile-sidebar {
        background-color: #004d40 !important;  /* 墨綠色 */
        -webkit-overflow-scrolling: touch; /* 改善 iOS 滾動 */
        overflow-y: auto; /* 確保可以滾動 */
        height: 100vh; /* 確保全高度 */
    }
    
    /* 選單內容樣式優化 */
    .mobile-sidebar .nav li a {
        color: #ffffff !important;  /* 白色文字 */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 12px 15px; /* 增加水平內邊距 */
        display: block; /* 確保整個區域可點擊 */
        position: relative; /* 為箭頭定位 */
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1); /* iOS 點擊反饋 */
    }
    
    .mobile-sidebar .nav li a:active {
        background: rgba(255, 255, 255, 0.15); /* 點擊時的反饋 */
    }
    
    .mobile-sidebar .nav li a:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #4db6ac !important;  /* 淺綠色 hover 效果 */
    }
    
    /* 改善子選單開關按鈕的可點擊區域 */
    .mobile-sidebar .nav li.has-child > .toggle {
        padding: 12px 15px;
        width: 50px;
        height: 44px;
        line-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
        cursor: pointer;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* 搜索框樣式 */
    .mobile-sidebar .searchform {
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        margin: 10px;
    }
    
    .mobile-sidebar .searchform input {
        background: transparent !important;
        color: #ffffff !important;
        height: 40px; /* 增加高度改善可點擊區域 */
    }
    
    .mobile-sidebar .searchform .button {
        background: rgba(255, 255, 255, 0.1) !important;
        height: 40px; /* 增加高度改善可點擊區域 */
    }
    
    /* 選單圖標顏色 */
    .nav-icon a {
        color: #004d40 !important;  /* 墨綠色 */
    }
    
    /* 當前選中項目樣式 */
    .mobile-sidebar .nav li.current-menu-item > a {
        background: rgba(255, 255, 255, 0.15);
        color: #4db6ac !important;  /* 淺綠色 */
    }

    /* 改善子選單展開/收起的過渡效果 */
    .mobile-sidebar .nav li ul {
        transition: all 0.3s ease;
        padding-left: 15px;
    }

    /* 確保選單項有足夠的點擊區域 */
    .mobile-sidebar .nav li {
        margin: 0;
        position: relative;
    }
}

/* 修復 iOS 上的點擊延遲 */
* {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}