/* Make the top site header fixed so it remains visible while scrolling.
	 This file is included from `source/_partials/head-common.html` and
	 therefore is safe to edit (it is a source asset, not a build output).
*/

:root {
	/* Fallback for browsers without the runtime JS that keeps this in sync */
	--site-header-height: 64px;
}

/* Keep the header anchored to the top */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200; /* above page content but below modal overlays */
	background: var(--header-bg, #fff);
	/* Ensure the header paints as a separate layer for smooth scrolling */
	-webkit-transform: translateZ(0);
	transform: translateZ(0);

}

/* Keep the inner header content aligned with site layout; rely on existing
	 .header-inner styles from the main stylesheet for widths. Only ensure
	 this container doesn't stretch the fixed header unexpectedly. */
.site-header .header-inner {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Product subnav should appear immediately under the header and also be fixed
	 so it remains visible on product pages. When the container is empty it will
	 be aria-hidden="true" and may have height: 0. */
#product-subnav-container {
	position: fixed;
	/* place the product subnav immediately below the header. The runtime
		 script writes --site-header-only-height (header alone) and
		 --site-header-height (header + subnav) so we can position correctly. */
	top: var(--site-header-only-height, 0);
	left: 0;
	right: 0;
	z-index: 190; /* just under the header but above page content */
	background: var(--header-bg, #fff);
	box-shadow: 0 1px 0 rgba(0,0,0,0.04);
		/* When empty the container will have no children and effectively
			 contribute zero height; when populated the inner .product-subnav
			 will size the container. Use visible/auto so it's not clipped. */
		display: block;
		visibility: visible;
		height: auto;
}

/* Center the visible product-subnav element (the actual nav inside the
	 container). The existing .product-subnav rules in docs.css control layout
	 of the inner nav; keep that behavior. */

.product-subnav {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 18px;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 6px 16px;
}

.product-subnav a { color: var(--text); text-decoration: none; padding: 6px 8px; }

/* Ensure page content does not get covered by the fixed header/subnav.
	 The runtime script writes the combined height into --site-header-height
	 so content can respect the exact computed value. */
body {
	padding-top: var(--site-header-height, 64px);
}

/* On very small screens the header behavior remains fixed but we avoid
	 extremely large paddings by letting the JS clamp values if needed. */
@media (max-width: 480px) {
	:root { --site-header-height: 56px; }
}