/* Customer Sign In link to the DROP app (https://data.dropcollab.com).
 *
 * Existing customers are a different audience from everyone else reading the
 * site, so the header link is set apart as an outlined pill at the end of the
 * menu rather than looking like one more marketing page.
 */

.menu-item-customer-sign-in .menu-link svg {
	width: 16px;
	height: 16px;
	flex: none;
}

/* Desktop header: outlined pill, filled on hover. */
#ast-hf-menu-1 > .menu-item-customer-sign-in {
	display: flex;
	align-items: center;
	margin-left: 12px;
}

#ast-hf-menu-1 > .menu-item-customer-sign-in > .menu-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: auto;
	line-height: 1.2;
	padding: 9px 18px;
	border: 2px solid #3e2180;
	border-radius: 999px;
	color: #3e2180;
	background: transparent;
	transition: background-color 0.15s, color 0.15s;
}

#ast-hf-menu-1 > .menu-item-customer-sign-in > .menu-link:hover,
#ast-hf-menu-1 > .menu-item-customer-sign-in > .menu-link:focus-visible {
	background: #3e2180;
	color: #fff;
}

/* Mobile menu: a full-width button as the last row. */
#ast-hf-mobile-menu > .menu-item-customer-sign-in {
	padding: 12px 20px 16px;
	border: 0;
}

#ast-hf-mobile-menu > .menu-item-customer-sign-in > .menu-link {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	border: 0;
	border-radius: 6px;
	background: #3e2180;
	color: #fff;
}

/* DROP Software page: the top of the page offers two different actions side
 * by side, so each button gets a short label saying who it is for: prospects
 * email us, existing customers sign in.
 * Elementor styles that widget with .elementor-207 .elementor-element-8c9fdea
 * .elementor-button (0,4,0, and 0,5,1 for its hover SVG fill), so these rules
 * carry the same prefix to win. */
.drop-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 20px 24px;
}

.drop-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.drop-cta-label {
	font-size: 14px;
	font-weight: 600;
	color: #585858;
}

.elementor-element.elementor-element-8c9fdea .drop-cta-row .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.elementor-element.elementor-element-8c9fdea .drop-cta-row .elementor-button.drop-sign-in-button {
	background-color: transparent;
	color: #3e2180;
	box-shadow: inset 0 0 0 2px #3e2180;
}

.elementor-element.elementor-element-8c9fdea .drop-cta-row .elementor-button.drop-sign-in-button:hover,
.elementor-element.elementor-element-8c9fdea .drop-cta-row .elementor-button.drop-sign-in-button:focus-visible {
	background-color: #3e2180;
	color: #fff;
}

/* Elementor's hover rule sets fill on button SVGs; both icons are outline-only. */
.elementor-element.elementor-element-8c9fdea .drop-cta-row .elementor-button.elementor-button-link svg {
	width: 16px;
	height: 16px;
	fill: none;
}

/* Between Astra's mobile breakpoint (921px) and 1200px the full menu plus
 * the pill is wider than the header. Tighten the link spacing, keep every
 * label on one line, and shorten the pill: "Sign In" from 1000px, the lock
 * alone below that (the title gives a tooltip; the text stays for screen
 * readers). The theme also puts a 67px right margin on the menu, which is
 * room the header doesn't have at these widths. */
@media (min-width: 922px) and (max-width: 1199px) {
	#ast-hf-menu-1 {
		flex-wrap: nowrap;
		margin-right: 12px;
	}

	#ast-hf-menu-1 > .menu-item > .menu-link {
		padding-left: 8px;
		padding-right: 8px;
		white-space: nowrap;
	}

	#ast-hf-menu-1 > .menu-item-customer-sign-in {
		margin-left: 6px;
	}

	#ast-hf-menu-1 > .menu-item-customer-sign-in > .menu-link {
		padding: 8px 14px;
	}

	#ast-hf-menu-1 .customer-sign-in-prefix {
		display: none;
	}
}

@media (min-width: 922px) and (max-width: 999px) {
	#ast-hf-menu-1 > .menu-item-customer-sign-in > .menu-link {
		padding: 10px;
	}

	#ast-hf-menu-1 > .menu-item-customer-sign-in > .menu-link > span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}