/*
 Theme Name: HanHua Child
 Theme URI: https://example.com
 Description: GeneratePress child theme with ITCSS + BEM homepage.
 Author: Miya
 Version: 1.0.0
 Template: generatepress
 Text Domain: hanhua-child
*/

/* 建議留空或只放極少量全域覆寫，主要樣式在 /css 內分層管理 */

/* Header - 跟著頁面滾動 */
.site-header {
    position: fixed;
    z-index: 1000;
    /* background: #ffffffbd; */
    transition: all 0.3s ease;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}
/* .site-header:hover {
        background: #fff;
} */
/* 讓 header 內部的 container 也是滿版 */
.site-header .inside-header {
    max-width: 100% !important;
    padding: 4px 20px;
    /* background: transparent !important; */
}

/* 移除導航按鈕的白色背景 */
/* .site-header .main-navigation,
.site-header .main-navigation .main-nav,
.site-header .main-navigation,
.site-header {
    background: transparent !important;
} */

/* 當滾動時增加陰影效果 */
.site-header.scrolled {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

/* 覆蓋 GeneratePress 的 grid-container，讓內容滿版 */
.grid-container {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 手機版導航選單優化 - 全螢幕選單 */
@media (max-width: 768px) {
    /* 當選單打開時，佔滿整個螢幕 */
    .main-navigation.toggled .main-nav {
        position: fixed !important;
        top: 60px; /* header 高度 */
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: calc(100vh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        z-index: 999;
    }

    /* 改善滾動條樣式 */
    .main-navigation.toggled .main-nav::-webkit-scrollbar {
        width: 6px;
    }

    .main-navigation.toggled .main-nav::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
    }

    .main-navigation.toggled .main-nav::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 3px;
    }

    .main-navigation.toggled .main-nav::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.5);
    }

    /* 確保選單項目有適當的內距 */
    .main-navigation.toggled .main-nav ul {
        padding: 0;
        margin: 0;
    }
}