/******/
/*** BUTTONS ***/
/******/

.button-container {
	padding: 1.25rem 0 .875rem 0;
	width: 100%;
	display: -webkit-box;
  	display: -webkit-flex;
  	display: -ms-flexbox;
  	display: flex;
	gap: 1rem;
}

.button-container-small {
	padding: .75rem 0;
	width: 100%;
}

a, a.button, .background-black .gform_footer input.gform_button, .gform_footer input.gform_button, input[type=password], form.post-password-form input[type=submit] {
	cursor: pointer;
	-webkit-transition: all .2s ease-in-out, border .2s ease-in-out;
	-moz-transition: all .2s ease-in-out, border .2s ease-in-out;
	-o-transition: all .2s ease-in-out, border .2s ease-in-out;
	transition: all .2s ease-in-out, border .2s ease-in-out;
}

a.button, #menu-cta-menu li a {
	border-radius: var(--radius-lg);
	padding: .625rem 1.125rem .75rem 1.125rem;
	text-decoration: none;
	font-weight: var(--font-weight-bold);
}

a.text-link, p.text-link {
	text-decoration: none;
}

a.button.tertiary:after, a.text-link:after, p.text-link:after {
	content: '›';
	margin-left: .5rem;
}

.link-arrow {
	position: relative;
	display: inline-flex;
	align-items: flex-end;
	text-decoration: none;
	font-weight: 700;
	width: 100%;
	height: 100%;
}

