/*
Theme Name:   NMF Orders
Theme URI:    https://nmforders.com
Description:  Simple block theme for nmforders.com, the New Medicine Foundation refill site. Carries the NMF palette, type and produce artwork, and is built to sit around the NMF Refill Portal plugin.
Author:       Mach.us
Author URI:   https://mach.us
Version:      0.2.0
Requires at least: 6.7
Requires PHP: 8.1
License:      GPL v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  nmf-orders
*/

/*
 * Most styling lives in theme.json. This file holds only what theme.json
 * cannot express: focus rings, the hero's artwork and curve, and the button
 * hover lift.
 */

/* ------------------------------------------------------------------ base */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

img {
	height: auto;
	max-width: 100%;
}

/* Keep the footer at the bottom of the window on short pages. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group:has(> main) {
	flex: 1 0 auto;
}

.wp-site-blocks > footer {
	margin-top: 0;
}

/* ------------------------------------------------------------------ hero */

.nmf-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* The main site's produce illustration, laid over the teal band. */
.nmf-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("assets/images/hero-produce.png") center / cover no-repeat;
	opacity: 0.9;
	pointer-events: none;
}

/* The same shallow curve the main site uses where the hero meets the page. */
.nmf-hero::after {
	content: "";
	position: absolute;
	left: -5%;
	right: -5%;
	bottom: -1px;
	height: clamp(28px, 6vw, 80px);
	background: var(--wp--preset--color--base);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	pointer-events: none;
}

@media (max-width: 781px) {
	/* The artwork crowds the copy on narrow screens; keep a hint of it. */
	.nmf-hero::before {
		opacity: 0.35;
	}
}

/* --------------------------------------------------------------- buttons */

.wp-element-button,
.wp-block-button__link {
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 24px -10px rgba(21, 195, 154, 0.55);
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}

	.wp-block-button .wp-block-button__link:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------- product list */

/* Hand the refill-portal list the theme's palette and heading face. */
.nmf-products {
	--nmf-products-accent: var(--wp--preset--color--accent-1);
	--nmf-products-muted: var(--wp--preset--color--contrast-2);
	--nmf-products-rule: color-mix(in srgb, var(--wp--preset--color--accent-2) 16%, transparent);
	--nmf-products-heading-font: var(--wp--preset--font-family--heading);
}