/**
 * Single Blog Page.
 *
 * @package DrSanhithaPurushotham
 */


/* ==================================================
   VARIABLES
================================================== */

.single-blog {
	--blog-navy: #082746;
	--blog-deep: #061a32;
	--blog-gold: #c88c32;
	--blog-gold-soft: #e5bd72;
	--blog-cream: #faf4ea;
	--blog-copy: #526779;
	--blog-border: rgba(181, 136, 65, 0.17);

	position: relative;

	background:
		#fffdf9;

	color:
		var(--blog-navy);

	font-family:
		"Montserrat",
		Arial,
		Helvetica,
		sans-serif;
}


.single-blog *,
.single-blog *::before,
.single-blog *::after {
	box-sizing: border-box;
}


.single-blog__container {
	width:
		min(
			calc(100% - 80px),
			1360px
		);

	margin-inline: auto;
}


/* ==================================================
   HERO
================================================== */

.single-blog__hero {
	position: relative;

	overflow: hidden;

	padding:
		35px
		0
		105px;

	background:
		radial-gradient(
			circle at 75% 15%,
			rgba(255, 255, 255, 1),
			rgba(249, 242, 232, 0.93) 50%,
			#fbf7f0 100%
		);
}


.single-blog__hero-glow {
	position: absolute;

	top: -180px;
	right: -100px;

	width: 650px;
	height: 650px;

	border:
		1px solid
		rgba(200, 140, 50, 0.12);

	border-radius: 50%;

	pointer-events: none;
}


.single-blog__hero-glow::before {
	position: absolute;

	inset: 75px;

	border:
		1px solid
		rgba(200, 140, 50, 0.08);

	border-radius: 50%;

	content: "";
}


/* ==================================================
   BREADCRUMB
================================================== */

.single-blog__breadcrumb {
	display: flex;

	margin-bottom: 54px;

	align-items: center;

	flex-wrap: wrap;

	gap: 9px;

	color: #87939d;

	font-size: 10px;

	line-height: 1.5;
}


.single-blog__breadcrumb a {
	color: inherit;

	text-decoration: none;
}


.single-blog__breadcrumb a:hover {
	color:
		var(--blog-gold);
}


/* ==================================================
   HERO CONTENT
================================================== */

.single-blog__hero-inner {
	position: relative;

	display: grid;

	align-items: center;

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

	gap: 80px;
}


.single-blog__hero-copy {
	max-width: 980px;
}


.single-blog__eyebrow {
	display: flex;

	margin-bottom: 18px;

	align-items: center;

	gap: 11px;
}


.single-blog__eyebrow span {
	width: 35px;
	height: 1px;

	background:
		var(--blog-gold);
}


.single-blog__eyebrow strong {
	color:
		#a66d1a;

	font-size: 9px;
	font-weight: 700;

	letter-spacing: 2.2px;

	text-transform: uppercase;
}


.single-blog__hero h1 {
	max-width: 1000px;

	margin:
		0
		0
		22px;

	color:
		var(--blog-navy);

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size:
		clamp(
			48px,
			5vw,
			76px
		);

	font-weight: 600;

	line-height: 1;

	letter-spacing: -1.6px;
}


.single-blog__excerpt {
	max-width: 850px;

	margin:
		0
		0
		27px;

	color:
		#637483;

	font-size: 13px;

	line-height: 1.85;
}


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

.single-blog__meta {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 15px;
}


.single-blog__meta-item {
	display: flex;

	align-items: center;

	gap: 7px;

	color: #657584;

	font-size: 10px;
}


.single-blog__meta-item .dashicons {
	width: 18px;
	height: 18px;

	color:
		var(--blog-gold);

	font-size: 18px;
}


.single-blog__meta-divider {
	width: 1px;
	height: 17px;

	background:
		rgba(179, 133, 61, 0.25);
}


/* ==================================================
   HERO MARK
================================================== */

