/* ===============================
	HEADER
================================ */
#home-page-header {
	min-height: 100vh;
	width: 100%;
	background-image: linear-gradient(rgba(4,9,30,0.1), rgba(4,9,30,0.1)), url(../images/banner.jpeg);
	background-position: center;
	background-size: cover;
	position: relative;
}

/* --------------------------------
	HEADER TEXT
---------------------------------- */
.header-text-box {
	width: 90%;
	max-width: 1250px;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: left;
	margin: 5rem 0;
	text-shadow: 0 3px 20px rgba(0, 0, 0, 1); /* subtle glow */
} 

.header-text-box h1 {
	margin-bottom: 2rem;
}

.header-text-box p {
	margin: 3rem 0 2.5rem;
	color: #fff;
	font-size: clamp(1rem, 2vw, 1.5rem);
}

/* --------------------------------
	ADJUSTING FOR SMALLER SCREENS
---------------------------------- */
@media(max-width: 800px) {
	#home-page-header {
		min-height: 80vh;
	}

	.header-text-box h1 {
		margin-bottom: 1rem;
	}
	
	.header-text-box p {
		margin-top: 2rem;
	}
}

/* ===============================
	VIDEO + IMAGE SECTION
================================ */
#about-section {
	background: linear-gradient(135deg, #3498DB, #5dade2);
	padding: 3rem 0;
}

.about-container {
	width: 90%;
	max-width: 1250px;
	margin: auto; /* to center it horizontally in its parent (about-section) */
}

.about-container .row {
	align-items: center;
	gap: 5rem;
	padding: 4rem 0;
}

.about-col {
	flex: 1 1 45%;
	display: flex;
	flex-direction: column;
}

/* Video wrapper keeps perfect 16:9 aspect ratio */
.iframe-container {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 5px;
	overflow: hidden;
	background: #000;
	max-width: 700px; /* keeps it from growing too wide on large screens */
}

.iframe-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 5px;
}

.about-col h2 {
	padding-bottom: 1.5rem;
	display: inline-block;   /* shrinks to text width */
	position: relative;
	color: #fff;
}

.about-col p {
	padding-bottom: 1.5rem;
	color: #fff;
	line-height: 1.7;
}

.about-col a {
	color: #fff;
	font-weight: bold;
	display: inline-block; /* needed for transition */
	transition: transform 0.2s ease;
	font-size: 1.2rem;
}

.about-col a::after {
	content: " →"; /* Unicode arrow */
	font-weight: bold;
}

.about-col a:hover {
	transform: translateX(5px);
}

/* --------------------------------
	ADJUSTING FOR SMALLER SCREENS
---------------------------------- */
@media (max-width: 1200px) {
	.about-container .row {
		flex-direction: column;
		padding: 2rem 0;
		gap: 3.5rem;
	}

	.about-col {
		flex: 1 1 100%;
		width: 100%;
		align-items: center;
		text-align: center;
	}

	.iframe-container {
		max-width: 60%;
	}
}

@media (max-width: 800px) {
	.iframe-container {
		max-width: 90%;
	}
}

/* ===============================
	STATS (3 COLUMNS) SECTION
================================ */
#stats-section {
	width: 90%;
	max-width: 1250px;
	margin: auto;
	text-align: center;
	padding: 7rem 0 1rem;
}

.stats-col {
	flex: 1;
	text-align: center;
	margin: 1rem;
}

.stat-block {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.7rem;  
}

.stats-col i {
	font-size: 2.5rem;
}

.stat-number {
	/* margin-bottom: 1rem; */
	text-align: center;
	font-weight: bold;
	display: inline-block; /* shrinks width to just the text */
	position: relative;
	font-size: 2.3rem;
}

/* .stat-number::after {
	content: ''; 
	width: 100%;
	height: 5px;
	border-radius: 5px;
	background: #3498DB;
	display: block;
} */

.stat-label {
	padding: 0 0 1.5rem;
	font-weight: bold;
	color: #718096;
	letter-spacing: 0.05em;
}

.stat-desc {
	margin: 0rem 2rem 3rem;
	text-align: center;
}

/* --------------------------------
	ADJUSTING FOR SMALLER SCREENS
---------------------------------- */
@media(max-width: 800px) {
	#stats-section {
		padding: 5rem 0 0;
	}
}

/* ===============================
	VIDEOS SECTION
================================ */
#activities-section {
	width: 90%;
	max-width: 1250px;
	margin: auto;
	text-align: center;
	padding-bottom: 5rem;
}

/* --------------------------------
	TEXT + LINK
---------------------------------- */
#activities-section h2 {
	margin: 5rem 0 4rem;
	text-align: center;
}

