/**
 * CIYWR internal page heroes
 * Match Philippines banner size (422px). Home slider untouched.
 *
 * Only dedicated Elementor banner sections (height-min-height).
 * Pages like Contact Us put form + content in the first section —
 * do NOT clamp those to 422px or the form gets clipped.
 *
 * DOM: #main … .entry > .elementor > .elementor-top-section.elementor-section-height-min-height:first-child
 */

body:not(.home):not(.front-page) {
	--ciywr-page-hero-height: 422px;
	--ciywr-page-hero-overlay: rgba(16, 19, 24, 0.55);
}

/* Dedicated banner sections only (Philippines / Kenya / About-style heroes) */
body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child {
	position: relative !important;
	overflow: hidden !important;
	min-height: var(--ciywr-page-hero-height) !important;
	height: var(--ciywr-page-hero-height) !important;
	max-height: var(--ciywr-page-hero-height) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-attachment: scroll !important;
	z-index: 0;
}

body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child > .elementor-container {
	min-height: var(--ciywr-page-hero-height) !important;
	height: 100% !important;
	max-height: var(--ciywr-page-hero-height) !important;
	align-items: center !important;
	position: relative !important;
	z-index: 2 !important;
}

/* Dark opacity layer (always — many pages have no overlay node in HTML) */
body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: var(--ciywr-page-hero-overlay) !important;
	opacity: 1 !important;
	z-index: 1 !important;
	pointer-events: none !important;
	display: block !important;
}

/* If Elementor overlay exists, force it dark too */
body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child > .elementor-background-overlay {
	background-color: var(--ciywr-page-hero-overlay) !important;
	background-image: none !important;
	opacity: 1 !important;
	z-index: 1 !important;
	pointer-events: none !important;
}

/* White banner title — beat Elementor post CSS */
body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child .elementor-heading-title,
body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child .elementor-widget-heading .elementor-heading-title,
body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child h1,
body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child h2,
body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child h3,
body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child h4,
body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child .elementor-widget-heading {
	color: #ffffff !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}

body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child .elementor-widget-heading .elementor-widget-container {
	color: #ffffff !important;
}

/* Banner subtitle under title (Contact-style lead) */
body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child .ciywr-page-hero-sub {
	display: block !important;
	width: 100%;
	max-width: 36rem;
	margin: 12px auto 0 !important;
	padding: 0 16px;
	box-sizing: border-box;
	color: rgba(255, 255, 255, 0.9) !important;
	font-family: var(--ciywr-font-serif, "Source Serif 4", Georgia, serif) !important;
	font-size: clamp(0.95rem, 1.6vw, 1.15rem) !important;
	font-style: italic !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	text-align: center !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Parallax motion layer */
body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child .elementor-motion-effects-container,
body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child .elementor-motion-effects-layer {
	z-index: 0;
}

body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child.ciywr-page-hero-parallax .elementor-motion-effects-layer {
	transform: translate3d(0, var(--ciywr-hero-parallax, 0px), 0) scale(1.12) !important;
	background-size: cover !important;
	background-position: center center !important;
}

/* Africa hub custom hero — same height */
body.ciywr-africa-hub-page .ciywr-africa-hub__hero {
	min-height: var(--ciywr-page-hero-height, 422px);
	height: var(--ciywr-page-hero-height, 422px);
	max-height: var(--ciywr-page-hero-height, 422px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 0;
	padding-bottom: 0;
	box-sizing: border-box;
	overflow: hidden;
}

@media (max-width: 767px) {
	body:not(.home):not(.front-page) {
		--ciywr-page-hero-height: 280px;
	}

	body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child .elementor-heading-title,
	body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child h1,
	body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child h2 {
		font-size: clamp(1.5rem, 7vw, 2.25rem) !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	body:not(.home):not(.front-page) {
		--ciywr-page-hero-height: 360px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body:not(.home):not(.front-page) #main .elementor > .elementor-top-section.elementor-section-height-min-height:first-child.ciywr-page-hero-parallax .elementor-motion-effects-layer {
		transform: none !important;
	}
}