/*
 * Compatibility with the Hansen-Buildings theme header (css/navigation.css).
 *
 * Loaded with the menu button styles, after the theme stylesheets. Depends on
 * the theme header markup: update it when that markup changes.
 *
 * The utility menu is rendered twice: in the top bar (the search button is an
 * icon, shown from 1200px only) and in the mobile nav panel (below 1200px),
 * where the button drops to the bottom of the panel, right above the CTA,
 * styled as a search field.
 */

@media (max-width: 1199px) {
	/* Search lives in the nav panel here; no duplicate icon in the top bar. */
	.site-header__top-menu .hls_menu_item {
		display: none;
	}

	.site-header__nav .site-header__utility-menu {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
	}

	.site-header__nav .hls_menu_item {
		margin-top: auto;
		padding: 24px 0 12px;
		border-bottom: 0;
	}

	.site-header__nav .hls_menu_button {
		justify-content: flex-start;
		gap: 12px;
		width: 100%;
		min-height: 56px;
		padding: 0 16px;
		color: var(--hpb-color-text-body, #122239B2);
		font-family: var(--hpb-font-family-base, 'Be Vietnam Pro', sans-serif);
		font-weight: 400;
		font-size: 16px;
		letter-spacing: normal;
		text-transform: none;
		background: #ffffff;
		border: 1px solid var(--hpb-color-border-3, #E5E7EB);
		border-radius: 4px;
	}

	.site-header__nav .hls_menu_button:hover {
		color: var(--hpb-color-dark, #122239);
		border-color: var(--hpb-color-dark, #122239);
	}

	.site-header__nav .hls_menu_button__label {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}
}