/*---------------- 選單 ----------------*/
.mobile-menu-btn {
    display: none;
}

.navbar-nav .nav-link.dropdown-toggle:not(.nav-link-caret-hide):before {
    border: 0;
    content: "\f1c4 ";
    font-family: Flaticon;
    font-size: 10px !important;
    color: #aaa !important;
    font-weight: 100 !important;
    height: 12px !important;
    line-height: 1em !important;
    margin-top: -2px !important;
    position: absolute;
    right: 10px;
    top: 50% !important;
    width: 12px !important;
}

/* 針對平板/小螢幕電腦進行導覽列間距微調 */
@media (min-width: 992px) and (max-width: 1200px) {
    .navbar-nav .nav-link {
        font-size: 1rem !important;
        /* 稍微縮小字級，避免換行 */
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .navbar-brand {
        margin-right: 20px !important;
        /* 稍微縮小 Logo 寬度 */
    }

    .navbar-nav .nav-link.dropdown-toggle:not(.nav-link-caret-hide):before {
        border: 0;
        content: "\f1c4 ";
        font-family: Flaticon;
        font-size: 10px !important;
        height: 12px !important;
        line-height: 1em !important;
        margin-top: -5px !important;
        position: absolute;
        right: 5px;
        top: 50% !important;
        width: 12px !important;
    }
}

/* 修正 iPad 橫式至小螢幕筆電下，下拉選單與向下箭頭的位置 */
@media (min-width: 992px) and (max-width: 1470px) {

    /* 確保主選項本身採用相對定位，讓箭頭(虛擬元素)有基準點 */
    .navbar-nav .nav-item.dropdown {
        position: relative;
    }

    .navbar-nav .nav-link.dropdown-toggle {
        padding-right: 1.25rem !important;
        /* 保留右側空間給箭頭 */
        display: inline-flex;
        align-items: center;
    }

    /* 如果您的箭頭是用 Bootstrap 預設的 ::after 產生的，強制修正它的定位 */
    .navbar-nav .nav-link.dropdown-toggle::after {
        position: absolute;
        right: 0;
        top: 60%;
        /* 配合您的 pt-4 做出垂直置中的視覺調整 */
        transform: translateY(-50%);
        margin-left: 0 !important;
    }

}

@media (max-width: 991px) {
    .navbar-collapse.navbar-animate-fadein {
        display: none !important;
    }

    .mobile-menu-btn {
        display: block !important;
    }

}

@media (max-width: 586px) {

    .row-pill,
    .row-pill > .bg-cover,
    .row-pill > img {
        border-radius: 0rem !important;
    }

    .px-3 {
        padding-left: 0.5rem !important;
        padding-right: 0 !important;
    }

    .mt-4 {
        margin-top: 0 !important;
    }

    .mx-4 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

.navbar {
    height: 90px !important;
}

.accordion-header .accordion-button::after {
    position: absolute;
    right: 1.25rem;
    margin-left: 0;
}

/* 預設/電腦大螢幕版：維持您指定的 -44px */
.dropdown-menu {
    margin-left: -44px !important;
    font-size: 18px;
}

/* 專屬 iPad mini 橫式、一般平板橫式、小螢幕筆電範圍（992px ~ 1470px） */
@media (min-width: 992px) and (max-width: 1470px) {
    .dropdown-menu {
        margin-left: -62px !important;
        /* 自動覆蓋上方設定，改為 -54px */
        font-size: 15px;
    }
}

/* =======================================================
   【Logo 響應式微調】針對不同螢幕尺寸給予最合適的 Logo 大小
   ======================================================= */

/* 1. 平板與中小型筆電範圍（991px 以下） */
@media (max-width: 991px) {
    .navbar-collapse.navbar-animate-fadein {
        display: none !important;
    }

    .mobile-menu-btn {
        display: block !important;
    }

}

/* 2. 專屬 iPad / iPad mini 直式 (螢幕寬度介於 577px ~ 991px 之間) */
@media (min-width: 577px) and (max-width: 1024px) {
    .navbar-brand img {
        max-width: 270px !important;
        /* iPad mini 直式下，放大 Logo 到 300px */
    }

}

/* 3. 一般大型至中型手機 (螢幕寬度介於 361px ~ 576px 之間) */
@media (min-width: 361px) and (max-width: 576px) {
    .navbar-brand img {
        max-width: 290px !important;
        /* 客戶 1011 反映手機版 Logo 偏小，自 250px 放大 */
    }
}

/* 4. 專屬 iPhone SE / 舊款小螢幕手機 (螢幕寬度在 360px 以下) */
@media (max-width: 360px) {
    .navbar-brand img {
        max-width: 245px !important;
        /* 小螢幕同步放大，但仍預留右側漢堡按鈕的寬度，避免爆版 */
    }
}

/* 漢堡按鈕原本貼齊最右緣，客戶 1011 要求往左收一些 */
@media (max-width: 991px) {
    .mobile-menu-btn .btn {
        padding-right: 0 !important;
        margin-right: .75rem;
    }
}

/*---------------- 版面 ----------------*/
.container {
    max-width: 70% !important;
}

@media (max-width: 1180px) {
    .container {
        max-width: 90% !important;
    }
}

@media (max-width: 991px) {
    .container {
        max-width: 96% !important;
    }
}

/*---------------- 首頁 ----------------*/

.bg001 {
    background: url("../images/demo023.jpg") no-repeat center center;
    background-size: cover;
}

/* =======================================================
   【最新訊息頁籤微調】各 Tab 切換時呈現不同顏色
   （公會發文與活動公告已合併為「公會訊息」，沿用原公會發文的紅色）
   ======================================================= */
#guildTab #guild-tab.active {
    background-color: #ff6d6d !important;
    color: #ffffff !important;
    /* 點擊後文字變白色 */
    font-weight: bolder !important;
}

#guildTab #decrees-tab.active {
    background-color: #ea7700 !important;
    /* 經典質感綠 */
    color: #ffffff !important;
    /* 點擊後文字變白色 */
    font-weight: bolder !important;
}

