/*
Single blog post: header/meta, featured image, long-form content
typography, tags, prev/next navigation, related posts, comments heading.
The sidebar (.single-post__aside) reuses the same two product carousels
and their background treatment (.blog-magazine__hero-aside/__aside) from
the blog homepage (blog.css) -- same widgets, same look, nothing new to
maintain here beyond the column layout itself.س
*/

.single-post-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
	align-items: start;
	margin-top: 29px;
}

.single-post-layout > * {
	min-width: 0;
}

@media (max-width: 1023.98px) {
	.single-post-layout {
		margin-top: 0;
	}
}

@media (max-width: 767.98px) {
	.single-post__title {
		font-size: var(--text-xl);
	}

	.single-post__nav {
		gap: var(--space-3);
		margin-block-start: var(--space-5);
		padding-block-start: var(--space-4);
	}

	.single-post__aside {
		gap: var(--space-4);
	}

	.single-post__aside .blog-magazine__hero-aside,
	.single-post__aside .blog-magazine__aside {
		padding: var(--space-3);
	}

	.single-post__aside .product-card__media {
		aspect-ratio: 4 / 3;
	}

	.single-post__related {
		margin-block-start: var(--space-5);
		padding-block: var(--space-5);
	}

	.single-post__related .blog-grid {
		gap: var(--space-3);
		padding-block: var(--space-2) 0;
	}

	.single-post__related .blog-card__title {
		font-size: var(--text-sm);
	}

	.single-post__related .card__body {
		padding: var(--space-3);
	}

	.single-post__related .blog-card__footer {
		flex-wrap: wrap;
	}

	.single-post .entry-content h1.wp-block-heading {
		font-size: var(--text-3xl);
	}

	.single-post .entry-content h2.wp-block-heading {
		font-size: var(--text-2xl);
	}

	.single-post .entry-content h3.wp-block-heading {
		font-size: var(--text-xl);
	}

	.single-post .entry-content h4.wp-block-heading {
		font-size: var(--text-lg);
	}

	.single-post .entry-content h5.wp-block-heading,
	.single-post .entry-content h6.wp-block-heading {
		font-size: var(--text-base);
	}
}

@media (min-width: 360px) and (max-width: 767.98px) {
	.single-post__related .blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.single-post__toc--sidebar {
	display: none;
}

.single-post__toc--mobile {
	margin-block: var(--space-4);
}

@media (min-width: 1024px) {
	.single-post-layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
	}

	.single-post__aside {
		align-self: stretch;
	}

	.single-post__toc--sidebar {
		display: block;
		position: sticky;
		top: calc(var(--header-h, 0px) + var(--space-4));
		z-index: 1;
	}

	.single-post__toc--mobile {
		display: none;
	}
}



.single-post__aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.single-post__title {
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	letter-spacing: -0.01em;
	margin-block-end: var(--space-5);
}

.single-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-muted);
}

.single-post__meta-item {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.single-post__meta-item .icon {
	width: 1em;
	height: 1em;
}

a.single-post__meta-item:hover {
	color: var(--color-primary);
}

.single-post__meta-sep {
	color: var(--color-border);
}

.single-post__image {
    width: 100%;
	margin-block: var(--space-3);
}

.single-post__image img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	aspect-ratio: 21 / 9;
	object-fit: cover;
	box-shadow: var(--shadow-sm);
}

/* Long-form content typography (.entry-content) lives in prose.css,
   shared with page.php so About/FAQ/Contact-style pages get the same
   headings/blockquote/list/code treatment. */

/* Tags --------------------------------------------------------------------------- */

.single-post__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-block-start: var(--space-6);
}

/* Prev/next navigation ------------------------------------------------------------- */

.single-post__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	margin-block-start: var(--space-8);
	padding-block-start: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.single-post__nav-item--next {
	text-align: end;
}

.single-post__nav-label {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-muted);
	margin-block-end: var(--space-1);
}

.single-post__nav-item a {
	font-weight: var(--font-medium);
}

.single-post__nav-item a:hover {
	color: var(--color-primary);
}

/* Table of contents (opt-in per post/page via the H2/H3/H4 checkboxes in
   inc/toc.php; built by new_ubit_maybe_prepend_toc(), which prepends it to
   .entry-content for posts but hands it to page.php for pages, which
   renders it in the sidebar below the featured image -- see
   .page-layout__image in base.css) ------------------------------------- */

.toc {
	position: relative;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
}

.toc__title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-ink);
	padding-block-end: var(--space-3);
	margin-block-end: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.toc__icon {
	width: 1.1em;
	height: 1.1em;
	color: var(--color-primary);
	flex-shrink: 0;
}

.toc__list,.entry-content ul.toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.toc > .toc__list {
	position: relative;
}

.toc > .toc__list::before,
.toc > .toc__list::after {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 1px;
	width: 3px;
	border-radius: var(--radius-full);
	content: '';
	pointer-events: none;
}

.toc > .toc__list::before {
	background: var(--color-border);
}

.toc > .toc__list::after {
	height: var(--toc-progress, 0px);
	background: var(--color-primary);
	transition: height 180ms ease;
}

.toc__list--nested {
	/* padding-inline-start: var(--space-4); */
	margin-block-start: var(--space-1);
}

.toc__item {
	padding-block: 7px;
}

.toc__link {
	display: block;
	position: relative;
	color: #737f97;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	text-decoration: none;
	padding-inline-start: var(--space-3);
	transition: color var(--transition-fast);
	font-weight: bold;
}

.toc__link::before {
	content: '';
	position: absolute;
	inset-inline-start: -1px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-radius: var(--radius-full);
	background: var(--color-border);
	transition: background var(--transition-fast);
}

.toc__link:hover,
.toc__link:focus-visible,
.toc__link.is-active {
	color: var(--color-primary);
}

.toc__link:hover::before,
.toc__link:focus-visible::before,
.toc__link.is-active::before {
	background: var(--color-primary);
}

/* Related posts ------------------------------------------------------------------- */

.single-post__related {
	padding-block: var(--space-8);
	border-top: 1px solid var(--color-border);
	margin-block-start: var(--space-8);
}

/* Comments --------------------------------------------------------------------------- */

.comments-area {
	max-width: 75ch;
	padding-block: var(--space-8);
}

.comments-title {
	font-size: var(--text-2xl);
	margin-block-end: var(--space-5);
}

@media (max-width: 767.98px) {
	.comments-area {
		padding-block: var(--space-5);
	}

	.comments-area .comment-respond {
		padding: var(--space-3);
	}

	.comments-title {
		margin-block-end: var(--space-3);
	}

	body.single-post .site-footer {
		margin-top: var(--space-5);
	}
}
.toc__list--nested a.toc__link {
    font-weight: normal;
}