/**
 * Site header: sticky-with-hide-on-scroll-down.
 *
 * Self-contained replacement for DesignSetGo's "sticky header" plugin
 * feature (turned off in DesignSetGo settings). Pairs with
 * assets/js/site-header-sticky.js, which toggles the two classes below.
 * Tweak the numbers here and in the JS file to change feel:
 *   - SCROLL_THRESHOLD / HYSTERESIS constants in the JS file
 *   - the transition duration and box-shadow below
 */

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: transform 300ms ease-in-out, box-shadow 300ms ease-in-out;
}

/* Scrolled past the threshold: small shadow so it reads as "lifted" over content. */
header.wp-block-template-part.site-header--scrolled {
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.08 );
}

/* Scrolling down past the threshold: slide the header out of view. */
header.wp-block-template-part.site-header--hidden {
	transform: translateY( -100% );
}

/**
 * Mobile nav: the site's navigation block is set to "overlayMenu: never" in
 * the Site Editor (Header template part) so it never collapses into a
 * hamburger — it's always the plain link row, in its own bar below the
 * logo/background-image band. These rules only kick in under 600px: they
 * size the link text down to fit all four links on one line at 375px width
 * (iPhone SE/mini and up). If you add/rename nav links later and it wraps
 * again, drop NAV_FONT_SIZE a bit further.
 *
 * Note the !important: WP's own "has-*-font-size" utility class is also
 * !important, so a plain override here would silently lose to it.
 */
@media ( max-width: 600px ) {
	header.wp-block-template-part .wp-block-navigation,
	header.wp-block-template-part .wp-block-navigation-item__content {
		font-size: 14px !important; /* NAV_FONT_SIZE */
	}

	header.wp-block-template-part .wp-block-navigation {
		justify-content: center !important;
	}

	header.wp-block-template-part .wp-block-navigation .wp-block-navigation__container {
		flex-wrap: nowrap !important;
		gap: 4px 8px !important;
		justify-content: center !important;
	}

	header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item,
	header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content {
		white-space: nowrap !important;
		flex-shrink: 0;
	}
}