/* ==========================================================================
   Blog Templates — Single Post, Pagination, Post Navigation
   ========================================================================== */

/* --------------------------------------------------------------------------
   Single Post Header (Minimal)
   -------------------------------------------------------------------------- */
.section--post-header {
	background: #fff;
	padding: 120px 0 48px;
	text-align: center;
}

.post-header__category {
	display: inline-block;
	background: var(--boltpress-colors-background-alt);
	color: var(--boltpress-colors-primary);
	font-size: var(--boltpress-typography-size-xs);
	font-weight: var(--boltpress-typography-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 4px 12px;
	border-radius: var(--boltpress-border-radius-full);
	margin-bottom: var(--boltpress-spacing-lg);
	text-decoration: none;
	transition: all var(--boltpress-transitions-fast);
}

.post-header__category:hover {
	background: var(--boltpress-colors-accent);
	color: var(--boltpress-colors-primary);
}

.post-header__title {
	font-size: var(--boltpress-typography-size-4xl);
	line-height: var(--boltpress-typography-leading-tight);
	color: var(--boltpress-colors-primary);
	margin-bottom: var(--boltpress-spacing-base);
}

.post-header__meta {
	color: var(--boltpress-colors-text-muted);
	font-size: var(--boltpress-typography-size-sm);
	margin-bottom: var(--boltpress-spacing-2xl);
}

.post-header__sep {
	margin: 0 var(--boltpress-spacing-sm);
}

.post-header__image {
	margin-top: var(--boltpress-spacing-xl);
}

.post-header__image img {
	width: 100%;
	height: auto;
	border-radius: var(--boltpress-border-radius-lg);
}

/* --------------------------------------------------------------------------
   Post Content Layout (content + TOC sidebar)
   -------------------------------------------------------------------------- */
.post-content-layout {
	max-width: var(--boltpress-spacing-container);
}

.post-content-layout__main {
	max-width: var(--boltpress-spacing-container-narrow);
}

/* --------------------------------------------------------------------------
   Table of Contents (Sidebar)
   -------------------------------------------------------------------------- */
/* Mobile TOC (inside header, after featured image) — hidden on desktop */
.post-toc--mobile {
	display: none;
}

.post-toc {
	border-left: 2px solid var(--boltpress-colors-border);
	padding-left: var(--boltpress-spacing-lg);
}

.post-toc__title {
	font-size: var(--boltpress-typography-size-xs);
	font-weight: var(--boltpress-typography-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--boltpress-colors-text-muted);
	margin-bottom: var(--boltpress-spacing-base);
}

.post-toc__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.post-toc__item {
	margin-bottom: var(--boltpress-spacing-sm);
}

.post-toc__item a {
	color: var(--boltpress-colors-text-muted);
	font-size: var(--boltpress-typography-size-xs);
	font-weight: var(--boltpress-typography-weight-medium);
	text-decoration: none;
	line-height: var(--boltpress-typography-leading-normal);
	transition: color var(--boltpress-transitions-fast);
}

.post-toc__item a:hover {
	color: var(--boltpress-colors-primary);
}

.post-toc__item--h3 {
	padding-left: var(--boltpress-spacing-base);
}

/* --------------------------------------------------------------------------
   Single Post Content
   -------------------------------------------------------------------------- */
.section--post-content {
	background: #fff;
	padding: 64px 0;
}

.section--post-content .entry-content {
	font-size: var(--boltpress-typography-size-md);
	line-height: var(--boltpress-typography-leading-relaxed);
	color: var(--boltpress-colors-text);
}

.section--post-content .entry-content h2,
.section--post-content .entry-content h3,
.section--post-content .entry-content h4 {
	margin-top: var(--boltpress-spacing-2xl);
	margin-bottom: var(--boltpress-spacing-base);
}

.section--post-content .entry-content p {
	margin-bottom: var(--boltpress-spacing-lg);
}

.section--post-content .entry-content img {
	border-radius: var(--boltpress-border-radius-lg);
	margin: var(--boltpress-spacing-xl) 0;
}

.section--post-content .entry-content blockquote {
	border-left: 4px solid var(--boltpress-colors-accent);
	margin: var(--boltpress-spacing-xl) 0;
	padding: var(--boltpress-spacing-base) var(--boltpress-spacing-xl);
	background: var(--boltpress-colors-background-alt);
	border-radius: 0 var(--boltpress-border-radius-lg) var(--boltpress-border-radius-lg) 0;
	font-style: italic;
	color: var(--boltpress-colors-text-muted);
}

.section--post-content .entry-content pre {
	background: var(--boltpress-colors-primary);
	color: #fff;
	padding: var(--boltpress-spacing-lg);
	border-radius: var(--boltpress-border-radius-lg);
	overflow-x: auto;
	font-size: var(--boltpress-typography-size-sm);
	margin: var(--boltpress-spacing-xl) 0;
}

.section--post-content .entry-content ul,
.section--post-content .entry-content ol {
	margin-bottom: var(--boltpress-spacing-lg);
	padding-left: var(--boltpress-spacing-xl);
}

.section--post-content .entry-content li {
	margin-bottom: var(--boltpress-spacing-sm);
}

/* --------------------------------------------------------------------------
   Post Tags
   -------------------------------------------------------------------------- */
.post-tags {
	margin-top: var(--boltpress-spacing-2xl);
	padding-top: var(--boltpress-spacing-xl);
	border-top: 1px solid var(--boltpress-colors-border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--boltpress-spacing-sm);
}

.post-tags a {
	display: inline-block;
	background: var(--boltpress-colors-background-alt);
	color: var(--boltpress-colors-text-muted);
	font-size: var(--boltpress-typography-size-xs);
	font-weight: var(--boltpress-typography-weight-semibold);
	padding: 4px 12px;
	border-radius: var(--boltpress-border-radius-full);
	text-decoration: none;
	transition: all var(--boltpress-transitions-fast);
}

.post-tags a:hover {
	background: var(--boltpress-colors-accent);
	color: var(--boltpress-colors-primary);
}

/* --------------------------------------------------------------------------
   Blog Pagination
   -------------------------------------------------------------------------- */
.blog-pagination {
	margin-top: var(--boltpress-spacing-3xl);
	text-align: center;
}

.blog-pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--boltpress-spacing-sm);
	flex-wrap: wrap;
}

