/*
Theme Name: Sanitation Process Control
Theme URI: https://saniprocess.com
Author: Sanitation Process Control
Author URI: https://saniprocess.com
Description: Custom WordPress theme mirroring the Sanitation Process Control homepage.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wordpress-custom
*/

/* Main styles are enqueued from assets/css/main.css */

/* ── Single blog: sidebar cards + numbered TOC (reference layout) ── */
.blog-single-card {
	background: hsl(var(--card));
	border: 2px solid hsl(var(--primary) / 0.35);
	border-radius: 1rem;
	padding: 1.25rem 1.25rem 1.5rem;
}

@media (min-width: 640px) {
	.blog-single-card {
		padding: 1.5rem 1.5rem 1.75rem;
	}
}

.blog-single-card__heading {
	margin: 0 0 1rem;
	padding-bottom: 0.875rem;
	border-bottom: 1px solid hsl(var(--border));
	font-family: "Space Grotesk", sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: hsl(var(--foreground));
}

.blog-single-card--toc {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.blog-single-toc__scroll {
	position: relative;
	max-height: min(28rem, 55vh);
	overflow-y: auto;
	padding-right: 0.75rem;
	margin-right: -0.25rem;
	scrollbar-width: thin;
	scrollbar-color: hsl(var(--primary)) hsl(var(--border) / 0.5);
}

.blog-single-toc__scroll::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 4px;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(
		180deg,
		hsl(var(--primary)) 0%,
		hsl(var(--primary) / 0.45) 100%
	);
	pointer-events: none;
}

.blog-single-toc__scroll::-webkit-scrollbar {
	width: 6px;
}

.blog-single-toc__scroll::-webkit-scrollbar-track {
	background: hsl(var(--border) / 0.35);
	border-radius: 999px;
}

.blog-single-toc__scroll::-webkit-scrollbar-thumb {
	background: hsl(var(--primary));
	border-radius: 999px;
}

.blog-single-toc__list {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.blog-single-toc__item--child {
	padding-left: 0.75rem;
}

.blog-single-toc__link {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	padding: 0.5rem 0.625rem;
	border-radius: 0.375rem;
	text-decoration: none;
	color: hsl(var(--steel-light));
	font-size: 0.875rem;
	line-height: 1.45;
	transition: background 0.2s ease, color 0.2s ease;
}

.blog-single-toc__link:hover {
	background: hsl(var(--muted) / 0.35);
	color: hsl(var(--foreground));
}

.blog-single-toc__link.is-active {
	background: hsl(var(--primary) / 0.12);
	color: hsl(var(--foreground));
}

.blog-single-toc__link.is-active .blog-single-toc__number {
	color: hsl(var(--accent));
}

.blog-single-toc__number {
	flex-shrink: 0;
	min-width: 1.75rem;
	font-family: "Space Grotesk", sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	color: hsl(var(--primary));
}

.blog-single-toc__item--child .blog-single-toc__number {
	min-width: 2.25rem;
	font-size: 0.75rem;
}

.blog-single-toc__label {
	flex: 1;
	min-width: 0;
}

.blog-single__featured img {
	display: block;
	width: 100%;
}

/* Blog listing cards and single post content */
.blog-toc__link.is-active {
	background: hsl(var(--muted) / 0.45);
	color: hsl(var(--foreground));
	font-weight: 600;
}

.blog-prose h2,
.blog-prose h3,
.blog-prose h4 {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	color: hsl(var(--foreground));
	scroll-margin-top: 7rem;
}

.blog-prose h2 {
	font-size: clamp(1.35rem, 2vw, 1.875rem);
	margin: 2.5rem 0 1rem;
}

.blog-prose h3 {
	font-size: clamp(1.125rem, 1.6vw, 1.5rem);
	margin: 2rem 0 0.75rem;
}

.blog-prose p,
.blog-prose li {
	color: hsl(var(--steel-light));
	line-height: 1.75;
	font-size: 1rem;
}

.blog-prose p {
	margin-bottom: 1.25rem;
}

.blog-prose ol,
.blog-prose ul {
	margin: 1rem 0 1.5rem 1.25rem;
	padding: 0;
}

.blog-prose ol li + li,
.blog-prose ul li + li {
	margin-top: 0.75rem;
}

.blog-prose a {
	color: hsl(var(--primary));
	text-decoration: underline;
	text-underline-offset: 3px;
}

.blog-prose a:hover {
	color: hsl(var(--accent));
}

.blog-prose img {
	border-radius: 0.75rem;
	border: 1px solid hsl(var(--border));
}

.blog-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}