#guildTab #insights-tab.active {
    background-color: #ce7dec !important;
    /* 經典質感綠 */
    color: #ffffff !important;
    /* 點擊後文字變白色 */
    font-weight: bolder !important;
}

/* --- 1. 第一個頁籤：收文轉知 (點擊後的外觀) --- */
#newsTab #decrees-tab.active {
    background-color: #ea7700 !important;
    /* 經典質感綠 */
    color: #ffffff !important;
    /* 點擊後文字變白色 */
    font-weight: bolder !important;
}

/* --- 2. 第二個頁籤：市政訊息 (點擊後的外觀) --- */
#newsTab #civic-tab.active {
    background-color: #69c869 !important;
    /* 經典質感綠 */
    color: #ffffff !important;
    /* 點擊後文字變白色 */
    font-weight: bolder !important;
}

/* --- 3. 第三個頁籤：房地產報導 (點擊後的外觀) --- */
#newsTab #insights-tab.active {
    background-color: #ce7dec !important;
    /* 經典質感綠 */
    color: #ffffff !important;
    /* 點擊後文字變白色 */
    font-weight: bolder !important;
}

#guildTab #guild-tab:hover:not(.active) {
    background-color: #fff !important;
    color: #ff6d6d !important;
}

/* --- 【額外加分特效】滑鼠移上去未點擊時（Hover）微調，讓使用者知道可以按 --- */
#newsTab #decrees-tab:hover:not(.active) {
    background-color: #fff !important;
    color: #ea7700 !important;
}

#newsTab #civic-tab:hover:not(.active) {
    background-color: #fff !important;
    color: #69c869 !important;
}

#newsTab #insights-tab:hover:not(.active) {
    background-color: #fff !important;
    color: #ce7dec !important;
}

.badgednone {
    background-color: #737373 !important;
}

.badgedispatch {
    background-color: #ff6d6d !important;
}

.badgeactivity {
    background-color: #46a0ef !important;
}

.badgedecrees {
    background-color: #ea7700 !important;
}

.badgecivic {
    background-color: #69c869 !important;
}

.badgeinsights {
    background-color: #ce7dec !important;
}

.badgedecrees2 {
    background-color: #5679de !important;
    color: #fff;
}

.badgedecrees3 {
    background-color: #47b48c !important;
    color: #fff;
}

.badgegallery {
    background-color: #9937bc !important;
    color: #fff;
}

.badgegallery2 {
    background-color: #c46ce3 !important;
    color: #fff;
}

.badgegallery3 {
    background-color: #e8a5ff !important;
    color: #fff;
}

/*---------------- 文字樣式 ----------------*/

