@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Plus+Jakarta+Sans:wght@700;800&family=Space+Grotesk:wght@500;700&display=swap");

/* 1. DESIGN TOKENS */
body.single-post {
	--dm-primary: #38bdf8;
	--dm-primary-strong: #006688;
	--dm-secondary: #0f172a;
	--dm-tertiary: #e0f2fe;
	--dm-neutral: #64748b;
	--dm-bg: #faf9f6;
	--dm-border: #e8e6e1;
	background: var(--dm-bg) !important;
}

/* 2. PAGE LAYOUT AND HEADER */
body.single-post .page_content_wrap {
	background: var(--dm-bg) !important;
	padding-top: 0 !important;
}

body.single-post .post_header_wrap {
	display: flex !important;
	flex-direction: column;
	position: static !important;
	width: min(1112px, calc(100% - 48px));
	min-height: 0 !important;
	height: auto !important;
	margin: 0 auto !important;
	padding: 48px 0 40px !important;
	background: none !important;
}
body.single-post .post_header_wrap::before,
body.single-post .post_header_wrap::after { display: none !important; content: none !important; }

body.single-post .post_header_wrap .post_header {
	order: 1;
	position: static !important;
	width: 100% !important;
	min-height: 0 !important;
	padding: 0 !important;
	background: none !important;
	text-align: left !important;
	transform: none !important;
}

body.single-post .post_header_wrap .post_header .content_wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* 3. CATEGORY BADGE (CENTERED) */
body.single-post .post_header .post_meta_categories {
	display: flex !important;
	justify-content: center !important;
	align-self: center !important;
	width: 100% !important;
	margin: 0 !important;
	text-align: center !important;
}
body.single-post .post_header .post_meta_categories a {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--dm-tertiary) !important;
	color: var(--dm-secondary) !important;
	font: 700 12px/1.4 "Space Grotesk", sans-serif !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}

/* 4. TITLE (CENTERED) */
body.single-post .post_header .post_title {
	width: 100% !important;
	max-width: 100%;
	margin: 0 auto !important;
	color: var(--dm-secondary) !important;
	font: 800 clamp(26px, 3.4vw, 44px)/1.22 "Plus Jakarta Sans", sans-serif !important;
	letter-spacing: -.015em;
	text-align: center !important;
	text-decoration: none !important;
	text-wrap: balance;
}

/* 5. META: AVATAR - AUTHOR - DATE - COMMENTS */
body.single-post .post_header .post_meta_other {
	display: flex;
	align-items: center;
	align-self: center !important;
	justify-content: center !important;
	flex-wrap: wrap;
	gap: 8px 12px;
	width: 100% !important;
	max-width: 100%;
	margin: 0 auto !important;
	font: 400 15px/1.4 "Inter", sans-serif !important;
	color: var(--dm-neutral) !important;
	text-align: center !important;
}
body.single-post .post_header .post_meta_other a,
body.single-post .post_header .post_meta_other span { color: var(--dm-neutral) !important; }
body.single-post .post_header .post_meta_other .post_author,
body.single-post .post_header .post_meta_other .post_author * {
	color: var(--dm-secondary) !important;
	font-family: "Space Grotesk", sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase;
}
body.single-post .post_header .post_meta_other img {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	object-fit: cover;
}

/* 6. FEATURED IMAGE (CARD, LARGE TOP-RIGHT CORNER) */
body.single-post .post_header_wrap .post_featured {
	order: 2;
	position: relative !important;
	inset: auto !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	aspect-ratio: 16 / 9;
	margin: 32px 0 0 !important;
	border-radius: 28px 100px 28px 28px !important;
	background-size: cover !important;
	background-position: center !important;
	overflow: hidden;
}
body.single-post .post_header_wrap .post_featured::before,
body.single-post .post_header_wrap .post_featured::after { display: none !important; content: none !important; }

/* 7. ARTICLE CONTENT */
body.single-post .page_content_wrap > .content_wrap {
	width: min(1112px, calc(100% - 48px)) !important;
	max-width: none !important;
	margin: 0 auto !important;
	padding: 0 0 96px !important;
}
body.single-post .page_content_wrap > .content_wrap > .content,
body.single-post .page_content_wrap .content_wrap > .content,
body.single-post .page_content_wrap .post_item_single,
body.single-post .page_content_wrap .post_content,
body.single-post .page_content_wrap .post_content_single {
	float: none !important;
	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;
}
body.single-post .entry-content {
	max-width: none;
	width: 100%;
	font: 400 17px/1.8 "Inter", sans-serif;
	color: #334155;
}
body.single-post .entry-content p { margin-bottom: 1.25em; }
body.single-post .entry-content h1,
body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4 {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--dm-secondary);
}
body.single-post .entry-content h2 { margin-top: 1.8em; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; }
body.single-post .entry-content h3 { margin-top: 1.5em; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.35; }
body.single-post .entry-content a { color: var(--dm-primary-strong); }
body.single-post .entry-content img { border-radius: 20px; }

