/* Keep existing button sizing and focus outlines. */
@media (prefers-reduced-motion: no-preference) {
	:where(.wp-site-blocks) :is(.wp-block-button__link, .wp-element-button, .wp-block-search__button, .wpforms-submit, input[type="submit"]):not(:disabled):not([aria-disabled="true"]) {
		transition: background-color 180ms ease, color 180ms ease,
			border-color 180ms ease, box-shadow 180ms ease, translate 180ms ease;
	}

	@media (hover: hover) and (pointer: fine) {
		:where(.wp-site-blocks) :is(.wp-block-button__link, .wp-element-button, .wp-block-search__button, .wpforms-submit, input[type="submit"]):not(:disabled):not([aria-disabled="true"]):hover {
			translate: 0 -2px;
			box-shadow: 0 5px 12px rgb(0 0 0 / 12%);
		}

		:where(.wp-site-blocks) :is(.wp-block-button__link, .wp-element-button, .wp-block-search__button, .wpforms-submit, input[type="submit"]):not(:disabled):not([aria-disabled="true"]):active {
			translate: 0 0;
			box-shadow: none;
		}
	}

	.mm-reveal-in {
		animation: mm-reveal 1100ms cubic-bezier(0.4, 0, 0.2, 1) both;
	}

	/* Paragraphs settle downward, opposite to the headings. */
	p.mm-reveal-in {
		--mm-reveal-offset: -12px;
	}

	/* Keyboard navigation must never land on faded content. */
	.mm-reveal-in:focus-within {
		animation: none;
	}
}

@keyframes mm-reveal {
	from { opacity: 0; translate: 0 var(--mm-reveal-offset, 12px); }
	to { opacity: 1; translate: 0 0; }
}

@media print {
	.mm-reveal-in { animation: none !important; }
}

/* Override theme hover rules and inline block colours consistently. */
.wp-site-blocks .mm-colour-button {
    background-color: var(--mm-button-base) !important;
    color: var(--mm-button-text) !important;
}

.wp-site-blocks .mm-colour-button:not(:disabled):not([aria-disabled="true"]):focus-visible {
    background-color: var(--mm-button-hover) !important;
    color: var(--mm-button-hover-text) !important;
}

@media (hover: hover) {
    .wp-site-blocks .mm-colour-button:not(:disabled):not([aria-disabled="true"]):hover {
        background-color: var(--mm-button-hover) !important;
        color: var(--mm-button-hover-text) !important;
    }
}

/* Main navigation: current page, pointer hover and keyboard focus. */
.wp-site-blocks header .wp-block-navigation .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"]),
.wp-site-blocks header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-site-blocks header .wp-block-navigation .current_page_item > .wp-block-navigation-item__content {
    color: #8CC495 !important;
}

@media (prefers-reduced-motion: no-preference) {
    .wp-site-blocks header .wp-block-navigation .wp-block-navigation-item__content {
        transition: color 180ms ease;
    }
}

/* Animate only the open overlay, leaving the desktop navigation unchanged. */
@media (prefers-reduced-motion: no-preference) {
    .wp-site-blocks header .wp-block-navigation__responsive-container.is-menu-open {
        animation: mm-menu-fade 450ms cubic-bezier(0.4, 0, 0.2, 1) both;
    }

    .wp-site-blocks header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        animation: mm-menu-fade 600ms cubic-bezier(0.4, 0, 0.2, 1) var(--mm-menu-delay, 100ms) both;
    }

    /* Show a link immediately when reached by keyboard, including during its delay. */
    .wp-site-blocks header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
        animation: none;
    }
}

@keyframes mm-menu-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media print {
    .wp-site-blocks header .wp-block-navigation__responsive-container.is-menu-open,
    .wp-site-blocks header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        animation: none !important;
    }
}


/* Topic icons for the homepage and Services cards. */
main .mm-focus-card-heading {
    display: flex;
    align-items: center;
    gap: 0.8em;
}

main .mm-focus-icon {
    display: inline-grid;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 1px solid rgb(140 196 149 / 55%);
    border-radius: 50%;
    background: rgb(140 196 149 / 10%);
    color: #8cc495;
}

main .mm-focus-icon svg {
    width: 1.45rem;
    height: 1.45rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}