/* =========================================================================
   SIYOU · buttons.css — pill buttons for core/button (block styles) and the
   .sy-btn class used in parts/patterns. One shape: always a pill.
   Variants: fill (default red) · outline · ink · white · outline-white · link-arrow
   Sizes: .sy-btn--sm (44) · default (52) · .sy-btn--lg (58) · .sy-btn--block
   On core/button put the size class on the block (wrapper), e.g. "sy-btn--sm".
   ========================================================================= */

.sy-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	box-sizing: border-box;
	word-break: normal;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--sy-fast) ease, color var(--sy-fast) ease, border-color var(--sy-fast) ease;
}

.sy-btn {
	padding: 0 26px;
	border: 1.5px solid transparent;
	border-radius: var(--sy-r-pill);
	background: var(--sy-red);
	color: #FFFFFF;
	font: 600 16px/1 var(--sy-font);
	text-decoration: none;
}

.sy-btn:hover {
	background: var(--sy-red-700);
	color: #FFFFFF;
}

.sy-btn .sy-svg,
.sy-btn.sy-btn--arrow::after,
.wp-block-button.sy-btn--arrow > .wp-block-button__link::after {
	width: 18px;
	height: 18px;
	transition: transform var(--sy-base) var(--sy-ease);
}

.sy-btn.sy-btn--arrow::after,
.wp-block-button.sy-btn--arrow > .wp-block-button__link::after {
	content: "";
	flex: none;
	background: currentColor;
	-webkit-mask: url("../icons/arrow-r.svg") center / contain no-repeat;
	mask: url("../icons/arrow-r.svg") center / contain no-repeat;
}

.sy-btn:hover .sy-svg,
.sy-btn.sy-btn--arrow:hover::after,
.wp-block-button.sy-btn--arrow > .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

/* ---------- sizes ---------- */
.sy-btn.sy-btn--sm,
.wp-block-button.sy-btn--sm > .wp-block-button__link {
	min-height: 44px;
	padding: 12.5px 20px;
	font-size: 15px;
}

.sy-btn.sy-btn--lg,
.wp-block-button.sy-btn--lg > .wp-block-button__link {
	min-height: 58px;
	padding: 19px 30px;
	font-size: 17px;
}

.sy-btn.sy-btn--block,
.wp-block-button.sy-btn--block,
.wp-block-button.sy-btn--block > .wp-block-button__link {
	width: 100%;
}

/* ---------- variants (class on .sy-btn or core/button block style) ---------- */
.sy-btn.sy-btn--outline,
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1.5px solid var(--sy-ink);
	background: transparent;
	color: var(--sy-ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 16.5px 26px;
}

.sy-btn.sy-btn--outline:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--sy-ink);
	color: #FFFFFF;
}

.sy-btn.sy-btn--ink,
.wp-block-button.is-style-ink > .wp-block-button__link {
	background: var(--sy-ink);
	color: #FFFFFF;
}

.sy-btn.sy-btn--ink:hover,
.wp-block-button.is-style-ink > .wp-block-button__link:hover {
	background: #000000;
	color: #FFFFFF;
}

.sy-btn.sy-btn--white,
.wp-block-button.is-style-white > .wp-block-button__link {
	background: #FFFFFF;
	color: var(--sy-red);
}

.sy-btn.sy-btn--white:hover,
.wp-block-button.is-style-white > .wp-block-button__link:hover {
	background: #FFF1EF;
	color: var(--sy-red-700);
}

.sy-btn.sy-btn--outline-white,
.wp-block-button.is-style-outline-white > .wp-block-button__link {
	border-color: rgba(255, 255, 255, .75);
	background: transparent;
	color: #FFFFFF;
}

.sy-btn.sy-btn--outline-white:hover,
.wp-block-button.is-style-outline-white > .wp-block-button__link:hover {
	border-color: #FFFFFF;
	background: rgba(255, 255, 255, .12);
	color: #FFFFFF;
}

/* Text link with arrow (tertiary). */
/* In page content a button never runs past its column: a long translation ("Richiedi un preventivo
   personalizzato") wraps onto a second line once the column is narrower than the label. */
main .wp-block-button__link {
	max-width: 100%;
	white-space: normal;
	text-align: center;
	text-wrap: balance;
}

/* A text link may wrap (long translations in a narrow card); left-aligned. */
.wp-block-button.is-style-link-arrow > .wp-block-button__link,
.sy-btn--link {
	max-width: 100%;
	min-height: 44px;
	padding: 0;
	line-height: 1.45;
	white-space: normal;
	text-align: left;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--sy-ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 6px;
	text-decoration-color: rgba(22, 19, 20, .3);
}

.wp-block-button.is-style-link-arrow > .wp-block-button__link::after,
.sy-btn--link::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("../icons/arrow-r.svg") center / contain no-repeat;
	mask: url("../icons/arrow-r.svg") center / contain no-repeat;
	transition: transform var(--sy-base) var(--sy-ease);
}

.wp-block-button.is-style-link-arrow > .wp-block-button__link:hover,
.sy-btn--link:hover {
	background: transparent;
	color: var(--sy-red);
	text-decoration-color: currentColor;
}

.wp-block-button.is-style-link-arrow > .wp-block-button__link:hover::after,
.sy-btn--link:hover::after {
	transform: translateX(3px);
}

/* On dark and red surfaces the defaults flip: outline → white outline, link-arrow → white. */
:where(.is-style-night, .is-style-card-night, .is-style-red-panel, .is-style-stage) .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: rgba(255, 255, 255, .75);
	color: #FFFFFF;
}

:where(.is-style-night, .is-style-card-night, .is-style-red-panel, .is-style-stage) .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: #FFFFFF;
	background: rgba(255, 255, 255, .12);
}

:where(.is-style-night, .is-style-card-night, .is-style-red-panel, .is-style-stage) .wp-block-button.is-style-link-arrow > .wp-block-button__link {
	color: #FFFFFF;
	text-decoration-color: rgba(255, 255, 255, .5);
}

/* Red panel: the default (fill) button turns white with red text, so it never disappears. */
.is-style-red-panel .wp-block-button:not([class*="is-style-"]) > .wp-block-button__link,
.is-style-red-panel .wp-block-button.is-style-fill > .wp-block-button__link {
	background: #FFFFFF;
	color: var(--sy-red);
}

/* ---------- states ---------- */
.sy-btn[aria-disabled="true"],
.wp-block-button__link[aria-disabled="true"] {
	opacity: .4;
	pointer-events: none;
}

.sy-btn.is-loading::after {
	content: "";
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	-webkit-mask: none;
	mask: none;
	background: none;
	animation: sy-spin .8s linear infinite;
}

@keyframes sy-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Mobile: hero and final-CTA button groups go full width and stack (class on core/buttons). */
@media (max-width: 639px) {
	.wp-block-buttons.sy-btns--stack {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.wp-block-buttons.sy-btns--stack > .wp-block-button,
	.wp-block-buttons.sy-btns--stack > .wp-block-button > .wp-block-button__link {
		width: 100%;
	}

	.wp-block-buttons.sy-btns--stack > .wp-block-button.is-style-link-arrow {
		align-self: flex-start;
		width: auto;
	}
}