.single-blog__hero-mark {
	display: flex;

	width: 150px;
	height: 150px;

	align-items: center;
	justify-content: center;

	border:
		1px solid
		rgba(194, 140, 49, 0.22);

	border-radius:
		50%;

	background:
		rgba(255, 255, 255, 0.55);

	color:
		var(--blog-gold);

	box-shadow:
		0
		15px
		45px
		rgba(89, 63, 26, 0.07);
}


.single-blog__hero-mark .dashicons {
	width: 56px;
	height: 56px;

	font-size: 56px;
}


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

.single-blog__featured-wrap {
	position: relative;

	z-index: 5;

	margin-top: -72px;
}


.single-blog__featured {
	position: relative;

	margin: 0;

	overflow: hidden;

	border:
		8px solid
		#fffdf9;

	border-radius: 24px;

	background:
		#eee8df;

	box-shadow:
		0
		24px
		65px
		rgba(66, 48, 25, 0.13);
}


.single-blog__featured-image {
	display: block;

	width: 100%;
	height: auto;

	max-height: 650px;

	object-fit: cover;
	object-position: center;

	transition:
		transform
		800ms
		cubic-bezier(
			0.22,
			1,
			0.36,
			1
		);
}


@media (hover: hover) and (pointer: fine) {

	.single-blog__featured:hover
	.single-blog__featured-image {
		transform:
			scale(1.015);
	}
}


/* ==================================================
   CONTENT LAYOUT
================================================== */

.single-blog__main {
	padding:
		64px
		0
		80px;
}


.single-blog__layout {
	display: grid;

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

	gap: 55px;

	align-items: stretch;
}


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

.single-blog__article {
	min-width: 0;

	padding:
		40px
		46px
		45px;

	border:
		1px solid
		var(--blog-border);

	border-radius: 20px;

	background:
		#ffffff;

	box-shadow:
		0
		12px
		38px
		rgba(73, 52, 28, 0.045);
}


.single-blog__article-top {
	display: flex;

	margin-bottom: 30px;

	padding-bottom: 20px;

	align-items: center;
	justify-content: space-between;

	border-bottom:
		1px solid
		var(--blog-border);
}


.single-blog__article-label {
	display: flex;

	align-items: center;

	gap: 8px;

	color:
		#a66e1c;

	font-size: 9px;
	font-weight: 700;

	letter-spacing: 1.5px;

	text-transform: uppercase;
}


.single-blog__article-label .dashicons {
	color:
		var(--blog-gold);
}


/* ==================================================
   SHARE BUTTON
================================================== */

.single-blog__share-button {
	display: inline-flex;

	min-height: 38px;

	padding:
		0
		14px;

	align-items: center;
	justify-content: center;

	gap: 7px;

	border:
		1px solid
		rgba(192, 139, 49, 0.25);

	border-radius: 999px;

	background:
		#fffaf3;

	color:
		#a66e1c;

	font-family: inherit;

	font-size: 9px;
	font-weight: 700;

	cursor: pointer;

	transition:
		background-color 220ms ease,
		color 220ms ease,
		transform 220ms ease;
}


.single-blog__share-button:hover {
	background:
		var(--blog-gold);

	color: #ffffff;

	transform:
		translateY(-2px);
}


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

.single-blog__content {
	color:
		var(--blog-copy);

	font-size: 14px;

	line-height: 1.9;
}


.single-blog__content > *:first-child {
	margin-top: 0;
}


.single-blog__content > *:last-child {
	margin-bottom: 0;
}


.single-blog__content p {
	margin:
		0
		0
		22px;
}


.single-blog__content h2 {
	margin:
		42px
		0
		18px;

	color:
		var(--blog-navy);

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size:
		clamp(
			30px,
			3vw,
			38px
		);

	font-weight: 700;

	line-height: 1.12;
}


.single-blog__content h3 {
	margin:
		32px
		0
		14px;

	color:
		#173853;

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size: 26px;
	font-weight: 700;

	line-height: 1.2;
}


