/* ==========================================================================
   ARDE buttons
   Default core/button = filled primary (from theme.json). These rules style
   the block-style variants registered in inc/block-styles.php, plus shared
   button chrome (border, inset highlight, hover transitions).
   ========================================================================== */

:is(.wp-block-button__link, .arde-button__link) {
	border: 2px solid #de054a;
	border-radius: 16px;
	/* Figma button component 2014:944: 54px tall (18/1.4 label + 12px
	   vertical padding + 2px borders). theme.json sets the 12px padding;
	   the explicit line-height + min-height keep it at 54 wherever a parent
	   changes the line-height. */
	box-sizing: border-box;
	line-height: 1.4;
	min-height: 54px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Warm-1 surfaces need a contrasting keyboard ring outside the button border. */
.has-arde-v-2-warm-1-background-color :is(.wp-block-button__link, .arde-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--arde-v-2-black);
	outline-offset: 4px;
}

/* Filled primary (default) hover. Core's `is-style-outline` is excluded
   too — the blog filter chips use it and own their hover. */
:is(.wp-block-button, .arde-button):not(.is-style-arde-v-2-secondary-light):not(.is-style-arde-v-2-secondary-dark):not(.is-style-arde-v-2-outlined-secondary-light):not(.is-style-arde-v-2-outlined-secondary-dark):not(.is-style-outline) :is(.wp-block-button__link, .arde-button__link):hover {
	background-color: #e6054c !important;
}

/* No button state underlines its label (Figma 2014:945). theme.json's global link hover
   (`:root :where(a:where(:not(.wp-element-button)):hover)`, (0,1,0), printed inline after this file)
   reaches the dynamic `.arde-button__link`, which is not a `.wp-element-button`. */
.arde-button .arde-button__link:hover {
	text-decoration: none;
}

/* Filled secondary-light */
:is(.wp-block-button, .arde-button).is-style-arde-v-2-secondary-light :is(.wp-block-button__link, .arde-button__link) {
	background-color: var(--wp--preset--color--arde-v-2-cream);
	border-color: #f4ead2;
	color: var(--wp--preset--color--arde-v-2-black);
}
:is(.wp-block-button, .arde-button).is-style-arde-v-2-secondary-light :is(.wp-block-button__link, .arde-button__link):hover {
	background-color: #f2e6ca;
}

/* Filled secondary-dark */
:is(.wp-block-button, .arde-button).is-style-arde-v-2-secondary-dark :is(.wp-block-button__link, .arde-button__link) {
	background-color: var(--wp--preset--color--arde-v-2-black);
	border-color: var(--wp--preset--color--arde-v-2-black);
	color: var(--wp--preset--color--arde-v-2-white);
}
:is(.wp-block-button, .arde-button).is-style-arde-v-2-secondary-dark :is(.wp-block-button__link, .arde-button__link):hover {
	background-color: rgba(10, 9, 12, 0.8);
}

/* Outlined secondary-light (for dark backgrounds) */
:is(.wp-block-button, .arde-button).is-style-arde-v-2-outlined-secondary-light :is(.wp-block-button__link, .arde-button__link) {
	background-color: transparent;
	border-color: var(--wp--preset--color--arde-v-2-cream);
	color: var(--wp--preset--color--arde-v-2-cream);
}
:is(.wp-block-button, .arde-button).is-style-arde-v-2-outlined-secondary-light :is(.wp-block-button__link, .arde-button__link):hover {
	background-color: #f2e6ca;
	border-color: #f4ead2;
	color: var(--wp--preset--color--arde-v-2-black);
}

/* Outlined secondary-dark (for light backgrounds) */
:is(.wp-block-button, .arde-button).is-style-arde-v-2-outlined-secondary-dark :is(.wp-block-button__link, .arde-button__link) {
	background-color: transparent;
	border-color: var(--wp--preset--color--arde-v-2-black);
	color: var(--wp--preset--color--arde-v-2-black);
}
:is(.wp-block-button, .arde-button).is-style-arde-v-2-outlined-secondary-dark :is(.wp-block-button__link, .arde-button__link):hover {
	border-color: var(--wp--preset--color--arde-v-2-foreground);
	color: var(--wp--preset--color--arde-v-2-foreground);
}

/* Trailing arrow icon — Figma shows a right-arrow on filled-primary &
   outlined-secondary-dark buttons. Use class `.has-arrow` on the button block
   (or set globally via :is(.wp-block-button__link, .arde-button__link)). CSS-mask SVG so it inherits
   the button text color. */
:is(.wp-block-button__link, .arde-button__link).has-arrow::after,
:is(.wp-block-button, .arde-button).has-arrow > :is(.wp-block-button__link, .arde-button__link)::after {
	content: "";
	display: inline-block;
	width: 23px;
	height: 12px;
	margin-left: 8px;
	background-color: currentColor;
	-webkit-mask: url(../images/arrow-right.svg) center / contain no-repeat;
	mask: url(../images/arrow-right.svg) center / contain no-repeat;
	flex-shrink: 0;
}

/* Leading heart icon — Figma's "Dona"-style button (button component
   2014:1018, e.g. UNETE 2091:3192 "Quiero ser donante"): 20px heart, 8px
   before the label. Same mask technique as `.has-arrow`; the header's
   40px Dona button keeps its own rule in header.css. */
:is(.wp-block-button, .arde-button).has-heart > :is(.wp-block-button__link, .arde-button__link) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
:is(.wp-block-button, .arde-button).has-heart > :is(.wp-block-button__link, .arde-button__link)::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url(../images/heart.svg) center / contain no-repeat;
	mask: url(../images/heart.svg) center / contain no-repeat;
	flex-shrink: 0;
}

/* Leading play icon — Figma button 2015:4197 (DONA "Mira lo que podemos
   destapar"): 17×20 outlined triangle, 8px before the label. */
:is(.wp-block-button, .arde-button).has-play > :is(.wp-block-button__link, .arde-button__link) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
:is(.wp-block-button, .arde-button).has-play > :is(.wp-block-button__link, .arde-button__link)::before {
	content: "";
	display: inline-block;
	width: 17px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url(../images/play.svg) center / contain no-repeat;
	mask: url(../images/play.svg) center / contain no-repeat;
	flex-shrink: 0;
}

/* The dynamic link uses the same primary treatment and state rules above. */
.arde-button__link {
	display: inline-block;
	padding: 12px 24px;
	background: var(--wp--preset--color--arde-v-2-warm-1);
	color: var(--wp--preset--color--arde-v-2-white);
	font-family: var(--wp--preset--font-family--arde-v-2-raleway);
	font-size: var(--wp--preset--font-size--arde-v-2-medium);
	font-weight: 700;
	text-transform: none;
	text-decoration: none;
}