/**
 * 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 */
body.single-post .single-content-inner {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.single-post .single-content-inner p:not([style*="font-size"]):not([class*="-font-size"]),
body.single-post .entry-content p:not([style*="font-size"]):not([class*="-font-size"]) {
	font-size: 19px;
	line-height: 1.85;
	letter-spacing: 0.01em;
	margin-bottom: 1.6em;
	word-break: break-word;
}

/* 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;
	}

	/* Screen > Tablet: 20% text size reduction inside article (19px -> 15.2px) and JUSTIFY text flush left and right */
	body.single-post .single-content-inner {
		font-size: 15.2px;
		width: 100% !important;
		max-width: 100% !important;
		text-align: justify !important;
		text-justify: inter-word !important;
	}

	body.single-post .single-content-inner p,
	body.single-post .entry-content p {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	body.single-post .single-content-inner p:not([style*="font-size"]):not([class*="-font-size"]),
	body.single-post .entry-content p:not([style*="font-size"]):not([class*="-font-size"]),
	body.single-post .single-content-inner li:not([style*="font-size"]):not([class*="-font-size"]),
	body.single-post .single-content-inner blockquote:not([style*="font-size"]):not([class*="-font-size"]) {
		font-size: 15.2px !important; /* Exactly 20% reduction from 19px base */
		line-height: 1.78 !important;
		letter-spacing: 0.005em !important;
		margin-bottom: 1.4em !important;
	}

	/* Fill text at both ends of left and right (Justify) across the whole card width */
	body.single-post .single-content-inner p:not([style*="text-align"]):not([class*="has-text-align"]),
	body.single-post .entry-content p:not([style*="text-align"]):not([class*="has-text-align"]),
	body.single-post .single-content-inner li:not([style*="text-align"]):not([class*="has-text-align"]),
	body.single-post .single-content-inner blockquote:not([style*="text-align"]):not([class*="has-text-align"]) {
		text-align: justify !important;
		text-justify: inter-word !important;
		text-align-last: left !important;
	}

	/* Headings inside article scaled down by 20% unless customized in post editor */
	body.single-post .single-content-inner h1:not([style*="font-size"]):not([class*="-font-size"]) {
		font-size: 1.6rem !important;
		line-height: 1.35 !important;
	}
	body.single-post .single-content-inner h2:not([style*="font-size"]):not([class*="-font-size"]) {
		font-size: 1.32rem !important;
		line-height: 1.38 !important;
	}
	body.single-post .single-content-inner h3:not([style*="font-size"]):not([class*="-font-size"]) {
		font-size: 1.08rem !important;
		line-height: 1.4 !important;
	}
	body.single-post .single-content-inner h4:not([style*="font-size"]):not([class*="-font-size"]) {
		font-size: 0.9rem !important;
		line-height: 1.45 !important;
	}
	body.single-post .single-content-inner h5:not([style*="font-size"]):not([class*="-font-size"]) {
		font-size: 0.8rem !important;
		line-height: 1.45 !important;
	}
	body.single-post .single-content-inner h6:not([style*="font-size"]):not([class*="-font-size"]) {
		font-size: 0.72rem !important;
		line-height: 1.5 !important;
	}

	/* Preserve custom text alignments from post editor */
	body.single-post .single-content-inner .has-text-align-center,
	body.single-post .single-content-inner p.has-text-align-center,
	body.single-post .single-content-inner [style*="text-align: center"],
	body.single-post .single-content-inner [style*="text-align:center"] {
		text-align: center !important;
		text-align-last: center !important;
	}
	body.single-post .single-content-inner .has-text-align-right,
	body.single-post .single-content-inner p.has-text-align-right,
	body.single-post .single-content-inner [style*="text-align: right"],
	body.single-post .single-content-inner [style*="text-align:right"] {
		text-align: right !important;
		text-align-last: right !important;
	}
	body.single-post .single-content-inner .has-text-align-left,
	body.single-post .single-content-inner p.has-text-align-left,
	body.single-post .single-content-inner [style*="text-align: left"],
	body.single-post .single-content-inner [style*="text-align:left"] {
		text-align: left !important;
		text-align-last: left !important;
	}
	body.single-post .single-content-inner .has-text-align-justify,
	body.single-post .single-content-inner p.has-text-align-justify,
	body.single-post .single-content-inner [style*="text-align: justify"],
	body.single-post .single-content-inner [style*="text-align:justify"] {
		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 .entry-content p {
		font-size: 17.5px !important;
		line-height: 1.75 !important;
	}
}

/* ============================================================
   4. MOBILE BREAKPOINT (<= 640px)
   Nearly edge-to-edge card & reduced text size for more words/line
   ============================================================ */
@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;
	}

	/* Reduced text size so significantly more words fit in each line */
	body.single-post .single-content-inner p,
	body.single-post .entry-content p,
	body.single-post .single-content-inner,
	body.single-post .single-content-inner li {
		font-size: 14.5px !important;
		line-height: 1.65 !important;
		letter-spacing: 0 !important;
		margin-bottom: 1.2em !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;
}