/**
 * Single Post Page Width Expansion & Responsive Layout Override
 * Scoped strictly to body.single-post / body.single
 */

/* ============================================================
   1. BASE STYLES (COMMON TO ALL SIZES)
   ============================================================ */
body.single-post article.single-content.card-layout-w {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 40px !important;
	border-radius: 20px !important;
}

body.single-post .single-hero-1 .image-container,
body.single-post .single-hero-inside .image-container,
body.single-post .single-hero .image-container {
	position: relative !important;
	width: 100% !important;
	overflow: hidden !important;
	border-radius: 14px !important;
	margin-bottom: 24px !important;
}

body.single-post .single-hero-1 .image-container::after,
body.single-post .single-hero-inside .image-container::after {
	display: none !important;
}

body.single-post .single-hero-1 .image-container img,
body.single-post .single-hero-inside .image-container img,
body.single-post .single-hero-inside .image-container .wp-post-image,
body.single-post .single-hero .image-container img,
body.single-post .single-featured-image img,
body.single-post .post-thumbnail img {
	width: 100% !important;
	height: auto !important;
	display: block !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	border-radius: 14px !important;
}

/* Post title & meta */
body.single-post .single-hero-inside .single-hero-title,
body.single-post .single-hero-title,
body.single-post .single-hero-title .title {
	width: 100% !important;
	max-width: 100% !important;
	word-break: break-word !important;
}

