/* ==========================================================================
   Buttons - Fresh Ground's .btn-style / .link-style, transcribed.

   Extracted verbatim from main.min.css:
     background #000 | colour #fff | DM Sans | .75rem | weight 700
     letter-spacing .1em | UPPERCASE | min-height 3.5rem
     padding .9375rem 2.5rem | inline-flex centred | transition .3s ease-in-out
     border-radius 0  <- SQUARE. This site is not rounded.

   Variants extracted: --black, --white, --beige (#c4a27f), --min-w (15.625rem).
   Hover fills: white -> #e8e8e8 is Fresh Ground's own value. The black and
   beige hover fills are derived from their palette (grey-01 / accent-hover),
   since those states are applied there through utility classes.
   ========================================================================== */

.mx-btn {
	align-items: center;
	background-color: var(--mx-btn-bg);
	border: 1px solid var(--mx-btn-bg);
	border-radius: var(--mx-btn-radius);
	box-sizing: border-box;
	color: var(--mx-btn-fg);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--mx-font-body);
	font-size: var(--mx-btn-size);
	font-weight: var(--mx-btn-weight);
	justify-content: center;
	letter-spacing: var(--mx-btn-track);
	line-height: 1.2;
	min-height: var(--mx-btn-min-h);
	padding: var(--mx-btn-pad);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--mx-motion), color var(--mx-motion), border-color var(--mx-motion);
}

@media (hover: hover) {
	.mx-btn:hover {
		background-color: var(--mx-grey-01);
		border-color: var(--mx-grey-01);
		color: var(--mx-btn-fg);
	}
}

.mx-btn:focus-visible {
	box-shadow: var(--mx-focus-ring);
	outline: none;
}

/* ---- Variants ----------------------------------------------------------- */

.mx-btn--black {
	background-color: #000;
	border-color: #000;
	color: #fff;
}

.mx-btn--white {
	background-color: #fff;
	border-color: #fff;
	color: var(--mx-text-title);
}

@media (hover: hover) {
	.mx-btn--white:hover {
		background-color: #e8e8e8;  /* Fresh Ground's own hover fill */
		border-color: #e8e8e8;
		color: var(--mx-text-title);
	}
}

.mx-btn--beige {
	background-color: var(--mx-beige);
	border-color: var(--mx-beige);
	color: #fff;
}

@media (hover: hover) {
	.mx-btn--beige:hover {
		background-color: #ad8a66;
		border-color: #ad8a66;
		color: #fff;
	}
}

/* Outline button - used on image bands where a solid fill would fight the
   photograph. Fresh Ground applies this through its border_* utilities. */
.mx-btn--outline {
	background-color: transparent;
	border-color: var(--mx-text-title);
	color: var(--mx-text-title);
}

@media (hover: hover) {
	.mx-btn--outline:hover {
		background-color: var(--mx-text-title);
		border-color: var(--mx-text-title);
		color: #fff;
	}
}

.mx-btn--outline-light {
	background-color: transparent;
	border-color: #fff;
	color: #fff;
}

@media (hover: hover) {
	.mx-btn--outline-light:hover {
		background-color: #fff;
		border-color: #fff;
		color: var(--mx-text-title);
	}
}

.mx-btn--outline-light:focus-visible {
	box-shadow: var(--mx-focus-ring-dark);
}

.mx-btn--min-w {
	min-width: var(--mx-btn-min-w);
}

.mx-btn--full {
	width: 100%;
}

.mx-btn[aria-disabled='true'],
.mx-btn:disabled {
	cursor: not-allowed;
	opacity: .55;
}

/* ---- Text link with sliding arrow --------------------------------------- */

.mx-text-link {
	align-items: center;
	color: var(--mx-text-title);
	display: inline-flex;
	font-family: var(--mx-font-body);
	font-size: var(--mx-text-xsmall);
	font-weight: 700;
	gap: .5rem;
	letter-spacing: var(--mx-btn-track);
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--mx-motion);
}

.mx-text-link__arrow {
	transition: transform var(--mx-motion);
}

@media (hover: hover) {
	.mx-text-link:hover {
		color: var(--mx-grey-01);
	}

	.mx-text-link:hover .mx-text-link__arrow {
		transform: translateX(4px);
	}
}

.mx-typography--light .mx-text-link {
	color: #fff;
}

@media (hover: hover) {
	.mx-typography--light .mx-text-link:hover {
		color: rgba(255, 255, 255, .75);
	}
}

/* ---- Button group ------------------------------------------------------- */

.mx-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;  /* Fresh Ground's vh-root__btn-group gap */
}

.mx-btn-group--center {
	justify-content: center;
}

/* ---- Circular icon button (Fresh Ground .btn-icon / .btn-round) ---------- */

.mx-btn-icon {
	align-items: center;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 100%;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	flex-shrink: 0;
	height: 48px;
	justify-content: center;
	padding: 0;
	transition: background-color var(--mx-motion), color var(--mx-motion);
	width: 48px;
}

@media (hover: hover) {
	.mx-btn-icon:hover {
		background-color: var(--mx-text-title);
		color: #fff;
	}
}

/* ==========================================================================
   Inherited chrome - Astra, Gutenberg and Contact Form 7 buttons are given the
   same voice so nothing outside our templates reverts to the old pill styling.
   Scoped by element/class only; no !important, no parent-theme edits.
   ========================================================================== */

.ast-button,
.ast-custom-button,
.wp-block-button__link,
.wp-element-button,
input[type='submit'],
button[type='submit'],
.wpcf7-form input[type='submit'],
.wpcf7-submit {
	background-color: var(--mx-btn-bg);
	border: 1px solid var(--mx-btn-bg);
	border-radius: var(--mx-btn-radius);
	color: var(--mx-btn-fg);
	font-family: var(--mx-font-body);
	font-size: var(--mx-btn-size);
	font-weight: var(--mx-btn-weight);
	letter-spacing: var(--mx-btn-track);
	line-height: 1.2;
	min-height: var(--mx-btn-min-h);
	padding: var(--mx-btn-pad);
	text-transform: uppercase;
	transition: background-color var(--mx-motion), border-color var(--mx-motion);
}

@media (hover: hover) {
	.ast-button:hover,
	.ast-custom-button:hover,
	.wp-block-button__link:hover,
	.wp-element-button:hover,
	input[type='submit']:hover,
	button[type='submit']:hover,
	.wpcf7-form input[type='submit']:hover,
	.wpcf7-submit:hover {
		background-color: var(--mx-grey-01);
		border-color: var(--mx-grey-01);
		color: var(--mx-btn-fg);
	}
}