/**
 * Hero header overlay + SiteOrigin hero rows + RSM Intro layout.
 *
 * Maps Mise en Place / Church Builder patterns to OPENRSM Start (#masthead, #page, .site-main).
 */

:root {
	--openrsm-header-offset: calc(76px + 1.6rem);
	--openrsm-hero-content-offset: var(--openrsm-header-offset);
	--openrsm-hero-backdrop-top: calc(-1 * var(--openrsm-header-offset));
	--openrsm-hero-row-padding: clamp(1.5rem, 5vw, 3.5rem);
}

/* Page builder canvas — do not set overflow:hidden on body; it clips SO full-width rows. */
.page-builder {
	max-width: 100%;
}

.custom-builder #page,
.custom-builder .site-main--full-width,
.custom-builder .builder-canvas,
.full-width-builder .site-main--full-width,
.full-width-builder .builder-canvas .entry-content {
	width: 100%;
	max-width: none;
}

.full-width-builder .entry-content > .panel-layout {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.custom-builder.has-hero-header:not(.has-hero-intro) .site-main--full-width,
.custom-builder.has-hero-header:not(.has-hero-intro) .builder-canvas,
.full-width-builder.has-hero-header:not(.has-hero-intro) .site-main--full-width,
.full-width-builder.has-hero-header:not(.has-hero-intro) .builder-canvas {
	margin-top: 0;
	padding-top: 0;
}

.has-hero-header #page {
	position: relative;
	z-index: 0;
}

.has-hero-header #page > .top-bar,
.has-hero-header #page > #masthead,
.has-hero-header #page > #primary {
	position: relative;
}

/* Header and logo above hero backdrop and builder content */
.has-hero-header #masthead.site-header {
	position: absolute;
	z-index: 1001;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	background-color: transparent;
	border-bottom-color: transparent;
	backdrop-filter: none;
	box-shadow: none;
}

.has-hero-header #masthead .site-header__inner,
.has-hero-header #masthead .site-branding,
.has-hero-header #masthead .site-description,
.has-hero-header #masthead .custom-logo-link,
.has-hero-header #masthead .main-navigation {
	position: relative;
	z-index: 1;
}

.has-hero-header #masthead.site-header {
	isolation: isolate;
}

.admin-bar.has-hero-header #masthead.site-header {
	top: 32px;
}

.has-hero-header.has-top-bar #masthead.site-header {
	top: var(--openrsm-top-bar-height, 2.5rem);
}

.admin-bar.has-hero-header.has-top-bar #masthead.site-header {
	top: calc(var(--openrsm-top-bar-height, 2.5rem) + 32px);
}

.hero-header-light #masthead.site-header,
.hero-header-light #masthead .site-title a,
.hero-header-light #masthead .site-description,
.hero-header-light #masthead .primary-menu > .menu-item > a,
.hero-header-light #masthead .menu-toggle {
	color: #ffffff;
}

/* Keep logo full-color; invert(1) destroys layered/color PNG artwork. */
.hero-header-light #masthead .custom-logo-link img {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

.hero-header-light #masthead .site-description {
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.hero-header-dark #masthead.site-header,
.hero-header-dark #masthead .site-title a,
.hero-header-dark #masthead .primary-menu > .menu-item > a {
	color: var(--openrsm-color-text);
}

.has-hero-header.has-sticky-header #masthead.site-header {
	position: absolute;
}

/* Pull first hero row up so row background reads from viewport top (non-intro pages only). */
.has-hero-header:not(.has-hero-intro) .entry-content .openrsm-hero-row {
	margin-top: calc(-1 * var(--openrsm-header-offset));
}

.admin-bar.has-hero-header:not(.has-hero-intro) .entry-content .openrsm-hero-row {
	margin-top: calc(-1 * var(--openrsm-header-offset) - 32px);
}

.has-hero-header.has-top-bar:not(.has-hero-intro) .entry-content .openrsm-hero-row {
	margin-top: calc(-1 * var(--openrsm-header-offset) - var(--openrsm-top-bar-height, 2.5rem));
}

.has-hero-header:not(.has-hero-intro) .entry-content .openrsm-hero-row > .panel-row-style,
.has-hero-header:not(.has-hero-intro) .entry-content .openrsm-hero-row.panel-no-style {
	padding-top: calc(var(--openrsm-header-offset) + var(--openrsm-hero-row-padding));
	padding-bottom: var(--openrsm-hero-row-padding);
}

/*
 * RSM Intro hero: one backdrop behind header + row; intro content clears the masthead.
 * --openrsm-hero-content-offset is set from measured #masthead height (see hero layout JS).
 */
.has-hero-intro.has-hero-header #primary.site-main,
.has-hero-intro.has-hero-header .site-main.site-main--full-width {
	padding-top: 0 !important;
	padding-bottom: 0;
}

.has-hero-intro.has-hero-header .entry-content .openrsm-hero-row {
	margin-top: 0;
}

