/* sticky-header.v1.css : fixed site header while scrolling (Next.js transform "sticky-header",
 * owner request 2026-10-03). Expanded from the inline CSS in lib/enhance/transforms/sticky-header.ts.
 *
 * The header container (.elementor-element-72ef144.header-version-1, template 5794) is
 * position:absolute in Elementor, so it scrolled away with the page. position:fixed keeps today's
 * pixels at scrollY=0 (it is out of flow either way) and only changes what happens once scrolled.
 * sticky-header.v1.js adds html.yn-sh-scrolled past 10px of scroll and keeps --yn-sh-h exact. */
:root {
	--yn-sh-h: 84px;
}

.elementor-element.elementor-element-72ef144.header-version-1 {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
}

@media (prefers-reduced-motion: no-preference) {
	.elementor-element.elementor-element-72ef144.header-version-1 {
		transition: background-color 0.2s ease, box-shadow 0.2s ease;
	}
}

/* Scrolled: the site's own cream (not the rust accent, which swallowed the logo and the CTA), shadow, compact. */
html.yn-sh-scrolled .elementor-element.elementor-element-72ef144.header-version-1 {
	background-color: var(--e-global-color-background, #FFFAF5) !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
	--padding-top: 6px !important;
	--padding-bottom: 6px !important;
}

html.yn-sh-scrolled .elementor-element-57498cc .ata-site-logo img {
	max-height: 64px !important;
	width: auto !important;
}

@media (max-width: 1024px) {
	html.yn-sh-scrolled .elementor-element-57498cc .ata-site-logo img {
		max-height: 52px !important;
	}
}

/* Desktop only: the nav text is white at rest (over the hero); on the cream bar it must turn dark. */
@media (min-width: 1025px) {
	html.yn-sh-scrolled .elementskit-navbar-nav > li > a {
		color: #000 !important;
	}

	html.yn-sh-scrolled .elementskit-navbar-nav > li > a:hover {
		color: var(--e-global-color-accent, #A43C1F) !important;
	}

	html.yn-sh-scrolled .elementskit-submenu-indicator {
		color: #000 !important;
	}
}

/* In-page anchors land below the permanently visible header. */
html {
	scroll-padding-top: var(--yn-sh-h, 84px);
}