/*
 * Buttons and links
 *
 * Default/fill is the primary blue action. Outline is the white secondary
 * action. The remaining variations let a Button block behave like either
 * kind of editorial link without changing its destination semantics.
 */
.wp-block-buttons {
	align-items: center;
}

.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link,
.wp-block-button.is-style-fill > .wp-block-button__link,
.wp-block-button.is-style-crunchr-radial-border > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	line-height: 1.1;
	vertical-align: middle;
}

.wp-block-getwid-megamenu-item.is-style-crunchr-button
	> .gw-mm-item__link {
	--crunchr-button-hover-color: var(--wp--preset--color--blue-600);

	box-shadow: 0 0 0 0 var(--crunchr-button-hover-color);
	transition:
		box-shadow 160ms ease-out,
		background-color 160ms ease-out,
		border-color 160ms ease-out;
}

.wp-block-getwid-megamenu-item.is-style-crunchr-button
	> .gw-mm-item__link:hover {
	box-shadow: 0 0 0 2px var(--crunchr-button-hover-color);
}

.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link,
.wp-block-button.is-style-fill > .wp-block-button__link,
.wp-block-button.is-style-crunchr-radial-border > .wp-block-button__link,
.wp-block-crunchr-hero .crunchr-hero__button,
.wp-block-crunchr-insight-header .crunchr-insight-header__button,
.crunchr-customer-single .crunchr-customer-single__glance-cta {
	position: relative;
	overflow: hidden;
	min-height: 44px;
	padding: 13px 28px;
	border: 0;
	background: linear-gradient(180deg, #2b72e3 0%, #0f5ed5 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
	transition:
		padding 300ms cubic-bezier(0.2, 0.7, 0.2, 1),
		background 200ms ease-out;
}

.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link::after,
.wp-block-button.is-style-fill > .wp-block-button__link::after,
.wp-block-button.is-style-crunchr-radial-border > .wp-block-button__link::after,
.wp-block-crunchr-hero .crunchr-hero__button::after,
.wp-block-crunchr-insight-header .crunchr-insight-header__button::after,
.crunchr-customer-single .crunchr-customer-single__glance-cta::after {
	position: absolute;
	top: 50%;
	right: 16px;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	content: "";
	opacity: 0;
	transform: translate(-8px, -50%);
	transition:
		opacity 220ms ease-out,
		transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link:hover,
.wp-block-button.is-style-fill > .wp-block-button__link:hover,
.wp-block-button.is-style-crunchr-radial-border > .wp-block-button__link:hover,
.wp-block-crunchr-hero .crunchr-hero__button:hover,
.wp-block-crunchr-insight-header .crunchr-insight-header__button:hover,
.crunchr-customer-single .crunchr-customer-single__glance-cta:hover {
	padding-right: 40px;
	padding-left: 16px;
	background: linear-gradient(180deg, #1a67dc 0%, #0c53c2 100%);
}

.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link:active,
.wp-block-button.is-style-fill > .wp-block-button__link:active,
.wp-block-button.is-style-crunchr-radial-border > .wp-block-button__link:active,
.wp-block-crunchr-hero .crunchr-hero__button:active,
.wp-block-crunchr-insight-header .crunchr-insight-header__button:active,
.crunchr-customer-single .crunchr-customer-single__glance-cta:active {
	background: linear-gradient(180deg, #0c53c2 0%, #0a47a8 100%);
}

.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link:hover::after,
.wp-block-button.is-style-fill > .wp-block-button__link:hover::after,
.wp-block-button.is-style-crunchr-radial-border > .wp-block-button__link:hover::after,
.wp-block-crunchr-hero .crunchr-hero__button:hover::after,
.wp-block-crunchr-insight-header .crunchr-insight-header__button:hover::after,
.crunchr-customer-single .crunchr-customer-single__glance-cta:hover::after {
	opacity: 1;
	transform: translate(0, -50%);
}

/* Keep the arrow beside the label in this full-width sidebar button. */
.crunchr-customer-single .crunchr-customer-single__glance-cta::after {
	position: static;
	flex: 0 0 14px;
	margin-left: 8px;
	transform: translateX(-8px);
}

.crunchr-customer-single .crunchr-customer-single__glance-cta:hover::after {
	transform: translateX(0);
}

.crunchr-customer-single .crunchr-customer-single__glance-cta:is(:hover, :focus-visible) {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.wp-block-button > .wp-block-button__link:focus-visible,
.wp-block-crunchr-hero .crunchr-hero__button:focus-visible,
.wp-block-crunchr-insight-header .crunchr-insight-header__button:focus-visible,
.crunchr-customer-single .crunchr-customer-single__glance-cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue-600, #0f5ed5);
	outline-offset: 2px;
}

/* Core button style: white secondary action. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	min-height: 44px;
	padding: 12px 27px;
	border: 1px solid #e3e8f0;
	border-radius: 4px;
	color: var(--wp--preset--color--neutral-700, #3c4658);
	background: #fff;
	box-shadow: 0 1px 2.3px 0 rgba(5, 25, 59, 0.11);
	transition:
		background-color 200ms ease-out,
		border-color 200ms ease-out;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--neutral-200, #b5bfcf);
}

.wp-block-button.is-style-outline > .wp-block-button__link:active {
	border-color: var(--wp--preset--color--neutral-200, #b5bfcf);
	background: #f7f8fa;
}

/* Button variation: editorial text link with arrow. */
.wp-block-button.is-style-crunchr-text-link > .wp-block-button__link {
	--crunchr-text-link-arrow-size: 0.78em;
	--crunchr-text-link-arrow-gap: 4px;

	position: relative;
	min-height: 0;
	padding: 0 calc(var(--crunchr-text-link-arrow-size) + var(--crunchr-text-link-arrow-gap)) 3px 0;
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--blue-600, #0f5ed5);
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	box-shadow: none;
	font-size: inherit;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-size 340ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wp-block-button.is-style-crunchr-text-link > .wp-block-button__link::after {
	position: absolute;
	top: 50%;
	right: 0;
	width: var(--crunchr-text-link-arrow-size);
	height: var(--crunchr-text-link-arrow-size);
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M8 3.2 11.8 7 8 10.8' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M8 3.2 11.8 7 8 10.8' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	content: "";
	transform: translate(-4px, -50%);
	transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wp-block-button.is-style-crunchr-text-link > .wp-block-button__link::before {
	position: absolute;
	top: 50%;
	right: 0.139em;
	width: 0.557em;
	height: max(1px, 0.07em);
	border-radius: 999px;
	background: currentColor;
	content: "";
	transform: translate(-4px, -50%) scaleX(0);
	transform-origin: right center;
	transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wp-block-button.is-style-crunchr-text-link > .wp-block-button__link:is(:hover, :focus-visible) {
	background-size: calc(100% - var(--crunchr-text-link-arrow-size) - var(--crunchr-text-link-arrow-gap)) 1px;
	box-shadow: none;
}

.wp-block-button.is-style-crunchr-text-link > .wp-block-button__link:is(:hover, :focus-visible)::after {
	transform: translate(0, -50%);
}

.wp-block-button.is-style-crunchr-text-link > .wp-block-button__link:is(:hover, :focus-visible)::before {
	transform: translate(0, -50%) scaleX(1);
}

/* Button variation: ordinary inline editorial link. */
.wp-block-button.is-style-crunchr-inline-link > .wp-block-button__link {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--blue-600, #0f5ed5);
	background: transparent;
	box-shadow: none;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	text-decoration-line: underline;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-color 180ms ease-out;
}

.wp-block-button.is-style-crunchr-inline-link > .wp-block-button__link:is(:hover, :focus-visible) {
	box-shadow: none;
	text-decoration-color: currentColor;
}

.wp-block-button.is-style-crunchr-inline-link > .wp-block-button__link:focus-visible {
	text-decoration-thickness: 2px;
}

.wp-block-button.is-style-crunchr-text-link > .wp-block-button__link:is(:link, :visited, :hover, :focus-visible, :active),
.wp-block-button.is-style-crunchr-inline-link > .wp-block-button__link:is(:link, :visited, :hover, :focus-visible, :active) {
	color: var(--wp--preset--color--blue-600, #0f5ed5);
}

:where(
	.has-blue-600-background-color,
	.has-blue-700-background-color,
	.has-blue-800-background-color,
	.has-blue-900-background-color,
	.has-neutral-900-background-color,
	.has-crunchr-blue-gradient-background
	)
	:is(
		p.is-style-crunchr-arrow-links:not(.has-link-color) a:not(.has-inline-color):not(.has-text-color),
		p:not(.is-style-crunchr-arrow-links):not(.has-link-color) > a,
		.wp-block-button.is-style-crunchr-text-link > .wp-block-button__link,
		.wp-block-button.is-style-crunchr-inline-link > .wp-block-button__link
	) {
	color: #fff;
}

:where(.has-neutral-900-background-color)
	.wp-block-button.is-style-outline
	> .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
	background: transparent;
	box-shadow: none;
}

:where(.has-neutral-900-background-color)
	.wp-block-button.is-style-outline
	> .wp-block-button__link:hover {
	border-color: rgba(255, 255, 255, 0.7);
}

@media (prefers-reduced-motion: reduce) {
	p.is-style-crunchr-arrow-links a,
	p.is-style-crunchr-arrow-links a::before,
	p.is-style-crunchr-arrow-links a::after,
	.wp-block-button > .wp-block-button__link,
	.wp-block-button > .wp-block-button__link::before,
	.wp-block-button > .wp-block-button__link::after,
	.hbspt-form .hs-form :is(input[type="submit"], .hs-button),
	.hbspt-form .hs-form .actions::after {
		transition-duration: 0.01ms;
	}

	.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link:hover,
	.wp-block-button.is-style-fill > .wp-block-button__link:hover,
	.wp-block-button.is-style-crunchr-radial-border > .wp-block-button__link:hover,
	.wp-block-crunchr-hero .crunchr-hero__button:hover,
	.wp-block-crunchr-insight-header .crunchr-insight-header__button:hover,
	.crunchr-customer-single .crunchr-customer-single__glance-cta:hover,
	.hbspt-form .hs-form :is(input[type="submit"], .hs-button):hover {
		padding-right: 28px;
		padding-left: 28px;
	}

	.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link::after,
	.wp-block-button.is-style-fill > .wp-block-button__link::after,
	.wp-block-button.is-style-crunchr-radial-border > .wp-block-button__link::after,
	.wp-block-crunchr-hero .crunchr-hero__button::after,
	.wp-block-crunchr-insight-header .crunchr-insight-header__button::after,
	.crunchr-customer-single .crunchr-customer-single__glance-cta::after,
	.hbspt-form .hs-form .actions::after {
		display: none;
	}
}

/* Compact primary CTAs keep the small-button treatment and omit the arrow. */
.crunchr-resource-callout .crunchr-resource-callout__button,
.crunchr-product-banner .crunchr-product-banner__copy > a {
	display: inline-flex;
	min-height: 36px;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	border: 0;
	border-radius: 4px;
	background: linear-gradient(180deg, #2b72e3 0%, #0f5ed5 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
	color: #fff !important;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background 200ms ease-out;
}

.crunchr-resource-callout .crunchr-resource-callout__button:hover,
.crunchr-product-banner .crunchr-product-banner__copy > a:hover {
	background: linear-gradient(180deg, #1a67dc 0%, #0c53c2 100%);
}

.crunchr-resource-callout .crunchr-resource-callout__button:active,
.crunchr-product-banner .crunchr-product-banner__copy > a:active {
	background: linear-gradient(180deg, #0c53c2 0%, #0a47a8 100%);
}

.crunchr-resource-callout .crunchr-resource-callout__button:focus-visible,
.crunchr-product-banner .crunchr-product-banner__copy > a:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue-600, #0f5ed5);
	outline-offset: 2px;
}


