/* ========================================
   Buttons

   The base button used across the site. It lived in woocommerce-custom.css
   until now, which meant it had to be declared a second time, byte for byte,
   in wc-essentials.css so that front-page-2 -- the one template that takes the
   slice instead of the full fork -- had buttons at all. Two copies kept
   identical by hand is a bug waiting for the day someone edits one of them.

   Here it is declared once and loads on every page, so neither WooCommerce
   sheet needs a copy.

   The WooCommerce selectors stay in the list. They are what WooCommerce puts
   in its markup, and the theme decides what those look like; splitting them
   into a separate WooCommerce file would recreate the problem this move
   solves.

   Everything that overrides these rules -- the loop icon button, the single
   product add-to-cart, the loading and added states -- does so from the fork
   by specificity, not by order, so those keep working from where they are.
======================================== */

:root {
	/*
	 * Component tokens, because the button has more than one axis and the
	 * values are shared across four rules. Height sits at 3.5rem rather than
	 * the 55px it was: the scale has no 55, and a button that ends on a whole
	 * step is worth one pixel.
	 *
	 * This is also the size a .btn--mid or .btn--small redefines: each of
	 * those is a single rule that overrides these five properties and nothing
	 * else, since .btn already reads every one of them through a var().
	 */
	--bc-btn-height: 3.5rem; /* 56px */
	--bc-btn-min-width: 12.5rem; /* 200px */
	--bc-btn-pad-inline: var(--space-6); /* 24px, was 25 */
	--bc-btn-pad-block: var(--space-4); /* 16px, was 15 */
	--bc-btn-gap: var(--space-2); /* 8px, was 10 */
	--bc-btn-font-size: var(--text-ui-l); /* 17px */
}

.btn,
.button,
.woocommerce .button,
.woocommerce div.product form.cart .button,
.single_add_to_cart_button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wpcf7-submit,
.mx-cw-form .mx-cw-button {
	display: inline-flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	gap: var(--bc-btn-gap);

	/*
	 * Grows to fill a flex row by default, which is what the cart and product
	 * forms want. A button that should keep its own width says so locally,
	 * the way .front-about__content .btn--ghost does.
	 */
	flex: 1 1 0;

	block-size: var(--bc-btn-height);
	min-inline-size: var(--bc-btn-min-width);
	padding-block: var(--bc-btn-pad-block);
	padding-inline: var(--bc-btn-pad-inline);

	border: var(--border-width) solid var(--color-action);
	border-radius: var(--radius-pill);
	background-color: var(--color-action);
	color: var(--color-action-text);

	font-size: var(--bc-btn-font-size);
	font-weight: var(--font-medium);
	line-height: var(--leading-slim);
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	vertical-align: middle;

	cursor: pointer;
	transition: background-color var(--duration-fast) var(--ease);
}

.btn:hover,
.button:hover,
.woocommerce .button:hover,
.woocommerce div.product form.cart .button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover,
.wpcf7-submit:hover,
.mx-cw-form .mx-cw-button:hover {
	border-color: var(--color-action-hover);
	background-color: var(--color-action-hover);
	color: var(--color-action-text);
}

/*
 * Outlined. Ink on the page ground, not a lighter blue.
 *
 * The selector is .btn.btn--ghost, not bare .btn--ghost, on purpose: a bare
 * single class has the same specificity as a page's own "a { color: inherit }"
 * reset (front-page-2.css has exactly one), and whichever prints later would
 * win. Every real .btn--ghost is already written with .btn alongside it, so
 * requiring both here costs nothing and closes that off for good.
 */
.btn.btn--ghost,
.button.btn--ghost,
.woocommerce .button.btn--ghost,
.mx-cw-form .mx-cw-button.mx-cw-button-secondary {
	border-color: var(--color-text);
	background-color: transparent;
	color: var(--color-text);
}

.btn.btn--ghost:hover,
.button.btn--ghost:hover,
.woocommerce .button.btn--ghost:hover,
.mx-cw-form .mx-cw-button.mx-cw-button-secondary:hover {
	border-color: var(--color-text);
	background-color: var(--color-text-inverse);
	color: var(--color-text);
}

/*
 * Inverse. White fill for a button sitting on a dark or brand-coloured
 * surface -- the front page hero, or anywhere else that needs one. This is
 * what used to be templates/front-page-2.css's own .front-button: same
 * white-on-blue, now a colour axis on the shared button instead of a
 * page-specific component with its own name.
 */
.btn.btn--inverse,
.button.btn--inverse,
.woocommerce .button.btn--inverse {
	border-color: var(--color-surface-raised);
	background-color: var(--color-surface-raised);
	color: var(--color-brand-ink);
}

.btn.btn--inverse:hover,
.button.btn--inverse:hover,
.woocommerce .button.btn--inverse:hover {
	border-color: var(--color-action-soft);
	background-color: var(--color-action-soft);
	color: var(--color-brand-ink);
}

/* ========================================
   Size

   Each rule below overrides only the tokens declared on :root and nothing
   else, since .btn already reads every one of them through a var(). A custom
   property re-declared here is a direct match on the element, so it wins over
   the :root default regardless of specificity or source order -- unlike the
   colour variants above, a size variant never needs to fight a page's own
   reset for it.
======================================== */

.btn--mid {
	--bc-btn-height: 3rem; /* 48px */
	--bc-btn-min-width: 10rem; /* 160px */
	--bc-btn-pad-inline: var(--space-5); /* 20px */
	--bc-btn-pad-block: var(--space-3); /* 12px */
	--bc-btn-font-size: var(--text-ui); /* 16px */
}

.btn--small,
.mx-cw-form .mx-cw-button-small {
	--bc-btn-height: 2.5rem; /* 40px */
	--bc-btn-min-width: 8rem; /* 128px */
	--bc-btn-pad-inline: var(--space-4); /* 16px */
	--bc-btn-pad-block: var(--space-2); /* 8px */
	--bc-btn-font-size: var(--text-meta); /* 15px */
}

/* ========================================
   Icon slot

   A button that carries an arrow gets .btn--icon on the button itself, so it
   reads as intentional in markup rather than looking like a plain text button
   that happens to have a stray span in it. No CSS rule exists for the class
   on purpose: the gap the icon needs is already the button's own
   --bc-btn-gap, and the icon's own size is .icon-arrow's own (bc-icon.css,
   currently a fixed 20px everywhere). The marker documents intent; it has
   nothing left to style unless a button size ever needs its own icon size,
   which would live here as --btn-icon-size once that decision is made.

   The arrow itself is .icon-arrow (bc-icon.css), shared with every other
   place on the site that points somewhere, not a button-specific icon.
   Position follows markup order, not a class: the icon is the button's first
   or last child, and the flex row above already puts it on that side for
   free.
======================================== */