/* 覆蓋 Bootstrap 5 的全域字型變數，強制將英文字型與微軟正黑體綁定 */
:root {
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* 確保 body 確實套用該變數 */
body {
    font-family: var(--bs-font-sans-serif);
    color: #333;
}

a:link.one {
    color: #fff !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
}

a:visited.one {
    color: #fff !important;
    text-decoration: none !important;
}

a:hover.one {
    color: #14944a !important;
    text-decoration: none !important;
}

a:link.two {
    color: #000 !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
}

a:visited.two {
    color: #000 !important;
    text-decoration: none !important;
}

a:hover.two {
    color: #14944a !important;
    text-decoration: none !important;
}

.TextBlock {
    white-space: nowrap;
    display: inline-block;
}

.nav-link {
    color: #000;
}

.navbar-light .navbar-nav .nav-item:hover > .nav-link,
.navbar-light .navbar-nav .nav-link[aria-expanded=true] {
    color: #14944a !important;
}

.indent {
    text-indent: 2em;
    /* 首行縮排兩個字 */
    text-align: justify;
    /* 建議搭配左右對齊，排版更像書籍法律條文 */
}

/*---------------- 其他 ----------------*/

.btn-close2 {
    position: absolute;
    top: 10px;
    right: 10px;
}

.bg-orange {
    background-color: #ff8e41;
}

/*---------------- Google行事曆 ----------------*/

.calendar-container {
    max-width: 100%;
    margin: 0 auto;
}

.responsive-iframe {
    position: relative;
    padding-bottom: 78%;
    height: 0;
    overflow: hidden;
}

.responsive-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 高度原本一律由 padding-bottom: 78% 決定，也就是跟著容器寬度等比放大，
   螢幕越寬行事曆越高（1920px 時會長到 1021px），這是客戶說「視窗比例縮小」
   的來源。992px 以上改為固定高度，數值取嵌入網址本身帶的 height=600，
   與 iframe 標籤上的 height 屬性一致。
   992px 以下維持等比：那裡實測只有 356～544px，改成固定 600px 反而變高。 */
@media (min-width: 992px) {
    .responsive-iframe {
        height: 600px;
        padding-bottom: 0;
    }
}

/*---------------- 首頁logo動畫 ----------------*/

.earth-animation-wrapper {
    position: relative;
    width: 100%;
    height: 300px;
    margin: 0 auto;
    perspective: 1200px;
    overflow: visible;
    /* 新增以下兩行：將整體動畫（包含地球與左右Logo）縮小至 80% 並維持置中 */
    transform: scale(0.7);
    transform-origin: center;
}

.earth-container {
    width: 450px;
    height: 450px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateZ(23deg) rotateX(15deg) scale(0.8);
}

.earth-core {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: rotateEarth 20s linear infinite;
}

.earth-core .line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 50%;
    box-sizing: border-box;
}

.earth-core .lon-0 {
    transform: rotateY(0deg);
}

.earth-core .lon-30 {
    transform: rotateY(30deg);
}

.earth-core .lon-60 {
    transform: rotateY(60deg);
}

.earth-core .lon-90 {
    transform: rotateY(90deg);
}

.earth-core .lon-120 {
    transform: rotateY(120deg);
}

.earth-core .lon-150 {
    transform: rotateY(150deg);
}

.earth-core .lat-0 {
    transform: rotateX(90deg) translateZ(0);
    border: 2px solid rgba(255, 255, 255, 1);
}

.earth-core .lat-n30 {
    transform: rotateX(90deg) translateZ(112.5px) scale(0.866);
}

.earth-core .lat-n60 {
    transform: rotateX(90deg) translateZ(195px) scale(0.5);
}

.earth-core .lat-s30 {
    transform: rotateX(90deg) translateZ(-112.5px) scale(0.866);
}

.earth-core .lat-s60 {
    transform: rotateX(90deg) translateZ(-195px) scale(0.5);
}

@keyframes rotateEarth {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(-360deg);
    }
}

.logo-half {
    position: absolute;
    top: 49%;
    left: 50%;
    width: 200px;
    height: 380px;
    object-fit: contain;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    animation-fill-mode: forwards;
}

.logo-left {
    transform: translate(-100%, -50%);
    animation-name: slideFromLeft;
}

.logo-right {
    transform: translate(0%, -50%);
    animation-name: slideFromRight;
}

@keyframes slideFromLeft {
    0% {
        transform: translate(-150%, -50%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-100%, -50%);
        opacity: 1;
    }
}

