/* ==========================================================================
   Single post (single.php). Sidebar: assets/css/longform.css.
   1. Hero  2. Layout  3. Body  4. Share  5. Previous / next
   ========================================================================== */


/* 1. Hero ----------------------------------------------------------------- */
.be_post-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 310px;
	padding-block: 10px;
	overflow: hidden;
	background: #211f40;
}

.be_post-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The old navy overlay (opacity .85) */
.be_post-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--be-navy);
	opacity: 0.85;
}

.be_post-hero-title {
	position: relative;
	z-index: 1;
	max-width: 872px;
	margin: 0;
	color: var(--be-white);
	font: 300 40px/1 var(--be-font);
	text-align: center;
}

@media (max-width: 1024px) {
	.be_post-hero {
		padding-inline: 5%;
	}
}

@media (max-width: 767px) {
	.be_post-hero {
		min-height: 198px;
		padding-inline: 25px;
	}

	.be_post-hero-title {
		font-size: 26px;
	}
}


/* 2. Layout --------------------------------------------------------------- */
.be_post-layout {
	display: flex;
	gap: 10px;
	margin-block: 80px;
	padding-inline: max(4%, calc((100% - 1200px) / 2)); /* overrides .be_row: this layout is 1200px wide */
}

.be_post {
	display: flex;
	flex: 0 0 70%;
	flex-direction: column;
	gap: 20px;
	max-width: 70%;
	padding-right: 50px;
}

.be_post-layout .be_sidebar {
	flex: 1 1 0;
	max-width: none;
	padding: 0;
}

@media (max-width: 1024px) {
	.be_post-layout {
		flex-wrap: wrap;
		padding-inline: 25px;
	}

	.be_post {
		flex-basis: 100%;
		max-width: 100%;
		padding-right: 0;
	}

	.be_post-layout .be_sidebar {
		flex-basis: 100%;
	}
}


/* 3. Body ----------------------------------------------------------------- */
.be_post-image {
	margin: 0;
}

.be_post-image img {
	display: block;
	width: 100%;
	height: auto;
}

.be_post-meta {
	margin: 0;
	color: #4a4a4a;
	font: 300 16px/24px var(--be-font-alt);
	text-transform: capitalize;
}

.be_post-content {
	padding: 10px;
	color: #4a4a4a;
}

.be_post-content h2 {
	line-height: 1.2;
}

.be_post-content h2 strong,
.be_post-content h3 strong {
	font-weight: 700;
}

.be_post-content img {
	max-width: 100%;
}

.be_post-content figure {
	margin: 0 0 0.9rem;
}

.be_post-content .be_faq {
	margin: 20px 0;
}

.be_post-content .be_faq-a {
	font-weight: 300;
}


/* Default page template (page.php): one readable column */
.be_page-content {
	padding-block: 80px;
}

.be_page-content .be_prose {
	max-width: 840px;
	margin: 0 auto;
	color: #4a4a4a;
}


/* 4. Share ---------------------------------------------------------------- */
.be_post-share {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 60px;
	padding: 20px 0;
	border-block: 1px solid rgba(22, 22, 63, 0.2);
}

.be_post-share-label {
	margin: 0;
	color: var(--be-menu);
	font: 300 16px/1 var(--be-font);
}

.be_post-share-list {
	display: flex;
	gap: 10px;
}

.be_post-share-list a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 29px;
	height: 29px;
	border-radius: 50%;
	background: var(--be-navy);
	color: var(--be-white);
	transition: opacity 0.3s;
}

.be_post-share-list .be_icon {
	width: 11px;
	height: 11px;
}

.be_post-share-list a:hover,
.be_post-share-list a:focus {
	opacity: 0.8;
}


/* 5. Previous / next ------------------------------------------------------ */
.be_post-nav {
	display: flex;
	align-items: stretch;
	padding: 28px 0;
}

.be_post-nav-item {
	flex: 1 1 0;
	min-width: 0;
}

.be_post-nav-item a {
	display: flex;
	align-items: center;
	gap: 20px;
	color: var(--be-menu);
}

.be_post-nav-item--next a {
	justify-content: flex-end;
	text-align: right;
}

.be_post-nav-item .be_icon {
	width: 21px;
	height: 21px;
}

.be_post-nav-text {
	display: block;
	min-width: 0;
}

.be_post-nav-label {
	display: block;
	color: #4a4a4a;
	font: 400 16px/24px var(--be-font-alt);
}

.be_post-nav-title {
	display: block;
	overflow: hidden;
	color: var(--be-menu);
	font: 300 16px/24px var(--be-font);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.be_post-nav-item a:hover .be_post-nav-title {
	color: var(--be-red);
}

.be_post-nav-sep {
	flex: 0 0 1px;
	margin: 0 10px;
	background: #d2d1d8;
}