/*
 * Main Stylesheet — loaded asynchronously by inc/enqueue.php
 *
 * Everything that ISN'T critical CSS belongs here. As components
 * are built (related posts, table of contents, comment form, etc.),
 * their styles land in this file.
 *
 * Architecture goal: ONE stylesheet, no @imports, no Sass partials
 * concatenated at runtime. We can use a build step in development
 * to compose this from multiple sources, but the file shipped to
 * browsers is a single, minified blob.
 *
 * The starter content below establishes the baseline below-the-fold
 * styles that the critical CSS doesn't cover.
 */

/* Article body typography. Larger than the default body size for
   improved long-form readability. Long content pages dominate
   below-the-fold attention, so this is where readability matters most. */
.entry-content {
	max-width: var(--content);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.entry-content > * + * {
	margin-top: var(--space-m);
}

.entry-content h2 {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	line-height: 1.3;
	margin-top: var(--space-l);
}

.entry-content h3 {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	line-height: 1.4;
	margin-top: var(--space-l);
}

.entry-content a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.entry-content blockquote {
	border-left: 3px solid var(--color-accent);
	padding-left: var(--space-m);
	margin-left: 0;
	color: var(--color-muted);
	font-style: italic;
}

.entry-content code {
	background: var(--color-surface);
	padding: 0.125em 0.375em;
	border-radius: 3px;
	font-size: 0.9375em;
}

.entry-content pre {
	background: var(--color-surface);
	padding: var(--space-m);
	overflow-x: auto;
	border-radius: 4px;
}

.entry-content pre code {
	background: transparent;
	padding: 0;
}

/* Pagination — simple, accessible, no JavaScript. */
.pagination {
	margin-top: var(--space-xl);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	justify-content: center;
}

.pagination a, .pagination span {
	padding: var(--space-xs) var(--space-s);
	border: 1px solid var(--color-surface);
	color: var(--color-fg);
	text-decoration: none;
}

.pagination .current {
	background: var(--color-fg);
	color: var(--color-bg);
}

/* Footer. Below-the-fold by definition, so styles can live here. */
.site-footer {
	border-top: 1px solid var(--color-surface);
	padding: var(--space-l) 0;
	margin-top: var(--space-xl);
	color: var(--color-muted);
}

.site-footer__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--space-s);
	text-align: center;
}

.footer-menu {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-m);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-m);
	justify-content: center;
}

.footer-menu a {
	color: var(--color-muted);
	text-decoration: none;
}

.footer-menu a:hover {
	color: var(--color-fg);
}

/* Responsive typography breakpoint. The 768px boundary catches
   tablets in landscape and small laptops. We bump up heading sizes
   here because larger viewports give us more room to breathe. */
@media (min-width: 768px) {
	.entry-title {
		font-size: 2rem;
	}
	.entry-content {
		font-size: 1.125rem;
	}
	.entry-content h2 { font-size: 1.875rem; }
	.entry-content h3 { font-size: 1.5rem; }
}