/* --- 全域樣式 --- */
:root {
    --primary-color: #e67e22; /* 主題橘色 */
    --primary-color-dark: #d35400;
    --secondary-color: #2c3e50; /* 深藍灰色 */
    --text-color: #555;
    --light-bg-color: #ffffff;
    --dark-bg-color: #333333;
    --font-primary: 'Poppins', 'Noto Sans TC', sans-serif;
    --border-radius: 8px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    margin: 0;
    line-height: 1.7;
    color: var(--text-color);
    background-color: #f9f9f9;
    font-size: 16px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}

.section.bg-light {
    background-color: var(--light-bg-color);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--secondary-color);
}

.section-intro {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 40px auto;
    color: #555;
}

p {
    margin-bottom: 1rem;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-color-dark);
}

img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

.button {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 5px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-size: 1rem;
}

.button.primary-button {
    background-color: var(--primary-color);
    color: #fff;
}

.button.primary-button:hover {
    background-color: var(--primary-color-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.button.secondary-button {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.button.secondary-button:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.button.large-button {
    font-size: 1.1rem;
    padding: 15px 35px;
}

.center-content {
    text-align: center;
}

/* --- 頁首與導覽列 --- */
header {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
}

header .logo img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 50%;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

nav li {
    margin-left: 25px;
}

nav a {
    color: var(--text-color);
    font-weight: 500;
    font-size: 1rem;
    padding: 8px 12px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

nav a:hover, nav a.active {
    background-color: #fef0e6;
    color: var(--primary-color-dark);
}

/* --- 主視覺區 --- */
.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('images/hero-background.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 150px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.hero-content {
    max-width: 800px;
}

.hero h1 {
    font-size: 3.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #fff;
}

.hero p {
    font-size: 1.4rem;
    margin-bottom: 2.5rem;
    color: #f0f0f0;
    line-height: 1.8;
}

.hero-buttons .button {
    margin: 0 10px;
}

/* --- 最新消息區塊樣式 (Glightbox 修正版) --- */

/* .news-layout, .news-video, .news-list, .news-video h3 等樣式保持不變 */

.video-container {
    position: relative; /* 保留：為了讓播放按鈕可以定位 */
    cursor: pointer; /* 新增：讓滑鼠游標變成手形，提示可點擊 */
    border-radius: 8px; /* 您可以沿用舊設定 var(--border-radius) 或直接設定 */
    overflow: hidden; /* 保留：讓圖片的圓角效果生效 */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); /* 保留：陰影效果 */

    /* 以下為移除與修改的部分 */
    /* 移除：舊的 16:9 比例 hack (padding-bottom 和 height) */
    /* 因為現在容器內有真實圖片，高度會由圖片自動撐開 */
    max-width: 100%; /* 保留：確保容器不會超出父層寬度 */
}

/* 移除：.video-container iframe { ... } 這一整段，因為已經沒有 iframe 了 */

/* 新增：針對容器內的 a 和 img 進行樣式設定 */
.video-container a {
    display: block; /* 讓 a 標籤填滿容器 */
    line-height: 0; /* 避免圖片下方出現多餘空白 */
}

.video-container img {
    width: 100%; /* 讓圖片寬度自適應容器 */
    height: auto; /* 讓圖片高度等比例縮放 */
    display: block;
    transition: transform 0.3s ease;
}

.video-container:hover img {
    transform: scale(1.05); /* 滑鼠移上去時圖片輕微放大 */
}

/* 播放按鈕的樣式 (請確認您有這段，從之前 lightbox 的範例中來的) */
.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 0 20px rgba(0,0,0,0.6);
    transition: transform 0.3s ease;
    pointer-events: none; /* 讓點擊可以穿透圖示 */
}

.video-container:hover .play-icon {
    transform: translate(-50%, -50%) scale(1.2);
}

/* .news-list ul, .news-item 等樣式保持不變 */
}

/* --- 關於我們 --- */
.about-flex {
    display: flex;
    gap: 50px;
    align-items: center;
}

.about-image {
    flex: 1 1 50%;
}

.about-text {
    flex: 1 1 50%;
}

.about-text h2 {
    text-align: left;
    margin-bottom: 2rem;
}

.commitment {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.commitment .fas {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-right: 15px;
    margin-top: 5px;
}

.commitment h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.3rem;
    color: #333;
}

/* --- 現有幼貓 --- */
.kitten-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.kitten-card {
    background: #FFF;
    border: 1px solid #EAEAEA;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: transform 0.3s, box-shadow 0.3s;
}

.kitten-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.kitten-card img {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.kitten-info {
    padding: 20px;
}

.kitten-info h3 {
    margin-top: 0;
    font-size: 1.5rem;
    color: var(--secondary-color);
}

.kitten-info p {
    margin-bottom: 5px;
    color: #666;
}

.status {
    display: inline-block;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 50px;
    color: white;
    font-size: 0.8rem;
}

.status.available { background-color: #27ae60; } /* 綠色 */
.status.reserved { background-color: #f39c12; } /* 黃色 */
.status.adopted { background-color: #95a5a6; } /* 灰色 */
.status.coming-soon { background-color: #3498db; } /* 藍色 */
.status.re-released { background-color: #e91e63; } /* 活力桃紅 */

.more-link {
    font-weight: 600;
    font-size: 0.95em;
    color: var(--primary-color);
    display: inline-block;
    margin-top: 0.5rem;
}

.more-link:hover {
    color: var(--primary-color-dark);
    text-decoration: underline;
}

.more-link i {
    font-size: 0.8em;
    margin-left: 4px;
}

/* --- 頁尾 --- */
.footer-section {
    background-color: var(--dark-bg-color);
    color: #ccc;
    padding-top: 60px;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 50px;
    padding-bottom: 60px;
}

.footer-about, .footer-links, .footer-contact {
    text-align: left;
}
.footer-about p {
    color: #aaa;
}
.footer-logo {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
.footer-logo img {
    width: 35px;
    height: 35px;
    margin-right: 10px;
}
.footer-links h3, .footer-contact h3 {
    color: #fff;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}
.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li {
    margin-bottom: 1rem;
}
.footer-links a {
    color: #ccc;
}
.footer-links a:hover {
    color: #fff;
    padding-left: 5px;
}
.footer-contact p {
    color: #ccc;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}
.footer-contact i {
    margin-right: 10px;
    color: var(--primary-color);
    width: 20px;
    text-align: center;
}
.social-icons a {
    display: inline-block;
    margin-right: 15px;
    font-size: 1.5rem;
    color: #ccc;
}
.social-icons a:hover {
    color: #fff;
    transform: scale(1.1);
}
.footer-copyright {
    background-color: #222;
    color: #aaa;
    text-align: center;
    padding: 20px 0;
    font-size: 0.9rem;
}

/* --- 響應式設計 --- */
@media (max-width: 992px) {
    .about-flex {
        flex-direction: column;
    }
    .about-text h2 {
        text-align: center;
        margin-top: 2rem;
    }
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
    .news-layout {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    header .container {
        flex-direction: column;
    }
    nav {
        margin-top: 15px;
    }
    nav ul {
        justify-content: center;
        flex-wrap: wrap;
    }
    nav li {
        margin: 5px 10px;
    }
    .hero {
        padding: 100px 0;
        min-height: 60vh;
    }
    .hero h1 {
        font-size: 2.8rem;
    }
    .hero p {
        font-size: 1.2rem;
    }
    .hero-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .hero-buttons .button {
        margin: 10px 0;
        width: 80%;
    }
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-about, .footer-links, .footer-contact {
        text-align: center;
    }
    .footer-contact p {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .section {
        padding: 60px 0;
    }
    .section-title, .about-text h2 {
        font-size: 2rem;
    }
    .hero h1 {
        font-size: 2.2rem;
    }
    .hero p {
        font-size: 1.1rem;
    }
    .button {
        padding: 12px 25px;
        width: 100%;
    }
    .kitten-gallery {
        grid-template-columns: 1fr;
    }
}

/* --- 頁尾支付方式樣式 --- */
.payment-methods {
    margin-top: 2rem; /* 與上方內容增加間距 */
}

.payment-methods h3 {
    color: #fff;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.payment-icons {
    display: flex;
    flex-wrap: wrap; /* 在小螢幕上自動換行 */
    gap: 15px; /* 圖示之間的間距 */
    color: #ccc;
    align-items: center;
}

.payment-icons span {
    display: flex;
    align-items: center;
    gap: 8px; /* 圖示和文字的間距 */
    font-size: 0.95rem;
}

/* 在手機版時，讓支付圖示也跟著置中 */
@media (max-width: 768px) {
    .payment-icons {
        justify-content: center; 
    }
}
/* --- 網站更名公告樣式 (更新版) --- */
.announcement-banner {
    background-color: #fff3cd; /* 溫和的警告黃色 */
    color: #664d03; /* 深色文字 */
    padding: 20px; /* 增加一點上下空間 */
    text-align: center;
    border-bottom: 1px solid #ffecb5;
}

/* (請刪除舊的 .announcement-banner p 規則) */

/* 主要公告文字 (字體放大) */
.main-announcement {
    margin: 0 0 10px 0; /* 底部增加一點間距 */
    font-weight: 500;
    font-size: 2.00rem; /* <-- 遵照指示，將字體放大 (原 1.1rem) */
    color: #664d03;
    line-height: 1.5;
}

/* 次要公告文字 (您新增的第二行) */
.sub-announcement {
    margin: 0;
    font-weight: 400;
    font-size: 0.95rem; /* 讓這行小一點，作為補充資訊 */
    color: #664d03;
    opacity: 0.9;
}

.announcement-banner a {
    color: #0056b3; /* 突出的藍色連結 */
    font-weight: 700;
    text-decoration: underline;
}
.announcement-banner a:hover {
    color: #003d7c;
}