.page-title-bar {
	position: relative;
	color: var(--title-bar-color-text, inherit);

	.heading {
		color: var(--title-bar-color-heading, $heading-color);
		font-size: var(--heading-font-size, 42px);
		line-height: 1.3;
		margin-bottom: 0;
	}
}

.page-title-bar-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	pointer-events: none;

	&:before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: var(--title-bar-color-overlay, rgba(0, 0, 0, 0));
	}
}

.page-title-bar-inner {
	position: relative;
	z-index: 1;
	border: 0 solid transparent;
}

.page-title-bar-content {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
	z-index: 1;
}

.page-title-bar-heading {
	.heading {
		span {
			display: block;
		}
	}
}

.page-breadcrumb {
	text-align: center;
}

/*.page-breadcrumb-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}*/

.insight_core_breadcrumb {
	margin: 0;
	padding: 0;
	font-size: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--breadcrumb-align, center);

	li,
	a {
		font-size: 15px;
		line-height: 22px;
	}

	> li {
		a,
		span {
			display: block;
			padding: 7px 0;
		}
	}

	li {
		color: var(--breadcrumb-color-text, $heading-color);
		list-style-type: none;
		margin: 0 16px 0 0;

		+ li {
			position: relative;
			padding-left: 21px;

			&:before {
				@extend %FontAwesomeRegular;
				content: $fa-angle-right;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%) translateY(1px);
				font-size: 12px;
				color: var(--breadcrumb-color-separator, inherit);
			}
		}

		&:last-child {
			margin: 0;
		}
	}

	a {
		color: var(--breadcrumb-color-link, $link-color);

		&:hover {
			color: var(--breadcrumb-color-link-hover, $link-hover-color);
		}
	}
}

// Hide entry title if title bar has same post title.
.title-bar-has-post-title {
	.page-main-content .entry-title {
		display: none;
	}
}

@include media-breakpoint-down(lg) {
	.page-title-bar {
		.heading {
			span {
				font-size: .9em;
			}
		}
	}
}

@include media-breakpoint-down(md) {
	.page-title-bar {
		.heading {
			span {
				font-size: .8em;
			}
		}
	}
}

@include media-breakpoint-down(sm) {
	.page-title-bar {
		.heading {
			span {
				font-size: .7em;
			}
		}
	}
}

@include media-breakpoint-down(xs) {
	.page-title-bar {
		.heading {
			span {
				font-size: .6em;
			}
		}
	}

	.insight_core_breadcrumb {
		li,
		a {
			font-size: 14px;
		}

		li {
			margin: 0 11px 0 0;

			+ li {
				padding-left: 16px;
			}
		}
	}
}
