/**
 * Global base styles; Elementor structure inherits these defaults.
 */
body {
	font-family: var(--cw-font-body);
	font-size: 1rem;
	line-height: var(--cw-line-height-body);
	background-color: var(--cw-bg);
	color: var(--cw-text);
}

/**
 * Stacking: keep site header above hero/sections when layouts overlap (negative margins, full-bleed hero).
 * Preloader remains on top (z-index 99999). Override with --cw-header-z in design tokens if needed.
 */
.elementor-location-header,
.site-header {
	position: relative;
	z-index: var(--cw-header-z, 500);
}

/**
 * Pull first page content up by the measured header height so the hero can sit under the transparent header
 * while the header stays on top (--cw-header-z). Spacing for readable copy belongs in Elementor (hero padding),
 * not theme padding paired with this margin — that double-compensates and fights the overlap intent.
 * --cw-site-header-height: :root, from cw-header-layout.js (#backdrop or .elementor-location-header).
 * --cw-header-overlap-extra: optional in design-tokens / custom CSS (default 0).
 * Editor: skip. Plugin between header and main: .cw-content-under-header. Off: body.cw-header-overlap-disabled.
 */
body:not(.cw-header-overlap-disabled):not(.elementor-editor-active):not(.elementor-editor-preview) .elementor-location-header + #content,
body:not(.cw-header-overlap-disabled):not(.elementor-editor-active):not(.elementor-editor-preview) .elementor-location-header + main,
body:not(.cw-header-overlap-disabled):not(.elementor-editor-active):not(.elementor-editor-preview) .elementor-location-header + .elementor {
	position: relative;
	z-index: 1;
	margin-top: calc(-1 * var(--cw-site-header-height, 0px) + var(--cw-header-overlap-extra, 0px));
}

body:not(.cw-header-overlap-disabled):not(.elementor-editor-active):not(.elementor-editor-preview) .cw-content-under-header {
	position: relative;
	z-index: 1;
	margin-top: calc(-1 * var(--cw-site-header-height, 0px) + var(--cw-header-overlap-extra, 0px));
}

/**
 * Frosted header: set CSS ID `backdrop` on the Elementor header container (Advanced → CSS ID → backdrop).
 * Same strength as Tailwind `backdrop-blur-xl` (24px). Add a semi-transparent background on that container
 * in Elementor so the glass effect is visible.
 * Shadow matches Tailwind shadow-2xl scale (optional --tw-shadow-color tints --tw-shadow-colored).
 */
#backdrop {
	--tw-backdrop-blur: blur(24px);
	-webkit-backdrop-filter: var(--tw-backdrop-blur);
	backdrop-filter: var(--tw-backdrop-blur);
	--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
	--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
	box-shadow:
		var(--tw-ring-offset-shadow, 0 0 #0000),
		var(--tw-ring-shadow, 0 0 #0000),
		var(--tw-shadow);
}

/*
 * Up to laptop / small desktop: default horizontal inset for logo + menu (matches --cw-gutter-inline).
 * 1366px includes Elementor’s laptop preview (wider than the old 1023px tablet cap).
 *
 * Use #backdrop (not :where) so ID specificity beats generic .elementor-element / .e-con padding resets
 * that were wiping gutters. Override in Elementor or Custom CSS if you need a different header inset.
 * var(..., clamp(...)) matches cw-cards / widgets when the token handle is missing (invalid max() otherwise).
 */
@media (max-width: 1366px) {
	#backdrop {
		box-sizing: border-box;
		padding-inline-start: max(var(--cw-gutter-inline, clamp(1rem, 5vw, 1.5rem)), env(safe-area-inset-left, 0px));
		padding-inline-end: max(var(--cw-gutter-inline, clamp(1rem, 5vw, 1.5rem)), env(safe-area-inset-right, 0px));
	}

	.elementor-location-header:not(:has(#backdrop)) > .elementor > .e-con:first-child {
		box-sizing: border-box;
		padding-inline-start: max(var(--cw-gutter-inline, clamp(1rem, 5vw, 1.5rem)), env(safe-area-inset-left, 0px));
		padding-inline-end: max(var(--cw-gutter-inline, clamp(1rem, 5vw, 1.5rem)), env(safe-area-inset-right, 0px));
	}

	.elementor-location-header:not(:has(#backdrop)) > .elementor > .elementor-section:first-child > .elementor-container {
		box-sizing: border-box;
		padding-inline-start: max(var(--cw-gutter-inline, clamp(1rem, 5vw, 1.5rem)), env(safe-area-inset-left, 0px));
		padding-inline-end: max(var(--cw-gutter-inline, clamp(1rem, 5vw, 1.5rem)), env(safe-area-inset-right, 0px));
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--cw-font-heading);
	font-weight: 600;
	line-height: var(--cw-line-height-heading);
}

h1 {
	font-weight: 700;
	font-size: clamp(2.2rem, 4vw, 4rem);
	line-height: var(--cw-line-height-h1);
	letter-spacing: var(--cw-letter-spacing-h1);
}

h2 {
	font-size: 2.5rem;
	font-weight: 700;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.25rem;
}

/**
 * Optional: add class `cw-content-inner` on a container in Elementor (Advanced → CSS Classes)
 * when you want this wrapper to respect --cw-content-max-width (matches Site Settings if synced).
 */
.cw-content-inner {
	max-width: var(--cw-content-max-width);
	margin-left: auto;
	margin-right: auto;
}

/**
 * Scroll reveal presets (cw-motion.js + cw-widgets-scroll-reveal.js use gsap.to only).
 * Start state in CSS; animation brings to opacity 1 / translate 0 — avoids from()/immediateRender flicker.
 */
.split-reveal-heading .split-word {
	opacity: 0;
	transform: translate3d(0, 115%, 0);
}

.gsap-section-header:not(.cw-section-intro):not(.cw-environment-intro):not(.cw-research-intro) p,
.gsap-section-header:not(.cw-section-intro):not(.cw-environment-intro):not(.cw-research-intro) a,
.gsap-section-header:not(.cw-section-intro):not(.cw-environment-intro):not(.cw-research-intro) button {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
}

/* Opt-in: header manages its own scroll-reveal start state — match specificity of the hide rule above. */
.gsap-section-header--self-managed:not(.cw-section-intro):not(.cw-environment-intro):not(.cw-research-intro) p,
.gsap-section-header--self-managed:not(.cw-section-intro):not(.cw-environment-intro):not(.cw-research-intro) a,
.gsap-section-header--self-managed:not(.cw-section-intro):not(.cw-environment-intro):not(.cw-research-intro) button {
	opacity: 1;
	transform: none;
}

#environments:not(.cw-environment-section) .gsap-env-card {
	opacity: 0;
	transform: translate3d(0, 100px, 0);
}

@media (prefers-reduced-motion: reduce) {
	.split-reveal-heading .split-word,
	.gsap-section-header:not(.cw-section-intro):not(.cw-environment-intro):not(.cw-research-intro) p,
	.gsap-section-header:not(.cw-section-intro):not(.cw-environment-intro):not(.cw-research-intro) a,
	.gsap-section-header:not(.cw-section-intro):not(.cw-environment-intro):not(.cw-research-intro) button,
	#environments:not(.cw-environment-section) .gsap-env-card {
		opacity: 1;
		transform: none;
	}
}

