/*
 * Buttons and text links. Every treatment in the approved mockup is reproduced;
 * the three-tier rule from the August brief is unresolved (open question 7).
 *
 * Each treatment is defined once and serves both markups: the .btn classes
 * written by ACF blocks and PHP templates, and core Button blocks with the
 * matching block style (is-style-*, registered in assets/js/editor.js). A core
 * Button with no style is Yellow. The core selectors carry two classes so they
 * outrank the editor's own button defaults.
 */
.btn-row,
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* The link is a flex item, not inline content, so no line box adds space under a link that wraps. */
.wp-block-buttons > .wp-block-button { display: flex; max-width: 100%; }

.btn,
.wp-block-button > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 30px;
	border-radius: var(--r-pill);
	font: 700 var(--fs-body)/1 var(--font-ui);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
.btn__arrow { flex: none; }

.btn--yellow,
.wp-block-button > .wp-block-button__link { background: var(--c-yellow); color: var(--c-black); border: 0; }
.btn--yellow:hover,
.wp-block-button > .wp-block-button__link:hover { background: var(--c-warm-gold); color: var(--c-black); }

.btn--outline,
.is-style-outline-dark > .wp-block-button__link { background: transparent; color: var(--c-black); border: 2px solid var(--c-black); }
.btn--outline:hover,
.is-style-outline-dark > .wp-block-button__link:hover { background: var(--c-black); color: var(--c-cream); }

.btn--dark,
.is-style-dark > .wp-block-button__link { background: var(--c-black); color: var(--c-cream); border: 0; }
.btn--dark:hover,
.is-style-dark > .wp-block-button__link:hover { background: var(--c-cream); color: var(--c-black); }

.btn--dark-alt,
.is-style-dark-alt > .wp-block-button__link { background: var(--c-black); color: var(--c-cream); border: 0; }
.btn--dark-alt:hover,
.is-style-dark-alt > .wp-block-button__link:hover { background: var(--c-deep-ochre); color: var(--c-white); }

.btn--outline-light,
.is-style-outline-light > .wp-block-button__link { background: transparent; color: var(--c-white); border: 2px solid var(--c-white); padding: 0 26px; }
.btn--outline-light:hover,
.is-style-outline-light > .wp-block-button__link:hover { background: var(--c-white); color: var(--c-deep-ochre); }

.btn--outline-light-teal,
.is-style-outline-light-teal > .wp-block-button__link { background: transparent; color: var(--c-white); border: 2px solid var(--c-white); }
.btn--outline-light-teal:hover,
.is-style-outline-light-teal > .wp-block-button__link:hover { background: var(--c-white); color: var(--c-deep-teal); }

.btn--white,
.is-style-white > .wp-block-button__link { background: var(--c-white); color: var(--c-deep-teal); border: 0; }
.btn--white:hover,
.is-style-white > .wp-block-button__link:hover { background: var(--c-cream); color: var(--c-black); }

/* "Learn more" style link with arrow */
.text-link,
.is-style-text-link > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font: 700 var(--fs-15)/1.45 var(--font-ui);
	text-transform: uppercase;
	text-decoration: underline;
	color: var(--c-black);
}
.text-link:hover,
.is-style-text-link > .wp-block-button__link:hover { background: none; color: var(--c-deep-ochre); }