/* 基本樣式重設 */
body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    line-height: 1.6;
    max-width: 1200px; /* 設定最大寬度 */
    margin: 0 auto; /* 在大螢幕上水平居中 */
}

.hero {
    /* 輪播圖樣式 */
    position: relative; /* 為按鈕定位 */
    overflow: hidden; /* 隱藏容器外的圖片 */
    max-width: 100%; /* 或設定固定寬度 */
    margin: auto; /* 如果設定固定寬度，使其居中 */
}

.slider-container {
    position: relative;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out; /* 平滑切換效果 */
}

.slider img {
    width: 100%; /* 圖片寬度充滿容器 */
    flex-shrink: 0; /* 防止圖片縮小 */
}

/* 左右切換按鈕樣式 */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    user-select: none;
    z-index: 1; /* 確保按鈕在圖片上方 */
}

.prev {
    left: 0;
    border-radius: 0 3px 3px 0;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.introduction {
    /* 介紹文案樣式 */
    padding: 20px;
}

footer {
    /* 頁腳樣式 */
    padding: 20px;
    text-align: center;
    background-color: #f4f4f4;
    margin-top: 20px;
}

/* 通用 CTA 按鈕樣式 */
.cta-button {
    display: inline-block;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: #ff6600; /* 醒目的橘色 */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #e65c00; /* 滑鼠懸停時變深 */
}

/* Hero 區按鈕特定樣式 */
.hero-cta {
    position: absolute; /* 相對於 .hero 定位 */
    top: 30px; /* 距離頂部 */
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    z-index: 2; /* 確保在輪播圖按鈕之上 */
    background-color: #007bff; /* 改為藍色 */
}

/* 修改 Hero CTA 按鈕的 hover 效果 */
.hero-cta:hover {
    background-color: #0056b3; /* 滑鼠懸停時變深藍色 */
}

/* 底部按鈕容器樣式 */
.bottom-cta-container {
    text-align: center; /* 讓按鈕居中 */
    padding: 40px 20px; /* 上下間距 */
}

/* 將底部按鈕改為藍色 */
.bottom-cta {
    background-color: #007bff; /* 改為藍色 */
}

.bottom-cta:hover {
    background-color: #0056b3; /* 滑鼠懸停時變深藍色 */
}

/* 導航欄樣式 */
.main-nav {
    background-color: #fff; /* 改為白色背景 */
    padding: 10px 20px; /* 增加左右內邊距 */
    border-bottom: 1px solid #eee; /* 加個淺灰色底線區分 */
    display: flex; /* 使用 Flexbox 佈局 */
    justify-content: space-between; /* 兩端對齊 */
    align-items: center; /* 垂直居中 */
}

.main-nav ul {
    list-style: none;
    text-align: center; /* 移除 center，由 flex 控制 */
    margin: 0; /* 移除預設 margin */
    padding: 0; /* 移除預設 padding */
}

.main-nav ul.nav-links li {
    display: inline-block; /* 水平排列 */
    margin: 0 10px;
}

/* 按鈕組樣式 */
.main-nav ul.nav-button-group li {
    display: inline-block;
    margin-left: 10px; /* 按鈕間距 */
}

.main-nav ul li a {
    color: #333; /* 改為深灰色文字 */
    text-decoration: none;
    font-size: 16px;
    padding: 5px 10px;
    transition: color 0.3s ease;
}

.main-nav ul li a:hover {
    color: #007bff; /* 滑鼠懸停時變藍色 */
}

/* 導航按鈕特殊樣式 */
.main-nav ul li.nav-button a {
    padding: 8px 15px;
    border: 1px solid #007bff;
    border-radius: 4px;
    color: #007bff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.main-nav ul li.nav-button.register a {
    background-color: #007bff;
    color: #fff;
}

.main-nav ul li.nav-button a:hover {
    background-color: #0056b3;
    color: #fff;
}

/* 預設隱藏移動端文字 */
.nav-text-mobile {
    display: none;
}

/* --- 移動端優化 (例如：螢幕寬度小於 768px) --- */
@media (max-width: 768px) {
    /* 在移動端，顯示移動版文字，隱藏桌面版文字 */
    .nav-text-desktop {
        display: none;
    }
    .nav-text-mobile {
        display: inline; /* 或 inline-block */
    }

    body {
        /* 在小螢幕上移除最大寬度限制，讓內容填滿 */
        max-width: none;
    }

    /* 讓整個導航欄保持單行並允許水平滾動 */
    .main-nav {
        /* 移除 flex-wrap and justify-content */
        /* flex-wrap: wrap; */
        /* justify-content: center; */
        overflow-x: auto; /* 重新允許水平滾動 */
        -webkit-overflow-scrolling: touch; /* 恢復平滑滾動 */
        padding: 10px 5px; /* 保留較小的左右內邊距 */
        padding-bottom: 15px; /* 為滾動條留出空間 */
        justify-content: space-between; /* 恢復兩端對齊 */
    }

    /* 防止 ul 收縮，並確保內部 li 不換行 */
    .main-nav ul {
        flex-shrink: 0; /* 防止 ul 被壓縮 */
        white-space: nowrap; /* 確保 li 不換行 */
        /* 移除其他移動端特定樣式 */
    }

    .main-nav ul.nav-button-group {
        /* 樣式將通過 .main-nav ul 繼承 */
        flex-shrink: 0; /* 明確設置以防萬一 */
        white-space: nowrap; /* 明確設置以防萬一 */
    }

    /* 維持 inline-block，並保持較小間距 */
    .main-nav ul li {
        display: inline-block;
        margin: 0 2px; /* 保留極小的左右間距 */
    }

    /* 維持調整後的連結內邊距 */
    .main-nav ul li a {
        padding: 5px 4px; /* 保留減少的內邊距 */
        white-space: nowrap; /* 防止連結文字內部換行 */
    }

    /* 維持調整後的按鈕內邊距和間距 */
    .main-nav ul.nav-button-group li {
        margin: 0 2px; /* 保留極小的左右間距 */
    }

    .main-nav ul li.nav-button a {
        padding: 6px 8px; /* 保留縮小的按鈕內邊距 */
        font-size: 14px; /* 保留縮小的按鈕字體 */
        white-space: nowrap; /* 防止按鈕文字內部換行 */
    }

    /* 調整 Hero 按鈕位置和大小 */
    .hero-cta {
        top: 15px; /* 減少與頂部的距離 */
        padding: 12px 24px; /* 稍微縮小按鈕 */
        font-size: 16px;
    }

    /* 輪播圖左右按鈕調整 */
    .prev,
    .next {
        padding: 10px;
        font-size: 16px;
    }

    /* 介紹文案間距 */
    .introduction {
        padding: 15px;
    }

    .introduction h1 {
        font-size: 1.8em; /* 調整標題大小 */
    }

    /* 底部按鈕調整 */
    .bottom-cta-container {
        padding: 30px 15px;
    }

    .cta-button {
        padding: 12px 24px;
        font-size: 16px;
    }
}

/* --- 新增頁面內容樣式 --- */
.page-content {
    padding: 20px; /* 給主要內容區域一些內邊距 */
}

.page-content h1 {
    margin-bottom: 30px;
    text-align: center;
    color: #333;
}

.venue, .promotion, .faq-item {
    background-color: #f9f9f9; /* 淺灰色背景 */
    border: 1px solid #eee;
    padding: 20px;
    margin-bottom: 20px; /* 區塊間距 */
    border-radius: 5px;
}

.venue h2, .promotion h2, .faq-item h2 {
    margin-bottom: 10px;
    color: #0056b3; /* 標題使用深藍色 */
}

.promotion strong, .faq-item strong {
    color: #ff6600; /* 強調文字使用橘色 */
}

/* 移動端調整內頁邊距 */
@media (max-width: 768px) {
    .page-content {
        padding: 15px;
    }

    .venue, .promotion, .faq-item {
        padding: 15px;
    }

    .page-content h1 {
        font-size: 1.8em;
        margin-bottom: 20px;
    }
}