.single-blog__content h4 {
	margin:
		27px
		0
		12px;

	color:
		#203e57;

	font-size: 16px;
	font-weight: 700;
}


.single-blog__content strong {
	color:
		#173853;

	font-weight: 700;
}


/* ==================================================
   INTERNAL LINKS
================================================== */

.single-blog__content a,
.single-blog__content a strong {
	color:
		#d2a246 !important;

	font-weight: 600;

	text-decoration: none;

	transition:
		color 200ms ease;
}


.single-blog__content a:hover,
.single-blog__content a:focus-visible,
.single-blog__content a:hover strong {
	color:
		#b57b20 !important;

	text-decoration: underline;

	text-decoration-color:
		#d2a246;

	text-underline-offset: 3px;
}


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

.single-blog__content ul,
.single-blog__content ol {
	display: grid;

	margin:
		20px
		0
		26px;

	padding: 0;

	gap: 10px;

	list-style: none;
}


.single-blog__content li {
	position: relative;

	padding:
		13px
		16px
		13px
		45px;

	border:
		1px solid
		rgba(181, 136, 65, 0.11);

	border-radius: 10px;

	background:
		linear-gradient(
			135deg,
			#fffdf9,
			#fbf5ec
		);
}


.single-blog__content ul li::before {
	position: absolute;

	top: 15px;
	left: 16px;

	display: flex;

	width: 19px;
	height: 19px;

	align-items: center;
	justify-content: center;

	border-radius: 50%;

	background:
		var(--blog-gold);

	color: #ffffff;

	content: "✓";

	font-size: 10px;
	font-weight: 700;
}


.single-blog__content ol {
	counter-reset:
		blog-list;
}


.single-blog__content ol li {
	counter-increment:
		blog-list;
}


.single-blog__content ol li::before {
	position: absolute;

	top: 12px;
	left: 13px;

	display: flex;

	width: 25px;
	height: 25px;

	align-items: center;
	justify-content: center;

	border-radius: 50%;

	background:
		#f3e4cd;

	color:
		#a76d19;

	content:
		counter(blog-list);

	font-size: 9px;
	font-weight: 700;
}


/* ==================================================
   BLOCKQUOTES
================================================== */

.single-blog__content blockquote {
	position: relative;

	margin:
		30px
		0;

	padding:
		27px
		28px
		27px
		62px;

	border:
		1px solid
		rgba(194, 140, 48, 0.18);

	border-left:
		4px solid
		var(--blog-gold);

	border-radius:
		0
		14px
		14px
		0;

	background:
		#faf3e7;

	color:
		#465c6f;

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size: 20px;
	font-style: italic;

	line-height: 1.6;
}


.single-blog__content blockquote::before {
	position: absolute;

	top: 14px;
	left: 20px;

	color:
		var(--blog-gold);

	content: "“";

	font-family:
		Georgia,
		serif;

	font-size: 52px;

	line-height: 1;
}


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

.single-blog__content img {
	display: block;

	max-width: 100%;
	height: auto;

	margin:
		30px
		auto;

	border-radius: 15px;
}


.single-blog__content figure {
	max-width: 100%;

	margin:
		30px
		0;
}


.single-blog__content figcaption {
	margin-top: 8px;

	color: #89949d;

	font-size: 10px;

	text-align: center;
}


/* ==================================================
   TABLE
================================================== */

.single-blog__content .wp-block-table,
.single-blog__content table {
	width: 100%;

	margin:
		28px
		0;

	border-collapse: collapse;

	overflow: hidden;

	border-radius: 12px;
}


.single-blog__content th {
	padding:
		14px;

	background:
		var(--blog-navy);

	color: #ffffff;

	text-align: left;
}


.single-blog__content td {
	padding:
		14px;

	border:
		1px solid
		#eee4d7;

	background:
		#fffdf9;
}


/* ==================================================
   AUTHOR CARD
================================================== */

