/* vs-site-header.css — step10/13 (2026-10-04), site-wide.
   Header padding fixed (no vw). Logo height via --vs-logo-h (patches/000).
   Step13b: sticky + real box shrink (padding + logo var), no transform. Guest: no admin-bar. */
#masthead {
	--jivatma--header-top: 7.2px;
	--jivatma--header-right: 28.8px;
	--jivatma--header-bottom: 11.52px;
	--jivatma--header-left: 28.8px;
	--vs-logo-h: 56px;
	background-color: rgba(10, 10, 10, 0.92);
	transition: padding 200ms ease, background-color 200ms ease;
}
#masthead .header-image img,
#masthead .custom-logo,
#masthead .header-image {
	transition: height 200ms ease, max-height 200ms ease;
}

@media (max-width: 767px) {
	#masthead {
		--jivatma--header-top: 3.9px;
		--jivatma--header-right: 7.8px;
		--jivatma--header-bottom: 3.9px;
		--jivatma--header-left: 7.8px;
		--vs-logo-h: 32px;
	}
}

/* Theme sets overflow:hidden on this wrapper, which kills position:sticky. */
.jivatma-body-padding-content {
	overflow: visible;
}

/* Step15a: holder = sticky strip with a FIXED reserved height (no reflow); only the inner bar shrinks. */
.site-header-holder {
	position: sticky;
	top: 0;
	z-index: 1000;
	height: 75.7px;
	background: transparent;
}
@media (max-width: 767px) {
	.site-header-holder { height: 54.17px; }
}
#masthead {
	position: relative;
	z-index: 1000;
	background-color: rgba(10, 10, 10, 0.92);
}

body.vs-scrolled #masthead {
	--vs-logo-h: 49px;
	--jivatma--header-top: 4px;
	--jivatma--header-bottom: 6px;
}
@media (max-width: 767px) {
	body.vs-scrolled #masthead {
		--vs-logo-h: 28px;
		--jivatma--header-top: 1px;
		--jivatma--header-bottom: 1px;
	}
	body.vs-scrolled #masthead .menu-toggle {
		padding-top: 4px;
		padding-bottom: 4px;
		min-height: 0;
		font-size: 12px;
	}
	body.vs-scrolled #masthead .mobile-menu-control-wrapper {
		min-height: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	#masthead,
	#masthead .header-image img,
	#masthead .custom-logo,
	#masthead .header-image { transition: none; }
}

/* Sideways clip without breaking sticky (pad must stay overflow:visible). */
html, body { overflow-x: clip; }