.meta-header {
	position: relative;
	background-color: var( --vamtam-default-bg-color ); // in case page title bg is not set
	border-bottom: solid 1px var( --vamtam-default-line-color );

	background: var( --vamtam-page-title-background-background-image ) center top / var( --vamtam-page-title-background-background-size ) var( --vamtam-page-title-background-background-repeat ) scroll var( --vamtam-page-title-background-background-color, transparent );

	.has-breadcrumbs &,
	.has-share-menu & {
		> .limit-wrapper {
			min-height: 30px;
		}
	}

	.meta-header-inside {
		padding: 40px 0px 70px 0px;
	}
}

.has-background {
	.meta-header-inside {
		display: flex;
		align-items: center;
		height: 50vh;
		max-height: 460px;
	}
	.page-header .page-header-line:after {
		color: var( --vamtam-accent-color-5 );
	}
	.meta-header:before, .meta-header:after {
		content: "";
		display: block;
		height: 40px;
		width: 100%;
		position: absolute;
		top: -3px;
		left: 0px;
		background: transparent url("../../images/wave-horizontal-bg-solid-top.svg") repeat-x center top;
		background-size: auto 99%;
		z-index: 1;
	}
	.meta-header:after {
		bottom: -3px;
		top: inherit;
		background: transparent url("../../images/wave-horizontal-bg-solid-bottom.svg") repeat-x center bottom;
		background-size: auto 99%;
	}
}

body.sticky-header-type-over  .has-background .meta-header:before {
	display: none;
}

.page-header {
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;

	body.sticky-header-type-over #main-content:first-child & {
		padding-top: calc( var( --vamtam-header-height ) - 10px );
	}

	body.sticky-header-type-over.header-layout-standard #main-content:first-child &,
	body.sticky-header-type-over.header-layout-logo-text-menu #main-content:first-child & {
		padding-top: calc( var( --vamtam-header-height ) + @menu-height + 60px );
	}

	.page-header-line {
		display: block;
		width: auto;
		height: 1px;
		margin-top: 25px;
		margin-bottom: 50px;
		opacity: 0.7;

		&:after {
			font-family: theme;
			content: icon( vamtam-theme-ornament-plant);
			font-size: 60px;
			height: auto;
			color: var( --vamtam-accent-color-3 );
		}
	}

	h1 {
		margin: 0px;
		overflow-wrap: break-word;
		max-width: 100%;

		a {
			color: var( --vamtam-h1-color );
		}
	}

	.desc {
		font-family: var( --vamtam-primary-font-font-family );;
		font-size: var( --vamtam-h5-font-size );
		line-height: 1.1em;
		font-style: normal;
	}

	&.layout-centered,
	&.layout-left-align,
	&.layout-right-align {
		flex-direction: column;
	}

	&.layout-centered {
		text-align: center;
	}

	&.layout-one-row-left,
	&.layout-one-row-right {
		justify-content: space-between;

		h1 {
			flex: 0 1 70%;
		}

		.desc {
			flex: 0 1 auto;
			margin: 0;
		}
	}

	&.layout-one-row-left {
		align-items: left;

		.page-header-line {
			margin-right: auto;
		}

		.desc {
			text-align: right;
		}
	}

	&.layout-one-row-right {
		align-items: right;

		h1 {
			text-align: right;

			.page-header-line {
				margin-left: auto;
			}
		}

		flex-direction: row-reverse;
	}

	&.layout-left-align {
		align-items: flex-start;
	}

	&.layout-right-align {
		align-items: flex-end;

		.desc {
			text-align: justify;
			text-align-last: right;
		}
	}
}

#sub-header {
	.text-shadow {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: var( --vamtam-accent-color-6 );
		opacity: 0.3;
		position: absolute;
		top: 0px;
		left: 0px;
		animation: vamtam-fadein-title 2s ease-in-out;

		&.shadow-darkened {
			opacity: 0.3;
		}
	}

	&.has-text-shadow {
		.page-header {
			h1, .desc {
				color: var( --vamtam-accent-color-5 );
			}
		}
	}
}

.single-format-aside .meta-header-inside {
	min-height: auto;
	padding: 0px;
}

body.has-page-header {
	&.woocommerce,
	&.single-jetpack-portfolio,
	&.single-post,
	&:not(.fl-builder),
	&.archive {
		article > .page-content {
			padding-top: 40px;
		}
	}
}
