/* =========================
   navbar.css (Global)
   - 全站共用 Navbar
   - 永遠置頂 fixed（不會滾過輪播就消失）
   - 桌機版導覽列置中
   - 手機版漢堡+下拉
========================= */

:root {
	--bg: #fff;
	--surface: #f6f7fb;
	--card: #fff;
	--text: #0b1220;
	--muted: rgba(11, 18, 32, 0.62);
	--muted2: rgba(11, 18, 32, 0.45);
	--line: rgba(11, 18, 32, 0.1);

	--shadow: 0 22px 54px rgba(11, 18, 32, 0.1);
	--shadow2: 0 14px 28px rgba(11, 18, 32, 0.08);

	--brand: #1b5cff;
	--brand2: #06b6d4;

	--radius: 22px;
	--radius2: 16px;
	--container: 1180px;

	/* Navbar 高度（給 body padding-top 用） */
	--navH: 76px;
}

/* 基礎：container / link（全站共用） */
.container {
	width: min(var(--container), calc(100% - 48px));
	margin-inline: auto;
}
a {
	color: inherit;
	text-decoration: none;
}

/* fixed navbar 會蓋住內容，用 padding-top 推下去 */
body {
	padding-top: var(--navH);
}

/* =========================
   NAVBAR
========================= */
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	backdrop-filter: blur(12px);
	background: rgba(255, 255, 255, 0.72);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nav__inner {
	position: relative; /* 讓置中的 nav links 可以 absolute */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
}

/* Brand */
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 900;
	letter-spacing: 0.2px;
}

/* 你現在用 img logo：給一個合理尺寸 */
.brand .logo {
	width: 50px;
	height: 50px;
	object-fit: contain;
}

/* 若你未來改回 span.logo（非 img）也能吃到 */
.logo:not(img) {
	width: 40px;
	height: 40px;
	border-radius: 14px;
	background:
		radial-gradient(
			60% 60% at 30% 30%,
			rgba(255, 255, 255, 0.78),
			rgba(255, 255, 255, 0)
		),
		linear-gradient(135deg, var(--brand), var(--brand2));
	box-shadow: var(--shadow2);
}

.brand__text b {
	display: block;
	font-size: 14px;
}
.brand__text small {
	display: block;
	font-size: 12px;
	color: var(--muted);
	font-weight: 800;
}

/* Links（膠囊） */
.nav__links {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px;
	border-radius: 999px;
	background: rgba(246, 247, 251, 0.72);
	border: 1px solid rgba(0, 0, 0, 0.06);
}

.nav__link {
	font-weight: 900;
	font-size: 13px;
	color: rgba(11, 18, 32, 0.72);
	padding: 10px 14px;
	border-radius: 999px;
	transition: 0.18s ease;
}
.nav__link:hover {
	background: rgba(27, 92, 255, 0.1);
	color: var(--text);
}
.nav__link.is-active {
	background: rgba(11, 18, 32, 0.06);
	color: rgba(11, 18, 32, 0.86);
}

/* 右側區（你已移除 CTA 按鈕，這裡只放 hamburger） */
.nav__cta {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* 漢堡 */
.hamburger {
	display: none; /* 桌機預設不顯示 */
	width: 44px;
	height: 44px;
	border-radius: 14px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.76);
	cursor: pointer;
}
.hamburger span {
	display: block;
	width: 18px;
	height: 2px;
	background: rgba(11, 18, 32, 0.72);
	margin: 4px auto;
	border-radius: 2px;
}

/* =========================
   Mobile dropdown
========================= */
.mnav {
	display: none;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	background: rgba(255, 255, 255, 0.92);
}
.mnav__panel {
	padding: 14px 0 18px;
	display: grid;
	gap: 10px;
}
.mnav__panel a {
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: rgba(246, 247, 251, 0.78);
	font-weight: 900;
	color: rgba(11, 18, 32, 0.78);
}
.mnav__panel a.is-active {
	background: rgba(11, 18, 32, 0.06);
	color: rgba(11, 18, 32, 0.86);
}
.mnav__panel a:hover {
	background: rgba(27, 92, 255, 0.1);
	color: var(--text);
}
.mnav.is-open {
	display: block;
}

/* =========================
   Desktop：導覽列置中
   - Brand 在左
   - Links 絕對置中
   - Hamburger 隱藏
========================= */
@media (min-width: 981px) {
	.nav__links {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.hamburger {
		display: none;
	}
}

/* =========================
   Mobile：links 隱藏、顯示 hamburger
========================= */
@media (max-width: 980px) {
	.nav__links {
		display: none;
		position: static;
		transform: none;
	}
	.hamburger {
		display: inline-grid;
		place-items: center;
	}
}

/* 小螢幕：container 更窄、navbar 高度稍降 */
@media (max-width: 560px) {
	:root {
		--navH: 72px;
	}
	.container {
		width: calc(100% - 28px);
	}
	.brand .logo {
		width: 36px;
		height: 36px;
		border-radius: 12px;
	}
}