@layer application {
	section#blog-content {
		order: 1;
		flex: 1 1 auto;
		width: 100%;
		max-width: clamp(320px, 90vw, 1200px);
	}

	/*----- Sidebar navigation -----*/
	aside#blog-nav {
		order: 2;
		flex: 0 0 280px; /* Slightly wider for better proportions */
		position: sticky;
		top: 2rem;
		max-height: calc(100vh - 4rem);
		overflow-y: auto;

		/* Custom scrollbar styling */
		scrollbar-width: thin;
		scrollbar-color: var(--wash-strong) transparent;
		&::-webkit-scrollbar {
			width: 6px;
		}
		&::-webkit-scrollbar-track {
			background: transparent;
		}
		&::-webkit-scrollbar-thumb {
			background: var(--wash-strong);
			border-radius: 3px;
		}

		ul {
			list-style: none;
			margin: 0;
		}

		section {
			background: var(--main-bg-accent);
			backdrop-filter: blur(10px);
			border-radius: 16px;
			border: 1px solid var(--wash-subtle);
			margin-bottom: 1.5rem;
			box-shadow:
				0 4px 20px var(--wash-subtle),
				0 0 0 1px var(--wash-muted) inset;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			overflow: hidden;

			h2 {
				font-size: 1.1rem;
				font-weight: 700;
				line-height: 1.2;
				padding: 1rem 1.25rem 0.75rem;
				margin: 0;
				color: var(--main-text-accent);
				background: var(--wash-subtle);
				border-bottom: 1px solid var(--wash-subtle);
				position: relative;

				/* Subtle accent line */
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 1.25rem;
					right: 1.25rem;
					height: 2px;
					background: linear-gradient(90deg, var(--main-link-color), transparent);
					opacity: 0.6;
				}
			}

			ul {
				padding: 1rem 1.25rem 1.25rem;
			}
		}

		/* Tag section styling */
		#blog-nav-tag {
			li {
				display: inline-block;
			}
		}

		/* Recent posts section styling */
		#blog-nav-recent {
			li {
				margin-bottom: 0.75rem;

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

			span.title {
				display: block;
				font-weight: 600;
				font-size: 0.95rem;
				line-height: 1.3;
				padding: 0.875rem 1rem 0.5rem;
				margin: 0;
				color: var(--main-text-accent);
				background: var(--wash-subtle);
				border-bottom: 1px solid var(--wash-subtle);
			}

			p.preview {
				color: var(--main-text-muted);
				font-size: 0.8rem;
				line-height: 1.4;
				padding: 0.5rem 1rem 0.875rem;
				margin: 0;
				opacity: 0.8;

				&:empty {
					display: none;
				}
			}
		}

		/* Browse all link styling */
		#blog-nav-all {
			display: block;
			background: linear-gradient(135deg, var(--main-link-color), color-mix(in srgb, var(--main-link-color) 80%, var(--wash-accent)));
			color: var(--container-text-accent);
			text-decoration: none;
			padding: 0.875rem 1.25rem;
			border-radius: 12px;
			font-weight: 600;
			text-align: center;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			box-shadow:
				0 4px 15px var(--wash-subtle),
				0 0 0 1px var(--wash-muted) inset;

			&:hover {
				box-shadow:
					0 8px 25px var(--wash-accent),
					0 0 0 1px var(--wash-muted) inset;
				background: linear-gradient(135deg, var(--main-link-accent), color-mix(in srgb, var(--main-link-accent) 80%, var(--wash-muted)));
			}
		}
	}

	/* Responsive behavior */
	@media (max-width: 1000px) {
		aside#blog-nav {
			display: none;
		}
	}

	/* For smaller screens where sidebar is shown */
	@media (max-width: 1200px) and (min-width: 1001px) {
		aside#blog-nav {
			flex: 0 0 260px;

			section {
				h2 {
					font-size: 1rem;
					padding: 0.875rem 1rem 0.625rem;
				}

				ul {
					padding: 0.875rem 1rem 1rem;
				}
			}
		}
	}

	/*----- Sitemap -----*/
	ul#sitemap,
	li.sitemap-section > ul {
		list-style: none;
		margin: 0;
		padding-left: 1rem; /* keeps hierarchy but no bullets */
	}

	li.sitemap-section {
		margin-bottom: 1rem; /* Add spacing between sections */

		/* Section heading inside a section */
		h2 {
			margin: 0.75rem 0 0.25rem;
			font-size: 1.1rem;
			font-weight: 800;
		}
	}

	li.sitemap-article {
		margin-bottom: 1rem; /* Add spacing between sections */

		a {
			text-decoration: none;
			color: inherit;
		}

		/* Slug/Title Header */
		h3 {
			display: flex;
			align-items: baseline;
			gap: 0.5rem;
			flex-wrap: wrap;
			margin: 0;
			font-size: 1rem;
			line-height: 1.25;
		}

		.title {
			font-weight: 800;
		}

		p.preview {
			margin: 0.35rem 0 0;
			font-size: 0.92rem;
			line-height: 1.4;
			color: var(--main-text-muted);
		}

		/* Collapse empty title spans but keep DOM shape */
		a .title:empty { display: none; }
	}

	/*----- Posts -----*/
	section#blog-content {
		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;

		header {
			background: var(--main-bg-secondary);
			border: 1px solid var(--main-border);
			border-radius: 8px;
			padding: 1.5rem;
			margin-bottom: 2rem;
			box-shadow: 0 2px 8px var(--wash-accent);
			position: relative;

			dl, section {
				font-size: 0.9rem;
				border-top: 1px solid color-mix(in srgb, var(--main-border) 30%, transparent);
				padding-top: 1rem;
			}

			dl {
				display: grid;
				grid-template-columns: max-content 1fr;
				gap: 0.5rem 1rem;
				margin: 0;

				dt {
					font-weight: 500;
					color: var(--main-text-muted);
					text-align: right;
					white-space: nowrap;

					&::after {
						content: ':';
						margin-left: 0.25rem;
					}
				}

				dd {
					margin: 0;
					color: var(--main-text-color);
				}
			}
		}
	}
}