/**
 * "Get a Yard Sign" menu item (CSS class yard-sign-cta), shown as an outline
 * button beside "Make a Donation" in the desktop header. The mobile dropdown
 * keeps the standard menu item look.
 */
.elementor-location-header .elementor-nav-menu--main .menu-item.yard-sign-cta > a.elementor-item {
	padding: 14px 30px;
	border: 2px solid var(--e-global-color-primary, #24285f);
	border-radius: 3px;
	color: var(--e-global-color-primary, #24285f);
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.97px;
	text-transform: uppercase;
	transition: background-color 0.3s, color 0.3s;
}

.elementor-location-header .elementor-nav-menu--main .menu-item.yard-sign-cta > a.elementor-item:hover,
.elementor-location-header .elementor-nav-menu--main .menu-item.yard-sign-cta > a.elementor-item:focus-visible {
	background-color: var(--e-global-color-primary, #24285f);
	color: #fff;
}

/*
 * Tablet: at full size the extra button pushes the header onto two rows, so
 * tighten the spacing and shrink both header buttons to keep one row.
 */
@media (min-width: 768px) and (max-width: 1024px) {

	.elementor-location-header .elementor-nav-menu--main {
		--e-nav-menu-horizontal-menu-item-margin: 8px;
	}

	.elementor-location-header .elementor-element.e-con:has(> .elementor-widget-nav-menu) {
		column-gap: 16px;
	}

	.elementor-location-header .elementor-nav-menu--main .menu-item.yard-sign-cta > a.elementor-item {
		padding: 12px 14px;
		font-size: 13px;
		letter-spacing: 0.5px;
	}

	.elementor-location-header .elementor-element.elementor-widget-button a.elementor-button {
		padding: 14px 16px;
		font-size: 13px;
		line-height: 1;
		letter-spacing: 0.5px;
	}
}