/* Mobile-First Optimizations for Bio Platform */

/* Base Mobile Styles (default - mobile first) */
/* All styles here are for mobile, then we enhance for larger screens */

/* Touch Targets - Minimum 44x44px for mobile */
.btn,
a.btn,
button {
	min-height: 44px;
	min-width: 44px;
	padding: 12px 24px;
	font-size: 16px; /* Prevents zoom on iOS */
}

.btn-lg {
	min-height: 48px;
	padding: 14px 28px;
	font-size: 18px;
}

/* Mobile Typography - Optimized for readability */
h1 {
	font-size: clamp(28px, 8vw, 48px) !important;
	line-height: 1.2 !important;
	margin-bottom: 1rem !important;
}

h2 {
	font-size: clamp(24px, 7vw, 40px) !important;
	line-height: 1.3 !important;
	margin-bottom: 0.875rem !important;
}

h3 {
	font-size: clamp(20px, 6vw, 32px) !important;
	line-height: 1.3 !important;
	margin-bottom: 0.75rem !important;
}

h4 {
	font-size: clamp(18px, 5vw, 24px) !important;
	line-height: 1.4 !important;
}

p {
	font-size: 16px !important;
	line-height: 1.6 !important;
}

	/* Hero Section - Centered */
.banner-style-one {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

.banner-style-one .row {
	width: 100%;
}

.banner-style-one .main-content {
	text-align: center;
}

.banner-style-one .main-content p {
	margin-left: auto;
	margin-right: auto;
}

/* Ensure hero text doesn't overflow and is centered */
.custom-hero-font-1 {
	box-sizing: border-box;
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 100% !important;
	width: 100% !important;
	overflow-wrap: break-word !important;
	word-wrap: break-word !important;
}

/* Container for hero text */
.appear-animation:has(.custom-hero-font-1) {
	width: 100% !important;
	max-width: 100vw !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
	box-sizing: border-box !important;
}

/* Mobile Spacing - Reduced padding/margins for mobile */
@media (max-width: 767px) {
	.container {
		padding-left: 16px;
		padding-right: 16px;
	}
	
	.pd-t-100,
	.pd-b-100 {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}
	
	.py-5 {
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
	}
	
	.my-5 {
		margin-top: 2rem !important;
		margin-bottom: 2rem !important;
	}
	
	.min-vh-100 {
		min-height: auto !important;
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	
	/* Hero Section Mobile */
	.banner-style-one {
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
		min-height: auto !important;
	}
	
	/* Text alignment on mobile */
	.text-lg-start {
		text-align: center !important;
	}
	
	/* Stack columns on mobile */
	.col-lg-3.offset-lg-1 {
		margin-top: 2rem;
		margin-left: 0 !important;
	}
	
	/* Mobile Navigation */
	.header-nav {
		padding: 0.75rem 0;
	}
	
	/* Reduce font sizes for mobile */
	.font-size-20 {
		font-size: 16px !important;
	}
	
	.font-size-18 {
		font-size: 15px !important;
	}
	
	/* Custom hero fonts mobile optimization - maximize size while preventing overflow */
	.custom-hero-font-1 {
		font-size: clamp(40px, 10.5vw, 52px) !important;
		line-height: 1.3 !important;
		font-weight: 900 !important;
		letter-spacing: -0.01em !important;
		max-width: 100vw !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		white-space: normal !important;
		padding: 0 12px !important;
	}
	
	.custom-hero-font-2 {
		font-size: clamp(24px, 8vw, 60px) !important;
		line-height: 1.2 !important;
	}
	
	.custom-hero-font-5 {
		font-size: clamp(16px, 5vw, 20px) !important;
		line-height: 1.5 !important;
	}
	
	/* Project/Example cards mobile */
	.dn-project-item {
		margin-bottom: 1.5rem;
	}
	
	/* Process steps mobile */
	.col-md-6.col-lg-4 {
		margin-bottom: 2rem;
	}
	
	/* Button spacing */
	.btn {
		width: 100%;
		max-width: 100%;
		margin-bottom: 1rem;
	}
	
	/* List spacing */
	.list-style-two li {
		margin-bottom: 0.75rem;
		font-size: 15px;
	}
	
	/* Stats/Features mobile */
	.dn-top {
		margin-bottom: 1.5rem;
	}
	
	/* User card mobile */
	.dn-user-card {
		margin-top: 2rem;
	}
}

/* Small Mobile (up to 575px) - MAXIMUM TEXT SIZE */
@media (max-width: 575px) {
	.container {
		padding-left: 12px;
		padding-right: 12px;
	}
	
	h1 {
		font-size: clamp(24px, 7vw, 36px) !important;
	}
	
	h2 {
		font-size: clamp(20px, 6vw, 28px) !important;
	}
	
	/* Maximum size for "Your bio link is boring" on small mobile - optimized for iPhone 15 */
	.custom-hero-font-1 {
		font-size: clamp(38px, 10vw, 50px) !important;
		line-height: 1.3 !important;
		font-weight: 900 !important;
		letter-spacing: -0.01em !important;
		max-width: 100vw !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		white-space: normal !important;
		padding: 0 12px !important;
	}
	
	.custom-hero-font-2 {
		font-size: clamp(20px, 7vw, 50px) !important;
	}
	
	.pd-t-100,
	.pd-b-100 {
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
	}
}

/* Tablet (768px and up) - Enhance mobile styles */
@media (min-width: 768px) {
	.container {
		padding-left: 24px;
		padding-right: 24px;
	}
	
	.text-lg-start {
		text-align: left !important;
	}
	
	.btn {
		width: auto;
		max-width: none;
	}
}

/* Desktop (992px and up) - Full desktop experience */
@media (min-width: 992px) {
	.pd-t-100,
	.pd-b-100 {
		padding-top: 6.25rem !important;
		padding-bottom: 6.25rem !important;
	}
	
	.min-vh-100 {
		min-height: 100vh !important;
	}
	
	.banner-style-one {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	
	/* Hero subcopy: full-width block on desktop so it doesn’t stack in a narrow column */
	.banner-style-one .main-content p {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Prevent horizontal scroll on mobile */
html, body {
	overflow-x: hidden;
	max-width: 100%;
}

/* Improve tap highlights on mobile */
a, button, .btn {
	-webkit-tap-highlight-color: rgba(168, 255, 120, 0.3);
	tap-highlight-color: rgba(168, 255, 120, 0.3);
}

/* Better form inputs on mobile */
input, textarea, select {
	font-size: 16px !important; /* Prevents zoom on iOS */
	min-height: 44px;
	padding: 12px 16px;
}

/* Mobile-friendly images */
img {
	max-width: 100%;
	height: auto;
}

/* Smooth scrolling on mobile */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Improve readability on mobile */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}