/* css/header.css */

/* --- 基礎 Header 結構 --- */
.site-header {
	background-image: linear-gradient(to bottom, 
		#c2d95f 6%, 
		#62c0b4 35%, 
		#1286b0 98%
	),
	url('../images/head_bg_wave.png?v=21'); /* 您的背景圖路徑 */
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	background-blend-mode: soft-light;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	position: sticky;
	top: 0;
	z-index: 1000; /* 確保 Header 在最上層 */
	font-family: sans-serif;
}

.header-top {
	min-height:140px;
}

.header-top .flex-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 0 0 0;
}

.logo.flex-row{
	flex-direction: row;
}

.logo img {
	height: 90px;
	display: block;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 15px;
}

.event-date {
	font-size: 1.5rem;
	color: var(--primary-blue);
	font-weight: 500;
	margin: 0 1.5rem;
}

.event-date span{
	display: block;

}

.btn-reg {
	background-color: #eb3300;
	color: #fff;
	padding: 8px 20px;
	padding-right: 10px;
	border-radius: 20px;
	font-size: 0.9rem;
	font-weight: 800;
	transition: 0.3s;
	display: flex;
}

.btn-search {
	width:40px;
	height:40px;
	background-color: var(--primary-blue);
	color: #fff;
	border-radius: 20px;
	font-size: 0.9rem;
	transition: 0.3s;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index:1;
}

.btn-reg:hover{
	background-color: #fb5020;
}


/* .btn-search:hover {
	background-color: var(--primary-teal); 
} */

.btn-search img{
	width:60%;
	height:auto;
	display: block;
}


/* 搜尋框簡易樣式 */
.search-box {
	display: flex;
	border: 1px solid #ddd;
	border-radius: 20px;
	overflow: hidden;
	padding-left: 10px;
}
.search-box input {
	border: none;
	outline: none;
	font-size: 0.9rem;
	padding: 5px;
}
.search-box button {
	background: none;
	border: none;
	cursor: pointer;
	padding: 5px 10px;
}

/* --- 主導覽列 (Main Nav) --- */
.main-nav {
	width: 1300px;
	background: linear-gradient(90deg, var(--primary-blue), var(--primary-teal));
	position: relative;
	bottom: -25px;
	margin: 0 auto;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.nav-list {
	display: flex;
	justify-content: space-between; /* 平均分散 */
	padding: 0;
	margin: 0;
	list-style: none;
}

/* 第一層選單項目 */
.nav-list > li {
	position: relative; /* 關鍵：定位基準點 */
}

.nav-list > li > a {
	display: block;
	padding: 15px 15px;
	color: var(--white);
	font-weight: 500;
	text-decoration: none;
	font-size: 1.1rem;
	white-space: nowrap; /* 不換行 */
	transition: background 0.3s;
}

/* 箭頭微調 */
.arrow {
	font-size: 0.7em;
	margin-left: 5px;
	vertical-align: middle;
	opacity: 0.7;
}

.nav-list > li:hover > a {
	background: rgba(255,255,255,0.15); /* 滑鼠經過主選單的背景 */
}

/* --- 下拉選單 (Dropdown Menu) --- */
.dropdown-menu {
	position: absolute;
	top: 100%; /* 剛好接在父層下方 */
	left: 0;
	width: 220px; /* 下拉選單寬度 */
	background-color: #fff;
	box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* 陰影 */
	border-top: 3px solid var(--primary-green); /* 頂部裝飾線 */
	
	/* 隱藏設定 */
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px); /* 稍微往下移一點，做滑上來的動畫 */
	transition: all 0.3s ease;
	
	z-index: 9999; /* 務必比 banner 高 */
	list-style: none;
	padding: 10px 0;
	border-radius: 0 0 5px 5px;
}

/* 滑鼠經過父層時，顯示下拉選單 */
.nav-list > li:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* 下拉選單內的連結 */
.dropdown-menu li a {
	display: block;
	padding: 10px 20px;
	color: #333; /* 改回深色字 */
	font-size: 0.95rem;
	text-decoration: none;
	border-bottom: 1px solid #f5f5f5;
	transition: 0.2s;
}

.dropdown-menu li:last-child a {
	border-bottom: none;
}

.dropdown-menu li a:hover {
	background-color: #f9f9f9;
	color: var(--primary-blue);
	padding-left: 25px; /* 輕微位移特效 */
}



