@charset "UTF-8";

/* footer.css */
/* 此檔案包含頁尾區塊的專屬樣式，並支援自適應 (RWD) 佈局 */
/* 繼承自原始設計系統，並針對行動裝置進行優化 */

footer {
    background: #0c2d44;      /* 深藍色背景，與品牌色一致 */
    color: #ccddee;           /* 淺灰色文字，保持對比度 */
    padding: 3rem 0;          /* 上下留白，左右由 container 控制 */
    font-family: 'Segoe UI', 'Noto Sans TC', 'PingFang TC', system-ui, sans-serif;
    width: 100%;
}

footer .container {
    max-width: 1140px;        /* 符合 Bootstrap 預設容器寬度 */
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* 頁尾標題 (公司名稱) */
footer h4 {
    color: #ffffff;           /* 純白標題，更醒目 */
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1.5rem;        /* 預設字體大小 */
    letter-spacing: -0.01em;
}

/* 頁尾一般段落與連結 */
footer p,
footer ul,
footer a {
    color: #ccddee;           /* 繼承淡色文字 */
    transition: color 0.2s ease;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

footer a:hover {
    color: #e9b741;           /* 品牌強調色 (accent) 用於懸停 */
    text-decoration: none;
}

/* 客製化輔助類別：更淡的文字 (用於版權與次要連結) */
.text-white-50 {
    color: rgba(255, 255, 255, 0.6) !important; /* 白色半透明，原始定義 */
}

footer hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* 淺色分隔線 */
    margin: 2rem 0;
}

/* 移除清單預設符號 */
.list-unstyled {
    padding-left: 0;
    list-style: none;
}

/* --- 自適應設計 (RWD) 針對不同螢幕調整 --- */

/* 平板與以下 (max-width: 767px) */
@media (max-width: 767px) {
    footer {
        padding: 2.5rem 0;      /* 減少上下留白 */
    }

    footer .row {
        display: flex;
        flex-direction: column;  /* 改為垂直堆疊 */
        gap: 1.5rem;             /* 各區塊間距 */
    }

    /* 每個 col-md-* 在手機上佔滿寬度，不再浮動 */
    footer [class*="col-md"] {
        width: 100%;
        text-align: center;      /* 置中對齊更適合小螢幕 */
    }

    footer h4 {
        font-size: 1.4rem;       /* 略為縮小標題 */
        margin-bottom: 0.8rem;
    }

    footer ul {
        padding-left: 0;
    }

    footer ul li {
        margin-bottom: 0.4rem;
    }

    footer hr {
        margin: 1.5rem 0;
    }
}

/* 手機較小尺寸 (max-width: 480px) */
@media (max-width: 480px) {
    footer {
        padding: 2rem 0;
        font-size: 0.95rem;      /* 稍微縮小字體 */
    }

    footer p, 
    footer a {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    footer h4 {
        font-size: 1.3rem;
    }

    /* 版權宣告的字體大小再微調 */
    footer .text-center.text-white-50 {
        font-size: 0.9rem;
    }
}

/* 大型螢幕 (min-width: 1200px) 可保持原樣，不需特別調整 */
@media (min-width: 1200px) {
    footer .container {
        max-width: 1140px;       /* 維持 Bootstrap 大螢幕寬度 */
    }
}

/* 若需支援更寬的螢幕，可選擇性地增加 max-width */
@media (min-width: 1400px) {
    footer .container {
        max-width: 1320px;       /* 符合 Bootstrap XXL 容器 */
    }
}