@keyframes slideFromRight {
    0% {
        transform: translate(50%, -50%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(0%, -50%);
        opacity: 1;
    }
}


/*---------------- 主選單 ----------------*/

/* 主選單自 0918 的 A5（推案訊息移出下拉）起由 8 項增為 9 項。版型給 .nav-link
   的左右內距在 1200px 以上是 0.9375rem，九項的自然寬度合計約 1000px，
   但 logo 與搜尋鈕之間只有約 925px，Flex 便把每一項壓到比文字還窄，
   「活動花絮」被折成「活動花／絮」。縮減內距換回空間，1200px 以上不再折行。
   註：992～1100 之間本來就放不下（八項時即已折行），此處只是不再惡化。 */
@media (min-width: 992px) {
    #header .navbar-nav .nav-link {
        padding-left: .4rem;
        padding-right: .4rem;
    }
}

/* 版型的字級用 RFS，1200px 以上才放大到 20px，偏偏 1200～1500 之間容器還沒
   跟著變寬，是最擠的一段；延後放大的時機。 */
@media (min-width: 992px) and (max-width: 1499.98px) {
    #header .navbar-nav .nav-link {
        /* 標記在 markup 上的是 Bootstrap 工具類別 .fs-5，本身帶 !important，
           這裡必須同樣加上才蓋得過去。 */
        font-size: 1rem !important;
    }
}

/* 992～1200（含 iPad 橫向 1024）最窄，再收一級。 */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #header .navbar-nav .nav-link {
        padding-left: .25rem;
        padding-right: .25rem;
        font-size: .9rem !important;
    }
}

/*---------------- 首頁主視覺 ----------------*/

/* 高度原本 inline 寫死 85vh。手機上內容（標題兩行 + 已縮小的地球動畫）
   實測只佔約 325px，85vh 等於 637px，其餘全是留白——內容縮了外框沒縮。
   手機降為 60vh；min-height 是給矮螢幕的保險：底部的 mask001.svg 是
   絕對定位在容器底部，容器太矮會蓋到地球動畫。 */
.hero-home {
    height: 85vh;
}

@media (max-width: 767px) {
    .hero-home {
        height: 60vh;
        min-height: 460px;
    }
}

@media (max-width: 767px) {
    .earth-animation-wrapper {
        height: 150px;
        /* 新增以下兩行：將整體動畫（包含地球與左右Logo）縮小至 80% 並維持置中 */
        transform: scale(0.6);
        transform-origin: center;
    }

    .earth-container {
        width: 280px;
        height: 280px;
        transform: translate(-50%, -50%) rotateZ(23deg) rotateX(15deg) scale(1);
    }

    .earth-core .lat-n30 {
        transform: rotateX(90deg) translateZ(70px) scale(0.866);
    }

    .earth-core .lat-n60 {
        transform: rotateX(90deg) translateZ(121px) scale(0.5);
    }

    .earth-core .lat-s30 {
        transform: rotateX(90deg) translateZ(-70px) scale(0.866);
    }

    .earth-core .lat-s60 {
        transform: rotateX(90deg) translateZ(-121px) scale(0.5);
    }

    .logo-half {
        width: 156px;
        height: 290px;
    }
}

/*---------------- 監理事會成員 ----------------*/

.avatar-xxl {
    width: 11rem !important;
    height: 13rem !important;
}

/*---------------- Unite Gallery ----------------*/

.ug-lightbox .ug-lightbox-overlay {
    background-color: rgba(0, 0, 0, 0.8) !important;
    opacity: 1 !important;

}

/*---------------- 自訂清單顯示：第一條、 ----------------*/

/* 自訂台灣法規與特定習慣的中文數字計數器 */
@counter-style tw-law-numbers {
    system: additive;
    additive-symbols:
        50 五十,
        49 四九, 48 四八, 47 四七, 46 四六, 45 四五, 44 四四, 43 四三, 42 四二, 41 四一, 40 四十,
        39 卅九, 38 卅八, 37 卅七, 36 卅六, 35 卅五, 34 卅四, 33 卅三, 32 卅二, 31 卅一, 30 三十,
        29 廿九, 28 廿八, 27 廿七, 26 廿六, 25 廿五, 24 廿四, 23 廿三, 22 廿二, 21 廿一, 20 二十,
        10 十, 9 九, 8 八, 7 七, 6 六, 5 五, 4 四, 3 三, 2 二, 1 一;
}

/* 1. 大綱主清單（第 N 條：） */
ol.law-list {
    list-style-type: none;
    padding-left: 0;
    counter-reset: law-counter;
}

ol.law-list > li {
    counter-increment: law-counter;
    position: relative;
    padding-left: 6.8rem;
    margin-bottom: 10px;
    line-height: 1.6;
}

ol.law-list > li::before {
    content: "第 "counter(law-counter, tw-law-numbers) " 條：";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    width: 6.2rem;
    text-align: right;
}

