/* Page Section */

.wpfox-page-section {
	--overlay-from-above: 0;
	--overlay-from-below: 0;
	--overlay-above: 0;
	--overlay-below: 0;
	--overlay-from-above-calc: max(0.5px * var(--overlay-from-above), calc(1rem * var(--overlay-from-above) / var(--base-size)));
	--overlay-from-below-calc:  max(0.5px * var(--overlay-from-below), calc(1rem * var(--overlay-from-below) / var(--base-size)));
	--overlay-above-calc:  max(0.5px * var(--overlay-above), calc(1rem * var(--overlay-above) / var(--base-size)));
	--overlay-below-calc:  max(0.5px * var(--overlay-below), calc(1rem * var(--overlay-below) / var(--base-size)));
	--page-section-spacing-default: max(40px, var(--spacing-90));
	--page-section-spacing-top: var(--page-section-spacing-default);
	--page-section-spacing-bottom: var(--page-section-spacing-default);
	--page-section-spacing-top-scalar: 1;
	--page-section-spacing-bottom-scalar: 1;
	--page-section-padding-top: calc(var(--page-section-spacing-top) * var(--page-section-spacing-top-scalar) + var(--overlay-from-above-calc));
	--page-section-padding-bottom: calc(var(--page-section-spacing-bottom) * var(--page-section-spacing-bottom-scalar) + var(--overlay-from-below-calc));
	--page-section-margin-top: calc(var(--page-section-spacing-top) * var(--page-section-spacing-top-scalar) + var(--overlay-from-above-calc));
	--page-section-margin-bottom: calc(var(--page-section-spacing-bottom) * var(--page-section-spacing-bottom-scalar) + var(--overlay-from-below-calc));
	--bggradient-height: 100%;
	--mobile-top-padding: 0px;
	--mobile-bottom-padding: 0px;
	margin-top: var(--page-section-margin-top);
	margin-bottom: var(--page-section-margin-bottom);
	
	&.is-overlaying {
		position: relative;
		/*z-index: 1;*/
		
		& > .wrapper {
			position: relative;
			
			& .inner-blocks {
				z-index: 2;
			}
		}
	}
}

.wpfox-page-section > .wrapper {
	position: relative;
	padding-top: var(--page-section-padding-top);
	padding-bottom: var(--page-section-padding-bottom);
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
	background-color: inherit;
	background-image: inherit;
	margin-top: calc(-1 * var(--overlay-above-calc));
	margin-bottom: calc(-1 * var(--overlay-below-calc));
	
	@media (max-width: 781px) {
		padding-top: calc(var(--page-section-padding-top) + var(--mobile-top-padding));
		padding-bottom: calc(var(--page-section-padding-bottom) + var(--mobile-bottom-padding));
	}
}

.wp-block-acf-page-section .wpfox-page-section > .wrapper {
	margin-top: calc(-1 * var(--overlay-above-calc)) !important;
	margin-bottom: calc(-1 * var(--overlay-below-calc)) !important;
}

.wpfox-page-section:not(.has-background) {
	--page-section-padding-top: 0px;
	--page-section-padding-bottom: 0px;
}

.wpfox-page-section.has-background {
	--page-section-margin-top: 0px;
	--page-section-margin-bottom: 0px;
}

.wpfox-page-section>* {
	max-width: var(--wp--custom--content-size);
	margin-left: auto !important;
	margin-right: auto !important;
}

.wpfox-page-section.has-full-height > .wrapper {
	min-height: calc(100vh - var(--header-height) - var(--page-section-margin-top) - var(--page-section-margin-bottom) - var(--page-section-padding-top) - var(--page-section-padding-bottom));
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wpfox-page-section .bgimage {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.wpfox-page-section .bgimage img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.wpfox-page-section .bgvideo, .wpfox-page-section .bgvideo::after, .wpfox-page-section .bgvideo video {
	position: absolute;
	top: 0;
	left: 0;
	max-width: none !important;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.wpfox-page-section .bgvideo::after {
	background-color: var(--wp--preset--color--default-text);
	content: "";
	opacity: 0.32;
}

.wpfox-page-section .bggradient {
	background: inherit;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--bggradient-height);
}

.wpfox-page-section .inner-blocks {
	position: relative;
}


/* Page Section - Intro Section */

.wpfox-page-section.is-style-intro>.wrapper {
	text-align: center;
}

.wpfox-page-section.is-style-intro>.wrapper>* {
	max-width: max(900px, 900rem/var(--base-size));
	margin-left: auto;
	margin-right: auto;
}

.wpfox-page-section.is-style-intro h2,
.wpfox-page-section.is-style-intro .has-h-2-font-size {
	--font-size: 50;
}

.wpfox-page-section.is-style-intro h2+*,
.wpfox-page-section.is-style-intro .has-h-2-font-size+* {
	margin-top: var(--spacing-25);
}

.wpfox-page-section.is-style-intro p {
	--font-size: 22;
}


/* Page Section  - Dots on Top/Bottom Right */

.wpfox-page-section.is-style-dots-bg {
	& > .wrapper {
		position: relative;
		
		&::before {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: url('/wp-content/themes/wpfox/assets/images/dots-wide.svg');
			background-position: top center;
			background-size: max(1366px,calc(1366rem / var(--base-size)));
			background-repeat: repeat-x;
			z-index: 1;
			opacity: 0.38;
		}
		
		&::after {
			content: "";
			display: block;
			position: absolute;
			bottom: var(--overlay-below-calc);
			left: 0;
			width: 100%;
			height: 100%;
			background-image: url('/wp-content/themes/wpfox/assets/images/dots-corner.svg');
			background-position: bottom right;
			background-size: max(200px,calc(284rem / var(--base-size)));
			background-repeat: no-repeat;
			z-index: 1;
		}
		
		& .inner-blocks {
			z-index: 2;
		}
	}
}


/* Page Section  - Dots on Top Left */

.wpfox-page-section.is-style-dots-bg-topleft {
	& > .wrapper {
		position: relative;
		
		&::before {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: url('/wp-content/themes/wpfox/assets/images/dots-corner-topleft.svg');
			background-position: top left;
			background-size: calc(284rem / var(--base-size));
			background-repeat: no-repeat;
			z-index: 1;
		}
		
		& .inner-blocks {
			z-index: 2;
		}
	}
}