.link-arrow:before {
	content: '';
	display: inline-block;
	width: 1.5rem; /* adjust size */
	height: 1.5rem;
	margin-right: 0.5rem;
	background-image: url('/wp-content/themes/flash-parking/assets/images/link-arrow.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.background-white .link-arrow {
	color: var(--color-black);
}

.background-black .link-arrow {
	color: var(--color-white);
}

.background-black .link-arrow:before {
	background-image: url('/wp-content/themes/flash-parking/assets/images/link-arrow-white.svg');
}

a.button.tertiary:after:hover {
	margin-left: .75rem;
}

/* COLORS + HOVER BEHAVIORS */

/* PRIMARY BUTTONS */

.background-white .button.primary, .background-transparent .button.primary, .background-neutral .button.primary, .background-black .content-container .button.primary {
	background-image: linear-gradient(135deg, transparent 50%, var(--color-blue) 50%);
	border: solid .125rem var(--color-blue);
	background-position: bottom right;
	background-size: 200% 200%;
	transition: 0.3s;
}

@supports(-webkit-background-clip: text) {
	
	.background-white .button.primary, .background-transparent .button.primary, .background-black .content-container .button.primary, .background-neutral .button.primary {
		background-image:
			linear-gradient(135deg, var(--color-blue) 50%, transparent 50%),
			linear-gradient(135deg, transparent 50%, var(--color-blue) 50%);
			-webkit-background-clip: text, border-box;
			-webkit-text-fill-color: var(--color-white);
	}
	
}

.background-white .button.primary:hover, .background-transparent .button.primary:hover, .background-black .content-container .button.primary:hover, .background-neutral .button.primary:hover {
	background-position: top left;
	color: var(--color-blue);
	-webkit-text-fill-color: var(--color-blue);
}

/* ALTERNATE PRIMARY/CORAL BUTTONS */

.background-black .button.primary, .navigation li.primary a {
	background-image: linear-gradient(135deg, transparent 50%, var(--color-coral) 50%);
	border: solid .125rem var(--color-coral);
	background-position: bottom right;
	background-size: 200% 200%;
	transition: 0.3s;
}

@supports(-webkit-background-clip: text) {
	
	.background-black .button.primary, .navigation li.primary a {
		background-image:
			linear-gradient(135deg, var(--color-coral) 50%, transparent 50%),
			linear-gradient(135deg, transparent 50%, var(--color-coral) 50%);
			-webkit-background-clip: text, border-box;
			-webkit-text-fill-color: var(--color-white);
	}
	
}

.background-black .button.primary:hover, .navigation li.primary a:hover {
	background-position: top left;
	color: var(--color-coral);
	-webkit-text-fill-color: var(--color-coral);
}

/* SECONDARY BUTTONS */

.button.secondary, .navigation li.secondary a {
	background-image: linear-gradient(135deg, var(--color-blue) 50%, transparent 50%);
	border: solid .125rem var(--color-blue);
	background-position: bottom right;
	background-size: 200% 200%;
	transition: 0.3s;
}

.background-transparent .button.secondary, .background-black .button.secondary, .navigation li.secondary a {
	background-image: linear-gradient(135deg, var(--color-white) 50%, transparent 50%);
	border: solid .125rem var(--color-white);
}

@supports(-webkit-background-clip: text) {
	
	.button.secondary {
		background-image:
			linear-gradient(135deg, transparent 50%, var(--color-blue) 50%),
			linear-gradient(135deg, var(--color-blue) 50%, transparent 50%);
			-webkit-background-clip: text, border-box;
			-webkit-text-fill-color: var(--color-blue);
	}
	
	.background-transparent .button.secondary, .background-black .button.secondary {
		background-image:
			linear-gradient(135deg, transparent 50%, var(--color-white) 50%),
			linear-gradient(135deg, var(--color-white) 50%, transparent 50%);
			-webkit-text-fill-color: var(--color-white);
	}
	
}

.button.secondary:hover {
	background-position: top left;
	color: var(--color-white);
	-webkit-text-fill-color: var(--color-white);
}

.background-transparent .button.secondary:hover, .background-black .button.secondary:hover, .navigation li.secondary a:hover {
	background-position: top left;
	color: var(--color-black);
	-webkit-text-fill-color: var(--color-black);
}

/* READ MORE/TERTIARY BUTTONS */

.button-arrow a span {
	margin-left: 1.5rem;
	font-weight: 500;
}

.button-arrow:hover {
	padding-right: .625rem;
}

.button-arrow a .arrow {
	width: .875rem;
	height: .875rem;
	mask-image: url("../images/button-arrow.svg");
	mask-repeat: no-repeat;
	mask-size: .875rem .875rem;
	background-color: var(--color-black);
	position: absolute;
	left: .8125rem;
	/*transition: transform 200ms ease-in-out;*/
	-webkit-transition: all .2s ease-in-out, border .2s ease-in-out;
	-moz-transition: all .2s ease-in-out, border .2s ease-in-out;
	-o-transition: all .2s ease-in-out, border .2s ease-in-out;
	transition: all .2s ease-in-out, border .2s ease-in-out;
  	/* Ensures smooth animation */
  	transform: rotate(0deg); 
}

.button-arrow a:hover .arrow {
	background-color: var(--color-white);
	transform: rotate(-45deg);
}

.button-arrow a {
	display: inline-flex;
	align-items: center;
	background: var(--color-neutral); /* neutral background */
	border-radius: 0.5rem;
	padding: 0.5rem;
	color: var(--color-white);
	text-decoration: none;
	position: relative;
	width: 1.5rem; /* width equals arrow when inactive */
	overflow: hidden;
	transition: background 0.3s ease, width 0.3s ease;
}

.button-arrow a span {
	display: inline-block;
	white-space: nowrap;
	transform: translateX(-100%);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
	font-size: 0.875rem;
	color: var(--color-white);
}

.button-arrow a:hover {
	background: var(--color-blue); /* blue on hover */
	width: auto; /* expand to fit text */
	padding-right: .75rem;
}

.button-arrow a:hover svg {
	transform: rotate(-45deg); /* arrow points top-right */
}

.button-arrow a:hover span {
	transform: translateX(0);
	opacity: 1;
}

@media screen and (max-width: 47.9325rem) {
	
	a.button, #menu-cta-menu li a {
		font-size: var(--text-base);
		padding: .5rem .875rem .625rem .875rem;
	}
	
}