/* =========================================================
   KARMA SINGLE BLOG
   ========================================================= */

.karma-single-blog {

	--karma-heading: #0F172A;
	--karma-paragraph: #475569;
	--karma-hover: #1D4ED8;

	width: 100%;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.karma-blog-container {

	width: 100%;
	max-width: 1280px;

	margin-left: auto;
	margin-right: auto;

	padding: 70px 30px 80px;

	box-sizing: border-box;
}


/* =========================================================
   BLOG LAYOUT
   ========================================================= */

.karma-blog-layout {

	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		300px;

	gap: 34px;

	align-items: start;
}


/* =========================================================
   ARTICLE
   ========================================================= */

.karma-blog-article {

	min-width: 0;

	width: 100%;
}


/* =========================================================
   FEATURED IMAGE
   ========================================================= */

.karma-blog-featured-image {

	display: block;

	width: 100%;

	margin: 0 0 28px;

	overflow: hidden;

	border-radius: 12px;

	aspect-ratio: 16 / 9;

	background: #f1f5f9;
}

.karma-blog-featured-image__img {

	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	border-radius: 12px;
}


/* =========================================================
   META
   ========================================================= */

.karma-blog-meta {

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	gap: 8px 16px;

	margin-bottom: 28px;

	font-family: "Inter", sans-serif;

	font-size: 14px;

	line-height: 1.5;

	color: #475569;
}

.karma-blog-meta__item {

	display: inline-flex;

	align-items: center;

	color: #475569;
}

.karma-blog-meta__separator {

	color: #64748b;

	line-height: 1;
}


/* =========================================================
   TABLE OF CONTENTS
   ========================================================= */

.karma-blog-toc {

	width: 100%;

	margin: 0 0 35px;

	background: #f1f4ff;

	border: 1px solid #1D4ED8;

	border-radius: 15px;

	overflow: hidden;

	box-sizing: border-box;

	transition:
		border-radius 0.3s ease,
		box-shadow 0.3s ease;
}


/* =========================================================
   TOC TOGGLE
   ========================================================= */

.karma-blog-toc-toggle {

	display: flex;

	align-items: center;

	width: 100%;

	min-height: 62px;

	padding: 12px 18px;

	margin: 0;

	border: 0;

	background: transparent !important;

	color: #0F172A !important;

	cursor: pointer;

	text-align: left;

	box-shadow: none !important;

	appearance: none;

	gap: 14px;

	font-family: "Plus Jakarta Sans", Sans-serif;

	transition: background-color 0.25s ease;
}

.karma-blog-toc-toggle:hover,
.karma-blog-toc-toggle:focus,
.karma-blog-toc-toggle:active {

	background: rgba(255, 255, 255, 0.18) !important;

	color: #0F172A !important;

	box-shadow: none !important;

	outline: none !important;
}


/* =========================================================
   LEFT MENU ICON BOX
   ========================================================= */

.karma-blog-toc-toggle__icon {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 32px;

	height: 32px;

	flex: 0 0 32px;

	border-radius: 7px;

	background: #ffffff;

	box-sizing: border-box;
}


/* =========================================================
   LEFT MENU ICON
   ========================================================= */

.karma-blog-toc-toggle__menu-icon {

	display: block;

	width: 18px;

	height: 18px;

	object-fit: contain;

	object-position: center;
}


/* =========================================================
   TOC TITLE
   ========================================================= */

.karma-blog-toc-toggle__title {

	flex: 1;

	min-width: 0;

	font-family: "Plus Jakarta Sans", Sans-serif;

	font-size: 16px;

	font-weight: 700;

	line-height: 1.4;

	color: #0F172A !important;
}


/* =========================================================
   RIGHT ARROW WRAPPER
   ========================================================= */

.karma-blog-toc-toggle__arrow {

	position: relative;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 24px;

	height: 24px;

	flex: 0 0 24px;

	margin-left: auto;
}


/* =========================================================
   RIGHT ARROW ICONS
   ========================================================= */

.karma-blog-toc-toggle__arrow-icon {

	position: absolute;

	top: 50%;

	left: 50%;

	display: block;

	width: 18px;

	height: 18px;

	object-fit: contain;

	transform: translate(-50%, -50%);

	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
}


/* Closed arrow visible */

.karma-blog-toc-toggle__arrow-icon--closed {

	opacity: 1;

	visibility: visible;
}


/* Open arrow hidden */

.karma-blog-toc-toggle__arrow-icon--open {

	opacity: 0;

	visibility: hidden;
}


/* =========================================================
   OPEN STATE — ARROW
   ========================================================= */

.karma-blog-toc.is-open
.karma-blog-toc-toggle__arrow-icon--closed {

	opacity: 0;

	visibility: hidden;

	transform: translate(-50%, -50%) rotate(-15deg);
}

.karma-blog-toc.is-open
.karma-blog-toc-toggle__arrow-icon--open {

	opacity: 1;

	visibility: visible;

	transform: translate(-50%, -50%) rotate(0);
}


/* =========================================================
   OPEN STATE — HEADER BORDER
   ========================================================= */

.karma-blog-toc.is-open
.karma-blog-toc-toggle {

	border-bottom: 1px solid rgba(37, 99, 235, 0.18);
}


/* =========================================================
   TOC CONTENT
   ========================================================= */

.karma-blog-toc-content {

	height: 0;

	overflow: hidden;

	opacity: 0;

	visibility: hidden;

	transition:
		height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.25s ease,
		visibility 0s linear 0.4s;
}


/* JS adds this state while opening */

.karma-blog-toc.is-open
.karma-blog-toc-content {

	opacity: 1;

	visibility: visible;

	transition:
		height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.3s ease;
}


/* =========================================================
   TOC INNER CONTENT
   ========================================================= */

.karma-blog-toc-content__inner {

	padding: 22px 24px 24px;
}


/* =========================================================
   TOC LIST
   ========================================================= */

.karma-blog-toc-list {

	margin: 0;

	padding: 0;

	list-style: none;

	font-family: "Inter", sans-serif;
}

.karma-blog-toc-list li {

	margin: 0;

	padding: 0;

	list-style: none;
}


/* =========================================================
   TOC LINKS
   ========================================================= */

.karma-blog-toc-list li a {

	display: block;

	padding-top: 5px;

	padding-bottom: 5px;

	color: #475569 !important;

	text-decoration: none !important;

	font-family: "Inter", sans-serif;

	font-size: 15px;

	font-weight: 500;

	line-height: 1.5;

	transition:
		color 0.2s ease,
		transform 0.2s ease;
}

.karma-blog-toc-list li a:hover {

	color: #1D4ED8 !important;

	text-decoration: none !important;
}


/* =========================================================
   TOC HIERARCHY
   ========================================================= */

.karma-blog-toc-item--level-1 a {

	padding-left: 0;

	color: #0F172A !important;

	font-family: "Plus Jakarta Sans", Sans-serif;

	font-weight: 700;

	font-size: 16px;
}

.karma-blog-toc-item--level-2 a {

	padding-left: 22px;
}

.karma-blog-toc-item--level-3 a {

	padding-left: 44px;
}

.karma-blog-toc-item--level-4 a {

	padding-left: 66px;
}

.karma-blog-toc-item--level-5 a {

	padding-left: 88px;
}

.karma-blog-toc-item--level-6 a {

	padding-left: 110px;
}


/* =========================================================
   ARTICLE CONTENT
   ========================================================= */

.karma-blog-content {

	width: 100%;

	font-family: "Inter", sans-serif;

	color: #475569;
}

.karma-blog-content p {

	margin-top: 0;

	margin-bottom: 22px;

	font-family: "Inter", sans-serif;

	font-size: 16px;

	line-height: 1.8;

	color: #475569 !important;
}


/* =========================================================
   ARTICLE HEADINGS
   ========================================================= */

.karma-blog-content h1,
.karma-blog-content h2,
.karma-blog-content h3,
.karma-blog-content h4,
.karma-blog-content h5,
.karma-blog-content h6 {

	font-family: "Plus Jakarta Sans", Sans-serif;

	color: #0F172A !important;

	font-weight: 700;

	line-height: 1.3;
	
	scroll-margin-top: 110px;
}

.karma-blog-content h1 {

	font-size: 34px;

	margin-top: 35px;

	margin-bottom: 18px;
}

.karma-blog-content h2 {

	font-size: 30px;

	margin-top: 38px;

	margin-bottom: 17px;
}

.karma-blog-content h3 {

	font-size: 25px;

	margin-top: 32px;

	margin-bottom: 15px;
}

.karma-blog-content h4 {

	font-size: 21px;

	margin-top: 28px;

	margin-bottom: 13px;
}

.karma-blog-content h5 {

	font-size: 18px;

	margin-top: 24px;

	margin-bottom: 11px;
}

.karma-blog-content h6 {

	font-size: 16px;

	margin-top: 20px;

	margin-bottom: 10px;
}


/* =========================================================
   ARTICLE LINKS
   ========================================================= */

.karma-blog-content a {

	color: #1D4ED8;

	text-decoration: underline;

	text-decoration-thickness: 1px;

	text-underline-offset: 2px;
}

.karma-blog-content a:hover {

	color: #0F172A;
}


/* =========================================================
   ARTICLE LISTS
   ========================================================= */

.karma-blog-content ul,
.karma-blog-content ol {

	margin-top: 0;

	margin-bottom: 24px;

	padding-left: 25px;

	font-family: "Inter", sans-serif;

	color: #475569;
}

.karma-blog-content li {

	margin-bottom: 8px;

	line-height: 1.7;
}


/* =========================================================
   BLOCKQUOTE
   ========================================================= */

.karma-blog-content blockquote {

	margin: 30px 0;

	padding: 20px 24px;

	border-left: 4px solid #2563eb;

	background: #f1f4ff;

	border-radius: 0 10px 10px 0;

	font-family: "Inter", sans-serif;

	color: #475569;
}


/* =========================================================
   ARTICLE IMAGES
   ========================================================= */

.karma-blog-content img {

	max-width: 100%;

	height: auto;

	border-radius: 10px;
}


/* =========================================================
   TABLES
   ========================================================= */

.karma-blog-content table {

	width: 100%;

	border-collapse: collapse;

	margin: 30px 0;

	font-family: "Inter", sans-serif;
}

.karma-blog-content th,
.karma-blog-content td {

	padding: 12px 14px;

	border: 1px solid #e2e8f0;

	text-align: left;
}

.karma-blog-content th {

	font-family: "Plus Jakarta Sans", Sans-serif;

	color: #0F172A;

	background: #f8fafc;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.karma-blog-sidebar {

	min-width: 0;

	width: 100%;

	position: sticky;

	top: 100px;

	align-self: start;
}

.karma-blog-sidebar__section {

	width: 100%;

	margin: 0 0 28px;

	padding: 24px;

	box-sizing: border-box;

	background: #ffffff;

	border: 1px solid #dbe3ef;

	border-radius: 12px;

	box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}


/* =========================================================
   SIDEBAR SEARCH
   ========================================================= */

.karma-blog-sidebar__search {

	padding: 24px;
}

.karma-blog-sidebar__search-form {

	width: 100%;

	margin: 0;
}

.karma-blog-sidebar__search-row {

	display: flex;

	align-items: center;

	width: 100%;

	gap: 10px;
}

.karma-blog-sidebar__search-input {

	flex: 1;

	min-width: 0;

	width: 100%;

	height: 44px;

	padding: 0 14px;

	box-sizing: border-box;

	border: 1px solid #cbd5e1 !important;

	border-radius: 4px !important;

	background: #ffffff !important;

	color: #0F172A !important;

	font-family: "Inter", sans-serif;

	font-size: 14px;

	outline: none !important;

	box-shadow: none !important;
}

.karma-blog-sidebar__search-input::placeholder {

	color: #94a3b8;

	opacity: 1;
}

.karma-blog-sidebar__search-input:focus {

	border-color: #2563eb !important;

	box-shadow:
		0 0 0 2px rgba(37, 99, 235, 0.08) !important;
}

.karma-blog-sidebar__search-button {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 44px;

	height: 44px;

	flex: 0 0 44px;

	padding: 0;

	margin: 0;

	border: 0 !important;

	border-radius: 7px !important;

	background:
		linear-gradient(
			135deg,
			#38bdf8,
			#2563eb 55%,
			#4338ca
		) !important;

	cursor: pointer;

	appearance: none;
}

.karma-blog-sidebar__search-button:hover {

	transform: translateY(-1px);
}

.karma-blog-sidebar__search-icon {

	display: block;

	width: 20px;

	height: 20px;

	object-fit: contain;
}


/* =========================================================
   SIDEBAR TITLES
   ========================================================= */

.karma-blog-sidebar__title {

	margin: 0 0 20px;

	padding: 0;

	font-family: "Plus Jakarta Sans", Sans-serif;

	font-size: 20px;

	font-weight: 700;

	line-height: 1.3;

	color: #0F172A !important;
}


/* =========================================================
   CATEGORIES
   ========================================================= */

.karma-blog-sidebar__category-list {

	display: flex;

	flex-direction: column;

	width: 100%;

	margin: 0;

	padding: 0;

	list-style: none;
}

.karma-blog-sidebar__category-item {

	width: 100%;

	margin: 0;

	padding: 0;
}

.karma-blog-sidebar__category-link {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 15px;

	width: 100%;

	min-height: 42px;

	padding: 6px 0;

	box-sizing: border-box;

	color: #334155 !important;

	text-decoration: none !important;

	font-family: "Inter", sans-serif;

	font-size: 15px;

	font-weight: 500;

	border-radius: 8px;

	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		padding 0.2s ease;
}

.karma-blog-sidebar__category-link:hover {

	color: #1D4ED8 !important;

	background: #f8faff;

	padding-left: 8px;

	padding-right: 8px;
}

.karma-blog-sidebar__category-name {

	display: block;

	min-width: 0;

	color: inherit !important;
}

.karma-blog-sidebar__category-count {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-width: 38px;

	height: 30px;

	padding: 0 9px;

	flex: 0 0 auto;

	box-sizing: border-box;

	border-radius: 999px;

	background: #eef4ff;

	color: #64748b !important;

	font-size: 13px;

	font-weight: 600;
}

.karma-blog-sidebar__category-link:hover
.karma-blog-sidebar__category-count {

	background: #dbeafe;

	color: #1D4ED8 !important;
}


/* =========================================================
   RECENT POSTS
   ========================================================= */

.karma-blog-sidebar__recent-list {

	display: flex;

	flex-direction: column;

	gap: 20px;
}

.karma-blog-sidebar__recent-item {

	display: grid;

	grid-template-columns: 75px minmax(0, 1fr);

	gap: 12px;

	align-items: start;
}

.karma-blog-sidebar__recent-image-link {

	display: block;

	width: 75px;

	height: 58px;

	overflow: hidden;

	border-radius: 7px;
}

.karma-blog-sidebar__recent-image {

	display: block;

	width: 100%;

	height: 100%;

	object-fit: cover;

	border-radius: 7px;
}

.karma-blog-sidebar__recent-content {

	min-width: 0;
}

.karma-blog-sidebar__recent-title {

	margin: 0 0 6px;

	font-family: "Plus Jakarta Sans", Sans-serif;

	font-size: 14px;

	font-weight: 700;

	line-height: 1.4;
}

.karma-blog-sidebar__recent-title a {

	color: #0F172A !important;

	text-decoration: none !important;
}

.karma-blog-sidebar__recent-title a:hover {

	color: #1D4ED8 !important;
}

.karma-blog-sidebar__recent-date {

	display: block;

	font-family: "Inter", sans-serif;

	font-size: 12px;

	color: #94a3b8;
}


/* =========================================================
   RELATED POSTS
   ========================================================= */

.karma-related-posts {

	width: 100%;

	padding: 40px 0 0;
}

.karma-related-container {

	width: 100%;

	margin-left: auto;
	margin-right: auto;

	box-sizing: border-box;
}

.karma-related-header {

	margin-bottom: 30px;
}

.karma-related-heading {

	margin: 0;

	font-family: "Plus Jakarta Sans", Sans-serif;

	font-size: 30px;

	line-height: 1.3;

	color: #0F172A !important;
}

.karma-related-grid {

	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 24px;
}

.karma-related-card {

	overflow: hidden;

	background: #ffffff;

	border: 1px solid #e2e8f0;

	border-radius: 12px;

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.karma-related-card:hover {

	transform: translateY(-4px);

	box-shadow:
		0 14px 30px rgba(15, 23, 42, 0.08);
}

.karma-related-image-link {

	display: block;

	width: 100%;
}

.karma-related-image {

	display: block;

	width: 100%;

	aspect-ratio: 16 / 9;

	object-fit: cover;
}

.karma-related-image-placeholder {

	background: #eef2ff;
}

.karma-related-content {

	padding: 20px;
}

.karma-related-card-title {

	margin: 0 0 10px;

	font-family: "Plus Jakarta Sans", Sans-serif;

	font-size: 18px;

	line-height: 1.4;
}

.karma-related-card-title a {

	color: #0F172A !important;

	text-decoration: none !important;
}

.karma-related-card-title a:hover {

	color: #1D4ED8 !important;
}

.karma-related-date {

	font-family: "Inter", sans-serif;

	font-size: 13px;

	color: #94a3b8;
}


/* =========================================================
   FAQ
   ========================================================= */

.karma-blog-faq {

	margin-top: 45px;
}


/* =========================================================
   COMMENTS
   ========================================================= */

.karma-blog-comments {

	width: 100%;

	max-width: 1280px;

	margin: 0 auto;

	padding: 0 30px 70px;

	box-sizing: border-box;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.karma-blog-pagination {

	margin-top: 35px;
}

.karma-blog-pagination a {

	color: #1D4ED8;
}


/* =========================================================
   TAGS
   ========================================================= */

.karma-blog-tags {

	margin-top: 30px;

	font-family: "Inter", sans-serif;

	color: #475569;
}

.karma-blog-tags a {

	color: #1D4ED8;

	text-decoration: none;
}


/* =========================================================
   SCREEN READER
   ========================================================= */

.screen-reader-text {

	position: absolute !important;

	width: 1px !important;

	height: 1px !important;

	padding: 0 !important;

	margin: -1px !important;

	overflow: hidden !important;

	clip: rect(0, 0, 0, 0) !important;

	white-space: nowrap !important;

	border: 0 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

	.karma-blog-layout {

		grid-template-columns:
			minmax(0, 1fr)
			280px;

		gap: 25px;
	}

	.karma-blog-sidebar {

		position: static;
	}

	.karma-related-grid {

		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
	
	.karma-blog-content h1,
.karma-blog-content h2,
.karma-blog-content h3,
.karma-blog-content h4,
.karma-blog-content h5,
.karma-blog-content h6 {

	scroll-margin-top: 300px;
}

	.karma-blog-container {

		padding: 50px 15px 60px;
	}

	.karma-blog-layout {

		grid-template-columns: 1fr;

		gap: 45px;
	}

	.karma-blog-sidebar {

		position: static;

		width: 100%;
	}

	.karma-blog-meta {

		gap: 8px 12px;

		font-size: 13px;
	}

	.karma-blog-featured-image {

		margin-bottom: 22px;

		border-radius: 10px;
	}

	.karma-blog-featured-image__img {

		border-radius: 10px;
	}

	.karma-blog-content h1 {

		font-size: 28px;
	}

	.karma-blog-content h2 {

		font-size: 25px;
	}

	.karma-blog-content h3 {

		font-size: 22px;
	}

	.karma-blog-content h4 {

		font-size: 19px;
	}

	.karma-blog-content h5 {

		font-size: 17px;
	}

	.karma-blog-content h6 {

		font-size: 16px;
	}


	/* TOC */

	.karma-blog-toc-toggle {

		min-height: 58px;

		padding: 10px 14px;

		gap: 12px;
	}

	.karma-blog-toc-toggle__icon {

		width: 30px;

		height: 30px;

		flex-basis: 30px;
	}

	.karma-blog-toc-toggle__title {

		font-size: 15px;
	}

	.karma-blog-toc-content__inner {

		padding: 18px 16px 20px;
	}

	.karma-blog-toc-list li a {

		font-size: 14px;
	}

	.karma-blog-toc-item--level-2 a {

		padding-left: 16px;
	}

	.karma-blog-toc-item--level-3 a {

		padding-left: 32px;
	}

	.karma-blog-toc-item--level-4 a {

		padding-left: 48px;
	}

	.karma-blog-toc-item--level-5 a {

		padding-left: 64px;
	}

	.karma-blog-toc-item--level-6 a {

		padding-left: 80px;
	}


	/* Sidebar */

	.karma-blog-sidebar__section {

		padding: 20px;

		margin-bottom: 22px;
	}

	.karma-blog-sidebar__search {

		padding: 20px;
	}

	.karma-blog-sidebar__title {

		font-size: 19px;
	}


	/* Related */

	.karma-related-grid {

		grid-template-columns: 1fr;

		gap: 20px;
	}

	.karma-related-heading {

		font-size: 26px;
	}


	/* Comments */

	.karma-blog-comments {

		padding-left: 15px;

		padding-right: 15px;

		padding-bottom: 55px;
	}
}