/* ============================================
   MODERN STICKY HEADER
   ============================================ */

/* Prevent layout shift - reserve space for sticky header */
header.main-header {
	position: relative;
	z-index: 100;
}

header.main-header .header-sticky {
	position: relative;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	transition: all 0.3s ease-in-out;
	z-index: 100;
}

/* Sticky State - Activated by JavaScript after scroll */
header.main-header .header-sticky.is-sticky {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 40px);
	max-width: 1600px;
	margin: 0 auto;
  border-radius: 10px;
	background: var(--primary-color);
	border-bottom: 1px solid var(--dark-divider-color);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	z-index: 999;
	animation: slideDown 0.3s ease-in-out;
}

/* Smooth slide-down animation */
@keyframes slideDown {
	from {
		transform: translateX(-50%) translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateX(-50%) translateY(0);
		opacity: 1;
	}
}

/* Prevent content from jumping - reserve space when sticky */
body.has-sticky-header {
	padding-top: 0;
}

body.has-sticky-header header.main-header {
	/* Space is reserved by the header itself when sticky */
}

/* Responsive Styles */

/* Tablet and below (1720px) */
@media only screen and (max-width: 1720px) {
	header.main-header .header-sticky.is-sticky {
		width: calc(100% - 40px);
		max-width: 1600px;
		border-radius: 10px;
	}
}

/* Medium screens (1480px) */
@media only screen and (max-width: 1480px) {
	header.main-header .header-sticky.is-sticky {
		width: calc(100% - 40px);
		max-width: calc(100% - 40px);
		border-radius: 10px;
	}
}

/* Mobile devices (991px and below) */
@media only screen and (max-width: 991px) {
	header.main-header .header-sticky.is-sticky {
		left: 0;
		transform: translateX(0);
		width: 100%;
		max-width: 100%;
		border-radius: 0;
		box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
	}
	
	@keyframes slideDown {
		from {
			transform: translateY(-100%);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}
}

/* Ensure navbar height stays consistent */
header.main-header .header-sticky.is-sticky .navbar {
	/* Height remains the same - no stretching */
}

/* Smooth transitions for all interactive elements */
header.main-header .header-sticky.is-sticky * {
	transition: none;
}