/**
 * Block styles for core/button. Enqueued per-block via functions.php.
 */

/* Link-style button (extends Twentig's is-style-tw-link): terracotta
   text + chevron for "Learn More" / "More of…" CTAs. */
.wp-block-button.is-style-tw-link .wp-block-button__link {
	color: var(--wp--preset--color--secondary);
	font-weight: var(--wp--custom--link-font-weight);
	text-decoration-line: underline;
	text-underline-offset: 0.25em;
	/* Override the button base line-height:1 — too tight for the offset
	   underline, which otherwise crowds the text / clips at the edge. */
	line-height: 1.5;
	display: inline-flex;
	align-items: center;
	/* Core sets text-align:center on every button link; keep this text-link
	   left-aligned so it stays flush when the button stretches (e.g. stacked
	   columns on mobile) instead of centering. */
	justify-content: flex-start;
	text-align: left;
	gap: 0.3em;
}
.wp-block-button.is-style-tw-link .wp-block-button__link:where(:hover, :focus) {
	color: var(--wp--preset--color--terracotta-dark);
	text-decoration-line: none;
	opacity: 0.85;
}
.wp-block-button.is-style-tw-link .wp-block-button__link svg {
	width: 1.25em;
	height: 1.25em;
	flex-shrink: 0;
}

/* Primary button hover — darken to terracotta-dark; opacity:1 cancels inherited fade. */
.wp-block-button .wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.wp-block-button:not(.is-style-outline):not(.is-style-tw-link) .wp-block-button__link:where(:hover, :focus) {
	background-color: var(--wp--preset--color--terracotta-dark);
	opacity: 1;
}

/* Outline button — green on cream. Override textColor/borderColor base-2 for dark/photo backgrounds. */
.wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	border-width: var(--wp--custom--border-thickness) !important;
}
/* Outline buttons in the site header are always white. */
header.wp-block-template-part .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--base-2);
	border-color: var(--wp--preset--color--base-2);
}
.wp-block-button.is-style-outline .wp-block-button__link:where(:hover, :focus) {
	opacity: 0.85;
}

/* Icon shift on hover (any button with a twIcon SVG). */
.wp-block-button .wp-block-button__link svg {
	transition: transform 0.2s ease;
}
.wp-block-button .wp-block-button__link:where(:hover, :focus) svg {
	transform: translateX(3px);
}

/* Section overrides on dark variants — link + outline flip to white
   (defaults assume light bg and lose contrast). Primary button is
   fine on the greens. */

/* Link + outline → white on the three dark sections. */
:is(
	.is-style-section-green,
	.is-style-section-green-dark
) .wp-block-button.is-style-tw-link .wp-block-button__link {
	color: var(--wp--preset--color--base-2);
}
:is(
	.is-style-section-green,
	.is-style-section-green-dark
) .wp-block-button.is-style-tw-link .wp-block-button__link:where(:hover, :focus) {
	color: var(--wp--preset--color--base-2);
}
:is(
	.is-style-section-green,
	.is-style-section-green-dark
) .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--base-2);
	border-color: var(--wp--preset--color--base-2);
}