/* 
 * 手機字體增強 CSS
 * 這個文件應該在其他 CSS 文件之後載入，以確保其規則優先級最高
 */

/* 確保在超過1200px的寬度時隱藏目錄按鈕 */
@media only screen and (min-width: 1201px) {
    .mobile-menu-btn {
        display: none !important;
    }
}

/* 針對平板和小桌面設備的目錄按鈕樣式 (768px-1200px) */
@media only screen and (min-width: 768px) and (max-width: 1200px) {
    /* 確保在這個寬度範圍內也顯示目錄按鈕，但放在標頭右側 */
    .mobile-menu-btn {
        display: flex !important;
        position: absolute !important;
        top: 15px !important; /* 放在標頭頂部靠上位置 */
        right: 20px !important; /* 放在右側 */
        width: auto !important; /* 寬度自適應內容 */
        height: 40px !important;
        justify-content: center !important;
        align-items: center !important;
        background: linear-gradient(to right, #952B32, #C13E44, #952B32) !important;
        color: white !important;
        padding: 5px 15px !important;
        border-radius: 5px !important;
        font-weight: bold !important;
        text-align: center !important;
        z-index: 2000 !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
        text-decoration: none !important;
    }

    /* 在這個寬度下調整標題內容 */
    .body-content {
        padding-top: 90px !important;
    }
    
    /* 導航選單樣式調整 */
    .navcs {
        display: none !important;
    }
    
    .navcs.active {
        display: block !important;
        position: absolute !important;
        top: 45px !important;
        right: 0 !important;
        width: 250px !important;
        background-color: rgba(149, 43, 50, 0.95) !important;
        z-index: 999 !important;
        padding: 10px 0 !important;
        border-radius: 0 0 0 15px !important;
        box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.3) !important;
    }
    
    .navcs li {
        display: block !important;
        text-align: right !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding: 8px 20px !important;
        margin: 0 !important;
    }
    
    /* 隱藏原本的選單按鈕 */
    #menu {
        display: none !important;
    }
}

/* 基本文字大小覆蓋 - 手機版 */
@media only screen and (max-width: 767px) {
    /* 設置基礎字體大小，影響所有相對單位的元素 */
    html, body {
        font-size: 21px !important;
    }

    /* 手機版頭部佈局增強 */
    .bgs {
        height: 90px !important; /* 增加 header 的高度 */
        position: relative !important; /* 確保相對定位以便於定位子元素 */
    }
    
    /* logo 容器大小調整 - 置中 */
    .logo-container {
        width: 100% !important; /* 寬度100% */
        height: 90px !important; /* 高度與header相同 */
        left: 0 !important; 
        display: flex !important;
        justify-content: center !important; /* 水平置中 */
        align-items: center !important; /* 垂直置中 */
        position: absolute !important;
    }
    
    /* logo 本身大小調整 */
    .logo {
        height: 80% !important; /* 高度比例 */
        width: 240px !important; /* 固定寬度 */
    }
    
    /* 目錄按鈕樣式 */
    .mobile-menu-btn {
        display: flex !important;
        position: absolute !important;
        top: 90px !important; /* 放在header底部，即logo下方 */
        left: 0 !important;
        width: 100% !important; /* 寬度100% */
        height: 40px !important;
        justify-content: center !important;
        align-items: center !important;
        background: linear-gradient(to right, #952B32, #C13E44, #952B32) !important; /* 漸變背景 */
        color: white !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
        padding: 8px 0 !important;
        border-radius: 0 0 15px 15px !important;
        font-weight: bold !important;
        text-align: center !important;
        z-index: 1000 !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
        text-decoration: none !important;
    }
    
    /* 確保導航選單在手機版正確顯示 */
    .navcs {
        display: none !important;
        position: absolute !important;
        top: 130px !important; /* 放在目錄按鈕下方 */
        left: 0 !important;
        width: 100% !important;
        background-color: rgba(149, 43, 50, 0.95) !important; /* 半透明背景 */
        z-index: 999 !important;
        padding: 10px 0 !important;
        border-radius: 0 0 15px 15px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    }
    
    .navcs.active {
        display: block !important;
    }
    
    /* 隱藏原本的選單按鈕 */
    #menu {
        display: none !important;
    }
    
    /* 調整內容區域的頂部內邊距，避免被放大後的 header 和按鈕遮擋 */
    .body-content {
        padding-top: 140px !important; /* 根據新的 header 高度 + 按鈕高度調整 */
    }

    /* 各種文字元素大小調整 */
    p, div, span, li, td, a, button, input, select, textarea, label {
        font-size: 1rem !important; /* 約21px */
    }

    /* 標題文字調整 */
    h1, .h1 {
        font-size: 2rem !important; /* 約42px */
    }

    h2, .h2 {
        font-size: 1.8rem !important; /* 約38px */
    }

    h3, .h3 {
        font-size: 1.6rem !important; /* 約34px */
    }

    h4, .h4 {
        font-size: 1.4rem !important; /* 約29px */
    }

    h5, .h5 {
        font-size: 1.2rem !important; /* 約25px */
    }

    h6, .h6 {
        font-size: 1.1rem !important; /* 約23px */
    }

    /* 導航元素的調整 */
    .navcs, .navcsPhone li, .nav-link {
        font-size: 1.3rem !important; /* 約27px */
    }
    
    /* 增大手機專用選單圖示 */
    .showmenu {
        font-size: 1.75rem !important; /* 約37px */
    }

    /* 大型標題 */
    .HeadTitle {
        font-size: 2.5rem !important; /* 約52px */
    }

    /* 按鈕文字 */
    .btn, button, .btn-store {
        font-size: 1.2rem !important; /* 約25px */
        padding: 0.8em 1.2em !important;
        min-height: 44px !important; /* 觸控區域最小高度 */
    }

    /* 店家卡片的相關文字 */
    .store-name {
        font-size: 1.4rem !important; /* 約29px */
    }

    .store-detail {
        font-size: 1.1rem !important; /* 約23px */
    }

    /* 新聞和內容文字 */
    .news-title {
        font-size: 1.8rem !important; /* 約38px */
    }

    .news-excerpt, .news-body p {
        font-size: 1.1rem !important; /* 約23px */
        line-height: 1.7 !important;
    }

    /* 表格內容 */
    table, th, td {
        font-size: 1rem !important; /* 約21px */
    }
    
    /* 確保頁腳文字不會太小 */
    footer p, .footerInfo, .reserved {
        font-size: 0.9rem !important; /* 約19px */
    }
    
    /* 小文本元素 */
    small, .small {
        font-size: 0.9rem !important; /* 約19px */
    }

    /* 增大特殊元素 */
    .title {
        font-size: 1.8rem !important; /* 約38px */
    }

    .Aboutcontext {
        font-size: 1.2rem !important; /* 約25px */
        line-height: 1.8 !important;
    }

    /* 提高行距，使文字更易閱讀 */
    p, li, div {
        line-height: 1.6 !important;
    }
}