/**
 * Design 2026 — WPBakery row/section utilities
 * Loaded only on page-2026.php.
 *
 * Hero row extra class name: hero-2026 hero-full-height
 *
 * Row stretch (functions.php sets window.wpb_disable_full_width_row_js):
 * - Default → max-width --layout-max-width (1600px), centered
 * - Stretch row → full-width background band; columns capped at --layout-max-width
 * - Stretch row and content → full viewport width (hero, full-bleed sections)
 */

/*
 * Top-level rows/sections only (not vc_row_inner).
 * Includes rows inside .parallax-pin (not only direct .wpb-content-wrapper children).
 */
.site-main.landing>.wpb-content-wrapper> :is(.vc_row, .vc_section):not(.vc_inner),
.site-main.landing> :is(.vc_row, .vc_section):not(.vc_inner),
.site-main.landing .parallax-pin> :is(.vc_row, .vc_section):not(.vc_inner) {
	box-sizing: border-box;
}

/* Cancel WPBakery pre-JS 100vw breakout when full-width JS is disabled */
.site-main.landing>.wpb-content-wrapper> :is(.vc_row, .vc_section)[data-vc-full-width]:not(.vc_inner),
.site-main.landing> :is(.vc_row, .vc_section)[data-vc-full-width]:not(.vc_inner),
.site-main.landing .parallax-pin> :is(.vc_row, .vc_section)[data-vc-full-width]:not(.vc_inner) {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	left: auto !important;
	right: auto !important;
}

/* Default: boxed to layout width */
.site-main.landing>.wpb-content-wrapper> :is(.vc_row, .vc_section):not([data-vc-full-width]):not(.vc_inner),
.site-main.landing> :is(.vc_row, .vc_section):not([data-vc-full-width]):not(.vc_inner),
.site-main.landing .parallax-pin> :is(.vc_row, .vc_section):not([data-vc-full-width]):not(.vc_inner) {
	width: 100%;
	max-width: var(--layout-max-width);
	margin-inline: auto;
	padding-inline: var(--layout-gutter-x);
}

/*
 * Stretch row (not “and content”): full-width row/background, content inset to 1600px.
 * Side padding replaces WPBakery’s disabled full-width JS column offsets.
 */
.site-main.landing>.wpb-content-wrapper> :is(.vc_row, .vc_section)[data-vc-full-width]:not([data-vc-stretch-content]):not(.vc_inner),
.site-main.landing> :is(.vc_row, .vc_section)[data-vc-full-width]:not([data-vc-stretch-content]):not(.vc_inner),
.site-main.landing .parallax-pin> :is(.vc_row, .vc_section)[data-vc-full-width]:not([data-vc-stretch-content]):not(.vc_inner) {
	--wpb-stretch-gutter: max(var(--layout-gutter-x), calc((100% - var(--layout-max-width)) / 2));
	padding-inline: var(--wpb-stretch-gutter);
}

/* Stop WPB row negative margins from bleeding past the inset */
.site-main.landing>.wpb-content-wrapper>.vc_row[data-vc-full-width]:not([data-vc-stretch-content]):not(.vc_inner),
.site-main.landing>.vc_row[data-vc-full-width]:not([data-vc-stretch-content]):not(.vc_inner),
.site-main.landing .parallax-pin>.vc_row[data-vc-full-width]:not([data-vc-stretch-content]):not(.vc_inner) {
	margin-inline: 0 !important;
}

/* Stretch row and content: edge-to-edge (e.g. hero) */
.site-main.landing>.wpb-content-wrapper> :is(.vc_row, .vc_section)[data-vc-stretch-content]:not(.vc_inner),
.site-main.landing> :is(.vc_row, .vc_section)[data-vc-stretch-content]:not(.vc_inner),
.site-main.landing .parallax-pin> :is(.vc_row, .vc_section)[data-vc-stretch-content]:not(.vc_inner) {
	padding-inline: 0;
}

/* Full-viewport hero row/section */
.site-main .vc_row.wpb_row.hero-full-height,
.site-main .vc_section.hero-full-height,
.vc_row.wpb_row.hero-full-height,
.vc_section.hero-full-height {
	box-sizing: border-box;
	min-height: var(--hero-min-height-fallback);
	min-height: max(var(--hero-min-height-fallback), var(--hero-min-height));
}

