/**
 * 星辰當舖 - Header 樣式
 * 包含頁頭、導航菜單、Hero區域和服務簡介樣式
 */

/* 全局樣式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'M PLUS Rounded 1c', 'Zen Maru Gothic', 'Kosugi Maru', 'Yuanti TC', 'Yuanti SC', 'Microsoft JhengHei', '微軟正黑體', sans-serif;
    color: #fff;
    background: url('../images/header/bg1.jpg') no-repeat center top;
    background-size: 100% auto; /* 修改為 100% auto，確保寬度覆蓋但高度保持原比例 */
    background-attachment: scroll; /* 讓背景跟隨頁面滾動 */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 強制所有文字使用圓潤字體 */
*, 
*::before, 
*::after {
    font-family: 'M PLUS Rounded 1c', 'Zen Maru Gothic', 'Kosugi Maru', 'Yuanti TC', 'Yuanti SC', sans-serif;
}

/* 圓潤字體應用於標題和特定元素 */
h1, h2, h3, h4, h5, h6,
.main-title, .sub-title, .menu-item, .submenu a, 
.mobile-menu-item, .mobile-menu-home, .primary-text {
    font-family: 'M PLUS Rounded 1c', 'Zen Maru Gothic', 'Kosugi Maru', 'Yuanti TC', 'Noto Serif TC', sans-serif;
    letter-spacing: 0.02em;
    font-weight: 500;
}

/* 強調圓潤效果，針對菜單項目 */
.menu-item, .submenu a, .mobile-menu-item, .mobile-menu-home {
    font-weight: 700;
    font-family: 'M PLUS Rounded 1c', 'Kosugi Maru', sans-serif;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 移除宇宙背景效果 */
.space-background {
    display: none;
}

/* ===== 第一部分：Logo + 導航菜單 ===== */
.main-header {
    width: 100%;
    background: transparent;
    z-index: 1000;
    padding: 15px 0;
    position: fixed;
    top: 0;
    left: 0;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}

.logo-menu-wrapper {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    background: linear-gradient(to right, #f7c96e, #eeb048, #e9a63b);
    border-radius: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: visible;
}

.logo-container {
    flex: 0 0 auto;
    padding: 10px 25px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px 0 0 40px; /* 添加左側圓角，右側不需要圓角 */
}

.logo {
    max-height: 50px;
    width: auto;
}

/* 選單容器 */
.menu-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 15px;
    position: relative;
}

/* 主導航菜單 */
.main-menu {
    display: flex;
    align-items: center;
    padding: 5px 15px;
    margin-left: 20px;
    flex: 1;
    position: static;
}

/* 桌面版選單 */
.desktop-menu {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
    width: 100%;
}

/* 手機版選單 - 只在移動端顯示 */
.mobile-menu {
    display: none;
    width: 100%;
    padding: 2px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.mobile-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.mobile-menu-item {
    display: block;
    padding: 12px 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    position: relative;
}

.mobile-menu-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.mobile-menu-item:nth-child(odd)::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
}

.mobile-menu-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.mobile-menu-footer {
    margin-top: 0; /* 減少頂部間距 */
    width: 100%;
}

.mobile-menu-home {
    display: block;
    padding: 0px; /* 減少內部間距 */
    background: transparent;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    width: 100%;
    position: relative;
    margin-top: 0; /* 移除頂部外邊距 */
    border: none;
}

.main-menu li {
    position: relative;
    margin: 0 10px;
}

.menu-item {
    display: flex;
    align-items: flex-start; /* 從頂部對齊 */
    padding: 10px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 15px;
}

.menu-item:hover {
    transform: none;
    background-color: transparent;
}

.menu-icon {
    margin-right: 8px;
    display: flex;
    align-items: center;
    margin-top: 1px; /* 微調圖標位置，使其與主文字對齊 */
}

.menu-icon img {
    width: 24px;
    height: 24px;
}

.menu-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-text {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    transition: all 0.3s ease;
    text-align: center;
    margin-bottom: 6px; /* 增加與 sub-text 的間距 */
    font-family: 'M PLUS Rounded 1c', 'Zen Maru Gothic', sans-serif;
    letter-spacing: 0.03em;
}

.sub-text {
    font-size: 9px;
    opacity: 0.8;
    color: #fff0e5;
    transition: all 0.3s ease;
    text-align: center;
    width: 100%;
    font-family: 'M PLUS Rounded 1c', 'Zen Maru Gothic', sans-serif;
    letter-spacing: 0.03em;
}

.menu-item:hover .main-text,
.menu-item:hover .sub-text {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 15px rgba(255, 255, 255, 0.6);
}

/* 子菜單 */
.submenu {
    position: absolute;
    top: 60%;
    left: 65%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, #f7c96e, #eeb048, #e9a63b); /* 添加漸層背景 */
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.6); /* 添加白色邊框 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 255, 255, 0.5); /* 添加白色光暈外框 */
    padding: 5px 0;
    min-width: 200px;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
}