.single-blog__author-card {
	display: grid;

	margin-top: 48px;

	padding:
		23px;

	align-items: center;

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

	gap: 17px;

	border:
		1px solid
		rgba(184, 139, 62, 0.16);

	border-radius: 15px;

	background:
		linear-gradient(
			135deg,
			#fffaf3,
			#f8eee0
		);
}


.single-blog__author-mark {
	display: flex;

	width: 56px;
	height: 56px;

	align-items: center;
	justify-content: center;

	border-radius: 50%;

	background:
		#f1dfc5;

	color:
		var(--blog-gold);
}


.single-blog__author-mark .dashicons {
	width: 26px;
	height: 26px;

	font-size: 26px;
}


.single-blog__author-copy > span {
	color:
		#a77931;

	font-size: 8px;
	font-weight: 700;

	letter-spacing: 1.3px;

	text-transform: uppercase;
}


.single-blog__author-copy h2 {
	margin:
		4px
		0;

	color:
		var(--blog-navy);

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size: 22px;
}


.single-blog__author-copy p {
	margin: 0;

	color: #70808d;

	font-size: 9px;

	line-height: 1.6;
}


.single-blog__author-button {
	display: inline-flex;

	min-height: 44px;

	padding:
		0
		17px;

	align-items: center;
	justify-content: center;

	border-radius: 8px;

	background:
		var(--blog-navy);

	color: #ffffff;

	font-size: 9px;
	font-weight: 700;

	text-decoration: none;

	white-space: nowrap;
}


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

.single-blog__sidebar {
	position: relative;

	height: 100%;

	align-self: stretch;

	overflow: visible;
}


.single-blog__sticky {
	position: sticky;

	top: 125px;

	display: grid;

	gap: 20px;
}


/* ==================================================
   APPOINTMENT CARD
================================================== */

.single-blog__appointment-card {
	position: relative;

	padding:
		28px;

	overflow: hidden;

	border-radius: 20px;

	background:
		linear-gradient(
			145deg,
			#082746,
			#06182e
		);

	color: #ffffff;

	box-shadow:
		0
		20px
		50px
		rgba(6, 26, 49, 0.18);
}


.single-blog__appointment-card::before {
	position: absolute;

	top: -90px;
	right: -80px;

	width: 230px;
	height: 230px;

	border:
		1px solid
		rgba(226, 184, 97, 0.20);

	border-radius: 50%;

	content: "";
}


.single-blog__appointment-icon {
	display: flex;

	width: 48px;
	height: 48px;

	margin-bottom: 20px;

	align-items: center;
	justify-content: center;

	border-radius: 50%;

	background:
		rgba(221, 174, 85, 0.15);

	color:
		#e0ae54;
}


.single-blog__appointment-eyebrow {
	display: block;

	margin-bottom: 7px;

	color:
		#e2b969;

	font-size: 8px;
	font-weight: 700;

	letter-spacing: 1.8px;

	text-transform: uppercase;
}


.single-blog__appointment-card h2 {
	margin:
		0
		0
		10px;

	color: #ffffff;

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size: 29px;
	font-weight: 600;

	line-height: 1.05;
}


.single-blog__appointment-card p {
	margin:
		0
		0
		22px;

	color:
		rgba(255, 255, 255, 0.70);

	font-size: 10px;

	line-height: 1.7;
}


.single-blog__appointment-button {
	position: relative;

	z-index: 2;

	display: grid;

	min-height: 54px;

	padding:
		0
		10px
		0
		16px;

	align-items: center;

	grid-template-columns:
		24px
		1fr
		35px;

	gap: 8px;

	border-radius: 9px;

	background:
		linear-gradient(
			135deg,
			#e1b55c,
			#c8892f
		);

	color:
		#09213b;

	text-decoration: none;
}


.single-blog__appointment-button strong {
	font-size: 10px;
}