/* Elementor editor: scroll-reveal CSS hides copy; force visible while editing. */
.elementor-editor-active .split-reveal-heading .split-word,
.elementor-editor-active .gsap-section-header:not(.cw-section-intro):not(.cw-environment-intro):not(.cw-research-intro) p,
.elementor-editor-active .gsap-section-header:not(.cw-section-intro):not(.cw-environment-intro):not(.cw-research-intro) a,
.elementor-editor-active .gsap-section-header:not(.cw-section-intro):not(.cw-environment-intro):not(.cw-research-intro) button,
.elementor-editor-active #environments:not(.cw-environment-section) .gsap-env-card {
	opacity: 1;
	transform: none;
}

/* Narrow viewports: ScrollTrigger-driven reveals often miss; keep copy legible (plugin intros have scoped rules too). */
@media (max-width: 767px) {
	.split-reveal-heading .split-word,
	.gsap-section-header:not(.cw-section-intro):not(.cw-environment-intro):not(.cw-research-intro) p,
	.gsap-section-header:not(.cw-section-intro):not(.cw-environment-intro):not(.cw-research-intro) a,
	.gsap-section-header:not(.cw-section-intro):not(.cw-environment-intro):not(.cw-research-intro) button {
		opacity: 1;
		transform: none;
	}
}

/* Elementor footer import — `demo-skin/elementor-import-footer-premium-*.json` (Nav Menu + Recent Posts widgets). */
.footer-premium .cw-footer-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.footer-premium .cw-footer-menu a {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--cw-text-muted, #8090a8);
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-premium .cw-footer-menu a:hover,
.footer-premium .cw-footer-menu a:focus-visible {
	color: #fff;
}

.footer-premium .cw-footer-recent-posts ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.footer-premium .cw-footer-recent-posts li {
	margin: 0;
	padding: 0;
}

.footer-premium .cw-footer-recent-posts a {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--cw-text-muted, #8090a8);
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-premium .cw-footer-recent-posts a:hover,
.footer-premium .cw-footer-recent-posts a:focus-visible {
	color: #fff;
}

.footer-premium .cw-footer-recent-posts .post-date,
.footer-premium .cw-footer-recent-posts span[class*="rss-date"] {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: color-mix(in srgb, var(--cw-text-muted, #8090a8) 60%, transparent);
}

/*
 * In-page anchors (#id): offset for Theme Builder sticky header after JS scroll restore
 * (cw-motion.js cwRestoreFragmentScrollFromHash). Last updated 2026-05-02.
 */
html {
	scroll-padding-top: 5.5rem;
}