/* buttons — three treatments, and only one of them is red.
 *
 * solid    red, the single primary action on the screen
 * outline  graphite hairline, transparent ground
 * graphite solid graphite, for a second weighted action
 *
 * The WhatsApp button is not green. It is one of the three above with a
 * monochrome bone icon. That is deliberate and it is not a bug.
 */

.tci-button,
.wp-block-button__link,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 34px;
	border: var(--tci-hairline) solid transparent;
	font-family: var(--wp--preset--font-family--rajdhani);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg, 16px);
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 140ms linear, color 140ms linear, border-color 140ms linear;
}

/* Primary. One per visible screen — two competing reds cancel the hierarchy. */
.tci-button--solid,
.wp-block-button__link,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit {
	background: var(--wp--preset--color--red);
	border-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--bone);
}

.tci-button--solid:hover,
.wp-block-button__link:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce #respond input#submit:hover {
	background: var(--wp--preset--color--graphite);
	border-color: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--bone);
}

/* Secondary: graphite hairline. */
.tci-button--outline,
.is-style-tci-outline .wp-block-button__link,
.woocommerce a.button:not(.alt),
.woocommerce button.button:not(.alt) {
	background: transparent;
	border-color: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--graphite);
}

.tci-button--outline:hover,
.is-style-tci-outline .wp-block-button__link:hover,
.woocommerce a.button:not(.alt):hover,
.woocommerce button.button:not(.alt):hover {
	background: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--bone);
}

/* Solid graphite. */
.tci-button--graphite,
.is-style-tci-graphite .wp-block-button__link {
	background: var(--wp--preset--color--graphite);
	border-color: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--bone);
}

.tci-button--graphite:hover,
.is-style-tci-graphite .wp-block-button__link:hover {
	background: var(--wp--preset--color--red);
	border-color: var(--wp--preset--color--red);
}

/* On graphite grounds the outline flips to a bone hairline. */
.is-style-tci-block-graphite .tci-button--outline,
.is-style-tci-block-graphite-deep .tci-button--outline,
.is-style-tci-block-graphite .is-style-tci-outline .wp-block-button__link,
.is-style-tci-block-graphite-deep .is-style-tci-outline .wp-block-button__link {
	border-color: var(--tci-hairline-dark-strong);
	color: var(--wp--preset--color--bone);
}

.is-style-tci-block-graphite .tci-button--outline:hover,
.is-style-tci-block-graphite-deep .tci-button--outline:hover {
	background: var(--wp--preset--color--bone);
	border-color: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--graphite);
}

.tci-button--full {
	width: 100%;
}

/* WhatsApp: icon inherits currentColor, so it is bone on solid and graphite
   on outline. The official WhatsApp green is never used. */
.tci-button--whatsapp svg {
	width: 20px;
	height: 20px;
	flex: none;
}

/* Floating chat button. No animated bubble. */
.tci-whatsapp-float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	background: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--bone);
	border: var(--tci-hairline) solid var(--wp--preset--color--graphite);
	transition: background-color 140ms linear, border-color 140ms linear;
}

.tci-whatsapp-float:hover {
	background: var(--wp--preset--color--red);
	border-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--bone);
}

/* With the mobile menu open it floats over the links and is the only thing on
   screen that is not the menu. Core marks the body while the modal is up. */
.has-modal-open .tci-whatsapp-float {
	display: none;
}

/* Text link with an arrow: "Ver todos los servicios →". */
.tci-link-arrow {
	font-size: var(--wp--preset--font-size--sm, 14px);
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--text);
}

.tci-link-arrow:hover {
	color: var(--wp--preset--color--red);
}

@media (max-width: 640px) {
	.tci-button,
	.wp-block-button__link {
		width: 100%;
		padding: 16px 24px;
	}
}