/* Page Header */

.wpfox-page-header {
	--section-spacing-default: max(40px, var(--spacing-90));
	--overlay-from-below: 0;
	--overlay-from-below-calc:  max(0.5px * var(--overlay-from-below), calc(1rem * var(--overlay-from-below) / var(--base-size)));
	--text-spacing-top-scalar: 1;
	--text-spacing-bottom-scalar: 1;
	--text-spacing-top: calc(var(--section-spacing-default) * var(--text-spacing-top-scalar));
	--text-spacing-bottom: calc(var(--section-spacing-default) * var(--text-spacing-bottom-scalar) + var(--overlay-from-below-calc));
	--image-spacing-top-scalar: 0;
	--image-spacing-bottom-scalar: 0;
	--gap-width: var(--spacing-80);
	--gap-width: max(25px,var(--spacing-40));
	--min-height: 617;
	--title-width: 52%;
	--title-width: 54%;
	--text-width: calc(100% - var(--title-width));
	--page-header-max-width: var(--wp--custom--content-size);
	--blur-bg-color: rgba(97, 101, 111, 0.41);
	--blur-amount: 30px;
	
	background-color: var(--wp--preset--color--custom-black);
	color: #fff;
	max-width: var(--page-header-max-width);
	margin-left: auto;
	margin-right: auto;
	
	&:is(.has-bgimage, .has-bgvideo) {
		& > .wrapper {			
			&::after {
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 536px;
				background: linear-gradient(
					to top,
					rgba(0, 0, 0, 0.9) 0%,
					rgba(0, 0, 0, 0) 100%
				);
	
				height: 452px;	
				background: transparent linear-gradient(0deg, var(--unnamed-color-000000) 0%, #00000000 100%) 0% 0% no-repeat padding-box;
				background: transparent linear-gradient(0deg, #000000 0%, #00000000 100%) 0% 0% no-repeat padding-box;
				opacity: 0.9;
				
				pointer-events: none;
				z-index: 1;
			}
		}		
	}
	
	& > .wrapper {
		position: relative;
		margin: 0 calc(50% - 50vw);
		padding: 0 calc(50vw - 50%);
		background-color: inherit;
		background-image: inherit;
		padding-top: var(--header-height);
		
		&::before {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 261px;
			background: linear-gradient( to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100% );

			height: 165px;			
			background: transparent linear-gradient(180deg, var(--unnamed-color-000000) 0%, #0000009C 52%, #00000000 100%) 0% 0% no-repeat padding-box;
			background: transparent linear-gradient(180deg, #000000 0%, #0000009C 52%, #00000000 100%) 0% 0% no-repeat padding-box;
			opacity: 0.45;
			
			pointer-events: none;
			z-index: 1;
		}
	
		& .bgimage {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
			
			& img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center center;
			}
		}
		
		& .photo-credit {
			position: absolute;
			bottom: 0;
			right: 0;
			z-index: 3;
			--font-size: 10;
			font-style: italic;
			padding: 1.6em 2.8em;
		
			& span {
				position: relative;
				opacity: 0.8;
			}
			
			&::before {
				content: "";
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: #161616;
				opacity: 0.71;
			}
		}

		& .bgvideo {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			pointer-events: none;
			z-index: 0;

			& video {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center center;
			}
		}
		
		& > .row {
			position: relative;
			gap: var(--gap-width);
			flex-wrap: nowrap;
			z-index: 2;
			min-height: calc(var(--min-height) * 1rem / var(--base-size));
			padding-top: var(--text-spacing-top);
			padding-bottom: var(--text-spacing-bottom);
			box-sizing: border-box;
			
			& .col-title {
				display: flex;
				flex-direction: column;
				/*align-items: center;*/
				justify-content: center;
				flex-basis: calc(var(--title-width) - 0.5 * var(--gap-width));
				
				& > .wrapper {
					position: relative;
					max-width: max(765px,calc(765rem / var(--base-size)));
					/*padding: 0 var(--spacing-30);*/
			
					& h1, & .is-style-h1 {
						text-shadow: 0em calc(3em/64) calc(6em/64) rgba(0,0,0,0.29);
						
						.wp-block-buttons + & {
							margin-top: 0.15em;
						}
					}
					
					& :where(h1, h2, h3, h4, h5, h6, p).is-style-eyebrow {
						--font-size: 16;
						--min-font-size: 14px !important;
						text-shadow: 0em calc(3em/16) calc(6em/16) rgba(0,0,0,0.29);
						
						h1 + &, .is-style-h1 + & {
							margin-top: 1em;
						}
					}
						
					& p:not([class*="is-style-"]) {
						--font-size: 28;
						--min-font-size: 20px;
						font-family: var(--wp--preset--font-family--secondary);
						letter-spacing: -0.01em;
						line-height: calc(38/28);
						font-weight: 600;
						text-shadow: 0em calc(3em/28) calc(6em/28) rgba(0,0,0,0.29);		
						
					}
				}
			}
			
			& .col-text {
				display: flex;
				flex-direction: column;
				/*align-items: center;*/
				justify-content: center;
				flex-basis: calc(var(--text-width) - 0.5 * var(--gap-width));
				
				& > .wrapper {
					position: relative;
					box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
					padding: var(--spacing-75) var(--spacing-100) var(--spacing-80) var(--spacing-95);
					background: rgba(47, 51, 61, calc(0.61 * 0.68));
					background: rgba(97, 101, 111, calc(0.61 * 0.68));
					background: var(--blur-bg-color);
					margin-right: calc(-1 * 50vw);
					margin-right: calc(-0.5 * (100vw - var(--page-header-max-width)));
					padding-right: calc(50vw + var(--spacing-30));
					padding-right: calc(0.5 * (100vw - var(--site-header-footer-container-width)) + var(--spacing-20));
					
					&::before {
						content: "";
						position: absolute;
						inset: 0;
						backdrop-filter: blur(30px);
						-webkit-backdrop-filter: blur(30px);
						backdrop-filter: blur(var(--blur-amount));
						-webkit-backdrop-filter: blur(var(--blur-amount));
						opacity: 0.61;
						z-index: 0;
						
						opacity: 0.8;
					}
					
					& > * {
						position: relative;
						z-index: 1;
					}
					
					& p {
						
					}
				}
			}
		}
	}

	@media (prefers-reduced-motion: reduce) {
		& .bgvideo {
			display: none;
		}
	}
	
	/* Default Page Header */
	&.style-default {
		--page-header-max-width: min(1166px, calc(100vw - 60px));
		--page-header-max-width: var(--wp--style--global--wide-size);
		max-width: var(--page-header-max-width) !important;
		
		@media (max-width: 767px) {
			& > .wrapper {
				& > .row {
					flex-wrap: wrap;
					padding-top: 100px;
					padding-bottom: 60px;
					
					& > * {
						flex: 0 0 100%;
					}
				}
			}
		}
	}
	
	/* Large Page Header */
	&.style-large {
		& > .wrapper {
			& > .row {
				padding-top: max(40px,var(--spacing-55));
				padding-bottom: max(40px,var(--spacing-55));
				
				& > .col-title {
					justify-content: flex-end;
					
					@media (max-width: 959px) {
						& {
							min-height: 350px;
						}
					}
					
					& > .wrapper {
						/*padding: 0 var(--content-padding);*/
				
						& h1, & .is-style-h1 {
							--font-size: 76;
							line-height: calc(88/76);
						}
					}
				}
			}
		}
	}
	
	/* Simple Page Header */
	&.style-simple {
		--min-height: 413;
	
		& > .wrapper {
			& > .row {
				/*
				padding-top: var(--spacing-40);
				padding-bottom: var(--spacing-40);
				*/
				min-height: max(250px,calc(var(--min-height) * 1rem / var(--base-size)));
				
				& h1, & .is-style-h1 {
					--min-font-size: 40px;
				}
				
				& > .col-title {
					align-items: center;
					text-align: center;
					
					& > .wrapper {
						/*padding: 0 var(--content-padding);*/
						
						& p {
							/*max-width: max(745px,calc(745rem / var(--base-size)));*/
						}
					}
				}
			}
		}
	}
}