@media (max-width: 767.98px) {
	.site-main .vc_row.wpb_row.hero-full-height,
	.site-main .vc_section.hero-full-height,
	.vc_row.wpb_row.hero-full-height,
	.vc_section.hero-full-height {
		background-size: cover !important;
	}

	.wpb_row.smaller-padding-mobile {
		padding-top: 4.7rem !important;
		padding-bottom: 4.7rem !important;
	}

	.smaller-padding-mobile-inner > .vc_column-inner {
		padding-top: 4.7rem !important;
		padding-bottom: 4.7rem !important;
	}
}

/* Vertical centering when WPBakery flex row is enabled */
.vc_row.hero-full-height.vc_row-flex>.vc_column_container>.vc_column-inner,
.vc_row.hero-full-height.vc_row-o-full-height>.vc_column_container>.vc_column-inner {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: center;
}

/*
 * Hero row: header offset + top shadow on the row itself.
 * Uses ::before (WPB uses ::after for flex spacers / clearfix).
 */
.vc_row.wpb_row.hero-2026,
.vc_section.hero-2026 {
	position: relative;
	padding-top: 5.5rem;
}

.vc_row.wpb_row.hero-2026::before,
.vc_section.hero-2026::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--hero-shadow-gradient);
	pointer-events: none;
	z-index: 1;
}

/* WPB flex rows hide pseudo-elements — restore ::before for the shadow */
.vc_row.wpb_row.hero-2026.vc_row-flex::before {
	display: block !important;
}

.hero-2026.vc_row[data-vc-full-width="true"] {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
   parallax-above — row 3 scrolls up over row 2 after row 2 has been read
   Order: row 1 (hero) → row 2 scrolls through → row 3 slides over pinned row 2
   No negative margin — row 3 follows row 2 in flow, z-index stacks on scroll.
   Requires a solid background on the parallax-above row.
   ------------------------------------------------------------------------- */

/* Allow sticky children inside the stack (overflow clip on #page breaks position: sticky) */
#content.site-content:has(.parallax-pin),
.site-main.landing:has(.parallax-pin) {
	overflow-x: clip;
	overflow-y: visible;
}

.parallax-pin {
	position: relative;
	isolation: isolate;
	overflow: visible;
}

.parallax-pin>.parallax-below {
	position: sticky;
	top: 0;
	z-index: 1;
	width: 100%;
	box-sizing: border-box;
}

.parallax-pin>.parallax-above {
	position: relative;
	z-index: 2;
	margin-top: 0;
	box-sizing: border-box;
}

.parallax-pin>.vc_row-full-width {
	position: relative;
	z-index: 2;
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
	pointer-events: none;
}

.vc_row.bg-bottom-left {
	background-repeat: no-repeat !important;
	background-position: 0% 100% !important;
	background-size: 74% !important;
}

@media (prefers-reduced-motion: reduce) {
	.parallax-pin>.parallax-below {
		position: relative;
		top: auto;
	}
}

.partner-blocks .wpb_wrapper {
	height: 100%;
}

/* -------------------------------------------------------------------------
   col-bg-zoom — column background scales on hover (content stays static)
   Add extra class "col-bg-zoom" on the WPBakery column (not the row).
   Set the column background image in Design Options → Background.
   JS (col-bg-zoom-2026.js) inserts a .col-bg-zoom__bg layer with the image.
   ------------------------------------------------------------------------- */

.site-main.landing .col-bg-zoom {
	overflow: hidden;
}

.site-main.landing .col-bg-zoom > .vc_column-inner {
	position: relative;
	overflow: hidden;
}

/* Image layer sits above WPB's own (static) background and below content */
.site-main.landing .col-bg-zoom__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	transform: scale(1);
	transform-origin: center center;
	transition: transform 720ms cubic-bezier(0.2, 0.9, 0.2, 1);
	will-change: transform;
	pointer-events: none;
}

.site-main.landing .col-bg-zoom:hover .col-bg-zoom__bg {
	transform: scale(1.12);
}