/* 8. HEADER COLOR OVERRIDE */
body.single-post .page_content_wrap .post_header_wrap.with_featured_image .post_header h1.post_title,
body.single-post .page_content_wrap .post_header_wrap.with_featured_image .post_header h1.post_title a {
	color: var(--dm-secondary) !important;
	text-shadow: none !important;
}
body.single-post .page_content_wrap .post_header_wrap.with_featured_image .post_header .post_meta_categories a,
body.single-post .page_content_wrap .post_header_wrap.with_featured_image .post_header .post_meta_categories a * {
	background: var(--dm-tertiary) !important;
	color: var(--dm-secondary) !important;
}
body.single-post .page_content_wrap .post_header_wrap.with_featured_image .post_header .post_meta_other,
body.single-post .page_content_wrap .post_header_wrap.with_featured_image .post_header .post_meta_other *,
body.single-post .page_content_wrap .post_header_wrap.with_featured_image .post_header .post_meta_other a {
	color: var(--dm-neutral) !important;
	opacity: 1 !important;
}
body.single-post .page_content_wrap .post_header_wrap.with_featured_image .post_header .post_meta_other .post_author,
body.single-post .page_content_wrap .post_header_wrap.with_featured_image .post_header .post_meta_other .post_author * {
	color: var(--dm-secondary) !important;
}

/* 9. META AND ARTICLE ALIGNMENT */

body.single-post .post_header .post_meta_other { align-items: center !important; }
body.single-post .post_header .post_meta_other .post_meta_item {
	display: inline-flex !important;
	align-items: center !important;
	height: 44px;
	margin: 0 !important;
	padding: 0 !important;
}
body.single-post .post_header .post_meta_other .post_meta_item *,
body.single-post .post_header .post_meta_other .post_meta_item a,
body.single-post .post_header .post_meta_other .post_meta_item span {
	display: inline-flex;
	align-items: center;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	line-height: 1.4 !important;
	vertical-align: middle;
}
body.single-post .post_header .post_meta_other .post_meta_item img { margin-right: 10px !important; }
body.single-post .post_header .post_meta_other .post_meta_item::before,
body.single-post .post_header .post_meta_other .post_meta_item::after {
	align-self: center;
	position: static !important;
	top: auto !important;
	transform: none !important;
	line-height: 1 !important;
}

body.single-post .post_header .post_meta_other .post_author .post_author_avatar { margin: 0 !important; }
body.single-post .page_content_wrap .post_header_wrap .post_header .post_meta_other .post_author .post_author_by {
	margin: 0 10px 0 0 !important;
	color: var(--dm-neutral) !important;
	font: 500 13px/1.4 "Space Grotesk", sans-serif !important;
	letter-spacing: .08em;
	text-transform: uppercase !important;
}
body.single-post .page_content_wrap .post_header_wrap .post_header .post_meta_other .post_author .post_author_name {
	color: var(--dm-neutral) !important;
	font-size: 13px !important;
	letter-spacing: .08em;
}

body.single-post .entry-content > *,
body.single-post .entry-content .alignwide,
body.single-post .entry-content .alignfull,
body.single-post .entry-content .wp-block-gallery,
body.single-post .entry-content .wp-block-image {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	box-sizing: border-box;
}
body.single-post .entry-content .wp-block-gallery { gap: 20px; }
body.single-post .entry-content .wp-block-gallery .wp-block-image { flex: 1 1 0; width: auto !important; margin: 0 !important; }
body.single-post .entry-content .wp-block-gallery img { width: 100%; height: 100%; object-fit: cover; }

/* 10. RESPONSIVE (<= 760px) */
@media (max-width: 760px) {
	body.single-post .post_header_wrap { padding: 32px 0 28px !important; }
	body.single-post .post_header_wrap .post_featured {
		aspect-ratio: 4 / 3;
		margin-top: 24px !important;
		border-radius: 20px 56px 20px 20px !important;
	}

	body.single-post .post_header .post_title {
		font-size: 26px !important;
		line-height: 1.3 !important;
		letter-spacing: -.01em;
		padding: 0 8px !important;
	}

	body.single-post .post_header .post_meta_other { gap: 6px 10px; font-size: 14px !important; }
	body.single-post .post_header .post_meta_other img { width: 36px !important; height: 36px !important; }
	body.single-post .post_header .post_meta_other .post_meta_item { height: 36px; }

	body.single-post .entry-content { font-size: 16px; line-height: 1.75; }
}