/* --- 1. 導覽列整體佈局 --- */
.navbar {
    display: flex !important;
    justify-content: space-between !important; /* 確保 Logo 在左，選單與翻譯在右 */
    align-items: center !important;
    padding: 10px 5% !important;
    height: 80px; /* 固定高度防止被 line-height 撐開 */
}

/* --- 2. 徹底移除黑點並橫向排版 --- */
.nav-links {
    display: flex !important;
    list-style: none !important;
    margin: 0 20px 0 auto !important; /* 將選單推向右邊，並與翻譯元件保持距離 */
    padding: 0 !important;
    gap: 20px;
}

.nav-links li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    line-height: 1 !important; /* 壓制 global.css 的 line-height: 4 */
}

.nav-links a {
    text-decoration: none !important;
    display: block;
    padding: 10px 0;
}

/* 確保翻譯元件顯示且靠最右 */
#google_translate_element {
    display: flex !important;
    align-items: center;
    margin-left: 0 !important;
    flex-shrink: 0; /* 防止被擠壓 */
    line-height: 1.2 !important;
}

/* ===== 內容區 ===== */

.page-header {
    background: 
    linear-gradient(rgba(10,20,40,0.85), rgba(10,20,40,0.85)),
    url("../assets/images/ai-bg.jpg") center/cover no-repeat;
    text-align: center;
    padding: 80px 20px;
    color: white;
}

.page-header h1 {
    font-size: 50px;
    margin-bottom: 10px;
    letter-spacing: 4px;
}

.page-header p {
    width: 400px;
    height: 4px;
    background: #ff5c5c;
    margin: 0 auto;
}

.container{
  max-width: 1100px;
  margin: 0 auto;      /* 取消 60px */
  padding: 0 20px;
}

.section{
  padding: 60px 0;     /* 統一用 section 控制間距 */
}

/* --- sidebar --- */

.about-container {
    max-width: 1300px;       /* 加寬一點，因為多了一個側邊欄 */
    width: 90%;
    margin: 60px auto;       /* 上下留白 */
    padding: 0 20px;
    
    /* 啟動 Flexbox 左右排版 */
    display: flex;
    align-items: flex-start; /* 讓側邊欄對齊頂部 */
    gap: 60px;               /* 左欄跟右欄的距離 */
}

/* --- 2. 左側懸浮選單 (Sidebar) --- */
.sidebar {
    width: 200px;            /* 固定寬度 */
    flex-shrink: 0;          /* 防止被壓縮 */
    position: sticky;        /* !!! 關鍵：懸浮效果 !!! */
    top: 100px;              /* 滑動時，距離視窗頂部 100px 就停住 */
    
    /* 簡單美化 */
    border-right: 1px solid #eee; /* 右邊加一條細線分隔 */
    padding-right: 20px;
    height: fit-content;
}

.sidebar h3 {
    font-size: 1.4rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.sidebar ul {
    list-style: none;        /* 移除預設圓點 */
    padding: 0;
}

.sidebar li {
    margin-bottom: 18px;
}

/* 選單連結樣式 */
.sidebar a {
    display: flex;
    align-items: center;
    color: #555;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
    border-bottom: 1px solid transparent; /* 預留底線位置 */
}

/* 連結前面的小方塊裝飾 */
.sidebar a::before {
    content: "■";
    font-size: 0.6rem;       /* 小一點比較精緻 */
    color: #aaa;
    margin-right: 10px;
    transition: color 0.3s;
}

/* 滑鼠移過去的效果 */
.sidebar a:hover {
    color: #0000FF;          /* 變藍色 */
    padding-left: 5px;       /* 稍微往右移 */
}
.sidebar a:hover::before {
    color: #0000FF;
}

/* --- 3. 右側主要內容區 --- */
.main-content {
    flex: 1;                 /* 佔滿剩餘空間 */
    min-width: 0;            /* 防止內容把容器撐爆 */
}

/* 修正 global.css 的過大行高，讓內文閱讀更舒適 */
.mission-text {
    line-height: 1.8 !important; 
    margin-bottom: 20px;
}

/* 課程卡片排版 */
.course-card-wrapper {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 60px;
}

/* 課程標籤樣式 */
.course-tag {
    display: inline-block;
    padding: 2px 10px;
    background: #eef4ff;
    color: #2b7cff; /* 使用 global.css 的 hover 藍色 */
    font-size: 0.85rem;
    font-weight: bold;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* 課程規格區 */
.course-meta {
    border-top: 1px dashed #ddd;
    padding-top: 15px;
    margin-top: 15px;
}

.course-meta span {
    display: block;
    font-size: 0.9rem;
    color: #888;
    line-height: 1.6; /* 獨立控制規格區行高 */
}

.course-btn {
    display: inline-block;
    margin-top: 25px; /* 這裡可以設為 auto，讓它自動把上面的空間推開 */
    
    /* 這裡控制大小 */
    padding: 6px 20px;       /* 上下 6px，左右 20px (讓它扁一點) */
    line-height: 1.5 !important; /* 強制壓扁行高 */
    font-size: 0.95rem;
    
    background-color: #2b7cff;
    color: #fff !important;
    font-weight: bold;
    border-radius: 4px;
    text-decoration: none;
    transition: 0.3s;
}

/* 滑鼠移上去的效果維持不變 */
.course-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(43, 124, 255, 0.3);
}

/* 圖片放大動畫效果 */
.photo-wrapper {
    overflow: hidden;
    border-radius: 8px;
}
.photo-wrapper img {
    transition: transform 0.4s ease;
    display: block;
}
.course-card-wrapper:hover .photo-wrapper img {
    transform: scale(1.05);
}

.group-photo-section {
    /* 原本是 450px (太大)，改成 300px 或是 320px */
    flex: 0 0 300px !important; 
    max-width: 300px !important;
    
    /* 保持圖片不變形的其他設定 */
    display: flex;
    justify-content: center;
}

/* 確保圖片乖乖待在 300px 的框框裡 */
.photo-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover; /* 確保圖片填滿且不變形 */
}

hr {
  border: 0;
  border-top: 1px solid #eee; /* 自定義線條顏色 */
  margin: 40px 0; /* 第一個數值 40px 會同時撐開上下間距 */
  clear: both; /* 重要：防止上方有浮動元素導致 hr 貼頂 */
}