/**
 * Home Hero block — full-viewport background (cover) at 100dvh.
 */

@property --us-letter-hover {
	syntax: "<color>";
	inherits: true;
	initial-value: #f89626;
}

.us-home-hero__shell,
.us-home-hero__section {
	--us-home-hero-viewport-offset: var(--us-orbit-admin-offset, 0px);
	--us-home-hero-height: calc(100dvh - var(--us-home-hero-viewport-offset));
	--us-home-hero-overlay: 0.5;
}

.us-home-hero__shell {
	box-sizing: border-box;
	height: var(--us-home-hero-height);
	min-height: var(--us-home-hero-height);
	max-height: var(--us-home-hero-height);
	padding: 0;
	overflow: hidden;
}

@media (min-width: 48rem) {
	.us-home-hero__shell {
		min-height: 31.25rem;
		max-height: none;
	}
}

.us-home-hero__section {
	position: relative;
	box-sizing: border-box;
	display: grid;
	align-items: center;
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	min-height: var(--us-home-hero-height);
	max-height: var(--us-home-hero-height);
	overflow: hidden;
	color: var(--wp--preset--color--primary, #000);
	--us-letter-hover: var(--us-accent-default);
	animation: us-letter-hover-cycle 12s step-end infinite;
}

@keyframes us-letter-hover-cycle {
	0% {
		--us-letter-hover: var(--us-accent-default);
	}

	25% {
		--us-letter-hover: var(--us-accent-b2b);
	}

	50% {
		--us-letter-hover: var(--us-accent-brands);
	}

	75% {
		--us-letter-hover: var(--us-accent-shows);
	}

	100% {
		--us-letter-hover: var(--us-accent-default);
	}
}

@media (min-width: 48rem) {
	.us-home-hero__section {
		min-height: 31.25rem;
		max-height: none;
	}
}

body:not(.editor-styles-wrapper) .wp-block-post-content > .us-home-hero__shell {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.wp-block-post-content > .us-home-hero__shell:first-child {
	margin-block-start: 0 !important;
}

.us-home-hero__media,
.us-home-hero__media-inner,
.us-home-hero__picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.us-home-hero__media {
	z-index: 0;
}

.us-home-hero__image,
.us-home-hero__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: var(--us-home-hero-focal-desktop, 50% 50%);
}

@media (max-width: 47.99rem) {
	.us-home-hero__picture:has(source) .us-home-hero__image {
		object-position: var(--us-home-hero-focal-mobile, var(--us-home-hero-focal-desktop, 50% 50%));
	}
}

.us-home-hero__video {
	z-index: 1;
}

@media (max-width: 47.99rem) {
	.us-home-hero__video--desktop {
		display: none;
	}
}

@media (min-width: 48rem) {
	.us-home-hero__video--mobile {
		display: none;
	}
}

.us-home-hero--has-video .us-home-hero__picture {
	z-index: 0;
}

.us-home-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--wp--preset--color--white, #fff);
	opacity: var(--us-home-hero-overlay, 0.5);
	pointer-events: none;
}

.us-home-hero__content {
	position: relative;
	z-index: 3;
	text-align: left;
}

html.has-nav-overlap .us-home-hero__section.us-orbit-nav-overlap .us-home-hero__content,
html:has(.us-orbit-nav-overlap) .us-home-hero__section.us-orbit-nav-overlap .us-home-hero__content {
	padding-block-start: calc(
		var(--us-orbit-admin-offset, 0px) + var(--us-orbit-header-height, 5.125rem) + 0.5rem
	);
}

/* Figma Desktop/Display: 96px / 112px (theme token: display). */
.us-home-hero__title {
	--us-home-hero-title-max-width-base: 900px;
	max-width: min(var(--us-home-hero-title-max-width-base), 100%);
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, "stolzl", sans-serif);
	font-size: var(--wp--preset--font-size--display, 6rem);
	font-weight: 500;
	line-height: var(--cabb-line-height-display, 1.167);
	letter-spacing: 0;
	font-kerning: normal;
	color: inherit;
}