.has-hero-intro.has-hero-header .entry-content .openrsm-hero-row > .panel-row-style,
.has-hero-intro.has-hero-header .entry-content .openrsm-hero-row.panel-no-style {
	padding-top: calc(var(--openrsm-hero-content-offset) + var(--openrsm-hero-row-padding));
	padding-bottom: var(--openrsm-hero-row-padding);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.has-hero-intro.has-hero-header .entry-content .openrsm-hero-row > .panel-row-style.full-height {
	min-height: calc(100vh - var(--openrsm-hero-content-offset));
}

/*
 * Row backdrop extends behind the transparent masthead (--openrsm-hero-backdrop-top from layout JS).
 * Top/left/right/bottom are not set in inline CSS (inset:0 would override top).
 */
.has-hero-intro.has-hero-backdrop .entry-content .openrsm-hero-row::before {
	top: var(--openrsm-hero-backdrop-top, 0);
	right: 0;
	bottom: 0;
	left: 0;
	height: auto;
	z-index: 0;
}

/*
 * Default backdrop (no Cover/Contain): height follows image aspect ratio at full row width,
 * pinned to the top of the backdrop layer. Row content can still use Hero / full-height.
 */
.has-hero-backdrop-proportional .has-hero-intro.has-hero-backdrop .entry-content .openrsm-hero-row::before {
	bottom: auto;
	aspect-ratio: var(--openrsm-hero-backdrop-aspect-ratio);
}

/* Flat darken overlay on hero backgrounds only (not intro text). */
.has-hero-intro.has-hero-backdrop .entry-content .openrsm-hero-row.openrsm-hero-has-overlay::after,
.panel-row-style.openrsm-hero-row-bg.openrsm-hero-has-overlay::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	z-index: 0;
	pointer-events: none;
	background-color: rgba(0, 0, 0, var(--openrsm-hero-overlay, 0));
}

.has-hero-intro.has-hero-backdrop .entry-content .openrsm-hero-row.openrsm-hero-has-overlay::after {
	top: var(--openrsm-hero-backdrop-top, 0);
	bottom: 0;
	height: auto;
}

.has-hero-intro.has-hero-parallax:not(.has-hero-full-viewport-backdrop) .entry-content .openrsm-hero-row.openrsm-hero-has-overlay::after {
	transform: translate3d(0, var(--openrsm-hero-parallax-shift, 0), 0);
	will-change: transform;
	backface-visibility: hidden;
}

.has-hero-intro.has-hero-parallax.has-hero-full-viewport-backdrop .entry-content .openrsm-hero-row.openrsm-hero-has-overlay::after {
	position: fixed;
	top: 0;
	bottom: auto;
	width: 100%;
	height: 100vh;
	transform: none;
}

.has-hero-backdrop-proportional .has-hero-intro.has-hero-backdrop .entry-content .openrsm-hero-row.openrsm-hero-has-overlay::after {
	bottom: auto;
	aspect-ratio: var(--openrsm-hero-backdrop-aspect-ratio);
}

.panel-row-style.openrsm-hero-row-bg.openrsm-hero-has-overlay {
	position: relative;
	isolation: isolate;
}

.panel-row-style.openrsm-hero-row-bg.openrsm-hero-has-overlay::after {
	top: 0;
	bottom: 0;
	height: auto;
}

.panel-row-style.openrsm-hero-row-bg.openrsm-hero-has-overlay > .section-content {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.has-hero-intro.has-hero-parallax:not(.has-hero-full-viewport-backdrop) .entry-content .openrsm-hero-row.openrsm-hero-has-overlay::after {
		transform: none;
	}
}

.has-hero-intro.has-hero-parallax:not(.has-hero-full-viewport-backdrop) .entry-content .openrsm-hero-row::before {
	transform: translate3d(0, var(--openrsm-hero-parallax-shift, 0), 0);
	will-change: transform;
	backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.has-hero-intro.has-hero-parallax:not(.has-hero-full-viewport-backdrop) .entry-content .openrsm-hero-row::before {
		transform: none;
		background-attachment: scroll !important;
	}
}

/*
 * Intro + Parallax (row-bounded): backdrop ends at the hero row; default page background below.
 * Full-viewport mode: Customizer → Header → “Extend intro hero background full viewport”.
 */
.has-hero-intro.has-hero-parallax:not(.has-hero-full-viewport-backdrop) #page,
.has-hero-intro.has-hero-parallax:not(.has-hero-full-viewport-backdrop) .site-main--full-width,
.has-hero-intro.has-hero-parallax:not(.has-hero-full-viewport-backdrop) .builder-canvas,
.has-hero-intro.has-hero-parallax:not(.has-hero-full-viewport-backdrop) .entry-content {
	background-color: transparent;
}

.has-hero-intro.has-hero-parallax.has-hero-full-viewport-backdrop #page {
	position: relative;
	z-index: 1;
	background-color: transparent;
}

.has-hero-intro.has-hero-parallax.has-hero-full-viewport-backdrop .site-main--full-width,
.has-hero-intro.has-hero-parallax.has-hero-full-viewport-backdrop .builder-canvas,
.has-hero-intro.has-hero-parallax.has-hero-full-viewport-backdrop .entry-content {
	background-color: transparent;
}

