/* Campaign Video Hero — full-bleed Vimeo/YouTube background element for Enfold. */

.campaign-video-hero {
	--cvh-height: 100svh;
	--cvh-header-offset: 88px;
	--cvh-content-width: 1160px;
	--cvh-overlay: 0.5;
	--cvh-overlay-mid: 0.24;
	--cvh-overlay-soft: 0.12;
	--cvh-text: #ffffff;
	--cvh-eyebrow-color: var(--cvh-text);
	--cvh-heading-color: var(--cvh-text);
	--cvh-body-color: var(--cvh-text);
	--cvh-scroll-color: var(--cvh-text);
	--cvh-video-scale: 1.1;
	--cvh-heading-size: clamp(58px, 8vw, 138px);
	--cvh-heading-size-mobile: clamp(48px, 15vw, 76px);
	--cvh-embed-bg: #ffffff;
	--cvh-embed-text: #10231b;
	--cvh-embed-pad: 32px;
	--cvh-heading-font: "noedisplay-black-webfont-2", "Instrument Serif", Georgia, "Times New Roman", serif;
	position: relative;
	isolation: isolate;
	display: grid;
	width: 100vw;
	max-width: none;
	min-height: 100vh;
	min-height: var(--cvh-height);
	margin-inline: calc(50% - 50vw);
	overflow: hidden;
	background: #101813;
	color: var(--cvh-text);
	font-family: inherit;
}

.campaign-video-hero--flush {
	margin-top: -50px;
}

.campaign-video-hero__media,
.campaign-video-hero__media::after {
	position: absolute;
	inset: 0;
}

.campaign-video-hero__media {
	z-index: -2;
	overflow: hidden;
	background-color: #101813;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.campaign-video-hero__media--mobile {
	display: none;
}

.campaign-video-hero__media::after {
	content: "";
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(0deg, rgba(4, 12, 8, 0.72) 0%, rgba(4, 12, 8, 0.12) 62%, rgba(4, 12, 8, 0.28) 100%),
		linear-gradient(90deg, rgba(4, 12, 8, var(--cvh-overlay)) 0%, rgba(4, 12, 8, var(--cvh-overlay-mid)) 55%, rgba(4, 12, 8, var(--cvh-overlay-soft)) 100%);
}

.campaign-video-hero__video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-width: 177.7778vh;
	min-height: 100vh;
	border: 0;
	transform: translate(-50%, -50%) scale(var(--cvh-video-scale));
	transform-origin: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.campaign-video-hero__video.is-loaded {
	opacity: 1;
}

.campaign-video-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	width: 100%;
	min-height: inherit;
	box-sizing: border-box;
	padding: clamp(88px, 10vh, 150px) clamp(24px, 5vw, 100px) clamp(92px, 11vh, 150px);
}

.campaign-video-hero--bottom .campaign-video-hero__inner {
	align-items: flex-end;
}

.campaign-video-hero--center .campaign-video-hero__inner {
	align-items: center;
}

.campaign-video-hero--has-scroll .campaign-video-hero__inner {
	padding-bottom: clamp(150px, 18vh, 220px);
}

#top .campaign-video-hero .campaign-video-hero__content,
.campaign-video-hero .campaign-video-hero__content {
	width: 100%;
	max-width: var(--cvh-content-width);
	box-sizing: border-box;
}

.campaign-video-hero .campaign-video-hero__eyebrow {
	margin: 0 0 clamp(24px, 3vh, 42px);
	font: inherit;
	font-size: clamp(11px, 0.9vw, 15px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.38em;
	text-transform: uppercase;
	color: var(--cvh-eyebrow-color) !important;
}

.campaign-video-hero .campaign-video-hero__heading {
	margin: 0;
	font-family: var(--cvh-heading-font, "Instrument Serif", Georgia, "Times New Roman", serif) !important;
	font-size: var(--cvh-heading-size);
	font-weight: 400 !important;
	line-height: 0.91;
	letter-spacing: -0.035em;
	text-transform: none;
	color: var(--cvh-heading-color) !important;
	text-wrap: pretty;
}

.campaign-video-hero__body {
	max-width: 780px;
	margin-top: clamp(26px, 4vh, 46px);
}

.campaign-video-hero .campaign-video-hero__body,
.campaign-video-hero .campaign-video-hero__body p {
	font: inherit;
	font-size: clamp(18px, 1.5vw, 26px);
	font-weight: 500;
	line-height: 1.55;
	color: var(--cvh-body-color) !important;
}

.campaign-video-hero .campaign-video-hero__body p {
	margin: 0;
}

.campaign-video-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: clamp(24px, 3.5vh, 40px);
}

