/*
 * Jay Blessed-style single post layout for Avada Child Theme.
 * Tweak the CSS variables below to match your site's typography and colors.
 */
:root {
	--jb-paper: #f1ece3;
	--jb-ink: #171614;
	--jb-muted: #6c675f;
	--jb-line: #d7d0c6;
	--jb-accent: #395c52;
}

.jb-single-post {
	--jb-sidebar-top: 115px;
	color: var(--jb-ink);
	font-family: Georgia, "Times New Roman", serif;
}

/* Leave room for the WordPress toolbar above the sticky site header. */
body.admin-bar .jb-single-post {
	--jb-sidebar-top: 147px;
}

.jb-single-post,
.jb-single-post * {
	box-sizing: border-box;
}

.jb-post-hero {
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 0.92fr;
	min-height: 560px;
	background: var(--jb-paper);
}

.jb-post-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 86px 54px 70px 50px;
}

.jb-breadcrumb,
.jb-eyebrow,
.jb-post-meta,
.jb-topic-nav,
.jb-sidebar-kicker,
.jb-recent-posts span,
.jb-pagination-label {
	 font-family: var(--body_typography-font-family);
	font-size: 10px;
	letter-spacing: .12em;
	line-height: 1.6;
}

.jb-breadcrumb {
	color: #625e58;
    margin-bottom: 28px;
	text-transform: uppercase;
}

.jb-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.jb-eyebrow {
	margin: 0 0 10px;
	font-weight: 700;
	color: var(--jb-accent);
	text-transform: uppercase;
}

.jb-post-title {
	font: 400 58px / .95 Georgia, serif;
	line-height: 1.1 !important;
    letter-spacing: -.048em;
    margin: 0 0 24px;
    max-width: 720px;
}

.jb-post-excerpt {
	color: #171614;
	font-size: 22px;
	font-weight: 400;
	font-family: var(--body_typography-font-family);
    max-width: 650px;
    margin: 0 0 28px;
}

.jb-post-meta {
	color: #666;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.jb-post-hero__image {
	position: relative;
	min-height: 560px;
	overflow: hidden;
	background: #d6c7b6;
}
.jb-post-hero .crumb, .jb-post-hero .category, .jb-post-hero .meta {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.jb-post-hero__image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 560px;
	object-fit: cover;
	object-position: center;
}

.jb-image-placeholder {
	display: grid;
	place-items: center;
	min-height: 560px;
	padding: 20px;
	color: #6e6a63;
	font: 12px Arial, sans-serif;
	text-align: center;
}

.jb-image-credit {
	position: absolute;
    right: 16px;
    bottom: 14px;
    background: rgba(20, 20, 20, .72);
    color: #fff;
    padding: 7px 9px;
    font-size: 9px;
    letter-spacing: .11em;
    text-transform: uppercase;
	font-family:  var(--body_typography-font-family);
}

.jb-topic-nav {
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--jb-line);
	border-top: 1px solid var(--jb-line);
	background: #fff;
}

.jb-topic-nav__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--jb-ink);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
	padding: 13px 23px;
    border-right: 1px solid var(--jb-line);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
	font-family: var(--body_typography-font-family);

}

.jb-topic-nav__item:first-child {
	border-left: 1px solid var(--jb-line);
}

.jb-topic-nav__item:hover,
.jb-topic-nav__item.is-active {
	background: var(--jb-ink);
	color: #fff;
}

.jb-post-layout {
	max-width: 1180px;
    margin: 0 auto;
    padding: 88px 28px 115px;
    display: grid;
    grid-template-columns: minmax(0, 720px) 300px;
    gap: 90px;
    align-items: start;
}

.jb-post-content {
	min-width: 0;
	font-size: 17px;
	line-height: 1.75;
	color: #171614;
}

.jb-post-content__inner > :first-child {
	margin-top: 0;
}
.jb-post-content figure  {
    margin: 58px 0 50px;
}
.jb-post-content figure  figcaption {
    margin-top: 10px;
    color: #706b64;
    font-size: 10px;
    letter-spacing: .2em ;
    text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
}
.jb-post-content .final-lines {
    margin-top: 55px;
}
.jb-post-content .final-lines .last {
    font-size: 30px;
    line-height: 1.42;
    margin-top: 34px;
}
.jb-post-content .final-lines p {
    font-size: 27px;
    line-height: 1.55;
}
.jb-post-content h2,
.jb-post-content h3,
.jb-post-content h4 {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	line-height: 1.15;
	margin: 1.5em 0 1em;
}

.jb-post-content h2 {
	font: 400 42px / 1.08 Georgia, serif;
    letter-spacing: -.025em;
    margin: 45px 0 24px;
	line-height: 1.2 !important;
	text-transform: none;
}

.jb-post-content .pull {
    border-top: 1px solid var(--jb-ink);
    border-bottom: 1px solid var(--jb-ink);
    margin: 40px 0;
    padding: 30px 0;
    font: 400 32px / 1.28 Georgia, serif;
    letter-spacing: -.02em;
	text-align: left !important;
}
.jb-post-content  .pull strong {
    font-weight: 400;
}
.jb-post-content h3 {
	font-size: 24px;
}

.jb-post-content p {
	margin: 0 0 1.25em;
	font-family:var(--body_typography-font-family);
	font-size: 20px;
    margin: 0 0 25px;
}

