/* ==========================================================================
   Classic Editor Content — Single Blog Posts Only
   ==========================================================================
   All blog posts use classic editor HTML (not Gutenberg blocks).
   Every selector is scoped to body.single-post so pages are unaffected.
   Loaded conditionally via functions.php on single post views only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Image alignment
   --------------------------------------------------------------------------
   WordPress core's is-layout-constrained adds:
     margin-left: auto !important; margin-right: auto !important;
   to all direct children, which kills floats. We must use !important
   to override those margins and restore classic editor float behaviour.
   -------------------------------------------------------------------------- */
body.single-post .wp-block-post-content img {
	height: auto;
	max-width: 100%;
	border-radius: var(--wp--custom--border-radius--md);
}

/* --------------------------------------------------------------------------
   Single post hero banner
   --------------------------------------------------------------------------
   Featured image as full-width background with dark overlay + blur.
   Title and date sit over the image at the bottom.
   -------------------------------------------------------------------------- */
.single-post-hero {
	position: relative;
	overflow: hidden;
	min-height: 420px;
	max-height: 500px;
	display: flex;
	align-items: flex-end;
}

/* Featured image fills the hero */
.single-post-hero .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	z-index: 0;
}

.single-post-hero .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	filter: blur(2px) brightness(0.55);
	transform: scale(1.05); /* prevent blur edge artifacts */
}

/* Overlay with text */
.single-post-hero__overlay {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* Breadcrumb inside hero */
.single-post-hero .breadcrumb-bar--hero {
	background: none !important;
}

.single-post-hero .breadcrumb-bar--hero a,
.single-post-hero .breadcrumb-bar--hero span {
	color: rgba(255, 255, 255, 0.7) !important;
	font-size: 0.8rem;
}

.single-post-hero .breadcrumb-bar--hero a:hover {
	color: #fff !important;
}

/* Title text shadow for legibility */
.single-post-hero .wp-block-post-title {
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Fallback when no featured image */
.single-post-hero:not(:has(.wp-block-post-featured-image img)) {
	min-height: auto;
	background: var(--wp--preset--color--primary);
}

@media (max-width: 600px) {
	.single-post-hero {
		min-height: 300px;
	}

	.single-post-hero .wp-block-post-title {
		font-size: 1.6rem !important;
	}
}

body.single-post .wp-block-post-content img.alignright {
	float: right !important;
	max-width: 40%;
	width: auto;
	margin: 0.25em 0 1em 1.5em !important;
}

body.single-post .wp-block-post-content img.alignleft {
	float: left !important;
	max-width: 40%;
	width: auto;
	margin: 0.25em 1.5em 1em 0 !important;
}

body.single-post .wp-block-post-content .aligncenter,
body.single-post .wp-block-post-content img.aligncenter {
	display: block;
	margin-left: auto !important;
	margin-right: auto !important;
}

body.single-post .wp-block-post-content img.alignnone {
	display: block;
	max-width: 100%;
	width: auto;
	margin: 1.5em auto !important;
}

/* wp-caption wrappers (div.alignright etc.) */
body.single-post .wp-block-post-content .wp-caption.alignright {
	float: right !important;
	max-width: 40%;
	margin: 0.25em 0 1em 1.5em !important;
}

body.single-post .wp-block-post-content .wp-caption.alignleft {
	float: left !important;
	max-width: 40%;
	margin: 0.25em 1.5em 1em 0 !important;
}

/* Clearfix after floated images */
body.single-post .wp-block-post-content::after {
	content: "";
	display: table;
	clear: both;
}

/* --------------------------------------------------------------------------
   2. wp-caption (classic image + caption wrapper)
   -------------------------------------------------------------------------- */
body.single-post .wp-block-post-content .wp-caption {
	max-width: 100%;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--border-radius--md);
	padding: 0.4em;
	margin-bottom: 1.2em;
}

body.single-post .wp-block-post-content .wp-caption img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--border-radius--sm);
}

body.single-post .wp-block-post-content .wp-caption .wp-caption-text {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
	text-align: center;
	padding: 0.5em 0.4em 0.2em;
	margin: 0;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
body.single-post .wp-block-post-content h1,
body.single-post .wp-block-post-content h2,
body.single-post .wp-block-post-content h3,
body.single-post .wp-block-post-content h4 {
	margin-top: 2em;
	margin-bottom: 0.6em;
}

body.single-post .wp-block-post-content h5,
body.single-post .wp-block-post-content h6 {
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}

/* References commonly use h5 at the end of posts */
body.single-post .wp-block-post-content h5:last-child,
body.single-post .wp-block-post-content h5:nth-last-child(2) {
	font-weight: 400;
	font-style: italic;
	line-height: 1.6;
}

body.single-post .wp-block-post-content p {
	margin-bottom: 1.2em;
	line-height: 1.8;
}

/* --------------------------------------------------------------------------
   4. Lists
   -------------------------------------------------------------------------- */
body.single-post .wp-block-post-content ul,
body.single-post .wp-block-post-content ol {
	margin: 1em 0 1.5em 1.2em;
	padding-left: 1em;
}

body.single-post .wp-block-post-content li {
	margin-bottom: 0.5em;
	line-height: 1.7;
}

body.single-post .wp-block-post-content li strong {
	color: var(--wp--preset--color--dark);
}

/* --------------------------------------------------------------------------
   5. Blockquotes
   -------------------------------------------------------------------------- */
body.single-post .wp-block-post-content blockquote {
	border-left: 3px solid var(--wp--preset--color--primary);
	padding: 1em 1.5em;
	margin: 1.5em 0;
	background: var(--wp--preset--color--surface);
	border-radius: 0 var(--wp--custom--border-radius--md) var(--wp--custom--border-radius--md) 0;
	font-style: italic;
}

/* --------------------------------------------------------------------------
   6. Links (only in classic post body)
   -------------------------------------------------------------------------- */
body.single-post .wp-block-post-content a:not(.wp-element-button) {
	color: var(--wp--preset--color--primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color 0.2s var(--pf-ease);
}

body.single-post .wp-block-post-content a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--accent);
}

/* --------------------------------------------------------------------------
   7. Author bio (right-aligned signature at end of posts)
   -------------------------------------------------------------------------- */
body.single-post .wp-block-post-content p[style*="text-align: right"] {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.2em;
	line-height: 1.5;
}

/* Some older posts use <u> for author name */
body.single-post .wp-block-post-content > u {
	display: block;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   8. Cleanup
   -------------------------------------------------------------------------- */

/* Hide empty paragraphs (from &nbsp; spacers) */
body.single-post .wp-block-post-content > p:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   9. Mobile: stack floated images
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	body.single-post .wp-block-post-content img.alignright,
	body.single-post .wp-block-post-content img.alignleft,
	body.single-post .wp-block-post-content .wp-caption.alignright,
	body.single-post .wp-block-post-content .wp-caption.alignleft {
		float: none !important;
		max-width: 100%;
		margin: 1em auto !important;
	}
}