/**
 * Fuck SEO Page Specific Styles
 * Fixes for section overlapping and positioning issues
 */

/* Fix: Fourth section being covered by fifth section */
#fourth-section {
	position: relative;
	z-index: 2;
	/* Set fixed height based on viewport */
	height: auto !important;
	min-height: 80vh;
	/* Add bottom padding to create space */
	padding-bottom: 3rem;
	margin-bottom: 0;
}

/* Responsive height for mobile */
@media (max-width: 768px) {
	#fourth-section {
		height: auto !important;
		min-height: auto;
		padding-bottom: 2rem;
		margin-bottom: 0;
	}
}

/* Ensure fourth section child doesn't collapse */
#fourth-section > div.h-full {
	/* Override h-full on the child div */
	height: 100%;
	min-height: fit-content;
}

/* Override any h-full classes causing issues on mobile */
@media (max-width: 768px) {
	#fourth-section .h-full {
		height: auto !important;
	}
}

/* Force fifth section to respect spacing */
#fifth-section {
	position: relative;
	z-index: 1;
	/* Ensure it doesn't overlap previous section */
	margin-top: 0;
	/* Force proper height */
	min-height: 40rem;
}

/* Ensure sections don't overlap on mobile */
@media (max-width: 640px) {
	#fourth-section {
		margin-bottom: 0;
	}

	#fifth-section {
		min-height: 40rem;
	}
}

@media (min-width: 1024px) {
	#fifth-section {
		min-height: 100vh;
		height: 100vh;
	}
}

/* Fix for sixth section - keep it simple like section ten */
#sixth-section .timeline-content h5 {
	cursor: pointer;
}

/* Fix: Collapse br tags in hidden timeline paragraphs */
#sixth-section .timeline-content p.h-0 br,
#sixth-section .timeline-content p.leading-0 br {
	display: none;
}

/* Ensure hidden paragraphs take up zero space */
#sixth-section .timeline-content p.h-0 {
	margin: 0;
	padding: 0;
	line-height: 0;
	overflow: hidden;
}

/* Add padding to image container to prevent clipping */
@media (min-width: 1280px) {
	#businesses-image-container {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
}

/* Fix for tenth section (metrics tab navigation) */
#tenth-section {
	position: relative;
}

#tenth-section .timeline-content {
	transition: all 0.3s ease;
}

#tenth-section .timeline-content h5 {
	cursor: pointer;
	transition: opacity 0.2s ease;
}

#tenth-section .timeline-content h5:hover {
	opacity: 0.8;
}

/* Ensure images transition smoothly */
#tenth-section img {
	transition: opacity 0.5s ease, height 0.5s ease;
}

/* Fix for eleventh section slider */
#eleventh-section #slider {
	position: relative;
}

/* Smooth transitions for clip-path changes */
#eleventh-section #slider div[style*='clip-path'] {
	transition: clip-path 0.3s ease;
}

/* Ensure the slider handle is visible and draggable */
#eleventh-section #slider input[type='range'] {
	cursor: col-resize;
}

/* Fix for mobile view - ensure proper spacing */
@media (max-width: 1280px) {
	#eleventh-section .block.xl\:hidden {
		margin-top: 1rem;
	}
}

/* Smooth scroll behavior for the entire page */
html {
	scroll-behavior: smooth;
}

/* Ensure sections have proper separation */
.section {
	position: relative;
}

/* Fix z-index stacking context */
.section.special {
	z-index: auto;
}

/* Additional fix: Ensure sections display as block and have proper flow */
#fourth-section,
#fifth-section,
#sixth-section {
	display: block;
	clear: both;
	overflow: visible;
}

/* Prevent any negative margins that might cause overlap */
#fifth-section {
	margin-top: 0 !important;
}

/* Mobile specific fixes */
@media (max-width: 1023px) {
	#fourth-section {
		padding-bottom: 2rem;
	}

	#sixth-section {
		padding-bottom: 3rem;
	}
}