/* US-1037: inline font-size only; no font transition (avoids resize jank). */
.us-home-hero__title.us-home-hero__title--line-fit {
	transition: none;
}

@media (min-width: 48rem) {
	body:not(.editor-styles-wrapper) .us-home-hero__title.us-home-hero__title--fit-pending:not(.us-home-hero__title--fit-visible) {
		visibility: hidden;
		opacity: 0;
		transition: none;
	}

	body:not(.editor-styles-wrapper) .us-home-hero__title.us-home-hero__title--fit-visible {
		visibility: visible;
		opacity: 1;
	}
}

@media (min-width: 48rem) and (prefers-reduced-motion: reduce) {
	body:not(.editor-styles-wrapper) .us-home-hero__title.us-home-hero__title--fit-pending {
		visibility: visible;
		opacity: 1;
	}
}

.us-home-hero__title-word {
	display: inline-block;
	white-space: nowrap;
}

.us-home-hero__title-char {
	display: inline;
	color: inherit;
	transition: color 150ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
	html:not(.us-orbit-easter-fade) .us-home-hero__title-char:not(.us-home-hero__title-char--space):hover {
		color: var(--us-letter-hover, var(--us-theme-accent, var(--wp--preset--color--orange, #f89626)));
		transition-duration: 0s;
	}
}

html.us-orbit-easter-fade .us-home-hero__title-char {
	transition: none;
}

.us-home-hero__title-char--space {
	pointer-events: none;
}

.us-home-hero__title {
	touch-action: pan-y;
}

.us-home-hero__lead {
	max-width: min(900px, 100%);
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--lead, 1.125rem);
	line-height: var(--cabb-line-height-lead, 1.444);
	color: inherit;
}

.us-home-hero__placeholder {
	position: absolute;
	inset: 0;
	background-color: #d4d4d4;
}

.us-home-hero--editor-preview a {
	pointer-events: none;
	cursor: default;
}

.us-home-hero--editor-preview .us-home-hero__title[contenteditable="true"],
.us-home-hero--editor-preview .us-home-hero__lead[contenteditable="true"] {
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.us-home-hero__video {
		display: none;
	}

	.us-home-hero__title-char {
		transition: none;
	}
}

.editor-styles-wrapper .wp-block-post-content > .us-home-hero__shell,
.editor-styles-wrapper .is-root-container > .us-home-hero__shell,
.editor-styles-wrapper [data-align="full"] .us-home-hero__shell,
.editor-styles-wrapper .alignfull .us-home-hero__shell {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
}

/* Editor canvas: full-bleed hero inside CABB flex column layout. */
.editor-styles-wrapper .is-root-container > .wp-block:has(.us-home-hero__section),
.editor-styles-wrapper .block-editor-block-list__block.acf-block-preview:has(.us-home-hero__section) {
	align-self: stretch;
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
	border-top: 0;
	border-bottom: 0;
	overflow: hidden;
}

.editor-styles-wrapper .acf-block-preview:has(.us-home-hero__section) .cabb-block.us-home-hero__shell {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	padding: 0;
}

.editor-styles-wrapper .us-home-hero--editor-preview.us-home-hero__shell,
.editor-styles-wrapper .us-home-hero--editor-preview.us-home-hero__section {
	--us-home-hero-height: clamp(28rem, 72vh, 42rem);
	height: var(--us-home-hero-height);
	min-height: var(--us-home-hero-height);
	max-height: var(--us-home-hero-height);
	animation: none;
}

.editor-styles-wrapper .us-home-hero--editor-preview.us-orbit-nav-overlap .us-home-hero__content {
	padding-block-start: calc(
		var(--us-orbit-admin-offset, 0px) + var(--us-orbit-header-height, 5.125rem) + 0.5rem
	);
}
