/* 國立臺北商業大學企管系EMBA曁MBA校友會 - 紫色系主題配色 */
:root {
	/* 主要配色 - 紫色系 */
	--alumni-primary: #8B5FBF;
	--alumni-secondary: #9B59B6;
	--alumni-accent: #B19CD9;
	--alumni-light: #E8E0F5;
	--alumni-dark: #5B2C6F;
	/* 漸層配色 */
	--alumni-gradient: linear-gradient(135deg, #8B5FBF 0%, #9B59B6 100%);
	--alumni-gradient-light: linear-gradient(135deg, rgba(139, 95, 191, 0.1) 0%, rgba(155, 89, 182, 0.1) 100%);
	--alumni-gradient-dark: linear-gradient(135deg, #5B2C6F 0%, #6B46C1 100%);
	/* 動態背景漸層 */
	--alumni-animated-bg: linear-gradient(-45deg, #8B5FBF, #9B59B6, #B19CD9, #A855F7);
	/* 文字顏色 */
	--alumni-text-primary: #2C3E50;
	--alumni-text-secondary: #7F8C8D;
	--alumni-text-light: #BDC3C7;
	/* 背景顏色 */
	--alumni-bg-primary: #FFFFFF;
	--alumni-bg-secondary: #F8F9FA;
	--alumni-bg-accent: rgba(139, 95, 191, 0.05);
	/* 陰影效果 */
	--alumni-shadow: 0 4px 15px rgba(139, 95, 191, 0.15);
	--alumni-shadow-lg: 0 8px 30px rgba(139, 95, 191, 0.2);
	--alumni-shadow-xl: 0 12px 40px rgba(139, 95, 191, 0.25);
	/* 邊框圓角 */
	--alumni-border-radius: 8px;
	--alumni-border-radius-lg: 12px;
	--alumni-border-radius-xl: 20px;
	/* 動畫時間 */
	--alumni-transition: all 0.3s ease;
	--alumni-transition-slow: all 0.6s ease;
}

/* 全局樣式重置 */
* {
	box-sizing: border-box;
}

body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.6;
	color: var(--alumni-text-primary);
	background-color: var(--alumni-bg-primary);
}

/* 動態背景效果 */
.bg-alumni-gradient {
	background: var(--alumni-gradient);
}

/* 實心背景效果 - 不透明 */
.bg-alumni-solid {
	background: linear-gradient(135deg, #2c3e50 0%, #34495e 25%, #4a6741 50%, #5a7c76 75%, #6c8e8a 100%);
	color: white;
	position: relative;
	overflow: hidden;
}

.bg-alumni-animated {
	background: var(--alumni-animated-bg);
	background-size: 400% 400%;
	animation: gradientShift 15s ease infinite;
	position: relative;
	overflow: hidden;
}

	.bg-alumni-animated::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="80" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="60" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="60" cy="40" r="1" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
		animation: floatPattern 20s ease-in-out infinite;
		pointer-events: none;
	}

/* 動畫定義 */
@@keyframes gradientShift {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@@keyframes floatPattern {
	0%, 100% {
		transform: translateY(0px) rotate(0deg);
	}

	50% {
		transform: translateY(-20px) rotate(180deg);
	}
}

@@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@@keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
	}

	100% {
		transform: scale(1);
	}
}

@@keyframes shimmer {
	0% {
		background-position: -200px 0;
	}

	100% {
		background-position: calc(200px + 100%) 0;
	}
}

/* 按鈕樣式 */
.btn-alumni-primary {
	background: var(--alumni-gradient);
	border: none;
	color: white;
	font-weight: 500;
	padding: 0.75rem 1.5rem;
	border-radius: var(--alumni-border-radius);
	transition: var(--alumni-transition);
	position: relative;
	overflow: hidden;
}

	.btn-alumni-primary::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
		transition: left 0.5s;
	}

	.btn-alumni-primary:hover::before {
		left: 100%;
	}

	.btn-alumni-primary:hover {
		transform: translateY(-2px);
		box-shadow: var(--alumni-shadow-lg);
		color: white;
	}

.btn-outline-alumni {
	border: 2px solid var(--alumni-primary);
	color: var(--alumni-primary);
	background: transparent;
	font-weight: 500;
	padding: 0.75rem 1.5rem;
	border-radius: var(--alumni-border-radius);
	transition: var(--alumni-transition);
}

	.btn-outline-alumni:hover {
		background: var(--alumni-gradient);
		color: white;
		transform: translateY(-2px);
		box-shadow: var(--alumni-shadow);
	}