.campaign-video-hero__buttons--center {
	justify-content: center;
}

.campaign-video-hero__buttons--right {
	justify-content: flex-end;
}

#top .campaign-video-hero__buttons .avia-button-wrap {
	display: inline-flex;
	float: none;
	clear: none;
	width: auto;
	margin: 0;
}

#top .campaign-video-hero__buttons .avia-button {
	margin: 0;
}

/* Markup pasted into the content fields inherits its section colour, so a
   <span>, <em> or <a> keeps the chosen tone instead of Enfold's defaults. */

#top .campaign-video-hero__eyebrow :where(p, span, strong, b, em, i, li, br, small, sup, sub),
#top .campaign-video-hero__heading :where(p, span, strong, b, em, i, br, small, sup, sub),
#top .campaign-video-hero__body :where(p, span, strong, b, em, i, li, h1, h2, h3, h4, h5, h6, small, sup, sub) {
	color: inherit;
}

#top .campaign-video-hero__eyebrow a,
#top .campaign-video-hero__heading a,
#top .campaign-video-hero__body a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.campaign-video-hero .campaign-video-hero__body img,
.campaign-video-hero .campaign-video-hero__body iframe {
	max-width: 100%;
}

/* ---------- Optional donation/embed panel ---------- */

.campaign-video-hero--has-embed .campaign-video-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
	align-items: stretch;
	padding: 0;
}

.campaign-video-hero--has-embed .campaign-video-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	max-width: var(--cvh-content-width);
	align-self: stretch;
	padding: clamp(88px, 10vh, 150px) clamp(32px, 5vw, 100px) clamp(92px, 11vh, 150px);
}

.campaign-video-hero--has-embed.campaign-video-hero--center .campaign-video-hero__content {
	align-self: stretch;
	justify-content: center;
}

.campaign-video-hero--has-embed.campaign-video-hero--has-scroll .campaign-video-hero__content {
	padding-bottom: clamp(150px, 18vh, 220px);
}

.campaign-video-hero--has-embed.campaign-video-hero--center.campaign-video-hero--has-scroll .campaign-video-hero__content {
	padding-top: clamp(88px, 10vh, 150px);
	padding-bottom: clamp(88px, 10vh, 150px);
}

.campaign-video-hero__embed {
	position: relative;
	z-index: 3;
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	justify-self: center;
	width: min(calc(100% - 48px), 560px);
	min-width: 0;
	min-height: 0;
	max-height: calc(var(--cvh-height) - 64px);
	padding: 0;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: auto;
	background: transparent;
	color: var(--cvh-embed-text);
	-webkit-overflow-scrolling: touch;
}

.campaign-video-hero--embed-surface .campaign-video-hero__embed {
	padding: var(--cvh-embed-pad);
	background: var(--cvh-embed-bg);
}

.campaign-video-hero__embed-code {
	width: 100%;
	min-height: 0;
	color: inherit;
}

.campaign-video-hero__embed-code iframe {
	display: block;
	width: 100% !important;
	max-width: 100%;
	min-height: 560px;
	border: 0;
}

.campaign-video-hero--has-embed .campaign-video-hero__scroll {
	left: 33.333%;
}

.campaign-video-hero .campaign-video-hero__scroll {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: clamp(24px, 4vh, 54px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 0;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none;
	color: var(--cvh-scroll-color) !important;
	cursor: pointer;
}

.campaign-video-hero__scroll-label {
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.38em;
	text-transform: uppercase;
}

.campaign-video-hero__scroll-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: 0.7;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.campaign-video-hero__scroll-icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.campaign-video-hero__scroll:hover .campaign-video-hero__scroll-icon,
.campaign-video-hero__scroll:focus-visible .campaign-video-hero__scroll-icon {
	opacity: 1;
	transform: translateY(4px);
}

.campaign-video-hero__scroll:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 8px;
}