#activities-section a {
	margin-bottom: 3.5rem;
	color: #3498DB;
	font-weight: bold;
	display: inline-block; /* needed for transition */
	transition: transform 0.2s ease;
	font-size: 1.2rem;
}

/* -------------------------------- 
	SLIDER TABS
---------------------------------- */
.tablink-container {
	display: inline-flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	position: relative;
	gap: 6rem;
	padding: 0 2.5rem;
	flex-wrap: no-wrap;
}

.tablink-container::after { /* long line below */
	content: ''; 
	position: absolute;
	width: 100%;
	height: 3px;
	border-radius: 5px;
	background: #3498DB;
}

.tablink {
	margin-bottom: 1rem;
	text-align: center;
	font-weight: bold;
	display: inline-block; /* shrinks width to just the text */
	position: relative;
	font-size: 2.3rem;
}

.tablink:hover {
	cursor: pointer;
}

.tablink:hover:not(.active) {
	transform: scale(1.05);
}

.tablink.active::after { /* line below selected tab */
	content: ''; 
	width: 170%;
	height: 6px;
	border-radius: 5px;
	background: #3498DB;
	display: block;
	position: absolute;
	left: 50%;			/* start at the middle */
	transform: translateX(-50%);
	bottom: -18px;
}

.tabcontent {
	color: #000;
	display: none;
	height: 100%;
	text-align: center;
}

/* Mobile dropdown */
.dropdown-container {
	display: none;
	text-align: center;
	margin-bottom: 2rem;
}

.dropdown-container select {
	appearance: none;
	-webkit-appearance: none; /* for Safari */
	-moz-appearance: none;
	
	/* padding: 8px 12px; */
	padding: 0.8rem 8rem 0.8rem 2rem;
	border-radius: 5px;
	border: 1.5px solid #ccc;

	/* down button icon */
	background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.8rem center;
	background-size: 1.8rem;
	font-size: 0.8rem;
}

/* --------------------------------
	ADJUSTING FOR SMALLER SCREENS
---------------------------------- */
@media (max-width: 800px) {
	#activities-section h2 {
		margin: 3rem 0 2rem;
	}

	.tablink-container {
		display: none;
	}

	.dropdown-container {
		display: block;
	}
	/* .tablink-container  {
		padding: 0 1.5rem;
		gap: 3rem;
	}

	.tablink.domestic.active::after { USA
		width: 200%;
	}

	.tablink.active::after { line below selected tab
		width: 140%;
	} */
}

/* -------------------------------- 
	SLIDER
---------------------------------- */
.slider-container {
	position: relative; /* to help position arrow buttons that has a position: absolute */
	padding: 0 2rem;
	overflow: hidden; /* to hide anthing that spills outside the container */
	/* display: flex;
	justify-content: center;
	align-items: center; */
}

.slider {
	width: 100%;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% / 2) - 12px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none; /* For Firefox */
	gap: 1rem; /* between each card */
}

.slider.stories { /* for specifically the Short Stories tab */
	grid-auto-columns: calc(100% - 12px);
}

.slider.stories img {
	width: 50%;
}

.slide .row {
	align-items: center;
}

.slide .row span {
	margin: 1rem 2rem;
}

.slider::-webkit-scrollbar { /* For WebKit browsers (Chrome, Safari, Edge) */
	display: none;
}

.slide {
	display: flex;
	align-items: stretch;
	justify-content: flex-start; 	/* to align images properly at the top */
	scroll-snap-align: start; 		/* remove if you dont want it to snap */
	height: auto;
	flex-direction: column;
	border-radius: 5px;
}

.slide img {
	width: 100%;
	object-fit: cover;
	border-radius: 5px;
	aspect-ratio: 6 / 4;
}

.slide span {
	margin: 1rem 1rem 0;
}

.slider-pagination { /* handles placement of dots to be placed under carousel */
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
}

.slider-dot {
	width: 10px;
	height: 10px;
	background-color: #ccc;
	border-radius: 50%;
	transition: background-color 0.3s;
}

.slider-dot.active {
	background-color: #3498DB;
}

/* --------------------------------
	ADJUSTING FOR SMALLER SCREENS
---------------------------------- */
@media (max-width: 800px) {
	.slider {
		grid-auto-columns: calc(100% - 12px);
	}
}

/* --------------------------------
	SLIDING BEHAVIOR
---------------------------------- */
.slider.dragging {
	scroll-snap-type: none;
	scroll-behavior: auto;
}

.slider.dragging .slide {
	cursor: grab;
	user-select: none;
}

