/**
 * Pico Duarte — page layout helpers (Home title suppressed via PHP filter).
 *
 * Immersive hero: add CSS class **picoduarte-hero** to the TOP Elementor SECTION
 * (Advanced → CSS Classes). Uses :has() — supported in modern browsers (~2023+).
 *
 * Customize overlap: `--picoduarte-header-overlap-shift` on :root/body/customizer.
 */

:root {
	--picoduarte-header-overlap-shift: clamp(4.75rem, 12vw, 7.75rem);
}

@supports selector(:has(.picoduarte-hero)) {
	/* Pull first hero upward so imagery meets the navbar; compensate with padding inside section. */
	body:has(.picoduarte-hero)
		#content.site-main
		> .page-content
		> .elementor
		> .elementor-element.picoduarte-hero:first-child {
		margin-block-start: calc(-1 * var(--picoduarte-header-overlap-shift));
		padding-block-start: calc(
			var(--picoduarte-header-overlap-shift) + clamp(1rem, 3vw, 2.75rem)
		);
	}

	/* Translucent navbar + frost over whatever scrolls behind (hero/media). PHP header skin only. */
	body:has(.picoduarte-hero)
		header#site-header.site-header.picoduarte-dynamic-header {
		position: sticky;
		top: 0;
		z-index: 1000;
		background-color: rgb(24 27 30 / 0.42);
		border-bottom-color: rgb(245 245 242 / 0.12);
		backdrop-filter: saturate(1.08) blur(22px);
		-webkit-backdrop-filter: saturate(1.08) blur(22px);
		transition:
			background-color 0.25s ease,
			border-color 0.25s ease;
	}

	/* Logged-in WP admin bar: stick below bar (WP sets --wp-admin--admin-bar--height). */
	body.admin-bar:has(.picoduarte-hero)
		header#site-header.site-header.picoduarte-dynamic-header {
		top: var(--wp-admin--admin-bar--height, 32px);
	}

	/* Keep frosted drawer above page without fighting Elementor overlays */
	body:has(.picoduarte-hero)
		header#site-header.site-header.picoduarte-dynamic-header
		.site-navigation-dropdown {
		z-index: 100001;
	}
}

/* No :has(): pages without the class behave as before */

@media (prefers-reduced-motion: reduce) {
	@supports selector(:has(.picoduarte-hero)) {
		body:has(.picoduarte-hero)
			header#site-header.site-header.picoduarte-dynamic-header {
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
			background-color: rgb(24 27 30 / 0.94);
		}
	}
}