/* Keep footer above intro hero layers and any pixelcog parallax mirrors. */
.has-hero-intro .site-footer,
.has-hero-intro #primary.site-main + .site-footer {
	position: relative;
	z-index: 2;
	background-color: var(--openrsm-color-footer-background, #0f172a);
}

.has-hero-intro.has-hero-backdrop .entry-content .openrsm-hero-row > .panel-row-style > .section-content {
	position: relative;
	z-index: 1;
}

.has-hero-intro .openrsm-hero-row > .panel-row-style > .section-content,
.has-hero-intro .openrsm-hero-row > .panel-row-style.hero-top > .section-content,
.has-hero-intro .openrsm-hero-row > .panel-row-style.hero-middle > .section-content,
.has-hero-intro .openrsm-hero-row > .panel-row-style.hero-bottom > .section-content {
	position: relative !important;
	top: auto !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
}

.has-hero-intro .openrsm-hero-row > .panel-row-style.hero-top > .section-content {
	justify-content: flex-start;
}

.has-hero-intro .openrsm-hero-row > .panel-row-style.hero-middle > .section-content {
	justify-content: center;
}

.has-hero-intro .openrsm-hero-row > .panel-row-style.hero-bottom > .section-content {
	justify-content: flex-end;
	padding-bottom: 0;
}

/* When SiteOrigin skips .section-content, push the intro widget below the masthead. */
.has-hero-intro .openrsm-hero-row > .panel-row-style:not(:has(> .section-content)) .widget_rsm_intro .rsm-intro {
	margin-top: var(--openrsm-hero-content-offset);
}

.has-hero-intro .openrsm-hero-row .panel-grid-cell {
	align-self: stretch;
}

/* Hero row widget padding — skip intro widget; row padding + section-content handle spacing. */
.openrsm-hero-row .panel-widget-style:not(:has(.widget_rsm_intro)),
.panel-row-style.full-height .panel-widget-style:not(:has(.widget_rsm_intro)) {
	padding: var(--openrsm-hero-row-padding);
}

.has-hero-intro .openrsm-hero-row .panel-cell-style,
.has-hero-intro .openrsm-hero-row .panel-widget-style:has(.widget_rsm_intro) {
	background-color: transparent !important;
	background-image: none !important;
	padding: 0;
}

.panel-row-style.fixed-background {
	background-attachment: fixed;
}

.has-hero-backdrop:not(.has-hero-parallax) .openrsm-hero-row > .panel-row-style.fixed-background {
	background-attachment: scroll;
}

.has-hero-parallax .openrsm-hero-row > .panel-row-style.parallax-background.fixed-background,
.has-hero-parallax .openrsm-hero-row > .panel-row-style.parallax-background.scroll-background {
	background-attachment: scroll;
}

.panel-row-style.scroll-background {
	background-attachment: scroll;
}

.full-height {
	min-height: 100vh;
}

.has-hero-intro .openrsm-hero-row > .panel-row-style.full-height,
.has-hero-intro .openrsm-hero-row > .panel-row-style.full-height.full-height {
	min-height: calc(100vh - var(--openrsm-hero-content-offset)) !important;
}

.hero-top,
.hero-middle,
.hero-bottom {
	position: relative;
}

.section-content {
	width: 100%;
	position: relative;
	box-sizing: border-box;
}

.hero-top .section-content,
.hero-middle .section-content,
.hero-bottom .section-content {
	position: relative;
	top: auto;
	bottom: auto;
	transform: none;
}

.has-hero-header:not(.has-hero-intro) .hero-top .section-content {
	position: absolute;
	top: 8vh;
	left: 0;
	right: 0;
}

.has-hero-header:not(.has-hero-intro) .hero-middle .section-content {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.has-hero-header:not(.has-hero-intro) .hero-bottom .section-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding-bottom: var(--openrsm-hero-row-padding);
}

.hero-left .section-content {
	text-align: left;
}

.hero-center .section-content {
	text-align: center;
}

.hero-right .section-content {
	text-align: right;
}

/* RSM Intro inside hero rows */
.widget_rsm_intro .rsm-intro,
.widget_rsm_intro.rsm-intro-widget .rsm-intro {
	position: relative;
	width: 100%;
	max-width: none;
}

.has-hero-intro .panel-widget-style .widget_rsm_intro {
	background: transparent;
}

.has-hero-intro .widget_rsm_intro .rsm-intro__title,
.has-hero-intro .widget_rsm_intro .rsm-intro__caption {
	color: inherit;
}

@media (max-width: 782px) {
	.full-height {
		min-height: 60vh;
	}

	.hero-top .section-content {
		position: relative;
		top: auto;
	}

	.hero-bottom .section-content {
		position: relative;
		bottom: auto;
		padding-bottom: 0;
	}

	.panel-row-style.fixed-background {
		background-attachment: scroll;
	}
}

@media (max-width: 782px) {
	.admin-bar.has-hero-header #masthead.site-header {
		top: 46px;
	}
}