/* ==========================================================================
   🖥️ 竹楠景觀園藝 - 桌機版專屬高質感樣式表 (Desktop Only)
   ========================================================================== */

/* --- 1. 全域排版與基礎字型 --- */
h1 {
    font-size: 38px;
    line-height: 60px;
}

h2 {
    font-size: 30px;
    line-height: 48px;
}

h3 {
    font-size: 20px;
    line-height: 42px;
}

/* 全域桌機區塊間距與邊框限制 */
.main-about, .main-news, .main-location {
    padding: 100px 0;
    width: 100%;
    box-sizing: border-box;
}

/* 桌機版黃金寬度置中容器 */
.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* 統一電腦版標題樣式（亮色字，用於深底區塊） */
.top-title {
    text-align: center;
    margin-bottom: 45px;
}

    .top-title h1 {
        font-size: 2.2rem;
        font-weight: 600;
        letter-spacing: 4px;
        margin-bottom: 8px;
    }

    .top-title h2 {
        font-size: 1rem;
        letter-spacing: 6px;
        font-weight: 300;
        opacity: 0.7;
    }

/* --- 2. 導覽、工具列與全域元件 --- */
.top-nav {
    display: none !important;
}

.header-tools {
    position: fixed !important;
    top: 0 !important;
    right: 20px !important;
    height: 60px !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    background: transparent !important;
}

    .header-tools a {
        color: #ffffff !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
    }

        .header-tools a i,
        .header-tools i {
            font-size: 1.4rem !important;
            color: #ffffff !important;
        }

.gotop {
    bottom: 5% !important;
}

/* 👑 桌機專屬日式微光圓弧按鈕 */
.modern-more-btn {
    display: inline-block;
    width: 160px;
    height: 45px;
    line-height: 43px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #FFFFFF !important;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-decoration: none !important;
    border-radius: 25px;
    font-weight: 500;
    transition: all 0.35s ease;
    background: transparent;
}

    .modern-more-btn:hover {
        background-color: #FFFFFF;
        color: #111111 !important;
        border-color: #FFFFFF;
        box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
    }

/* --- 3. 首頁三大核心區塊佈局 --- */

/* 🌲 區塊 1：關於我們（深邃庭園綠） */
.main-about {
    background-color: #1A3326 !important;
    color: #FFFFFF !important;
    text-align: center;
}

    .main-about .top-title h1 {
        color: #FFFFFF;
    }

    .main-about .top-title h2 {
        color: #D1CFCB;
    }

    .main-about p {
        font-size: 1.1rem;
        line-height: 2.2;
        max-width: 850px;
        margin: 0 auto 40px auto;
        text-align: center;
        letter-spacing: 1px;
        color: #E5E8E6;
    }

    .main-about .modern-more-btn {
        margin: 0 auto;
        display: block;
    }

