/**
 * Sticky Section Navigation Styles
 *
 * Provides sticky positioning, scroll shadow animation,
 * and horizontal scrolling on mobile
 */

.wp-block-buttons.is-style-sticky-section-nav {
	position: sticky;
	top: var(--sticky-offset, 0);
	z-index: 100;
	transition: box-shadow 0.2s ease;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* Shadow appears ONLY when stuck AND scrolling (Interactivity API adds these classes) */
.wp-block-buttons.is-style-sticky-section-nav.is-stuck.is-scrolling {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/**
 * Mobile horizontal scroll with gradient fade edges
 */
@media (max-width: 767px) {
	.wp-block-buttons.is-style-sticky-section-nav {
		/* Keep sticky positioning on mobile, just add horizontal scroll */
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE/Edge */
		scroll-behavior: smooth; /* Smooth auto-scroll on mobile */

		/* Prevent wrapping */
		flex-wrap: nowrap;
		white-space: nowrap;

		/* Performance optimizations for mobile scrolling */
		overscroll-behavior-x: contain;
	}

	/* Hide scrollbar for Chrome/Safari */
	.wp-block-buttons.is-style-sticky-section-nav::-webkit-scrollbar {
		display: none;
	}

	/* Gradient fade effect container */
	.wp-block-buttons.is-style-sticky-section-nav::before,
	.wp-block-buttons.is-style-sticky-section-nav::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		width: 30px;
		pointer-events: none;
		z-index: 1;
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	/* Left gradient fade */
	.wp-block-buttons.is-style-sticky-section-nav::before {
		left: 0;
		background: linear-gradient(to right, var(--wp--preset--color--module-background, #fff), transparent);
	}

	/* Right gradient fade */
	.wp-block-buttons.is-style-sticky-section-nav::after {
		right: 0;
		background: linear-gradient(to left, var(--wp--preset--color--module-background, #fff), transparent);
	}

	/* Show gradients when scrollable */
	.wp-block-buttons.is-style-sticky-section-nav[data-scrollable="true"]::before,
	.wp-block-buttons.is-style-sticky-section-nav[data-scrollable="true"]::after {
		opacity: 1;
	}

	/* Individual buttons - prevent wrapping */
	.wp-block-buttons.is-style-sticky-section-nav .wp-block-button {
		flex-shrink: 0;
	}
}

/**
 * Smooth scroll behavior for anchor links
 */
html {
	scroll-behavior: smooth;
}

/* Override scroll behavior when JS handles it */
html.has-sticky-nav {
	scroll-behavior: auto;
}

/**
 * Active state styling for current section
 */
.wp-block-buttons.is-style-sticky-section-nav .wp-block-button__link {
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, font-weight 0.2s ease;
	/* Default inactive state */
	background-color: transparent !important;
	color: var(--wp--preset--color--deep-alpine) !important;
	font-weight: 400 !important;
}

.wp-block-buttons.is-style-sticky-section-nav .wp-block-button__link.is-active,
.wp-block-buttons.is-style-sticky-section-nav .wp-block-button__link[data-active="true"] {
	background-color: var(--wp--preset--color--sugar-pine-green) !important;
	color: var(--wp--preset--color--snowcap-sage) !important;
	font-weight: 600 !important;
}

/* Hover state for non-active buttons */
.wp-block-buttons.is-style-sticky-section-nav .wp-block-button__link:not(.is-active):hover {
	background-color: rgba(66, 125, 100, 0.1) !important;
	transform: translateY(-1px);
}

/**
 * Editor-specific styles
 */
.editor-styles-wrapper .wp-block-buttons.is-style-sticky-section-nav {
	/* Prevent sticky in editor for easier editing */
	position: relative;
}

/**
 * Accessibility: Focus styles
 */
.wp-block-buttons.is-style-sticky-section-nav .wp-block-button__link:focus {
	outline: 2px solid var(--wp--preset--color--sugar-pine-green);
	outline-offset: 2px;
}

/**
 * Performance optimizations
 */
.wp-block-buttons.is-style-sticky-section-nav {
	/* GPU acceleration for smooth sticky positioning */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	/* Optimize compositing */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	/* Use contain for better performance */
	contain: layout style paint;
}

/* Only use will-change when actively scrolling */
.wp-block-buttons.is-style-sticky-section-nav.is-scrolling {
	will-change: box-shadow;
}