@media only screen and (max-width: 989px) {
	.campaign-video-hero--has-embed {
		overflow: hidden;
	}

	.campaign-video-hero--has-embed .campaign-video-hero__inner {
		display: flex;
		flex-direction: column;
		min-height: var(--cvh-height);
	}

	.campaign-video-hero--has-embed .campaign-video-hero__content {
		display: flex;
		flex: 0 0 auto;
		flex-direction: column;
		justify-content: flex-end;
		width: 100%;
		max-width: none;
		min-height: var(--cvh-height);
		padding: 92px clamp(24px, 6vw, 64px);
	}

	.campaign-video-hero--has-embed.campaign-video-hero--center .campaign-video-hero__content {
		justify-content: center;
	}

	.campaign-video-hero--has-embed.campaign-video-hero--has-scroll .campaign-video-hero__content {
		padding-bottom: 150px;
	}

	.campaign-video-hero__embed {
		align-self: center;
		width: min(calc(100% - 48px), 720px);
		min-height: 0;
		max-height: none;
		margin: 0 auto 48px;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.campaign-video-hero--has-embed .campaign-video-hero__scroll {
		top: calc(var(--cvh-height) - 116px);
		bottom: auto;
		left: 50%;
	}
}

@media only screen and (max-width: 767px) {
	.campaign-video-hero {
		min-height: var(--cvh-height);
	}

	.campaign-video-hero__inner {
		padding: 92px 24px 92px;
	}

	.campaign-video-hero--has-mobile-media .campaign-video-hero__media--desktop {
		display: none;
	}

	.campaign-video-hero--has-mobile-media .campaign-video-hero__media--mobile {
		display: block;
	}

	.campaign-video-hero--embed-hidden-mobile .campaign-video-hero__embed {
		display: none;
	}

	.campaign-video-hero__video--mobile {
		width: 100vw;
		height: 177.7778vw;
		min-width: 56.25vh;
		min-height: 100vh;
	}

	.campaign-video-hero--has-scroll .campaign-video-hero__inner {
		padding-bottom: 150px;
	}

	.campaign-video-hero .campaign-video-hero__heading {
		font-size: var(--cvh-heading-size-mobile);
		line-height: 0.94;
	}

	.campaign-video-hero .campaign-video-hero__body,
	.campaign-video-hero .campaign-video-hero__body p {
		font-size: 18px;
	}

	.campaign-video-hero__scroll {
		bottom: 24px;
		gap: 14px;
	}

	.campaign-video-hero__scroll-icon {
		width: 46px;
		height: 46px;
	}
}

/* Fallback lightbox when Enfold's Magnific Popup is disabled or unavailable. */

body.campaign-video-popup-open {
	overflow: hidden;
}

.campaign-video-popup {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 24px;
	box-sizing: border-box;
}

.campaign-video-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.86);
}

.campaign-video-popup__dialog {
	position: relative;
	z-index: 1;
	width: min(1100px, 92vw);
}

.campaign-video-popup__frame {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	background: #000;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
}

.campaign-video-popup__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.campaign-video-popup__close {
	position: absolute;
	right: -4px;
	bottom: calc(100% + 10px);
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: #fff;
	font: 300 42px/1 Arial, sans-serif;
	cursor: pointer;
}

.campaign-video-popup__close:hover,
.campaign-video-popup__close:focus-visible {
	background: transparent;
	color: #fff;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.campaign-video-hero__video {
		display: none;
		transition: none;
	}

	.campaign-video-hero__scroll-icon {
		transition: none;
	}
}

/* ---------- Sizes chosen in the builder ----------

   Enfold sets heading and paragraph sizes with #top-prefixed selectors that
   outrank a plain class rule, so a size picked in the builder needs
   !important to land at all. It is applied ONLY through the --size- classes
   below, which the element adds when an editor has actually filled a size
   field in. Forcing the element's own default the same way would start
   overruling the theme on every page that never asked for a size, and change
   headings nobody touched.

   The -m variant covers the mobile rule: a desktop size given on its own still
   derives a mobile size, and that derived value has to outrank the desktop
   rule inside the media query. */

#top .campaign-video-hero--size-heading .campaign-video-hero__heading,
.campaign-video-hero--size-heading .campaign-video-hero__heading {
	font-size: var(--cvh-heading-size) !important;
}

@media (max-width: 767px) {
	#top .campaign-video-hero--size-heading-m .campaign-video-hero__heading,
	.campaign-video-hero--size-heading-m .campaign-video-hero__heading {
		font-size: var(--cvh-heading-size-mobile) !important;
	}
}

/* ---------- Below the split, the column is the screen ----------

   A "share of screen" headline width is a vw value, which would leave a phone
   reading a 150px column. The layout has no picture beside the text at this
   size anyway, so the column takes the full width and the share only applies
   where there is something to sit beside. */