/* --- RWD 手機版 (768px 以下) 簡易處理 --- */
@media (max-width: 768px) {
	
	/* .event-date span{
		display: inline-block;
		font-size: .9rem;
	} */
	
	.header-top .flex-row{
		padding:10px 0 10px 0;
	}
	
	/* .logo.flex-row{
		flex-direction: column;
	} */
	
	.nav-list {
		flex-direction: column;
		display: none; /* 需要搭配 JS 做漢堡選單開關 */
	}
	
	/* 手機版下拉選單改為靜態顯示或點擊展開 */
	.dropdown-menu {
		position: static;
		width: 100%;
		box-shadow: none;
		border-top: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		background-color: rgba(0,0,0,0.05); /* 稍微深一點區分 */
		display: none; /* 預設收合 */
	}
	
	/* 手機版文字調整 */
	.nav-list > li > a {
		padding: 15px 20px;
		border-bottom: 1px solid rgba(255,255,255,0.1);
	}
	
	/* 手機版這裡通常需要 JS 來控制 .dropdown-menu 的 display: block */
}


/* =========================================
   新增特效：捲動時 Header 縮小 (Sticky Shrink)
   ========================================= */

/* 預設加入轉場動畫，讓縮放平滑 */
.site-header, 
.header-top, 
.logo img, 
.event-date,
.main-nav {
	transition: all 0.3s ease-in-out;
}

@media (min-width: 993px) {
	.site-header:not(.enable-scroll-effect) .header-top {
		min-height: 70px; /* 強制變小 */
	}
	
	.site-header:not(.enable-scroll-effect) .logo img {
		height: 50px; /* 強制變小 */
	}
	.site-header:not(.enable-scroll-effect) .event-date {
		font-size: 1rem;
		/* display: none; // 隱藏日期 */
	}
	
	/* --- 當 Header 加上 .scrolled 類別時的樣式 --- */
	.site-header.scrolled {
		background-position: center bottom;
		box-shadow: 0 5px 10px rgba(0,0,0,0.1);
	}

	/* 縮小上方區域高度 */
	.site-header.scrolled .header-top {
		min-height: 70px; /* 電腦版捲動後變矮 */
	}

	/* 縮小 Logo */
	.site-header.scrolled .logo img {
		height: 50px; /* 電腦版捲動後 Logo 變小 */
	}

	/* 隱藏日期 */
	.site-header.scrolled .event-date {
		font-size: 1rem;
		/* opacity: 0; */
		/* display: none; */
	}

	/* 調整導覽列位置 */
	.site-header.scrolled .main-nav {
		bottom: -25px;
		transform: scale(1);
	}
}

/* =========================================
   新增：手機版 RWD 與 漢堡選單
   ========================================= */

/* 漢堡按鈕樣式 (預設隱藏) */
.hamburger {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
	padding: 5px;
	z-index: 1001;
}

.hamburger span {
	display: block;
	width: 25px;
	height: 3px;
	background-color: #fff; /* 配合背景色 */
	border-radius: 3px;
	transition: 0.3s;
}




/* --- 手機版樣式 (螢幕小於 992px 或 768px) --- */
@media (max-width: 992px) {

	/* 1. Header 調整 */
	.header-top {
		min-height: 80px;
		padding: 0 15px;
	}
	
	.event-date {
		/*display: none; */
		font-size: .8rem;
	}
	
	.logo img {
		height: 40px;
	}
	
	.header-actions {
		display: none;
	}

	/* 2. 顯示漢堡選單 */
	.hamburger {
		display: flex;
	}
	
	/* 漢堡按鈕變成 X 的動畫 (當有 .active 時) */
	.hamburger.active span:nth-child(1) {
		transform: rotate(45deg) translate(5px, 6px);
	}
	.hamburger.active span:nth-child(2) {
		opacity: 0;
	}
	.hamburger.active span:nth-child(3) {
		transform: rotate(-45deg) translate(5px, -6px);
	}

	/* 3. 主導覽列 (Main Nav) 改為手機版抽屜式或下拉式 */
	.main-nav {
		width: 100%; /* 滿版 */
		position: absolute;
		top: 100%; /* 接在 header 下方 */
		left: 0;
		bottom: auto;
		margin: 0;
		border-radius: 0;
		background: rgba(18, 134, 176, 0.95); /* 深藍色背景 */
		
		/* 隱藏狀態 */
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.4s ease-out; /* 使用 max-height 做收合動畫 */
	}

	/* 當選單被打開時 (.nav-open) */
	.main-nav.nav-open {
		max-height: 100vh; /* 展開足夠的高度 */
		overflow-y: auto; /* 內容太多時可捲動 */
	}

	.nav-list {
		display: flex;
		flex-direction: column; /* 垂直排列 */
		padding: 10px 0;
	}

	.nav-list > li > a {
		padding: 15px 20px;
		border-bottom: 1px solid rgba(255,255,255,0.1);
		display: flex;
		justify-content: space-between; /* 讓箭頭靠右 */
	}

	/* 4. 手機版下拉選單處理 */
	.dropdown-menu {
		position: static; /* 取消懸浮 */
		width: 100%;
		box-shadow: none;
		border-top: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none; /* 預設收合，用 JS 切換 */
		background-color: rgba(0,0,0,0.1); /* 內層深色一點 */
		padding: 0;
	}

	.dropdown-menu li a {
		color: #fff; /* 手機版下拉字改白色 */
		padding-left: 40px; /* 縮排 */
		border-bottom: 1px solid rgba(255,255,255,0.05);
	}
	
	.dropdown-menu li a:hover {
		background-color: rgba(255,255,255,0.1);
		color: #fff;
	}

	/* JS 會切換這個 class 來顯示子選單 */
	.dropdown-active .dropdown-menu {
		display: block;
	}
	
	/* 旋轉箭頭 */
	.dropdown-active > a .arrow {
		transform: rotate(180deg);
	}
}



