/*
 * Final article typography layer.
 *
 * Blog posts come from several generations of editors and most of the older
 * HTML contains inline font, size, colour and spacing declarations. Keeping
 * these rules in a detail-page-only stylesheet, loaded after case-detail.css,
 * gives every article the same visual system as the microfinance reference
 * post without changing the blog index, case studies, or the stored content.
 */

.blog-post-template {
	--blog-body-color: #333333;
	--blog-heading-color: #111827;
	--blog-link-color: #124ee8;
	--blog-muted-color: #5b6472;
	--blog-body-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--blog-heading-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.blog-post-template .post-full-title {
	margin: 0;
	color: #090a0b;
	font-family: var(--blog-heading-font);
	font-size: 40px;
	font-weight: 400 !important;
	letter-spacing: -0.5px;
	line-height: 1.15;
	text-align: left;
}

.blog-post-template .post-detail-meta {
	margin: 12px 0 20px;
	color: var(--blog-muted-color);
	font-family: var(--blog-body-font);
	font-size: 15px;
	line-height: 1.5;
}

.blog-post-template .blog-content {
	width: 65%;
}

.blog-post-template .blog-article-body {
	color: var(--blog-body-color) !important;
	font-family: var(--blog-body-font) !important;
	font-size: 18px !important;
	font-weight: 400;
	letter-spacing: normal !important;
	line-height: 1.6 !important;
	text-align: justify !important;
	word-spacing: normal !important;
}

/* Semantic headings used by current posts. */
.blog-post-template .blog-article-body h1,
.blog-post-template .blog-article-body h2 {
	margin: 40px 0 16px !important;
	color: var(--blog-heading-color) !important;
	font-family: var(--blog-heading-font) !important;
	font-size: 30px !important;
	font-weight: 400 !important;
	letter-spacing: -0.4px !important;
	line-height: 1.3 !important;
	text-align: left !important;
}

.blog-post-template .blog-article-body h3 {
	margin: 32px 0 14px !important;
	color: var(--blog-heading-color) !important;
	font-family: var(--blog-heading-font) !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	letter-spacing: -0.3px !important;
	line-height: 1.3 !important;
	text-align: left !important;
}

.blog-post-template .blog-article-body h4,
.blog-post-template .blog-article-body h5,
.blog-post-template .blog-article-body h6 {
	margin: 28px 0 12px !important;
	color: var(--blog-heading-color) !important;
	font-family: var(--blog-heading-font) !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	letter-spacing: -0.2px !important;
	line-height: 1.35 !important;
	text-align: left !important;
}

.blog-post-template .blog-article-body h1 *,
.blog-post-template .blog-article-body h2 *,
.blog-post-template .blog-article-body h3 *,
.blog-post-template .blog-article-body h4 *,
.blog-post-template .blog-article-body h5 *,
.blog-post-template .blog-article-body h6 * {
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	letter-spacing: inherit !important;
	line-height: inherit !important;
}

/* Body copy and editor-generated presentation wrappers. */
.blog-post-template .blog-article-body p,
.blog-post-template .blog-article-body li,
.blog-post-template .blog-article-body blockquote,
.blog-post-template .blog-article-body td,
.blog-post-template .blog-article-body th {
	color: var(--blog-body-color) !important;
	font-family: inherit !important;
	font-size: 18px !important;
	letter-spacing: normal !important;
	line-height: 1.6 !important;
	text-align: inherit !important;
	word-spacing: normal !important;
}

.blog-post-template .blog-article-body p,
.blog-post-template .blog-article-body li,
.blog-post-template .blog-article-body blockquote,
.blog-post-template .blog-article-body td {
	font-weight: 400 !important;
}

.blog-post-template .blog-article-body p {
	margin: 0 0 22px !important;
}

.blog-post-template .blog-article-body p span,
.blog-post-template .blog-article-body li span,
.blog-post-template .blog-article-body blockquote span,
.blog-post-template .blog-article-body td span,
.blog-post-template .blog-article-body th span,
.blog-post-template .blog-article-body p font,
.blog-post-template .blog-article-body li font {
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	letter-spacing: inherit !important;
	line-height: inherit !important;
}

.blog-post-template .blog-article-body strong,
.blog-post-template .blog-article-body b {
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

.blog-post-template .blog-article-body em,
.blog-post-template .blog-article-body i {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

.blog-post-template .blog-article-body a,
.blog-post-template .blog-article-body a * {
	color: var(--blog-link-color) !important;
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

.blog-post-template .blog-article-body a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.blog-post-template .blog-article-body h1 a,
.blog-post-template .blog-article-body h2 a,
.blog-post-template .blog-article-body h3 a,
.blog-post-template .blog-article-body h4 a,
.blog-post-template .blog-article-body h5 a,
.blog-post-template .blog-article-body h6 a {
	color: inherit !important;
}

/* Restore list markers removed by the legacy reset in blog.css. */
.blog-post-template .blog-article-body ul,
.blog-post-template .blog-article-body ol {
	margin: 4px 0 24px 24px !important;
	padding: 0 !important;
}

.blog-post-template .blog-article-body ul {
	list-style: disc outside !important;
}

.blog-post-template .blog-article-body ol {
	list-style: decimal outside !important;
}

.blog-post-template .blog-article-body ul ul {
	list-style-type: circle !important;
}

.blog-post-template .blog-article-body ol ol {
	list-style-type: lower-alpha !important;
}

.blog-post-template .blog-article-body li {
	margin: 8px 0 !important;
	padding-left: 4px;
}

.blog-post-template .blog-article-body blockquote {
	margin: 28px 0 !important;
	padding: 2px 0 2px 22px;
	border-left: 4px solid var(--blog-link-color);
}

.blog-post-template .blog-article-body blockquote p:last-child {
	margin-bottom: 0 !important;
}

.blog-post-template .blog-article-body hr {
	width: 100%;
	margin: 36px 0 !important;
	border: 0;
	border-top: 1px solid #dfe3eb;
}

.blog-post-template .blog-article-body img,
.blog-post-template .blog-article-body video {
	max-width: 100% !important;
	height: auto !important;
}

.blog-post-template .blog-article-body > img,
.blog-post-template .blog-article-body p > img:only-child {
	display: block;
	margin: 28px auto !important;
}

.blog-post-template .blog-inline-cta {
	margin: 36px 0 !important;
}

.blog-post-template .blog-inline-cta a {
	display: block;
	overflow: hidden;
	border-radius: 8px;
}

.blog-post-template .blog-inline-cta a:focus-visible {
	outline: 3px solid var(--blog-link-color);
	outline-offset: 4px;
}

.blog-post-template .blog-inline-cta img {
	display: block;
	width: 100% !important;
	height: auto !important;
}

.post-full-footer #contact-footer-box.blog-footer-cta-composed {
	display: block;
	overflow: hidden;
	padding: 0 !important;
	background: transparent !important;
	border-radius: 8px;
}

.blog-footer-composed-link {
	display: block;
}

.blog-footer-composed-link:focus-visible {
	outline: 3px solid var(--blog-link-color);
	outline-offset: 4px;
}

.post-full-footer #contact-footer-box.blog-footer-cta-composed img {
	display: block;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
}

.blog-post-template .blog-faq-item summary,
.blog-post-template .blog-sidebar-title,
.blog-post-template .text-latest,
.blog-post-template .card-title {
	font-weight: 400 !important;
}

.blog-recommendation-card > a {
	display: block;
	height: 100%;
}

.blog-recommendation-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 50 / 27;
	object-fit: cover;
	border-radius: 4px;
}

.blog-post-template .blog-article-body iframe {
	display: block;
	max-width: 100%;
	margin: 28px 0;
}

.blog-post-template .blog-article-body table {
	display: block;
	max-width: 100%;
	margin: 28px 0;
	overflow-x: auto;
	border-collapse: collapse;
}

.blog-post-template .blog-article-body td,
.blog-post-template .blog-article-body th {
	padding: 12px 14px;
	border: 1px solid #dfe3eb;
	text-align: left !important;
}

.blog-post-template .blog-article-body th {
	color: var(--blog-heading-color) !important;
	font-weight: 600 !important;
}

/* Blank editor paragraphs should not create random gaps between sections. */
.blog-post-template .blog-article-body p:empty,
.blog-post-template .blog-article-body p:has(> br:only-child) {
	display: none;
}

@media (max-width: 1199px) {
	.blog-post-template .blog-content {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.blog-post-template .post-full-title {
		font-size: 29px;
		line-height: 1.2;
	}

	.blog-post-template .post-detail-meta {
		font-size: 14px;
	}

	.blog-post-template .blog-article-body {
		letter-spacing: 0.5px !important;
	}

	.blog-post-template .blog-article-body ul,
	.blog-post-template .blog-article-body ol {
		margin-left: 20px !important;
	}
}