/* 卡片樣式 */
.card-alumni {
	background: var(--alumni-bg-primary);
	border: none;
	border-radius: var(--alumni-border-radius-lg);
	box-shadow: var(--alumni-shadow);
	transition: var(--alumni-transition);
	overflow: hidden;
}

	.card-alumni:hover {
		transform: translateY(-5px);
		box-shadow: var(--alumni-shadow-lg);
	}

.card-alumni-header {
	background: var(--alumni-gradient);
	color: white;
	padding: 1.5rem;
	border: none;
}

/* 頁面標題區域統一樣式 */
.page-header-alumni {
	background: var(--alumni-animated-bg);
	background-size: 400% 400%;
	animation: gradientShift 15s ease infinite;
	color: white;
	padding: 4rem 0;
	position: relative;
	overflow: hidden;
}

	.page-header-alumni::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="80" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="60" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="60" cy="40" r="1" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
		animation: floatPattern 20s ease-in-out infinite;
		pointer-events: none;
	}

	.page-header-alumni .container {
		position: relative;
		z-index: 1;
	}

	.page-header-alumni h1 {
		animation: fadeInUp 1s ease;
		text-shadow: 0 2px 10px rgba(0,0,0,0.3);
	}

	.page-header-alumni .lead {
		animation: fadeInUp 1s ease 0.2s both;
		text-shadow: 0 1px 5px rgba(0,0,0,0.3);
	}

	.page-header-alumni .breadcrumb {
		animation: fadeInUp 1s ease 0.4s both;
	}

/* 響應式設計 */
@@media (max-width: 768px) {
	.page-header-alumni {
		padding: 2rem 0;
	}

		.page-header-alumni h1 {
			font-size: 2rem;
		}

	.btn-alumni-primary,
	.btn-outline-alumni {
		padding: 0.5rem 1rem;
		font-size: 0.9rem;
	}
}

/* 文字顏色工具類 */
.text-alumni-primary {
	color: var(--alumni-primary) !important;
}

.text-alumni-secondary {
	color: var(--alumni-secondary) !important;
}

.text-alumni-accent {
	color: var(--alumni-accent) !important;
}

/* 背景顏色工具類 */
.bg-alumni-light {
	background-color: var(--alumni-light) !important;
}

.bg-alumni-accent {
	background-color: var(--alumni-bg-accent) !important;
}

/* 動畫工具類 */
.animate-fadeInUp {
	animation: fadeInUp 0.8s ease;
}

.animate-slideInLeft {
	animation: slideInLeft 0.8s ease;
}

.animate-pulse {
	animation: pulse 2s ease-in-out infinite;
}