/* 搜尋按鈕 */
/* --- 容器 --- */
.search-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* --- 放大鏡按鈕 --- */
a.btn-search {
	position: relative;
	z-index: 2; /* ★ 關鍵：讓放大鏡浮在輸入框上面 */
	display: flex;
	align-items: center;
	justify-content: center;
	/* 建議給放大鏡一個背景色(例如白色或Header底色)，
	   這樣輸入框縮回去時才不會透過放大鏡看到底下的線條 */
	background-color: var(--primary-blue); 
	border-radius: 50%; /* 保持圓形 */
	width: 40px; /* 視情況調整 */
	height: 40px;
	text-decoration: none;
	color: #fff; /* 配合您的主色系 */
}

/* --- 搜尋表單容器 --- */
.search-form {
	position: relative; /* ★ 關鍵：讓內部的絕對定位按鈕參考此容器 */
	margin-left: -20px; /* 往左拉，製造連接感 */
	background: #def6ff;
	border-radius: 50px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	padding-right: 15px; /* 預留給按鈕的空間 */
	box-sizing: border-box;
	display: flex;       /* 讓內部元素水平排列 */
	align-items: center;
	
	/* 增加寬度過渡動畫，讓藍色背景也能跟著縮放 (選擇性) */
	width: 0; 
	overflow: hidden; /* 隱藏未展開的內容 */
	opacity: 0;
	transition: all 0.4s ease;
}

/* --- 輸入框 --- */
.search-input {
	width: 0;             
	/* opacity: 0;  由 form 統一控制透明度比較順 */
	padding: 12px 0;
	border: none;
	outline: none;
	background: transparent;
	color: #333;
	font-size: 1rem;
	transition: width 0.4s ease; /* 只針對寬度做動畫 */
}

/* --- 激活狀態 (.active) --- */
/* 當 form 加上 active 時，展開容器 */
.search-form.active {
	width: auto; /* 或固定寬度，視需求 */
	opacity: 1;
	overflow: visible;
}

.search-form.active .search-input {
	width: 200px;
	padding: 12px 12px;
	padding-left: 25px; /* 因為 margin-left -20px，這裡補一點內距以免文字被放大鏡擋住 */
}

/* --- 送出按鈕 --- */
button.schSubmit {
	border: 1px solid #333;
	padding: 0;
	margin: 0;
	overflow: hidden;
	background: transparent;
	border: 0;
	position: absolute;
	right: 5px;  /* ★ 微調：靠右距離 */
	top: 50%;    
	transform: translateY(-50%);
	cursor: pointer;
	
	/* 預設隱藏，展開後才顯示，避免誤觸 */
	opacity: 0;
	pointer-events: none; 
	transition: opacity 0.3s ease 0.2s; /* 延遲顯示 */
}

/* 展開時顯示按鈕 */
.search-form.active button.schSubmit {
	opacity: 1;
	pointer-events: auto;
}

button.schSubmit span {
	color: #333;
	background: #fff;
	border-radius: 14px; /* 圓形 */
	width: 28px;
	height: 28px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	font-weight: bold;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 加一點陰影更有質感 */
}