/* 引入 Google 字體 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700;900&display=swap');

body {
    font-family: 'Noto Sans TC', sans-serif;
    background-color: #f8f9fa;
}

/* 導覽列顏色強制修正 */
.bg-primary {
    background-color: #003366 !important;
}

/* 修正後的 Hero Section */
.hero-section {
    /* 1. 控制高度：改為視窗高度的 60% (原先可能是 100%) */
    min-height: 60vh; 
    padding: 60px 0;

    /* 2. 半透明遮罩 (核心修正) */
    /* 這裡使用兩層背景：第一層是 50% 透明度的黑色遮罩，第二層才是您的圖片 */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                url('https://www.ntunhs.edu.tw/var/file/0/1000/randimg/mobileadv_1105_8752682_67162.jpg'); /* 請確認圖片路徑 */

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 讓內容置中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3. 增強文字陰影，讓字體更立體 */
.hero-section h1, 
.hero-section h4 {
    text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8);
    font-weight: 700;
}

/* 確保文字陰影，增加可讀性 */
.hero-section h1, .hero-section p {
    text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
}

/* 導覽列 LOGO 樣式 */
.navbar-brand img {
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 2px;
}

.navbar-brand span {
    letter-spacing: 0.5px;
}

/* 調整按鈕在 Hero 區的樣式 */
.hero-section .btn-light {
    background-color: #ffffff;
    border: none;
    color: #003366 !important;
    padding: 12px 30px;
}

/* 修正 4R 理念卡片圖示顏色 */
.text-primary {
    color: #003366 !important;
}

/* 頁尾樣式 */
footer {
    background-color: #1a202c !important;
}
footer span {
    border: 1px solid rgba(255,255,255,0.3);
    padding: 5px 15px;
    border-radius: 20px;
    display: inline-block;
    margin: 5px;
}

/* 修正導覽列固定後的內容遮蓋問題 */
body {
    padding-top: 75px; /* 這大約是導覽列的高度 */
}

/* 確保在手機版導覽列展開時也有正確間距 */
@media (max-width: 991.98px) {
    body {
        padding-top: 65px;
    }
}

/* 強制將頁尾推至螢幕最底端 (Sticky Footer) */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 讓網頁的最小高度等於螢幕高度 */
}

#footer-placeholder {
    margin-top: auto; /* 自動利用上方剩餘空間，把 Footer 往下推 */
    width: 100%;
}

/* 如果您有使用 AIT 橫幅的裝飾圓圈，防止它撐開網頁產生多餘捲軸 */
body, html {
    overflow-x: hidden;
}