@use "../../abstracts/mixins";

.page-header {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	overflow: hidden;
	text-align: var(--page-header-text-align, center);
	background: var(--page-header-background, var(--color-alt));
	--alignfull-width: 100%;
}

.page-header-wrap {
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: var(--page-header-justify-content, center);
	padding: var(--page-header-padding, var(--page-header-padding-top) var(--page-header-padding-sides, 0) var(--page-header-padding-bottom));
}

.page-header-overlay {
	display: var(--page-header-overlay-display, block);
	background: var(--page-header-background, var(--color-alt));
	opacity: var(--page-header-overlay-opacity, 0.5);
	content: "";

	@include mixins.position(absolute, 0 0 0 0);
}

.page-header-image,
.page-header-image img { // Added img for plugins that convert to picture/source and change our markup.
	width: 100%;
	height: 100% !important; // WooCommerce CSS and possibly other plugin CSS was overriding this.
	object-fit: cover;

	@include mixins.position(absolute, 0 0 0 0);
}

.page-header-inner {
	width: 100%;
	max-width: var(--page-header-inner-max-width, var(--breakpoint-sm));
	margin: var(--page-header-inner-margin, 0);
	padding: var(--page-header-inner-padding, 0);
	background: var(--page-header-inner-background, transparent);
	border: var(--page-header-inner-border, 0);
	border-radius: var(--page-header-inner-border-radius, var(--border-radius));
	box-shadow: var(--page-header-inner-box-shadow, none);
}

.page-header-description {
	margin: var(--page-header-description-margin, 0 0 1em);
	font-size: var(--page-header-font-size, var(--font-size-lg));

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