.single-blog__appointment-button svg {
	width: 34px;
	height: 34px;

	padding: 8px;

	border-radius: 50%;

	background:
		#fff6e6;
}


/* ==================================================
   CONTENTS CARD
================================================== */

.single-blog__contents-card {
	padding:
		23px;

	border:
		1px solid
		var(--blog-border);

	border-radius: 17px;

	background:
		#ffffff;

	box-shadow:
		0
		11px
		30px
		rgba(70, 52, 29, 0.055);
}


.single-blog__contents-heading {
	display: flex;

	margin-bottom: 18px;

	align-items: center;

	gap: 10px;
}


.single-blog__contents-heading .dashicons {
	color:
		var(--blog-gold);
}


.single-blog__contents-heading h2 {
	margin: 0;

	color:
		var(--blog-navy);

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size: 20px;
}


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

.single-blog__toc {
	display: grid;

	gap: 5px;
}


.single-blog__toc:empty::after {
	color: #88949d;

	content:
		"Article sections will appear here.";

	font-size: 9px;
}


.single-blog__toc a {
	position: relative;

	display: block;

	padding:
		9px
		10px
		9px
		20px;

	border-radius: 7px;

	color: #566b7c;

	font-size: 9px;

	line-height: 1.4;

	text-decoration: none;

	transition:
		background-color 200ms ease,
		color 200ms ease,
		transform 200ms ease;
}


.single-blog__toc a::before {
	position: absolute;

	top: 50%;
	left: 7px;

	width: 5px;
	height: 5px;

	border-radius: 50%;

	background:
		var(--blog-gold);

	content: "";

	transform:
		translateY(-50%);
}


.single-blog__toc a:hover,
.single-blog__toc a.is-active {
	background:
		#faf2e5;

	color:
		var(--blog-navy);

	transform:
		translateX(2px);
}


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

.single-blog__related {
	padding:
		68px
		0
		90px;

	background:
		#faf5ed;
}


.single-blog__related-header {
	margin-bottom: 30px;

	text-align: center;
}


.single-blog__related-header > span {
	color:
		#a8701e;

	font-size: 8px;
	font-weight: 700;

	letter-spacing: 2px;

	text-transform: uppercase;
}


.single-blog__related-header h2 {
	margin:
		7px
		0
		0;

	color:
		var(--blog-navy);

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size: 38px;
}


.single-blog__related-grid {
	display: grid;

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

	gap: 22px;
}


.single-blog__related-card {
	overflow: hidden;

	border:
		1px solid
		var(--blog-border);

	border-radius: 17px;

	background:
		#ffffff;

	box-shadow:
		0
		10px
		28px
		rgba(67, 48, 25, 0.055);

	transition:
		transform 300ms ease,
		box-shadow 300ms ease;
}


@media (hover: hover) and (pointer: fine) {

	.single-blog__related-card:hover {
		box-shadow:
			0
			20px
			45px
			rgba(67, 48, 25, 0.10);

		transform:
			translateY(-6px);
	}
}


.single-blog__related-image {
	display: block;

	height: 210px;

	overflow: hidden;

	background:
		#eee7dd;
}


.single-blog__related-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 550ms ease;
}


.single-blog__related-card:hover
.single-blog__related-image img {
	transform:
		scale(1.045);
}


.single-blog__related-content {
	padding:
		20px;
}


.single-blog__related-content > span {
	color:
		#a77a32;

	font-size: 8px;

	text-transform: uppercase;
}


.single-blog__related-content h3 {
	margin:
		7px
		0
		16px;

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size: 22px;

	line-height: 1.15;
}


.single-blog__related-content h3 a {
	color:
		var(--blog-navy);

	text-decoration: none;
}


.single-blog__read-more {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	color:
		#a76e1b;

	font-size: 9px;
	font-weight: 700;

	text-decoration: none;
}


/* ==================================================
   REVEAL
================================================== */