@media only screen and (max-width: 989px) {
	#top .campaign-video-hero .campaign-video-hero__content,
	.campaign-video-hero .campaign-video-hero__content {
		max-width: var(--cvh-content-width-mobile, 100%);
	}
}

/* ---------- Headline scales with its own column ----------

   Same problem the story slider had: the column is a share of the screen while
   the headline was sized in vw, so the two moved at different rates and the
   line breaks never stayed put. Widening the browser grew the column while the
   headline hit its 138px ceiling and stopped.

   cqw is 1% of the content column's own width, so the characters per line hold
   steady and the headline breaks in the same places at every screen size. The
   vw term inside min() governs a fixed-pixel headline width, where the column
   stops growing but the screen does not.

   Wrapped in @supports so a browser without container queries keeps exactly
   the sizes it renders today, and excluded on --size-heading so an exact pixel
   size set in the builder still wins. A percentage instead multiplies through
   --cvh-heading-scale, which keeps it proportional. */

@supports (container-type: inline-size) {

	.campaign-video-hero__content {
		container-type: inline-size;
	}

	#top .campaign-video-hero:not(.campaign-video-hero--size-heading) .campaign-video-hero__heading,
	.campaign-video-hero:not(.campaign-video-hero--size-heading) .campaign-video-hero__heading {
		font-size: calc(clamp(40px, min(11.8cqw, 8vw), 160px) * var(--cvh-heading-scale, 1));
	}

	/* The copy scales on the column with the headline. The eyebrow does not:
	   it is a fixed label, and at this letter-spacing a size that moves with
	   the column reads as an error rather than as a response. */

	#top .campaign-video-hero:not(.campaign-video-hero--size-body) .campaign-video-hero__body,
	#top .campaign-video-hero:not(.campaign-video-hero--size-body) .campaign-video-hero__body p,
	.campaign-video-hero:not(.campaign-video-hero--size-body) .campaign-video-hero__body,
	.campaign-video-hero:not(.campaign-video-hero--size-body) .campaign-video-hero__body p {
		font-size: calc(clamp(18px, min(3.6cqw, 1.5vw), 30px) * var(--cvh-body-scale, 1));
	}
}

/* The copy had its own hard-coded 780px ceiling, set independently of the
   Headline width control, so it kept its own measure while everything above it
   followed the column. A second ceiling in ch replaced it and was still a
   measure of its own, which is why the copy kept running past where the
   headline broke. It now simply fills the column: Headline width is the one
   control over how wide the whole block of text is. */

.campaign-video-hero .campaign-video-hero__body {
	max-width: 100%;
}

/* ---------- Supporting copy size chosen in the builder ---------- */

#top .campaign-video-hero--size-body .campaign-video-hero__body,
#top .campaign-video-hero--size-body .campaign-video-hero__body p,
.campaign-video-hero--size-body .campaign-video-hero__body,
.campaign-video-hero--size-body .campaign-video-hero__body p {
	font-size: var(--cvh-body-size) !important;
}

@media only screen and (max-width: 767px) {
	#top .campaign-video-hero--size-body-m .campaign-video-hero__body,
	#top .campaign-video-hero--size-body-m .campaign-video-hero__body p,
	.campaign-video-hero--size-body-m .campaign-video-hero__body,
	.campaign-video-hero--size-body-m .campaign-video-hero__body p {
		font-size: var(--cvh-body-size-mobile) !important;
	}
}

/* ---------- The headline keeps its typeface at every width ----------

   Reported as the headline falling back to the body font below the mobile
   breakpoint. The base rule already carries !important, but only two classes
   of specificity, so a theme rule that also uses !important outranks it. This
   restates the family with an id in the selector and repeats it inside the
   mobile query, which is where the fallback was showing.

   If the headline still comes out in the body font after this, the family is
   not being overridden but failing to load: check the Network tab on a narrow
   viewport for the font file, and that the name in Headline font family
   matches the @font-face family exactly. */

#top .campaign-video-hero .campaign-video-hero__heading,
#top .campaign-video-hero .campaign-video-hero__heading * {
	font-family: var(--cvh-heading-font, "Instrument Serif", Georgia, "Times New Roman", serif) !important;
}

@media only screen and (max-width: 767px) {
	#top .campaign-video-hero .campaign-video-hero__heading,
	#top .campaign-video-hero .campaign-video-hero__heading * {
		font-family: var(--cvh-heading-font, "Instrument Serif", Georgia, "Times New Roman", serif) !important;
	}
}