/*
 * MEC Timing button component: the one place buttons are styled.
 *
 *   Primary  brand orange fill, night text          (default call to action)
 *   Ghost    transparent, light outline, on dark    (secondary action on night/hero bands)
 *   Small    .mec-btn--sm modifier                  (compact buttons)
 *
 *   Secondary  ink outline on light surfaces (Update cart, Apply coupon, cross-sell buttons)
 *
 * Every button on the site is listed in one of the three groups below, so a change here changes
 * them all: block buttons (.mec-btn-orange / .mec-btn--primary, .mec-btn-ghost / .mec-btn--outline),
 * the pricing cards, the product page Add to Cart, the table download links and the comment submit.
 * Colours come from mec-tokens.css. The global WordPress button style (theme.json elements.button)
 * is the fallback for any button not listed here.
 */

/* ---- 1. Shared shape: primary and ghost ---- */
.mec-btn,
.mec-page .wp-block-button .wp-block-button__link,
.mec-btn-orange .wp-block-button__link,
.mec-btn-ghost .wp-block-button__link,
.mec-page .mec-pricing a.mec-pricing__button,
.mec-page .add_to_cart_inline a.button,
body.woocommerce.single-product .summary .single_add_to_cart_button,
body.single-post .entry-comments .comment-form .form-submit .wp-block-button__link,
body.single-post .entry-comments .comment-form input[type="submit"],
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
body.woocommerce-cart .return-to-shop a.button,
body.woocommerce-checkout #place_order,
body.woocommerce-cart table.cart td.actions button.button,
body.woocommerce-cart .cross-sells li.product .button,
body.woocommerce-checkout form.checkout_coupon .button,
body.woocommerce-checkout form.woocommerce-form-login .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mec-space-2);
	min-height: 48px;
	padding: 0 var(--mec-space-6);
	border: 0;
	border-radius: var(--mec-radius-lg);
	font: 700 16px/1.2 var(--mec-font-sans);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}

/* ---- 2. Primary ---- */
.mec-btn--primary,
.mec-page .wp-block-button.mec-btn--primary .wp-block-button__link,
.mec-btn-orange .wp-block-button__link,
.mec-page .mec-pricing a.mec-pricing__button,
.mec-page .add_to_cart_inline a.button,
body.woocommerce.single-product .summary .single_add_to_cart_button,
body.single-post .entry-comments .comment-form .form-submit .wp-block-button__link,
body.single-post .entry-comments .comment-form input[type="submit"],
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
body.woocommerce-cart .return-to-shop a.button,
body.woocommerce-checkout #place_order,
.wp-block-table.mec-table td:nth-child(3) a {
	background-color: var(--mec-orange);
	color: var(--mec-night);
}
.mec-btn--primary:hover,
.mec-page .wp-block-button.mec-btn--primary .wp-block-button__link:hover,
.mec-btn-orange .wp-block-button__link:hover,
.mec-page .mec-pricing a.mec-pricing__button:hover,
.mec-page .add_to_cart_inline a.button:hover,
body.woocommerce.single-product .summary .single_add_to_cart_button:hover,
body.single-post .entry-comments .comment-form .form-submit .wp-block-button__link:hover,
body.single-post .entry-comments .comment-form input[type="submit"]:hover,
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
body.woocommerce-cart .return-to-shop a.button:hover,
body.woocommerce-checkout #place_order:hover,
.wp-block-table.mec-table td:nth-child(3) a:hover {
	background-color: var(--mec-orange-hover);
	color: var(--mec-night);
}

/* ---- 3. Ghost (on dark bands) ---- */
.mec-page .wp-block-button.mec-btn--outline .wp-block-button__link,
.mec-btn-ghost .wp-block-button__link {
	border: 1.5px solid var(--mec-on-night);
	background-color: transparent;
	color: var(--mec-on-night);
}
.mec-page .wp-block-button.mec-btn--outline .wp-block-button__link:hover,
.mec-btn-ghost .wp-block-button__link:hover {
	background-color: var(--mec-on-night);
	color: var(--mec-night);
}

/* ---- 3b. Secondary (on light surfaces) ---- */
body.woocommerce-cart table.cart td.actions button.button,
body.woocommerce-cart .cross-sells li.product .button,
body.woocommerce-checkout form.checkout_coupon .button,
body.woocommerce-checkout form.woocommerce-form-login .button {
	border: 1.5px solid var(--mec-ink);
	background-color: transparent;
	color: var(--mec-ink);
}
body.woocommerce-cart table.cart td.actions button.button:hover,
body.woocommerce-cart .cross-sells li.product .button:hover,
body.woocommerce-checkout form.checkout_coupon .button:hover,
body.woocommerce-checkout form.woocommerce-form-login .button:hover {
	background-color: var(--mec-ink);
	color: var(--mec-surface);
}

/* ---- 4. Small modifier ---- */
.mec-page .wp-block-button.mec-btn--sm .wp-block-button__link {
	min-height: 36px;
	padding: 0 14px;
	border-radius: var(--mec-radius-md);
	font-size: 15px;
}

/* ---- Focus: one ring for every button ---- */
.mec-btn:focus-visible,
.mec-page .wp-block-button .wp-block-button__link:focus-visible,
.mec-btn-orange .wp-block-button__link:focus-visible,
.mec-btn-ghost .wp-block-button__link:focus-visible,
.mec-page .mec-pricing a.mec-pricing__button:focus-visible,
.mec-page .add_to_cart_inline a.button:focus-visible,
body.woocommerce.single-product .summary .single_add_to_cart_button:focus-visible,
body.single-post .entry-comments .comment-form input[type="submit"]:focus-visible,
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:focus-visible,
body.woocommerce-cart .return-to-shop a.button:focus-visible,
body.woocommerce-checkout #place_order:focus-visible,
body.woocommerce-cart table.cart td.actions button.button:focus-visible,
body.woocommerce-cart .cross-sells li.product .button:focus-visible,
body.woocommerce-checkout form.checkout_coupon .button:focus-visible,
body.woocommerce-checkout form.woocommerce-form-login .button:focus-visible {
	outline: 3px solid var(--mec-ink);
	outline-offset: 2px;
}