/* 2. 子清單 (1)、(2)、(3) */
ol.sub-list {
    list-style-type: none;
    padding-left: 0;
    counter-reset: sub-counter;
}

ol.sub-list > li {
    counter-increment: sub-counter;
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 0px;
    line-height: 1.6;
}

ol.sub-list > li::before {
    content: ""counter(sub-counter, decimal) "、";
    position: absolute;
    left: 0;
    top: 0;
}

/* 3. 新增的子清單 一、二、三、 */
ol.sub-list2 {
    list-style-type: none;
    padding-left: 0;
    counter-reset: sub2-counter;
}

ol.sub-list2 > li {
    counter-increment: sub2-counter;
    position: relative;
    padding-left: 2.5rem;
    /* 留出左邊距給中文數字與頓號 */
    margin-bottom: 0px;
    line-height: 1.6;
}

ol.sub-list2 > li::before {
    /* 使用先前設定的計數器名稱，使其完美支援 廿、卅、四一 的規則 */
    content: counter(sub2-counter, tw-law-numbers) "、";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
}

/* 4. 其它獨立的中文清單 一、二、三 */
ol.matches-list {
    list-style-type: none;
    padding-left: 0;
    counter-reset: law-counter;
}

ol.matches-list > li {
    counter-increment: law-counter;
    position: relative;
    padding-left: 3rem;
    margin-bottom: 10px;
    line-height: 1.6;
}

ol.matches-list > li::before {
    content: ""counter(law-counter, tw-law-numbers) "、";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
}

/*---------------- SwipeSlider ----------------*/

/* 1. 預設狀態：將左右箭頭隱藏，並加上轉場動畫 */
.swiper-container .swiper-button-next,
.swiper-container .swiper-button-prev {
    opacity: 0;
    visibility: hidden;
    /* 確保隱藏時徹底無法被點擊 */
    transition: all 0.3s ease;
}

/* 2. 當滑鼠移入 .swiper 時：顯示左右箭頭 */
.swiper-container:hover .swiper-button-next,
.swiper-container:hover .swiper-button-prev {
    opacity: 1;
    visibility: visible;
}

/*---------------- 搜尋結果 ----------------*/

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 動態隱藏非選定分類的樣式 */
.d-none-filter {
    display: none !important;
}

/*---------------- 會員專區 ----------------*/

/* 額外介面優化樣式：提升互動感 */
        .list-group-item-action:hover {
            background-color: #f8f9fa !important;
            border-left: 4px solid #dddddd !important;
            transition: all 0.1s ease-in-out;
        }

        .form-check-hover:hover {
            background-color: #f1f3f5;
            cursor: pointer;
        }

        /* ==========================================================================
           修正：當選單項目處於 active 狀態時的樣式（適用於所有子選單切換）
           ========================================================================== */
        #memberTab .list-group-item.active {
            background-color: #ffe8a4 !important; /* 改為 Bootstrap warning 標準黃色底 */
            border-color: #ffe8a4 !important;
            color: #212529 !important;            /* 強制文字使用深色，確保在黃底上清晰可見 */
            border-left: 4px solid #f0bb72 !important; /* 加上稍微深色的左邊條提升質感 */
        }

        /* 強制 active 項目內部的 i 圖示也同步變為深色，防止 text-success 顏色在黃底上突兀或消失 */
        #memberTab .list-group-item.active i {
            color: #212529 !important;
        }

        /* 當選單已是 active 狀態，且滑鼠又移過去時的修正 */
        #memberTab .list-group-item.active:hover {
            background-color: #ffd761 !important; /* 稍微深一點點的黃色作為 hover 視覺反饋 */
            color: #212529 !important;            /* 確保文字絕對不會變成白色 */
            border-left: 4px solid #ffb000 !important;
        }
/* ===== 專案自訂（非版型原有） ===== */

/* 贊助廠商 Logo：統一 1200x600 (2:1) 比例容器。
   設計師補充 6 — 首頁與列表頁共用，避免圖片尺寸不一造成高度不齊。 */
.ratio.sponsor-logo {
    --bs-aspect-ratio: 50%;
}

.ratio.sponsor-logo > img {
    object-fit: contain;
    padding: .5rem;
}

/* 直式縮圖 3:4（寬3高4）。Bootstrap 內建只有 ratio-4x3 等橫式，
   活動公告的海報多為直式，需自訂。aspect-ratio 為 寬/高，故 4/3 = 133.333%。 */
.ratio-3x4 {
    --bs-aspect-ratio: 133.333%;
}