/* --------------------------------
	L & R ARROW ICONS
---------------------------------- */
.slider-container i {
	position: absolute; /* will place arrows relative to .carousel-container only if it is position: relative */
	top: 50%;
	transform: translateY(-50%);
	font-size: 2rem;
	cursor: pointer;
	transition: transform 0.2s ease;
	z-index: 100;
}

/* targets first and last <i> elements and positions them on the opposite sides */
.slider-container i:first-child {
	left: 0; 
}

.slider-container i:last-child {
	right: 0;
}

.slider-container i:hover { /* to have arrow icons grow a little when hovered over */
	transform: translateY(-50%) scale(1.2);    /* makes it 20% bigger */
}

.slider-container i:active { /* when the button is pressed on */
	transform: translateY(-50%) scale(0.95);
}


/* -------------------------------- 
	VIDEOS CAROUSEL
---------------------------------- */
.carousel {
	grid-auto-columns: calc((100% / 2) - 12px); /* 3 cards per slide by default */
}

.card {
	border: none;
	box-shadow: none;
}

.carousel-dot {
	width: 13px;
	height: 13px;
}

/* --------------------------------
	PLAY BUTTON OVERLAY
---------------------------------- */
.thumbnail { /* icon needs for positioning */
	position: relative;
	display: inline-block;
}

.thumbnail img {
	border: 1px solid rgba(0, 0, 0, 0.05); /* very faint border */
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); /* soft shadow */
}

.thumbnail i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	pointer-events: none;
	width: 80px; 	/* making perfect circle */
	height: 80px; 	/* making perfect circle */
	background: linear-gradient(135deg, #3498DB, #5dade2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	transition: transform 0.3s ease;
}

.thumbnail:hover i { /* make play circle scale slightly bigger when hovered over */
	transform: translate(-50%, -50%) scale(1.2);
}

/* --------------------------------
	POPUP
---------------------------------- */
.video-popup {
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.85);
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.video-popup-content {
	position: relative;
	width: 90%;
	max-width: 900px;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 5px;
	overflow: hidden;
}

.video-popup iframe {
	width: 100%;
	height: 100%;
	border: none;
}

.video-popup .close {
	position: absolute;
	top: 2rem;
	right: 4rem;
	color: white;
	font-size: 3rem;
	font-weight: bold;
	cursor: pointer;
	z-index: 1001; /* ensure above iframe */
}

/* --------------------------------
	ADJUSTING FOR SMALLER SCREENS
---------------------------------- */
@media (max-width: 800px) {
	#activities-section { 
		padding-top: 2rem; 
	} 

	.carousel {
		grid-auto-columns: 100%; /* 1 per slide */
	}

	.video-popup .close {
		top: 6rem;
		right: 2.5rem;
	}
}

/* ===============================
	INFO SECTION
================================ */
#info-section {
	width: 90%;
	max-width: 1250px;
	margin: 2rem auto 7rem;
	padding: 6rem 0;
	background: linear-gradient(135deg, #e4ecf2, #d5dfe7);
	border-radius: 5px;
	align-items: center;
}

.info-container {
	width: 90%;
	margin: auto;
}

.info-container h2 {
	text-align: center;
	padding-bottom: 2rem;
}

.info-container p {
	text-align: center;
	padding-bottom: 2rem;
	font-style: italic;
}

.info-container a {
	text-align: center;
	margin-bottom: 3rem;
	color: #3498DB;
	font-weight: bold;
	display: block; /* needed for transition */
	transition: transform 0.2s ease;
	font-size: 1.2rem;
}

.info-container a:hover {
	transform: scale(1.05);
}

.info-points {
	list-style: decimal;
	list-style-position: inside;
	text-align: center;
	margin-bottom: 5rem;
}

.info-points li {
	margin-bottom: 1.4rem; /* space between bullet points */
}

#info-section img {
	display: block;
	margin: 3rem auto 0;
	width: 90%;
	max-width: 400px; /* won’t get bigger than this */
	height: auto;
	border-radius: 5px;
	border: 1px solid rgba(0, 0, 0, 0.05); /* very faint border */
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); /* soft shadow */
}

/* --------------------------------
	ADJUSTING FOR SMALLER SCREENS
---------------------------------- */
@media(max-width: 800px) {
	#info-section {
		padding: 4rem 0;
	}

	#info-section img {
		width: 75%;
	}
}

/* ===============================
	CALENDAR SECTION
================================ */
#calendar-section {
	display: flex;
	width: 90%;
	max-width: 1250px;
	margin: 2rem auto 8rem;
	border-radius: 5px;
	align-items: center;
	justify-content: center;
}

#calendar-section iframe {
	border-radius: 5px;
}