/* CSS Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	font-size: 1.125rem; /* 18px - larger for better reading */
	line-height: 1.6; /* Increased for long-form content */
	color: #2c3e50; /* Softer dark color for less eye strain */
	background-color: #fff;
	margin: 0;
	width: 100%;
	min-height: 100vh;
}

/* Typography for long-form content */
main {
	max-width: 65ch; /* Optimal line length for reading (45-75 characters) */
	margin: 0 auto;
	padding: 2rem 1.5rem;
}

/* Responsive padding adjustments */
@media (max-width: 768px) {
	main {
		padding: 1.5rem 1rem;
		max-width: 100%;
	}
	
	body {
		font-size: 1rem; /* Slightly smaller on mobile */
		line-height: 1.5;
	}
}

@media (min-width: 1200px) {
	main {
		padding: 3rem 2rem;
	}
}

/* Paragraph spacing for readability */
p {
	margin-bottom: 1.5rem;
	max-width: 65ch;
}

p:last-child {
	margin-bottom: 0;
}

/* Reset headings */
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	line-height: 1.2;
	margin: 0;
}

/* Heading hierarchy */
h1 {
	font-size: 2.5rem; /* 40px */
	margin-bottom: 1.5rem;
}

h2 {
	font-size: 2rem; /* 32px */
	margin-top: 3rem;
	margin-bottom: 1rem;
}

h3 {
	font-size: 1.75rem; /* 28px */
	margin-top: 2.5rem;
	margin-bottom: 0.875rem;
}

h4 {
	font-size: 1.5rem; /* 24px */
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

h5 {
	font-size: 1.25rem; /* 20px */
	margin-top: 1.5rem;
	margin-bottom: 0.625rem;
}

h6 {
	font-size: 1.125rem; /* 18px */
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

/* First heading has no top margin */
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	margin-top: 0;
}

/* Reset lists */
ul, ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Reset links */
a {
	color: inherit;
	text-decoration: none;
}

/* Reset form elements */
button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
}

button {
	cursor: pointer;
}

/* Reset table elements */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Reset media elements */
img, video, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Remove default browser focus outline and add custom one */
*:focus {
	outline: 2px solid #007acc;
	outline-offset: 2px;
}

/* Hide focus outline for mouse users */
*:focus:not(:focus-visible) {
	outline: none;
}