/* Smart Sticky Elements Styles */

/* Scroll offset for anchor links to account for floating header */
html {
	scroll-padding-top: 60px;

	@media screen and ( max-width: 782px ) {
		scroll-padding-top: 40px;
	}
}

/* Alternative method: add scroll margin to heading elements */
h1, h2, h3, h4, h5, h6 {
	scroll-margin-top: 60px;

	@media screen and ( max-width: 782px ) {
		scroll-margin-top: 40px;
	}
}

/* Base sticky element styling */
.is-position-sticky {
	/* Prevent layout shift */
	box-sizing: border-box;
	/* Only transition non-position properties to avoid jumping */
	transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
	/* Ensure element respects parent boundaries */
	max-width: 100%;
	overflow: hidden;
}

/* Active sticky state */
.is-position-sticky.is-sticky-active {
	/* Keep background transparent */
	background-color: transparent;
	/* Ensure it's above other content */
	z-index: 10;
	/* Constrain to parent boundaries */
	max-width: 100%;
	/* Prevent content from overflowing when width is constrained */
	box-sizing: border-box;
}

/* Optional: Enhance sticky appearance for specific content types */
.is-position-sticky.is-sticky-active.wp-block-group {
	/* Add padding when sticky for better visual separation */
	padding-top: 1rem;
	padding-bottom: 1rem;
}

/* Optional: Style for sticky navigation elements */
.is-position-sticky.is-sticky-active .wp-block-navigation {
	/* Ensure navigation links are properly spaced when sticky */
	padding: 0.5rem 0;
	/* Ensure navigation adapts to constrained width */
	flex-wrap: wrap;
}

/* Remove problematic transitions that cause jumping */
.is-position-sticky * {
	/* No transitions on child elements to prevent layout shifts */
}

/* Prevent margin collapse issues */
.is-position-sticky.is-sticky-active {
	margin-top: 0;
	margin-bottom: 0;
}

/* Ensure child elements adapt to width constraints */
.is-position-sticky.is-sticky-active > * {
	max-width: 100%;
	box-sizing: border-box;
}

/* Handle text and content overflow in constrained sticky elements */
.is-position-sticky.is-sticky-active {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Optional: Add a top border when sticky for visual separation */
.is-position-sticky.is-sticky-active::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
}

/* Responsive adjustments */
@media (max-width: 782px) {
	/* Mobile scroll offset - account for mobile header */
	html {
		scroll-padding-top: 100px;
	}
	
	h1, h2, h3, h4, h5, h6 {
		scroll-margin-top: 100px;
	}
	
	.is-position-sticky.is-sticky-active {
		/* Disable sticky behavior on mobile */
		position: static !important;
		top: auto !important;
		left: auto !important;
		width: auto !important;
		z-index: auto !important;
	}
}

/* Print styles - remove sticky behavior for print */
@media print {
	html {
		scroll-padding-top: 0;
	}
	
	h1, h2, h3, h4, h5, h6 {
		scroll-margin-top: 0;
	}
	
	.is-position-sticky,
	.is-position-sticky.is-sticky-active {
		position: static !important;
		box-shadow: none !important;
		background-color: transparent !important;
	}
}