/* 載入動畫 */
.loading-shimmer {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200px 100%;
	animation: shimmer 1.5s infinite;
}
/* 毛玻璃效果 - 
Mac + Vista 風格 */
.glass-effect {
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(15px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.glass-card {
	background: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	border-radius: var(--alumni-border-radius-lg);
}

.glass-navbar {
	background: rgba(183, 148, 246, 0.9) !important;
	backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-modal {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 應用毛玻璃效果到卡片 */
.card-alumni {
	background: rgba(255, 255, 255, 0.9) !important;
	backdrop-filter: blur(15px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 增大字體以便年長者閱讀 */
body {
	font-size: 16px;
}

h1, .display-1, .display-2, .display-3, .display-4 {
	font-size: calc(1.5rem + 1vw);
}

h2 {
	font-size: calc(1.3rem + 0.8vw);
}

h3 {
	font-size: calc(1.2rem + 0.6vw);
}

h4 {
	font-size: calc(1.1rem + 0.4vw);
}

h5 {
	font-size: calc(1rem + 0.2vw);
}

p, .lead {
	font-size: 1.1rem;
	line-height: 1.7;
}

.btn {
	font-size: 1rem;
	padding: 0.75rem 1.5rem;
}

.btn-lg {
	font-size: 1.1rem;
	padding: 1rem 2rem;
}

/* 全域圖片樣式優化 - 支援直式照片 */
.img-portrait, .portrait-photo, .chairman-photo, .advisor-photo, .board-photo, .president-photo {
	aspect-ratio: 3/4;
	object-fit: cover;
	object-position: center top;
	width: 100%;
	height: auto;
	border-radius: var(--alumni-border-radius);
	box-shadow: var(--alumni-shadow);
	transition: var(--alumni-transition);
}

.img-portrait:hover, .portrait-photo:hover, .chairman-photo:hover, .advisor-photo:hover, .board-photo:hover, .president-photo:hover {
	box-shadow: var(--alumni-shadow-lg);
	transform: scale(1.02);
}

/* 圖片容器樣式 */
.photo-container {
	position: relative;
	overflow: hidden;
	border-radius: var(--alumni-border-radius);
	box-shadow: var(--alumni-shadow);
	transition: var(--alumni-transition);
}

.photo-container:hover {
	box-shadow: var(--alumni-shadow-lg);
	transform: translateY(-2px);
}

/* 響應式圖片調整 */
@@media (max-width: 768px) {
	.img-portrait, .portrait-photo, .chairman-photo, .advisor-photo, .board-photo, .president-photo {
		aspect-ratio: 3/4;
		max-height: 300px;
		margin: 0 auto;
		display: block;
	}
	
	.photo-container {
		max-width: 250px;
		margin: 0 auto;
	}
}

@@media (max-width: 576px) {
	.img-portrait, .portrait-photo, .chairman-photo, .advisor-photo, .board-photo, .president-photo {
		max-height: 250px;
		aspect-ratio: 3/4;
	}
	
	.photo-container {
		max-width: 200px;
	}
}

/* 響應式字體調整 */
@@media (max-width: 768px) {
	body {
		font-size: 15px;
	}

	p, .lead {
		font-size: 1rem;
	}

	.btn {
		font-size: 0.95rem;
	}
}
/* 覆蓋Bo
otstrap藍色配色為紫色系 */
:root {
	--bs-primary: #8B5FBF !important;
	--bs-info: #9B59B6 !important;
	--bs-blue: #8B5FBF !important;
}

.bg-primary {
	background-color: #8B5FBF !important;
}

.bg-info {
	background-color: #9B59B6 !important;
}

.text-primary {
	color: #8B5FBF !important;
}

.text-info {
	color: #9B59B6 !important;
}

.btn-primary {
	background-color: #8B5FBF !important;
	border-color: #8B5FBF !important;
}

.btn-info {
	background-color: #9B59B6 !important;
	border-color: #9B59B6 !important;
}

.badge.bg-primary {
	background-color: #8B5FBF !important;
}

.badge.bg-info {
	background-color: #9B59B6 !important;
}

/* 確保所有藍色漸層都改為紫色漸層 */
.bg-gradient-primary {
	background: linear-gradient(135deg, #8B5FBF 0%, #9B59B6 100%) !important;
}

.bg-gradient-info {
	background: linear-gradient(135deg, #9B59B6 0%, #B19CD9 100%) !important;
}

/* 頁面區塊樣式增強 - 影子和框線效果 */
section {
	margin: 2rem 0;
	padding: 2rem;
	border-radius: var(--alumni-border-radius-lg);
	box-shadow: var(--alumni-shadow);
	border: 1px solid rgba(139, 95, 191, 0.1);
	transition: var(--alumni-transition);
	position: relative;
	overflow: hidden;
}

	section:hover {
		box-shadow: var(--alumni-shadow-lg);
		transform: translateY(-2px);
	}

	/* 不同背景色彩的 section 區塊 */
	section:nth-child(odd) {
		background: linear-gradient(135deg, rgba(139, 95, 191, 0.02) 0%, rgba(155, 89, 182, 0.03) 100%);
	}

	section:nth-child(even) {
		background: linear-gradient(135deg, rgba(177, 156, 217, 0.03) 0%, rgba(168, 85, 247, 0.02) 100%);
	}

/* 特殊區塊樣式 */
.hero-section {
	background: linear-gradient(135deg, rgba(139, 95, 191, 0.05) 0%, rgba(155, 89, 182, 0.08) 100%) !important;
	box-shadow: 0 15px 45px rgba(139, 95, 191, 0.15) !important;
	border: 2px solid rgba(139, 95, 191, 0.1) !important;
}

.news-summary-section {
	background: linear-gradient(135deg, rgba(177, 156, 217, 0.04) 0%, rgba(168, 85, 247, 0.06) 100%) !important;
	box-shadow: 0 12px 35px rgba(177, 156, 217, 0.12) !important;
	border: 1px solid rgba(177, 156, 217, 0.15) !important;
}

/* 卡片增強效果 */
.card, .card-alumni {
	box-shadow: 0 6px 20px rgba(139, 95, 191, 0.12) !important;
	border: 1px solid rgba(139, 95, 191, 0.08) !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

	.card:hover, .card-alumni:hover {
		box-shadow: 0 12px 35px rgba(139, 95, 191, 0.2) !important;
		transform: translateY(-5px) !important;
		border-color: rgba(139, 95, 191, 0.15) !important;
	}

/* 導航卡片特殊效果 */
.committee-card, .news-card, .gallery-card {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 244, 255, 0.8) 100%);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(139, 95, 191, 0.1);
	box-shadow: 0 8px 25px rgba(139, 95, 191, 0.1);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

	.committee-card:hover, .news-card:hover, .gallery-card:hover {
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 244, 255, 0.9) 100%);
		box-shadow: 0 15px 40px rgba(139, 95, 191, 0.18);
		transform: translateY(-8px) scale(1.02);
		border-color: rgba(139, 95, 191, 0.2);
	}

/* 響應式調整 */
@media (max-width: 768px) {
	section {
		margin: 1rem 0;
		padding: 1.5rem;
		border-radius: var(--alumni-border-radius);
	}

		section:hover {
			transform: translateY(-1px);
		}

	.committee-card:hover, .news-card:hover, .gallery-card:hover {
		transform: translateY(-4px) scale(1.01);
	}
}

/* 微妙的動畫效果 */
@keyframes sectionGlow {
	0%, 100% {
		box-shadow: 0 6px 20px rgba(139, 95, 191, 0.12);
	}

	50% {
		box-shadow: 0 8px 25px rgba(139, 95, 191, 0.15);
	}
}

section.animate-glow {
	animation: sectionGlow 3s ease-in-out infinite;
}

/* 導航區塊樣式 - 解決與標題重疊問題 */
.alumni-nav-section {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 244, 255, 0.9) 100%);
	backdrop-filter: blur(15px);
	border: 1px solid rgba(139, 95, 191, 0.15);
	border-radius: var(--alumni-border-radius-lg);
	box-shadow: 0 8px 25px rgba(139, 95, 191, 0.12);
	margin: 2rem 0 3rem 0;
	padding: 1.5rem;
	position: relative;
	z-index: 10;
	transition: var(--alumni-transition);
}

	.alumni-nav-section:hover {
		box-shadow: 0 12px 35px rgba(139, 95, 191, 0.18);
		transform: translateY(-2px);
	}

	/* 導航按鈕樣式優化 */
	.alumni-nav-section .nav-pills {
		gap: 0.5rem;
		justify-content: center;
		flex-wrap: wrap;
	}

		.alumni-nav-section .nav-pills .nav-link {
			background: rgba(139, 95, 191, 0.1);
			color: var(--alumni-primary);
			border: 1px solid rgba(139, 95, 191, 0.2);
			border-radius: var(--alumni-border-radius);
			padding: 0.75rem 1.25rem;
			font-weight: 600;
			transition: var(--alumni-transition);
			margin: 0.25rem;
			white-space: nowrap;
			display: flex;
			align-items: center;
			justify-content: center;
		}

			.alumni-nav-section .nav-pills .nav-link:hover {
				background: rgba(139, 95, 191, 0.15);
				color: var(--alumni-primary);
				border-color: rgba(139, 95, 191, 0.3);
				transform: translateY(-1px);
				box-shadow: 0 4px 12px rgba(139, 95, 191, 0.2);
			}

			.alumni-nav-section .nav-pills .nav-link.active {
				background: var(--alumni-gradient);
				color: white;
				border-color: var(--alumni-primary);
				box-shadow: 0 6px 20px rgba(139, 95, 191, 0.3);
				transform: translateY(-2px);
			}

				.alumni-nav-section .nav-pills .nav-link.active:hover {
					background: var(--alumni-gradient);
					color: white;
					transform: translateY(-3px);
					box-shadow: 0 8px 25px rgba(139, 95, 191, 0.4);
				}

/* 響應式設計優化 */
@media (max-width: 992px) {
	.alumni-nav-section {
		margin: 1.5rem 0 2.5rem 0;
		padding: 1.25rem;
	}

		.alumni-nav-section .nav-pills .nav-link {
			padding: 0.6rem 1rem;
			font-size: 0.9rem;
			margin: 0.2rem;
		}
}

@media (max-width: 768px) {
	.alumni-nav-section {
		margin: 1rem 0 2rem 0;
		padding: 1rem;
		border-radius: var(--alumni-border-radius);
	}

		.alumni-nav-section .nav-pills {
			gap: 0.3rem;
		}

			.alumni-nav-section .nav-pills .nav-link {
				padding: 0.5rem 0.8rem;
				font-size: 0.85rem;
				margin: 0.15rem;
				min-width: auto;
				flex: 1 1 auto;
			}
}

@media (max-width: 576px) {
	.alumni-nav-section {
		margin: 0.5rem 0 1.5rem 0;
		padding: 0.75rem;
	}

		.alumni-nav-section .nav-pills .nav-link {
			padding: 0.4rem 0.6rem;
			font-size: 0.8rem;
			margin: 0.1rem;
		}

		/* 小螢幕時垂直排列 */
		.alumni-nav-section .nav-pills {
			flex-direction: column;
			align-items: stretch;
		}

			.alumni-nav-section .nav-pills .nav-link {
				text-align: center;
				margin: 0.1rem 0;
			}
}