/* Site search button in the primary menu (WO-89). Colors come from the menu's own link styles. */

.genesis-nav-menu .clb-search-toggle {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

/* A zero-width character gives the button a text baseline, so it lines up with the
   menu links instead of sitting a few pixels high. */
.genesis-nav-menu .clb-search-toggle::before {
	content: "\200b";
	margin-right: -0.5em;
}

/* 1em matches the menu's 20px line height, so the header doesn't grow. */
.clb-search-toggle-icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

@media only screen and (min-width: 960px) {
	/* Narrow padding: the menu already fills the header at laptop widths. */
	.genesis-nav-menu .clb-search-toggle {
		padding-left: 8px;
		padding-right: 8px;
	}

	/* Icon only on desktop; the label stays for screen readers via aria-label. */
	.clb-search-toggle-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}