.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--boltpress-spacing-sm);
	border: 1px solid var(--boltpress-colors-border);
	border-radius: var(--boltpress-border-radius-lg);
	font-size: var(--boltpress-typography-size-sm);
	font-weight: var(--boltpress-typography-weight-semibold);
	color: var(--boltpress-colors-text-muted);
	text-decoration: none;
	transition: all var(--boltpress-transitions-fast);
}

.blog-pagination .page-numbers:hover {
	border-color: var(--boltpress-colors-accent);
	color: var(--boltpress-colors-primary);
}

.blog-pagination .page-numbers.current {
	background: var(--boltpress-colors-primary);
	border-color: var(--boltpress-colors-primary);
	color: #fff;
}

.blog-pagination .prev,
.blog-pagination .next {
	border: none;
	font-weight: var(--boltpress-typography-weight-bold);
	color: var(--boltpress-colors-primary);
}

/* --------------------------------------------------------------------------
   No Results
   -------------------------------------------------------------------------- */
.blog-no-results {
	text-align: center;
	padding: var(--boltpress-spacing-4xl) 0;
}

.blog-no-results h2 {
	margin-bottom: var(--boltpress-spacing-base);
}

.blog-no-results p {
	color: var(--boltpress-colors-text-muted);
	margin-bottom: var(--boltpress-spacing-xl);
}

.blog-no-results .search-form {
	display: flex;
	justify-content: center;
	max-width: 400px;
	margin: 0 auto;
	gap: var(--boltpress-spacing-sm);
}

.blog-no-results .search-field {
	flex: 1;
	padding: 10px 16px;
	border: 1px solid var(--boltpress-colors-border);
	border-radius: var(--boltpress-border-radius-lg);
	font-size: var(--boltpress-typography-size-sm);
}

.blog-no-results .search-submit {
	background: var(--boltpress-colors-primary);
	color: #fff;
	border: none;
	padding: 10px 20px;
	border-radius: var(--boltpress-border-radius-lg);
	font-weight: var(--boltpress-typography-weight-bold);
	font-size: var(--boltpress-typography-size-sm);
	cursor: pointer;
	transition: background var(--boltpress-transitions-fast);
}

.blog-no-results .search-submit:hover {
	background: var(--boltpress-colors-accent);
	color: var(--boltpress-colors-primary);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.post-header__title {
		font-size: var(--boltpress-typography-size-5xl);
	}

	.section--post-content {
		padding: 80px 0;
	}

	.post-content-layout {
		display: grid;
		grid-template-columns: 1fr 220px;
		gap: var(--boltpress-spacing-3xl);
		align-items: start;
	}

	.post-content-layout__sidebar {
		position: sticky;
		top: 100px;
	}
}

@media (max-width: 1023px) {
	.post-content-layout__sidebar {
		display: none;
	}

	.post-toc--mobile {
		display: block;
		background: var(--boltpress-colors-background-alt);
		border-left: none;
		border-radius: var(--boltpress-border-radius-lg);
		padding: var(--boltpress-spacing-lg) var(--boltpress-spacing-xl);
		margin-top: var(--boltpress-spacing-2xl);
		text-align: left;
	}
}

@media (max-width: 767px) {
	.section--post-header {
		padding-top: 100px;
	}

	.post-header__title {
		font-size: var(--boltpress-typography-size-2xl);
	}

	.section--post-content {
		padding: 40px 0;
	}

	.section--post-content .entry-content {
		font-size: var(--boltpress-typography-size-base);
	}
}