.js
.single-blog
.blog-reveal {
	opacity: 0;

	transform:
		translateY(28px);

	transition:
		opacity
		700ms ease,
		transform
		850ms
		cubic-bezier(
			0.22,
			1,
			0.36,
			1
		);
}


.js
.single-blog
.blog-reveal.is-visible {
	opacity: 1;

	transform:
		translateY(0);
}


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

@media screen and (max-width: 1100px) {

	.single-blog__container {
		width:
			calc(100% - 50px);
	}


	.single-blog__layout {
		grid-template-columns:
			minmax(0, 1fr)
			285px;

		gap: 32px;
	}


	.single-blog__article {
		padding:
			34px
			32px
			38px;
	}


	.single-blog__related-grid {
		gap: 16px;
	}

}


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

@media screen and (max-width: 800px) {

	.single-blog__container {
		width:
			calc(100% - 30px);
	}


	.single-blog__hero {
		padding:
			24px
			0
			75px;
	}


	.single-blog__breadcrumb {
		margin-bottom: 35px;
	}


	.single-blog__hero-inner {
		display: block;
	}


	.single-blog__hero-mark {
		display: none;
	}


	.single-blog__hero h1 {
		font-size: 45px;
	}


	.single-blog__excerpt {
		font-size: 12px;
	}


	.single-blog__meta-divider {
		display: none;
	}


	.single-blog__meta {
		gap:
			12px
			20px;
	}


	.single-blog__featured-wrap {
		margin-top: -45px;
	}


	.single-blog__featured {
		border-width: 5px;

		border-radius: 16px;
	}


	/*
	 * IMPORTANT:
	 * Mobile image uses natural height.
	 * It will not be cropped.
	 */
	.single-blog__featured-image {
		width: 100%;
		height: auto;

		max-height: none;

		object-fit: contain;
	}


	.single-blog__main {
		padding-top: 38px;
	}


	.single-blog__layout {
		display: flex;

		flex-direction: column;

		gap: 28px;
	}


	.single-blog__article {
		padding:
			28px
			20px
			30px;

		border-radius: 15px;
	}


	.single-blog__content {
		font-size: 13px;

		line-height: 1.85;
	}


	.single-blog__content h2 {
		margin-top: 34px;

		font-size: 31px;
	}


	.single-blog__content h3 {
		font-size: 24px;
	}


	.single-blog__author-card {
		grid-template-columns:
			52px
			1fr;

		padding: 18px;
	}


	.single-blog__author-button {
		grid-column:
			1 / -1;

		width: 100%;
	}


	.single-blog__sidebar {
		height: auto;
	}


	.single-blog__sticky {
		position: relative;

		top: auto;
	}


	.single-blog__related {
		padding:
			50px
			0
			60px;
	}


	.single-blog__related-grid {
		grid-template-columns: 1fr;
	}


	.single-blog__related-image {
		height: 225px;
	}

}


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

@media screen and (max-width: 480px) {

	.single-blog__container {
		width:
			calc(100% - 24px);
	}


	.single-blog__hero h1 {
		font-size: 39px;
	}


	.single-blog__article {
		padding:
			24px
			16px
			27px;
	}


	.single-blog__article-top {
		align-items: flex-start;
	}


	.single-blog__content li {
		padding:
			12px
			12px
			12px
			41px;
	}


	.single-blog__content blockquote {
		padding:
			24px
			18px
			24px
			48px;

		font-size: 18px;
	}

}


/* ==================================================
   ADMIN BAR STICKY
================================================== */

@media screen and (min-width: 801px) {

	.admin-bar
	.single-blog__sticky {
		top: 157px;
	}

}


/* ==================================================
   ACCESSIBILITY
================================================== */

.single-blog a:focus-visible,
.single-blog button:focus-visible {
	outline:
		3px solid
		#d5a64e;

	outline-offset: 4px;
}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

	.single-blog *,
	.single-blog *::before,
	.single-blog *::after {
		animation-duration:
			0.01ms !important;

		transition-duration:
			0.01ms !important;
	}

}