/* Keep content above the zooming background layer */
.site-main.landing .col-bg-zoom > .vc_column-inner > .wpb_wrapper {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.site-main.landing .col-bg-zoom__bg {
		transition: none;
	}

	.site-main.landing .col-bg-zoom:hover .col-bg-zoom__bg {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   row-bg-scroll-fade — row background image fades in while scrolling
   Add extra class "row-bg-scroll-fade" on the WPBakery row or section.
   Set the background image in Design Options → Background.
   Opacity 0 at viewport entry → 1 when row center hits viewport center.
   JS (row-bg-scroll-fade-2026.js) moves the image to .row-bg-scroll-fade__bg.
   ------------------------------------------------------------------------- */

.site-main.landing :is(.vc_row, .vc_section).row-bg-scroll-fade {
	position: relative;
	isolation: isolate;
}

.site-main.landing :is(.vc_row, .vc_section).row-bg-scroll-fade--ready {
	background-image: none !important;
}

.site-main.landing .row-bg-scroll-fade__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	will-change: opacity;
	background-blend-mode: soft-light;
}

.site-main.landing :is(.vc_row, .vc_section).row-bg-scroll-fade--ready > :is(.wpb_column, .vc_column_container, .vc_row-full-width) {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.site-main.landing .row-bg-scroll-fade__bg {
		opacity: 1;
	}
}

.site-main.landing .cta-wrapper .wpb_wrapper {
	display: flex;
	justify-content: center;
    gap: 0.6rem;
}

/* -------------------------------------------------------------------------
   panel-2026 — white inset panel on a stretch row (navy band behind)
   Add extra class "panel-2026" on the WPBakery column (not the row).
   Use Stretch row on the parent row for a full-width background band.
   The white background bleeds a fixed amount past the layout content box;
   inner padding compensates so content aligns with other page zones.
   Optional: panel-2026-flat-bottom (and panel-2026-flat-top) to stack zones.
   Footer: .footer-2026__stretch uses the same inset as a stretch row.
   ------------------------------------------------------------------------- */

.panel-2026 {
	--panel-2026-padding: 2rem;
	--panel-2026-bleed: 2rem;
	/* Minimum gap kept between the white panel and the viewport edges */
	--panel-2026-edge: 20px;
	--panel-2026-radius: 1.25rem;
	/* Distance from the viewport edge to the layout content box (matches the stretch-row inset) */
	--panel-2026-cb-gutter: max(var(--layout-gutter-x), (100vw - var(--layout-max-width)) / 2);
	/* Clamp the bleed so the panel stays centred and never sits closer than --panel-2026-edge to the viewport */
	--panel-2026-bleed-x: max(0px, min(var(--panel-2026-bleed), var(--panel-2026-cb-gutter) - var(--panel-2026-edge)));
	box-sizing: border-box;
	/* Expand symmetrically (centred) rather than shifting left.
	   !important beats WPBakery's later-loaded .vc_col-sm-12 { width: 100% }. */
	width: calc(100% + 2 * var(--panel-2026-bleed-x)) !important;
	max-width: none;
	margin-inline: calc(-1 * var(--panel-2026-bleed-x));
}

.site-main.landing .panel-2026 > .vc_column-inner {
	background: var(--color-white);
	border-radius: var(--panel-2026-radius);
	overflow: hidden;
	padding-block: var(--panel-2026-padding);
	padding-inline: calc(var(--panel-2026-bleed-x) + var(--layout-gutter-x));
}

.site-main.landing .panel-2026-flat-bottom > .vc_column-inner {
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.site-main.landing .panel-2026-flat-top > .vc_column-inner {
	border-start-start-radius: 0;
	border-start-end-radius: 0;
}

.site-main.landing .panel-2026.blue-bg > .vc_column-inner {
	background: var(--color-blue-lightest-2);
}

@media (max-width: 991.98px) {
	.panel-2026 {
		width: 100% !important;
		margin-inline: 0;
	}

	.site-main.landing .panel-2026 > .vc_column-inner {
		padding-inline: var(--layout-gutter-x);
	}
}