/* ============================================================
   Single blog post — article prose, tables, meta, nav, tags
   Readable column on the VividHome design tokens (light + dark).
   ============================================================ */

/* ── Readable column ──────────────────────────────────────── */
.single-post .s-post-header,
.single-post .s-single-post,
.single-post .s-post-nav {
	max-width: 760px;
	margin-inline: auto;
}

/* ── Post header / meta ───────────────────────────────────── */
.single-post .s-post-header {
	margin-bottom: var(--vh-space-8);
}
.single-post .s-page-title {
	margin-bottom: var(--vh-space-4);
	line-height: var(--vh-leading-tight);
}
.s-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vh-space-2);
	font-family: var(--vh-font-body);
	font-size: 0.875rem;
	color: var(--vh-charcoal);
}
.s-post-meta-sep { opacity: 0.5; }
.s-post-category {
	font-weight: 600;
	color: var(--vh-blue);
}

/* ── Featured image ───────────────────────────────────────── */
.s-post-thumbnail {
	max-width: 860px;
	margin: 0 auto var(--vh-space-10);
}
.s-post-thumbnail img {
	width: 100%;
	height: auto;
	border-radius: var(--vh-card-radius, 16px);
	box-shadow: var(--vh-shadow-sm);
}

/* ── Article prose ────────────────────────────────────────── */
.s-entry-content {
	font-family: var(--vh-font-body);
	font-size: 1.0625rem;
	line-height: var(--vh-leading-relaxed);
	color: var(--vh-espresso);
}
.s-entry-content > *:first-child { margin-top: 0; }

.s-entry-content p {
	margin: 0 0 var(--vh-space-5);
}
.s-entry-content h2 {
	font-family: var(--vh-font-heading);
	font-size: clamp(1.35rem, 2.6vw, 1.6rem);
	font-weight: 700;
	line-height: var(--vh-leading-snug);
	letter-spacing: -0.01em;
	color: var(--vh-ink);
	margin: var(--vh-space-10) 0 var(--vh-space-4);
	padding-top: var(--vh-space-2);
}
.s-entry-content h3 {
	font-family: var(--vh-font-heading);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: var(--vh-leading-snug);
	color: var(--vh-ink);
	margin: var(--vh-space-8) 0 var(--vh-space-3);
}
.s-entry-content strong { color: var(--vh-ink); font-weight: 700; }
.s-entry-content em { font-style: italic; color: var(--vh-charcoal); }

.s-entry-content a {
	color: var(--vh-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	transition: color var(--vh-duration-base) var(--vh-ease-out);
}
.s-entry-content a:hover { color: var(--vh-magenta); }

.s-entry-content ul,
.s-entry-content ol {
	margin: 0 0 var(--vh-space-5);
	padding-left: 1.4em;
}
.s-entry-content li {
	margin-bottom: var(--vh-space-2);
	padding-left: 0.25em;
}
.s-entry-content li::marker { color: var(--vh-blue); }

.s-entry-content blockquote {
	margin: var(--vh-space-6) 0;
	padding: var(--vh-space-4) var(--vh-space-6);
	background: color-mix(in srgb, var(--vh-linen) 60%, transparent);
	border-radius: var(--vh-radius-lg, 12px);
	color: var(--vh-charcoal);
	font-style: italic;
}
.s-entry-content blockquote p:last-child { margin-bottom: 0; }

/* ── Tables (comparison grids in the guides) ──────────────── */
.s-entry-content .wp-block-table {
	margin: var(--vh-space-6) 0 var(--vh-space-8);
	overflow-x: auto;              /* horizontal scroll on narrow screens */
	-webkit-overflow-scrolling: touch;
}
.s-entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	background: var(--vh-card-bg);
	border: var(--vh-border);
	border-radius: var(--vh-radius-lg, 12px);
	overflow: hidden;
}
.s-entry-content thead th {
	background: var(--vh-linen);
	font-family: var(--vh-font-heading);
	font-weight: 600;
	color: var(--vh-ink);
	text-align: left;
}
.s-entry-content th,
.s-entry-content td {
	padding: var(--vh-space-3) var(--vh-space-4);
	border-bottom: var(--vh-border);
	vertical-align: top;
}
.s-entry-content tbody tr:last-child td { border-bottom: 0; }
.s-entry-content tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--vh-linen) 45%, transparent);
}
.s-entry-content td:first-child,
.s-entry-content th:first-child { padding-left: var(--vh-space-5); }

/* ── Post tags ────────────────────────────────────────────── */
.s-post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vh-space-2);
	margin-top: var(--vh-space-8);
	padding-top: var(--vh-space-6);
	border-top: var(--vh-border);
}
.s-post-tag {
	font-family: var(--vh-font-body);
	font-size: 0.8125rem;
	color: var(--vh-charcoal);
	background: var(--vh-linen);
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	text-decoration: none;
	transition: all var(--vh-duration-base) var(--vh-ease-out);
}
.s-post-tag:hover { color: var(--vh-blue); }

/* ── Prev / next navigation ───────────────────────────────── */
.s-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--vh-space-4);
	margin-top: var(--vh-space-12);
	padding-top: var(--vh-space-8);
	border-top: var(--vh-border);
}
.s-post-nav-link {
	display: flex;
	flex-direction: column;
	gap: var(--vh-space-1);
	padding: var(--vh-space-5);
	border: var(--vh-border);
	border-radius: var(--vh-card-radius, 16px);
	background: var(--vh-card-bg);
	text-decoration: none;
	transition:
		transform var(--vh-duration-base) var(--vh-ease-out),
		box-shadow var(--vh-duration-base) var(--vh-ease-out),
		border-color var(--vh-duration-base) var(--vh-ease-out);
}
.s-post-nav-link:hover {
	transform: translateY(-2px);
	box-shadow: var(--vh-card-shadow-hover, 0 8px 24px rgba(0,0,0,0.08));
	border-color: color-mix(in srgb, var(--vh-blue) 40%, transparent);
}
.s-post-nav-next { text-align: right; }
.s-post-nav-label {
	font-family: var(--vh-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--vh-blue);
}
.s-post-nav-title {
	font-family: var(--vh-font-heading);
	font-size: 0.95rem;
	line-height: var(--vh-leading-snug);
	color: var(--vh-ink);
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 600px) {
	.s-post-nav { grid-template-columns: 1fr; }
	.s-post-nav-next { text-align: left; }
	.s-entry-content { font-size: 1rem; }
}