/* Article body text & typography - Preserve formatting given in post page */
body.single-post .single-content-inner,
body.single-post .single-reading-content {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

body.single-post .single-content-inner p,
body.single-post .single-content-inner div:not([class]),
body.single-post .single-reading-content p,
body.single-post .single-reading-content > div:not([class*="ad"]):not([class*="post-views"]),
body.single-post .entry-content p {
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Mukta Malar", "Noto Sans Tamil", sans-serif;
	font-size: 0.9rem !important;
	line-height: 1.85;
	letter-spacing: -0.003em;
	margin-top: 0;
	margin-bottom: 1.5rem;
	word-break: break-word;
	box-sizing: border-box;
	text-align: justify !important;
	text-justify: inter-word !important;
	text-align-last: left !important;
}

/* Subheadings / bold intro labels */
body.single-post .single-content-inner b,
body.single-post .single-content-inner strong,
body.single-post .single-reading-content b,
body.single-post .single-reading-content strong {
	font-weight: 700;
}

/* Hide empty spacer divs */
body.single-post .single-content-inner div:empty,
body.single-post .single-reading-content div:empty {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Author box, pagination & comments full width */
body.single-post .single-author-box-container,
body.single-post .single-next-prev-posts-container,
body.single-post #comments {
	width: 100% !important;
	max-width: 100% !important;
}

/* ============================================================
   2. DESKTOP LAYOUT (min-width: 1025px)
   ============================================================ */
@media screen and (min-width: 1025px) {
	/* Main site/content container: max-width 1560px, ~50px blue margins on left & right */
	body.single-post .single-post-wrapper .content-wrapper > .pt-container,
	body.single-post .content-wrapper > .pt-container,
	body.single-post .single-post-wrapper > .pt-container,
	body.single-post main .pt-container,
	body.single-post .pt-container {
		width: calc(100% - 100px) !important;
		max-width: 1560px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
	}

	/* Two-column flex container: card (72-74%) + sidebar (360px) + 36px gap */
	body.single-post .page-content-wrapper {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		gap: 36px !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* White post card container: takes ~72-74% of the container width */
	body.single-post .page-content-wrapper > .content-container {
		flex: 1 1 0% !important;
		min-width: 0 !important;
		width: auto !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Sidebar: kept at clean width 360px (within 340px - 380px range) */
	body.single-post .page-content-wrapper > .sidebar-container {
		flex: 0 0 360px !important;
		width: 360px !important;
		min-width: 340px !important;
		max-width: 380px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-bottom: 40px !important;
	}

	/* Featured image on desktop: maintain natural aspect ratio without distortion or forced crop */
	body.single-post .single-hero-1 .image-container,
	body.single-post .single-hero-inside .image-container,
	body.single-post .single-hero .image-container {
		max-width: 820px !important;
		max-height: none !important;
		height: auto !important;
		margin: 0 auto 28px auto !important;
		border-radius: 14px !important;
		overflow: hidden !important;
		display: block !important;
	}

	body.single-post .single-hero-1 .image-container img,
	body.single-post .single-hero-inside .image-container img,
	body.single-post .single-hero-inside .image-container .wp-post-image,
	body.single-post .single-hero .image-container img,
	body.single-post .single-featured-image img,
	body.single-post .post-thumbnail img {
		width: auto !important;
		max-width: 100% !important;
		max-height: 540px !important;
		height: auto !important;
		aspect-ratio: auto !important;
		object-fit: contain !important;
		object-position: center !important;
		border-radius: 14px !important;
		margin: 0 auto !important;
		display: block !important;
	}

	/* In-article images: strictly maintain natural aspect ratio on screen > tablet */
	body.single-post .single-content-inner img,
	body.single-post .entry-content img,
	body.single-post .single-content-inner figure img,
	body.single-post .single-content-inner .wp-block-image img {
		height: auto !important;
		max-width: 100% !important;
		aspect-ratio: auto !important;
		object-fit: contain !important;
	}

	body.single-post .single-content-inner figure,
	body.single-post .single-content-inner .wp-block-image {
		max-width: 100% !important;
		height: auto !important;
		aspect-ratio: auto !important;
	}

	/* Article card and inner container cover full width left-to-right */
	body.single-post article.single-content,
	body.single-post article.single-content.card-layout-w {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	body.single-post .single-content-inner,
	body.single-post .entry-content {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
	}

	/* Desktop typography - Preserve formatting given in post page */
	body.single-post .single-content-inner,
	body.single-post .single-reading-content {
		width: 100% !important;
		max-width: 100% !important;
	}

	body.single-post .single-content-inner p,
	body.single-post .single-content-inner div:not([class]),
	body.single-post .single-reading-content p,
	body.single-post .single-reading-content > div:not([class*="ad"]):not([class*="post-views"]),
	body.single-post .entry-content p,
	body.single-post .single-content-inner li,
	body.single-post .single-reading-content li,
	body.single-post .single-content-inner blockquote,
	body.single-post .single-reading-content blockquote {
		font-size: 0.9rem !important;
		margin-top: 0;
		margin-bottom: 1.5rem;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		text-align: justify !important;
		text-justify: inter-word !important;
		text-align-last: left !important;
	}
}

/* ============================================================
   3. TABLET BREAKPOINT (<= 1024px)
   Stack sidebar below post card, 16-20px side margins
   ============================================================ */
@media screen and (max-width: 1024px) {
	body.single-post .single-post-wrapper .content-wrapper > .pt-container,
	body.single-post .content-wrapper > .pt-container,
	body.single-post .single-post-wrapper > .pt-container,
	body.single-post main .pt-container,
	body.single-post .pt-container {
		width: calc(100% - 36px) !important; /* ~18px margin each side */
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.single-post .page-content-wrapper {
		display: flex !important;
		flex-direction: column !important;
		gap: 32px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
	}

	body.single-post .page-content-wrapper > .content-container,
	body.single-post .page-content-wrapper > .sidebar-container {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.single-post article.single-content.card-layout-w {
		padding: 28px !important;
	}

	body.single-post .single-content-inner p,
	body.single-post .single-content-inner div:not([class]),
	body.single-post .single-reading-content p,
	body.single-post .single-reading-content > div:not([class*="ad"]):not([class*="post-views"]),
	body.single-post .entry-content p {
		font-size: 0.9rem !important;
		margin-bottom: 1.35rem;
		text-align: justify !important;
		text-justify: inter-word !important;
		text-align-last: left !important;
	}
}

/* ============================================================
   4. MOBILE BREAKPOINT (<= 640px)
   Nearly edge-to-edge card & clean, legible mobile typography
   ============================================================ */
@media screen and (max-width: 640px) {
	body.single-post .single-post-wrapper .content-wrapper > .pt-container,
	body.single-post .content-wrapper > .pt-container,
	body.single-post .single-post-wrapper > .pt-container,
	body.single-post main .pt-container,
	body.single-post .pt-container {
		width: calc(100% - 14px) !important; /* 7px margin each side */
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.single-post .page-content-wrapper {
		gap: 20px !important;
	}

	body.single-post article.single-content.card-layout-w {
		padding: 16px 14px !important;
		border-radius: 14px !important;
	}

	/* Clean, comfortable mobile typography */
	body.single-post .single-content-inner p,
	body.single-post .single-content-inner div:not([class]),
	body.single-post .single-reading-content p,
	body.single-post .single-reading-content > div:not([class*="ad"]):not([class*="post-views"]),
	body.single-post .entry-content p,
	body.single-post .single-content-inner,
	body.single-post .single-reading-content,
	body.single-post .single-content-inner li,
	body.single-post .single-reading-content li {
		font-size: 16px !important;
		line-height: 1.75 !important;
		letter-spacing: 0 !important;
		text-align: justify !important;
		text-justify: inter-word !important;
		text-align-last: left !important;
		margin-bottom: 1.25rem !important;
	}

	body.single-post .single-hero-inside .single-hero-title .title,
	body.single-post .single-hero-title .title {
		font-size: 1.3rem !important;
		line-height: 1.38 !important;
		margin-bottom: 0.9rem !important;
		padding-bottom: 0.75rem !important;
	}

	body.single-post .single-hero-1 .image-container,
	body.single-post .single-hero-inside .image-container,
	body.single-post .single-hero .image-container {
		max-height: 230px !important;
		margin-bottom: 16px !important;
	}

	body.single-post .single-hero-1 .image-container img,
	body.single-post .single-hero-inside .image-container img {
		max-height: 230px !important;
		object-fit: cover !important;
	}
}

/* ============================================================
   5. MOUSE WHEEL SCROLL & INTERACTION RELIABILITY
   Prevents rare device scroll freezes, hidden overlay trapping
   ============================================================ */
html,
body {
	touch-action: pan-y !important;
	overscroll-behavior-y: auto !important;
}

/* Guarantee that preloader never intercepts mouse wheel once loaded */
.site-preloader {
	pointer-events: none !important;
}

body.site-loaded .site-preloader {
	display: none !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

/* Prevent closed drawers or search overlays from trapping wheel events */
.offcanvas-wrapper:not(.open),
.offcanvas-wrapper:not(.open)::before {
	pointer-events: none !important;
	visibility: hidden !important;
}

.popup-search-wrapper:not(.open):not([style*="display: flex"]),
.popup-search:not(.open) {
	pointer-events: none !important;
}

/* 6. Featured Image Caption on Single Post */
.single-hero-caption {
	text-align: center !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #475569 !important;
	margin-top: 10px !important;
	margin-bottom: 22px !important;
	font-weight: 400 !important;
	letter-spacing: -0.005em !important;
}

html[scheme="dark"] .single-hero-caption,
html[data-theme="dark"] .single-hero-caption,
html.dark-mode .single-hero-caption {
	color: #94a3b8 !important;
}

/* ============================================================
   7. TYPOGRAPHY & SPACING SYNC (CATEGORY SPECIFIC & UNIFIED)
   Cache-Buster Version: 20261101_0517
   ============================================================ */

/* 1. General Single Posts (Preserve Justify, Clean Word Flow, 15px Margin) */
body.single-post .single-content-inner p,
body.single-post .single-reading-content p,
body.single-post .entry-content p {
	margin-bottom: 15px !important;
	text-align: justify !important;
	text-align-last: left !important;
	text-justify: auto !important;
}

/* 2. Category 'sinthanaith-thuligal' (Poems / Short Thoughts: 0px Spacing) */
body.single-post article.category-sinthanaith-thuligal .single-content-inner p,
body.single-post article.category-sinthanaith-thuligal .single-reading-content p,
body.single-post article.category-sinthanaith-thuligal .entry-content p {
	margin-bottom: 0px !important;
}

/* Tablet (<= 992px) */
@media screen and (max-width: 992px) {
	body.single-post .single-content-inner p,
	body.single-post .single-reading-content p,
	body.single-post .entry-content p {
		margin-bottom: 15px !important;
		text-align: justify !important;
		text-align-last: left !important;
		text-justify: auto !important;
	}
	body.single-post article.category-sinthanaith-thuligal .single-content-inner p,
	body.single-post article.category-sinthanaith-thuligal .single-reading-content p,
	body.single-post article.category-sinthanaith-thuligal .entry-content p {
		margin-bottom: 0px !important;
	}
}

/* Mobile (<= 640px): 20% reduced text size (16px * 0.8 = 12.8px) */
@media screen and (max-width: 640px) {
	body.single-post .single-content-inner p,
	body.single-post .single-content-inner div:not([class]),
	body.single-post .single-reading-content p,
	body.single-post .single-reading-content > div:not([class*="ad"]):not([class*="post-views"]),
	body.single-post .entry-content p,
	body.single-post .single-content-inner li,
	body.single-post .single-reading-content li {
		font-size: 12.8px !important;
		line-height: 1.75 !important;
		margin-bottom: 15px !important;
		text-align: justify !important;
		text-align-last: left !important;
		text-justify: auto !important;
	}
	body.single-post article.category-sinthanaith-thuligal .single-content-inner p,
	body.single-post article.category-sinthanaith-thuligal .single-reading-content p,
	body.single-post article.category-sinthanaith-thuligal .entry-content p {
		margin-bottom: 0px !important;
	}
}

/* Accessibility Dynamic Controls (Sync with Floating Toolbar) */
html.vv-font-sm body.single-post .single-content-inner p,
html.vv-font-sm body.single-post .single-reading-content p,
html.vv-font-sm body.single-post .entry-content p,
html.vv-font-sm body.single-post .single-content-inner li,
html.vv-font-sm body.single-post .single-reading-content li {
	font-size: 0.76rem !important; /* ~12px / Small Text */
	line-height: 1.65 !important;
}

html.vv-font-lg body.single-post .single-content-inner p,
html.vv-font-lg body.single-post .single-reading-content p,
html.vv-font-lg body.single-post .entry-content p,
html.vv-font-lg body.single-post .single-content-inner li,
html.vv-font-lg body.single-post .single-reading-content li {
	font-size: 1.15rem !important; /* ~18.5px / Large Text */
	line-height: 1.85 !important;
}

html.vv-font-xl body.single-post .single-content-inner p,
html.vv-font-xl body.single-post .single-reading-content p,
html.vv-font-xl body.single-post .entry-content p,
html.vv-font-xl body.single-post .single-content-inner li,
html.vv-font-xl body.single-post .single-reading-content li {
	font-size: 1.35rem !important; /* ~21.6px / Extra Large Text */
	line-height: 1.95 !important;
}

html.vv-align-left body.single-post .single-content-inner p,
html.vv-align-left body.single-post .single-reading-content p,
html.vv-align-left body.single-post .entry-content p {
	text-align: left !important;
	text-align-last: left !important;
	text-justify: auto !important;
}

html.vv-align-center body.single-post .single-content-inner p,
html.vv-align-center body.single-post .single-reading-content p,
html.vv-align-center body.single-post .entry-content p {
	text-align: center !important;
	text-align-last: center !important;
	text-justify: auto !important;
}

html.vv-align-justify body.single-post .single-content-inner p,
html.vv-align-justify body.single-post .single-reading-content p,
html.vv-align-justify body.single-post .entry-content p {
	text-align: justify !important;
	text-align-last: left !important;
	text-justify: auto !important;
}

html.vv-readable-spacing body.single-post .single-content-inner p,
html.vv-readable-spacing body.single-post .single-reading-content p,
html.vv-readable-spacing body.single-post .entry-content p {
	line-height: 2.15 !important;
	letter-spacing: 0.04em !important;
	word-spacing: 0.1em !important;
	margin-bottom: 22px !important;
}

html.vv-high-contrast body.single-post .single-content-inner p,
html.vv-high-contrast body.single-post .single-content-inner p *,
html.vv-high-contrast body.single-post .single-reading-content p,
html.vv-high-contrast body.single-post .single-reading-content p *,
html.vv-high-contrast body.single-post .entry-content p,
html.vv-high-contrast body.single-post .entry-content p * {
	color: #000000 !important;
}

html[scheme="dark"].vv-high-contrast body.single-post .single-content-inner p,
html[scheme="dark"].vv-high-contrast body.single-post .single-reading-content p,
html[scheme="dark"].vv-high-contrast body.single-post .entry-content p,
body.dark-mode.vv-high-contrast body.single-post .single-content-inner p,
body.dark-mode.vv-high-contrast body.single-post .single-reading-content p,
body.dark-mode.vv-high-contrast body.single-post .entry-content p {
	color: #ffffff !important;
}

@media screen and (max-width: 640px) {
	html.vv-font-sm body.single-post .single-content-inner p,
	html.vv-font-sm body.single-post .single-reading-content p,
	html.vv-font-sm body.single-post .entry-content p {
		font-size: 10.5px !important;
	}
	html.vv-font-lg body.single-post .single-content-inner p,
	html.vv-font-lg body.single-post .single-reading-content p,
	html.vv-font-lg body.single-post .entry-content p {
		font-size: 15.5px !important;
	}
	html.vv-font-xl body.single-post .single-content-inner p,
	html.vv-font-xl body.single-post .single-reading-content p,
	html.vv-font-xl body.single-post .entry-content p {
		font-size: 18.5px !important;
	}
}