.submenu::before {
    display: none; /* 移除三角形箭頭 */
}

.has-submenu:hover .submenu {
    visibility: visible;
    opacity: 1;
}

.submenu li {
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
}

.submenu a {
    display: block;
    padding: 12px 20px;
    color: #fff; /* 文字改為白色 */
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* 淺黃色分隔線 */
    margin: 0 10px; /* 分隔線不貼齊兩端 */
}

.submenu a:hover {
    background-color: transparent; /* 移除背景色變化 */
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 15px rgba(255, 255, 255, 0.6); /* 保留文字光暈效果 */
}

.submenu li:last-child a {
    border-bottom: none;
}

/* 漢堡選單 */
.menu-toggle {
    display: none;
    cursor: pointer;
    z-index: 1001;
    width: 40px;
    height: 40px;
}

.menu-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===== 第二部分：Hero Section ===== */
.hero-section {
    padding: 40px 0;
    overflow: hidden;
    margin-top: 100px; /* 添加上邊距，為fixed header騰出空間 */
}

/* 減少左右區域之間的間距 */
.hero-section .row {
    margin-left: 0;
    margin-right: 0;
}

.hero-section .row > div {
    padding-left: 0;
    padding-right: 0;
}

.hero-slider {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    height: 240px; /* 減小高度 */
}

.slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain; /* 改為contain以避免裁切圖片 */
    background-position: center;
    background-repeat: no-repeat; /* 避免圖片重複 */
    opacity: 0;
    transition: opacity 1s ease;
}

.slide.active {
    opacity: 1;
}

.hero-content {
    padding: 30px 0 30px 0; /* 移除左右內邊距，只保留上下內邊距 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.main-title {
    font-size: 40px; /* 文字放大到40px */
    font-weight: 900;
    margin-bottom: 0px;
    color: #000;
    text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 0.8); /* 增強白色光暈 */
    letter-spacing: 5px; /* 拉開字母間距 */
}

.sub-title {
    font-size: 36px; /* 恢復為36px */
    font-weight: 600;
    color: #48527e;
    line-height: 1.5;
    /* 添加更多支援中文字體的選項，特別是支援「穩」和「您」這些字 */
    font-family: 'Noto Sans TC', 'M PLUS Rounded 1c', 'Microsoft JhengHei', '微軟正黑體', sans-serif;
    letter-spacing: 0.01em;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
}