/* 📰 區塊 2：最新消息（大器雙欄現代拼接） */
.main-news {
    background-color: #163545; /* 防止加載時出現白底 */
    padding: 0 !important;
    display: flex;
    align-items: stretch;
    min-height: 600px;
}
/* 左側區塊：滿版大器景觀底圖牆（若圖片不存在則自動使用高品質備用圖） */
.main-news-left {
    flex: 1.1;
    background-color: #163545;
    background-image: url(../img/background/1.jpg), url('https://images.unsplash.com/photo-1599599810769-bcde5a160d32?q=80&w=1200');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: block;
    position: relative;
}
/* 右側主內容區：深藍綠漸層色塊 */
.main-news-right {
    flex: 1.2;
    background: linear-gradient(135deg, #234E64, #163545) !important;
    padding: 90px 60px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .main-news-right .top-title {
        text-align: left;
        margin-bottom: 35px;
    }

        .main-news-right .top-title h1 {
            color: #FFFFFF;
        }

        .main-news-right .top-title h2 {
            color: #B2C5CE;
        }

/* 最新消息卡片清單 */
.main-news-links {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

    .main-news-links li {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 22px 25px;
        border-radius: 8px;
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }

        .main-news-links li:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.25);
            transform: translateX(5px);
        }

        .main-news-links li.tag {
            border-left: 4px solid #A3D1C8;
        }

.main-news-title {
    color: #FFFFFF !important;
    font-size: 1.1rem;
    font-weight: 500;
}

.main-news-date {
    color: #B2C5CE;
    font-size: 0.9rem;
    font-weight: 400;
}

.main-news-right .modern-more-btn {
    align-self: flex-start;
}

/* 🗺️ 區塊 3：地理位置（大地深泥土色） */
.main-location {
    background-color: #4A321A !important;
    color: #FFFFFF !important;
    text-align: center;
    width: 100%;
}

    .main-location .top-title h1 {
        color: #FFFFFF;
    }

    .main-location .top-title h2 {
        color: #D9C8BC;
    }

.main-location-content {
    text-align: center;
    font-size: 1.1rem;
    color: #EFEAE6;
}

    .main-location-content iframe {
        width: 100% !important;
        height: 420px !important;
        border-radius: 12px;
        border: none;
        margin-top: 35px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }

.main-location .modern-more-btn {
    margin: 35px auto 0 auto;
    display: block;
}

/* --- 4. 其它特定頁面與基礎外距修正 --- */
.product-grid-fix-container {
    margin-top: 140px !important;
    margin-bottom: 80px;
    margin-left: auto;
    margin-right: auto;
}

.policy-page-wrapper {
    padding-top: 90px !important;
    padding-bottom: 80px !important;
    width: 100% !important;
}

/* --- 5. 頁尾佈局 (Footer) --- */
.main-footer {
    background-color: #1a1a1a;
    color: #e0e0e0;
    padding: 50px 0 20px 0;
    width: 100%;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.2fr;
    gap: 40px;
}

.footer-logo {
    display: block !important;
    width: 300px !important;
    height: 200px !important;
    background-image: url('/img/logo-purple.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
}

.footer-bottom {
    max-width: 1200px;
    margin: 40px auto 0 auto;
    padding: 20px 25px 0 25px;
    border-top: 1px solid #2d2d2d;
    text-align: center;
}

.copyright {
    color: #ccc;
    font-family: Arial;
    font-size: 12px;
    text-align: center !important;
    width: 100%;
    margin-top: 60px;
}

/* 1. 外層大容器：恢復標準的 40px 高度，並歸零內距防止文字被往下擠 */
div#siteAnnouncement.top-announcement {
    position: relative !important;
    top: 100px !important; /* 保持您測試好、不重疊的完美位置 */
    width: 100% !important;
    height: 40px !important; /* 🎯 恢復原本漂亮的細長高度 */
    background-color: rgb(44, 76, 56) !important;
    z-index: 90 !important;
    padding-top: 0 !important; /* 🎯 消除上方內距，不讓文字下移 */
    padding-bottom: 0 !important; /* 🎯 消除下方內距 */
}

/* 2. 🎯 核心修正：限制內部元素的最大寬度，讓喇叭與關閉按鈕向內靠攏對齊商城 */
div#siteAnnouncement .announcement-slider {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1200px !important; /* 💡 配合商城的寬度。若商城比較窄，可微調成 1140px 或 1100px */
    margin: 0 auto !important; /* 💡 讓這個內容區塊在綠色吧條中水平置中 */
    position: relative !important; /* 🎯 關鍵：作為關閉按鈕的絕對定位基準點 */
    padding: 0 15px !important; /* 留一點左右內距，防止圖標貼死邊緣 */
}

/* 2. 內部滑動項目：強制與外層 40px 一樣高，並讓文字完美垂直置中 */
#siteAnnouncement .ticker-item {
    width: 100% !important; /* 💡 核心：強迫寬度 100%，打破 absolute 限制 */
    height: 40px !important; /* 🎯 強制 li 跟外層一樣高 */
    line-height: 40px !important; /* 🎯 關鍵：讓文字在 40px 空間裡絕對垂直置中 */
    top: 0 !important; /* 確保定位沒有被 JS 往下壓 */
    text-align: center !important; /* 💡 確保文字本身內容居中 */
}

/* 3. 確保文字顏色與外觀 */
#siteAnnouncement .ticker-item a {
    color: #ffffff !important; /* 確保是白色字 */
    font-size: 16px !important;
    font-weight: 600 !important; /* 💡 適度加粗，讓大字在電腦上更清晰 */
    text-decoration: none !important;
    display: inline-block !important;
}

/* 5. 🎯 核心修正：利用 CSS 計算，強迫待在外層的關閉按鈕向中央對齊 */
div#siteAnnouncement button.close-announcement {
    position: absolute !important;
    /* 💡 核心魔法：50% 是螢幕正中央，再往右推 600px（1200px 的一半）扣掉一點邊距 */
    left: calc(50% + 560px) !important;
    right: auto !important; /* 拔除原本的右邊釘死 */
    top: 50% !important;
    transform: translateY(-50%) !important; /* 完美垂直置中 */
    color: #ffffff !important;
    background: none !important;
    border: none !important;
    opacity: 0.8 !important;
    cursor: pointer !important;
}
/* 🎯 1. 確保全域固定導覽列（Header）永遠在整張網頁的最上層 */
.global-sticky-header, #main-nav, .sticky-nav-wrapper {
    position: relative; /* 或 fixed / sticky，取決於你原來的設定 */
    z-index: 9999 !important; /* 👈 給它一個非常大的數字，確保蓋過所有公告與內文 */
}

/* 🎯 2. 確保下拉選單的子選單（Submenu）層級高於一切 */
.tree-menu, .sm-nowrap, [id^="sm-"] {
    z-index: 10000 !important; /* 👈 比導覽列還要高，保證絕對能完整看見 */
}

/* 🎯 同時縮小搜尋輸入框與點擊按鈕的上下內距 */
.search-wrapper .search-input,
.search-wrapper .search-btn {
    padding-top: 0px !important; /* 👈 數字愈小愈矮，原本可能大於 10px */
    padding-bottom: 0px !important; /* 👈 記得上下維持對稱 */
    height: auto !important; /* 確保高度交由 padding 自行計算 */
}