/* Global Styles for Kolawoles.com */
:root {
	--color-bg: #FFFFFF;
	--color-accent: #F85C70;
	--color-text: #212529;
	--color-secondary: #FDFDFE;
	--font-primary: 'Source Sans Pro', Sans-serif;
}
html, body {
	height: 100%;
}
html {
	height: -webkit-fill-available; /* Fix for mobile Safari */
}
body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-primary);
	margin: 0;
	padding: 0;
	min-height: 100vh;
	min-height: -webkit-fill-available; /* Use min-height instead of height for mobile Safari */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	overflow-x: hidden; /* Prevent horizontal scroll */
	overflow-y: hidden; /* Prevent vertical scroll */
}
main {
	flex: 1;
	width: 100%;
	overflow-y: auto; /* Make main area scrollable if needed */
	-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
	padding: 0; /* Remove default padding */
	padding-bottom: env(safe-area-inset-bottom, 0); /* Account for notches/home indicators */
}
.footer {
	width: 100%;
	background: var(--color-accent);
	color: #fff;
	box-shadow: 0 -2px 12px rgba(33,37,41,0.08);
	text-align: center;
	padding: 0.75rem 0; /* Reduced padding */
	font-weight: 600;
	font-size: 0.9rem; /* Smaller text */
	position: relative; /* Ensure footer doesn't get hidden */
	z-index: 10; /* Higher z-index to keep above content */
}
.header {
	background: var(--color-accent);
	color: var(--color-bg);
	padding: 0.85rem 0.5rem;
	text-align: center;
	min-height: auto; /* Allow header to shrink */
}
.section {
	background: var(--color-secondary);
	margin: 2rem auto;
	border-radius: 1rem;
	box-shadow: 0 2px 8px rgba(33,37,41,0.05);
	max-width: 600px;
	padding: 2rem;
}
.link {
	color: var(--color-accent);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s;
}
.link:hover {
	color: var(--color-text);
}
.icon {
	font-size: 2rem;
	vertical-align: middle;
	margin-right: 0.5rem;
}
@media (max-width: 600px) {
	.section {
		padding: 1rem;
		max-width: 95vw;
		margin: 1rem auto; /* Reduce vertical margins on mobile */
	}
	.header {
		padding: 0.25rem;
	}
	.footer {
		padding: 0.5rem 0; /* Further reduce footer padding on mobile */
		font-size: 0.8rem; /* Even smaller text on mobile */
	}
	main {
		padding-bottom: 0; /* Remove bottom padding on mobile */
		/* Calculate viewport height minus header and footer height to fit content */
		height: calc(100% - 40px - 35px); /* Approximate header (40px) and footer (35px) heights */
	}
	body {
		height: 100%; /* Use 100% instead of 100vh on mobile */
		position: fixed; /* Prevent body from scrolling */
		width: 100%;
		overflow: hidden;
	}
}