.jb-post-content a {
	color: var(--jb-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.jb-post-content img,
.jb-post-content video,
.jb-post-content iframe {
	max-width: 100%;
}

.jb-post-content img {
	height: auto;
}

.jb-post-sidebar {
	position: sticky;
	top: var(--jb-sidebar-top);
	align-self: start;
	max-height: calc(100vh - var(--jb-sidebar-top) - 24px);
	overflow-y: auto;
	border-top: 1px solid var(--jb-line);
	padding-top: 14px;
	font-size: 13px;
	line-height: 1.5;
}

.jb-sidebar-heading {
	margin-bottom: 28px;
}

.jb-sidebar-kicker {
	margin: 0 0 8px;
	color: var(--jb-accent);
	font-size: 10px;
    letter-spacing: .17em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 14px;
}

.jb-sidebar-heading > p:last-child {
	margin: 0;
	font-family:Georgia, serif;
	font-size:17px;
}

.jb-recent-title {
	margin: 0 0 12px;
	font-size:10px;
	font-family: var(--body_typography-font-family);
    letter-spacing: .17em;
    text-transform: uppercase;
    color:var(--jb-accent);
    font-weight: 700;
    margin-bottom: 14px;
}
body .jb-post-content  .lead{   
	font-size: 26px;
    line-height: 1.58;
}
.jb-recent-posts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jb-recent-posts li {
	margin: 0;
	padding: 11px 0;
	border-top: 1px solid var(--jb-line);
    padding: 15px 0;
    font-size: 12px;
    line-height: 1.4;
}

.jb-recent-posts a {
	display: block;
	color: var(--jb-ink);
	font-size: 14px;
	line-height: 1.35;
	text-decoration: none;
	font-family: var(--body_typography-font-family);;
}

.jb-recent-posts a:hover {
	color: var(--jb-accent);
}

.jb-recent-posts span {
	display: block;
    margin-top: 4px;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #777;
}

.jb-post-pagination {
	width: min(100%, calc(100% - 40px));
	margin: 0 auto 70px;
	padding-top: 20px;
	border-top: 1px solid var(--jb-line);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.jb-post-pagination__previous,
.jb-post-pagination__next {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.jb-post-pagination__next {
	text-align: right;
	align-items: flex-end;
}

.jb-pagination-label {
	color: var(--jb-muted);
	text-transform: uppercase;
	font-size: 10px;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.jb-post-pagination a {
	color: var(--jb-ink);
	font-size: 18px;
	line-height: 1.3;
	text-decoration: none;
	font: 400 22px Georgia, serif;
    margin: 8px 0 0;
}

.jb-post-pagination a:hover {
	color: var(--jb-accent);
}

@media (min-width: 1400px) {
	.jb-post-hero {
		min-height: 620px;
	}
	.jb-post-hero__image,
	.jb-post-hero__image img,
	.jb-image-placeholder {
		min-height: 620px;
	}
}

@media (max-width: 900px) {
	.jb-post-hero__copy{
		padding: 60px 28px;
	}
	.jb-post-hero {
		grid-template-columns: 1fr;
	}
	.jb-post-hero__image,
	.jb-post-hero__image img,
	.jb-image-placeholder {
		min-height: 460px;
	}
	.jb-post-title {
		font: 400 58px / .95 Georgia, serif;
		letter-spacing: -1.6px;
	}
	.jb-post-layout {
		grid-template-columns: 1fr;
        gap: 55px;
	}
	.jb-post-sidebar {
		position: static;
		top: auto;
		max-height: none;
		overflow: visible;
	}
	/* Keep the scroll area within the viewport even if another section overflows. */
	#primary.jb-single-post > .jb-topic-nav {
		width: 100%;
		max-width: 100vw;
		min-width: 0;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: var(--jb-muted) var(--jb-paper);
	}
	#primary.jb-single-post > .jb-topic-nav > .jb-topic-nav__item {
		flex: 0 0 auto;
	}
	#primary.jb-single-post > .jb-topic-nav::-webkit-scrollbar {
		height: 6px;
	}
	#primary.jb-single-post > .jb-topic-nav::-webkit-scrollbar-track {
		background: var(--jb-paper);
	}
	#primary.jb-single-post > .jb-topic-nav::-webkit-scrollbar-thumb {
		background: var(--jb-muted);
		border-radius: 3px;
	}
}

@media (max-width: 640px) {
	.jb-post-content p{
		font-size:16px;
		margin-bottom: 13px;
	}
	.jb-post-excerpt{
		font-size: 16px;
	}
	.jb-post-hero {
		width: 100%;
		grid-template-columns: 1fr;
	}
	body .jb-post-title {
        font: 400 36px / .95 Georgia, serif;
		margin-bottom: 12px;
		line-height: 1.2 !important;
    }
	body .jb-post-hero__image{
		min-height: 410px;
	}
	.jb-post-content .pull{font: 400 26px / 1.28 Georgia, serif;}
	.jb-post-layout {
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 38px;
		padding-bottom: 50px;
	}
	.jb-post-content {
		font-size: 16px;
	}
	.jb-post-sidebar {
		max-width: none;
	}
	.jb-post-pagination {
		width: calc(100% - 40px);
		margin-bottom: 45px;
    	grid-template-columns: 1fr;
		gap: 16px;
	}
	.jb-post-pagination a {
		font-size: 16px;
	}
	body .jb-post-content .lead {font-size: 24px;line-height: 1.2;}
	.jb-breadcrumb {margin-bottom: 20px;}
	.jb-post-hero__copy {padding: 45px 28px;}
	.jb-post-layout {gap: 18px;}
	.jb-post-content .final-lines {margin-top: 30px;}
	.jb-post-content .final-lines .last {font-size: 22px;}
	.jb-post-content .final-lines p {font-size: 22px;}
	body .jb-post-content figure  {margin-bottom: 20px;}
	.jb-post-content .pull{margin: 36px 0;padding: 20px 0;}
	body .jb-post-content h2{margin: 30px 0 24px;line-height: 1.2 !important;font-size:28px !important;}
}