/* ==========================================================
   single-post-style.css
   Only loaded on single blog posts (see functions.php snippet)
   ========================================================== */

#single-post-page,
#single-post-page * { box-sizing: border-box; }

#single-post-page { overflow-x: hidden; max-width: 100%; }

/* ---------- HERO ---------- */
.sp-hero { padding: 48px 60px; }
.sp-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}
.sp-hero-left { flex: 1 1 55%; }
.sp-hero-title { font-size: 2.4rem; line-height: 1.2; margin: 0 0 16px; font-weight: 800; }
.sp-hero-meta { font-size: 0.9rem; color: rgba(11, 27, 77, 0.75); }
.sp-hero-meta .sp-dot { margin: 0 8px; }

.sp-hero-right {
	flex: 1 1 40%;
	border-radius: 16px;
	padding: 40px;
	text-align: center;
}
.sp-hero-title-dup { font-size: 1.8rem; font-weight: 800; line-height: 1.3; margin: 0; }

/* ---------- CATEGORY TAGS ---------- */
.sp-categories {
	max-width: 1200px;
	margin: 20px auto 0;
	padding: 0 60px;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #1450e0;
}
.sp-categories a { color: inherit; text-decoration: none; margin-right: 6px; }

/* ---------- 3-COLUMN GRID ---------- */
.sp-body-grid {
	max-width: 1200px;
	margin: 30px auto;
	padding: 0 60px;
	display: grid;
	grid-template-columns: 22% 1fr 22%;
	gap: 32px;
	align-items: start;
}
.sp-sidebar { position: sticky; top: 20px; }

/* This min-width: 0 is the single most important line in this file —
   without it, a grid column can force the whole grid wider than the
   viewport instead of letting text inside it wrap. */
.sp-content { min-width: 0; }

.sp-content-meta { font-size: 0.8rem; color: #666; margin-bottom: 8px; }
.sp-content-title { font-size: 1.9rem; margin: 0 0 20px; }

/* Guard rails against any oversized element buried in post content */
.entry-content { max-width: 100%; overflow-wrap: break-word; word-break: break-word; }
.entry-content img,
.entry-content table,
.entry-content iframe,
.entry-content video,
.entry-content pre {
	max-width: 100% !important;
	height: auto;
}
.entry-content table { display: block; overflow-x: auto; } /* wide tables scroll internally instead of blowing out the layout */

.sp-contact-box { background: #f4f5f8; padding: 24px; border-radius: 8px; }
.sp-contact-box input,
.sp-contact-box textarea {
	width: 100%;
	margin-bottom: 12px;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
}

/* ==========================================================
   MOBILE (≤ 900px)
   ========================================================== */
@media (max-width: 900px) {
	.sp-hero { padding: 28px 20px; }
	.sp-hero-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
	.sp-hero-title { font-size: 1.5rem; }

	/* Decorative duplicate title box — hidden by default on mobile.
	   Set $show_hero_box_on_mobile = true in the PHP file to keep it. */
	.sp-hero-right { display: none; }
	.sp-hero-right.sp-show-mobile { display: block; }

	.sp-categories { padding: 0 20px; }

	.sp-body-grid {
		grid-template-columns: 1fr; /* stack everything, no more side columns */
		padding: 0 20px;
		gap: 24px;
	}
	.sp-sidebar { position: static; }
	.sp-toc-sidebar { order: 1; }     /* TOC first */
	.sp-content { order: 2; }         /* article body second */
	.sp-contact-sidebar { order: 3; } /* contact form last */

	.sp-content-title { font-size: 1.4rem; }
}