/* ===== 第三部分：服務簡介 ===== */
.service-intro {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background: linear-gradient(180deg, #f8ca7a 0%, #e39f35 100%);
    border-radius: 100px;
    padding: 10px 0;
}

.service-intro .row {
    display: flex;
    align-items: center;
}
.service-intro .col-lg-6:first-child {
    flex: 0 0 40%;
    max-width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.service-intro .col-lg-6:last-child {
    flex: 0 0 60%;
    max-width: 60%;
}

.service-image img {
    max-width: 100%;
    height: auto;
    max-height: 90px;
    display: block;
    margin: 0 auto;
    border-radius: 0px;
}

.service-content {
    padding: 5px 0;
    margin-top: 5px;
}

.primary-text {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.5;
    letter-spacing: 2px;
    color: #fff;
}

.secondary-text {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    color: #fff;
}

/* 響應式設計 */
@media (max-width: 991px) {
    body {
        background-size: 550% auto; /* 背景圖片寬度放大為 250%，確保足夠覆蓋 */
        background-position: center top; /* 背景圖片置中，從頂部開始 */
        background-attachment: scroll;
    }
    
    .main-header {
        padding: 10px 0;
    }
    
    /* 移動端也移除左右區域間距 */
    .hero-content {
        padding: 20px 0;
    }
    
    .header-container {
        padding: 0 10px;
    }
    
    .logo-menu-wrapper {
        border-radius: 40px;
        display: flex;
        justify-content: space-between;
    }
    
    .logo-container {
        padding: 4px 5px;
        border-radius: 40px 0 0 40px; /* 調整移動端的圓角大小 */
        flex: 0 0 80%; /* Logo容器占據80%寬度 */
    }
    
    .logo {
        max-height: 55px;
    }
    
    .menu-toggle {
        display: block;
        margin-right: 15px; /* 確保漢堡按鈕有適當的右側間距 */
        align-self: center; /* 垂直居中 */
    }
    
    .menu-container {
        padding-right: 10px;
        flex: 0 0 20%; /* 菜單容器占據20%寬度 */
        display: flex;
        justify-content: flex-end; /* 漢堡按鈕靠右對齊 */
        align-items: center;
    }
    
    .main-menu {
        position: fixed;
        top: 80px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 500px;
        height: auto;
        background: linear-gradient(135deg, #f7c96e, #eeb048, #e9a63b);
        border-radius: 40px;
        padding: 15px;
        overflow-y: auto;
        z-index: 1000;
        margin-left: 0;
        display: none;
        opacity: 0;
        visibility: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
    
    .main-menu.active {
        opacity: 1;
        visibility: visible;
        display: block !important;
    }
    
    /* 桌面版選單在移動端隱藏 */
    .desktop-menu {
        display: none;
    }
    
    /* 手機版選單在移動端顯示 */
    .mobile-menu {
        display: block;
        width: 100%;
    }
    
    .mobile-menu-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        margin-bottom: 15px;
    }
    
    .mobile-menu-item {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 60px;
        padding: 12px 8px;
        background: transparent;
        color: #fff;
        text-decoration: none;
        text-align: center;
        font-weight: 500;
        border: none;
        position: relative;
        transition: all 0.3s ease;
    }
    
    /* 所有菜單項目（包括最後一個）都添加底部分隔線 */
    .mobile-menu-item::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: rgba(255, 255, 255, 0.3);
    }
    
    /* 添加左右項目之間的分隔線 */
    .mobile-menu-item:nth-child(odd)::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 100%;
        background: rgba(255, 255, 255, 0.3);
    }
    
    .mobile-menu-item:hover {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .mobile-menu-footer {
        margin-top: 0; /* 減少頂部間距 */
        width: 100%;
    }
    
    .mobile-menu-home {
        display: block;
        padding: 0px; /* 減少內部間距 */
        background: transparent;
        color: #fff;
        text-decoration: none;
        text-align: center;
        font-weight: 700;
        font-size: 18px;
        width: 100%;
        position: relative;
        margin-top: 0; /* 移除頂部外邊距 */
        border: none;
    }
    
    /* 移除返回首頁上方多餘的分隔線 */
    /* .mobile-menu-home::before {
        content: '';
        position: absolute;
        top: 0;
        left: 15%;
        width: 70%;
        height: 1px;
        background: rgba(255, 255, 255, 0.5);
    } */
    
    .mobile-menu-home:hover {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .submenu a:hover {
        background-color: transparent; /* 移除背景色變化 */
        color: #fff;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 15px rgba(255, 255, 255, 0.6); /* 保留文字光暈效果 */
    }
    
    /* 移動端的hero-section樣式調整 */
    .hero-section {
        padding: 30px 0;
        text-align: center; /* 整個區域居中對齊 */
    }
    
    /* 移動端網格調整，確保正確居中 */
    .hero-section .row {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .hero-section .col-lg-6 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    
    /* 移動端輪播圖居中 */
    .hero-slider {
        height: 180px;
        margin: 0 auto 20px auto; /* 上右下左邊距，確保水平居中 */
        max-width: 90%; /* 限制最大寬度 */
    }
    
    /* 讓slider-wrapper在移動端居中 */
    .hero-section .slider-wrapper {
        width: 100% !important; /* 在移動端恢復正常寬度，使用!important確保覆蓋原有樣式 */
        margin: 0 auto; /* 居中顯示 */
    }
    
    /* 確保移動端的輪播圖片居中 */
    .hero-section .slide {
        background-position: center center;
        background-size: contain;
    }
    
    /* 移動端內容區域居中 */
    .hero-content {
        text-align: center;
        padding: 20px 10px;
        align-items: center; /* 垂直方向的內容居中對齊 */
    }
    
    .main-title {
        font-size: 32px;
        text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 15px rgba(255, 255, 255, 0.8);
        letter-spacing: 1.5px;
        text-align: center; /* 確保文字居中 */
    }
    
    .sub-title {
        font-size: 24px;
        line-height: 1.4;
        letter-spacing: 0.01em;
        font-family: 'Noto Sans TC', 'M PLUS Rounded 1c', 'Microsoft JhengHei', '微軟正黑體', sans-serif;
        text-align: center; /* 確保文字居中 */
    }
    
    .service-intro {
        width: 100%;
        max-width: 95%;
        margin: 0 auto;
        padding: 10px 0;
        border-radius: 60px;
    }
    .service-content {
        display: none; /* 手機板隱藏服務說明文字 */
    }
    
    .service-content {
        padding: 15px;
        text-align: center;
    }
    
    .primary-text {
        font-size: 20px;
    }
    
    .secondary-text {
        font-size: 16px;
    }
    .service-image img {
        max-width: 90vw;
        max-height: 80px;
    }

    .service-intro .row {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .service-intro .col-lg-6:first-child {
        flex: 0 0 100%;
        max-width: 100%;
        justify-content: center;
        align-items: center;
        display: flex;
    }
    .service-intro .col-lg-6:last-child {
        display: none;
    }
} 

.line-button {
    position: fixed;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2000;
    border-radius: 50%;
    padding: 4px;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.line-button:hover {
    transform: translateY(-50%) scale(1.08);
}
@media (max-width: 991px) {
    .line-button {
        display: none;
    }
    .line-button {
        left: 8px;
        width: 48px;
        height: 48px;
        padding: 2px;
    }
    .line-button img {
        width: 40px !important;
        height: 40px !important;
    }
}