/*
 * MaterMap theme styles. Tokens (colours, fonts, sizes, spacing) come from
 * theme.json as --wp--preset--* custom properties; this file only adds the
 * components. Mobile first; the wide layout starts at 64em.
 *
 * Components (BEM, prefix mm-): skip, header, nav, lang, logo, page, content,
 * hero, map, legend, services, privacy, stores, download, footer, cards,
 * press, notfound, forms.
 */

:root {
	--mm-ink: var(--wp--preset--color--ink);
	--mm-muted: var(--wp--preset--color--muted);
	--mm-blue: var(--wp--preset--color--blue);
	--mm-deep: var(--wp--preset--color--deep);
	--mm-sky: var(--wp--preset--color--sky);
	--mm-butter: var(--wp--preset--color--butter);
	--mm-butter-soft: var(--wp--preset--color--butter-soft);
	--mm-wash: var(--wp--preset--color--wash);
	--mm-white: var(--wp--preset--color--white);
	--mm-display: var(--wp--preset--font-family--display);
	--mm-gutter: clamp(1rem, 4vw, 2rem);
	--mm-wide: var(--wp--style--global--wide-size, 72rem);
	--mm-frame: calc(var(--mm-wide) + 2 * var(--mm-gutter));
	--mm-content: var(--wp--style--global--content-size, 44rem);
	--mm-radius: 1.25rem;
	--mm-shadow: 0 1.25rem 2.5rem -1rem rgba(30, 58, 82, 0.28);
}

/* Base ------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

:focus-visible {
	outline: 3px solid var(--mm-deep);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection {
	background: var(--mm-butter);
	color: var(--mm-ink);
}

.mm-visually-hidden,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.mm-skip {
	position: absolute;
	left: var(--mm-gutter);
	top: -4rem;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--mm-ink);
	color: var(--mm-white);
	border-radius: 999px;
	font-weight: 700;
}

.mm-skip:focus {
	top: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
}

/* Logo ------------------------------------------------------------------ */

.mm-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--mm-ink);
	text-decoration: none;
}

.mm-logo__symbol {
	width: 2.4rem;
	height: auto;
}

.mm-logo__word {
	font-family: var(--mm-display);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	padding-top: 0.2rem;
}

.mm-logo--footer {
	color: var(--mm-white);
}

/* Header ---------------------------------------------------------------- */

.mm-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--mm-white);
	border-bottom: 1px solid var(--mm-wash);
}

.admin-bar .mm-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

/* Up to 600px WordPress lets the admin bar scroll away with the page. */
@media (max-width: 600px) {
	.admin-bar .mm-header {
		top: 0;
	}
}

.mm-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--mm-frame);
	margin: 0 auto;
	padding: 0.75rem var(--mm-gutter);
}

.mm-header__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 1rem;
	border: 2px solid var(--mm-wash);
	border-radius: 999px;
	background: var(--mm-white);
	color: var(--mm-ink);
	font: 700 1rem/1 var(--mm-display);
	cursor: pointer;
}

.mm-header__toggle-icon,
.mm-header__toggle-icon::before,
.mm-header__toggle-icon::after {
	display: block;
	width: 1.1rem;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.mm-header__toggle-icon {
	position: relative;
}

.mm-header__toggle-icon::before,
.mm-header__toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.mm-header__toggle-icon::before {
	top: -6px;
}

.mm-header__toggle-icon::after {
	top: 6px;
}

.mm-header.is-open .mm-header__toggle-icon {
	background: transparent;
}

.mm-header.is-open .mm-header__toggle-icon::before {
	transform: translateY(6px) rotate(45deg);
}

.mm-header.is-open .mm-header__toggle-icon::after {
	transform: translateY(-6px) rotate(-45deg);
}

.mm-header__panel {
	display: none;
}

.mm-header.is-open .mm-header__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-height: calc(100vh - 4.5rem);
	overflow-y: auto;
	padding: 1rem var(--mm-gutter) 1.75rem;
	background: var(--mm-white);
	border-bottom: 1px solid var(--mm-wash);
	box-shadow: var(--mm-shadow);
}

.mm-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.65rem 1.4rem;
	border-radius: 999px;
	background: var(--mm-deep);
	color: var(--mm-white);
	font: 700 1.05rem/1.2 var(--mm-display);
	text-decoration: none;
}

.mm-header__cta:hover {
	background: var(--mm-ink);
}

@media (min-width: 64em) {
	.mm-header__toggle {
		display: none;
	}

	.mm-header__panel,
	.mm-header.is-open .mm-header__panel {
		position: static;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1.5rem;
		max-height: none;
		overflow: visible;
		padding: 0;
		border: 0;
		box-shadow: none;
		background: transparent;
	}
}

/* Main menu ------------------------------------------------------------- */

.mm-nav__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-nav__list a {
	display: block;
	padding: 0.7rem 0;
	color: var(--mm-ink);
	font: 600 1.2rem/1.2 var(--mm-display);
	text-decoration: none;
	border-bottom: 1px solid var(--mm-wash);
}

.mm-nav__list .current-menu-item > a,
.mm-nav__list .current_page_item > a,
.mm-nav__list a:hover {
	text-decoration: underline;
	text-decoration-color: var(--mm-butter);
	text-decoration-thickness: 0.3em;
	text-underline-offset: 0.25em;
}

@media (min-width: 64em) {
	.mm-nav__list {
		flex-direction: row;
		gap: 1.4rem;
	}

	.mm-nav__list a {
		padding: 0.4rem 0;
		font-size: 1.05rem;
		border-bottom: 0;
	}
}

/* Language switch -------------------------------------------------------- */

.mm-lang {
	display: flex;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 700 0.95rem/1 var(--mm-display);
}

.mm-lang a,
.mm-lang span {
	display: inline-block;
	padding: 0.45rem 0.6rem;
	border-radius: 999px;
	color: var(--mm-ink);
	text-decoration: none;
}

.mm-lang span {
	background: var(--mm-wash);
}

.mm-lang a:hover {
	background: var(--mm-butter-soft);
}

/* Page header and content ------------------------------------------------ */

.mm-page__header {
	max-width: var(--mm-frame);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--60) var(--mm-gutter) var(--wp--preset--spacing--40);
}

.mm-page__title {
	max-width: 22ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--hero);
}

.mm-page__intro {
	max-width: var(--mm-content);
	margin: 1rem 0 0;
	color: var(--mm-muted);
	font-size: var(--wp--preset--font-size--md);
}

.mm-content {
	padding-bottom: var(--wp--preset--spacing--60);
}

.mm-content > :first-child {
	margin-top: 0;
}

.mm-content :where(h2, h3, h4) {
	margin-top: 2.2em;
	margin-bottom: 0.5em;
}

.mm-content :where(ul, ol) {
	padding-left: 1.25em;
}

.mm-content li + li {
	margin-top: 0.35em;
}

.mm-content :where(img) {
	border-radius: var(--mm-radius);
}

.mm-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.mm-content :where(th, td) {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--mm-wash);
	text-align: left;
	vertical-align: top;
}

.mm-content > .alignfull {
	margin-top: 0;
	margin-bottom: 0;
}

/* Pages (not blog posts): every text block starts on the title's left edge,
   like the home sections; wide blocks span the wide width. */
.mm-page .mm-content > :not(.alignwide):not(.alignfull) {
	max-width: var(--mm-content) !important;
	margin-left: max(0px, calc((100% - var(--mm-wide)) / 2)) !important;
	margin-right: auto !important;
}

/* Sections built with groups in the block editor. */
.mm-section {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.mm-section > :first-child {
	margin-top: 0;
}

.mm-lead {
	color: var(--mm-muted);
	font-size: var(--wp--preset--font-size--md);
}

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

.mm-hero {
	align-items: center !important;
	gap: var(--wp--preset--spacing--50) !important;
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--60);
}

.mm-hero h1 {
	max-width: 15ch;
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--hero);
	line-height: 1.05;
}

.mm-hero .mm-lead {
	max-width: 34ch;
	margin-bottom: 1.75rem;
}

/* Map preview (the hero illustration) ------------------------------------ */

.mm-map {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
	max-width: 34rem;
	margin: 0 auto 4rem;
	border-radius: 2rem;
	background: var(--mm-wash);
	overflow: visible;
}

.mm-map__streets {
	position: absolute;
	z-index: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 2rem;
}

.mm-map__road {
	fill: none;
	stroke: var(--mm-white);
	stroke-width: 9;
	stroke-linecap: round;
}

.mm-map__road--main {
	stroke-width: 18;
}

.mm-map__park {
	fill: var(--mm-butter-soft);
}

.mm-map__pin {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 2.2rem;
	z-index: 2;
	transform: translate(-50%, -100%);
	filter: drop-shadow(0 6px 6px rgba(30, 58, 82, 0.18));
}

.mm-map__pin.is-active {
	width: 3.2rem;
	z-index: 3;
}

/* The halo of the selected place: a butter circle under its pin. */
.mm-map::before {
	content: "";
	position: absolute;
	left: 54%;
	top: 38%;
	width: 6.5rem;
	height: 6.5rem;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--mm-butter);
	opacity: 0.55;
	z-index: 1;
}

.mm-map__card {
	position: absolute;
	left: 50%;
	bottom: -3rem;
	z-index: 4;
	width: min(20rem, 88%);
	transform: translateX(-50%);
	padding: 1rem 1.15rem 1.1rem;
	border-radius: var(--mm-radius);
	background: var(--mm-white);
	box-shadow: var(--mm-shadow);
}

.mm-map__place {
	margin: 0;
	font: 700 1.2rem/1.2 var(--mm-display);
	color: var(--mm-ink);
}

.mm-map__meta {
	margin: 0.1rem 0 0.55rem;
	color: var(--mm-muted);
	font-size: 0.9rem;
}

.mm-map__status,
.mm-map__distance {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.45;
}

.mm-map__open {
	color: #2F7D4F;
	font-weight: 700;
}

.mm-map__open::before {
	content: "";
	display: inline-block;
	width: 0.55rem;
	height: 0.55rem;
	margin-right: 0.35rem;
	border-radius: 50%;
	background: #3BA265;
	vertical-align: 0.05em;
}

.mm-map__distance {
	margin-bottom: 0.7rem;
	color: var(--mm-muted);
}

.mm-map__actions {
	display: flex;
	gap: 0.5rem;
	margin: 0;
}

.mm-map__actions span {
	flex: 1;
	padding: 0.45rem 0.6rem;
	border-radius: 999px;
	background: var(--mm-deep);
	color: var(--mm-white);
	font: 700 0.9rem/1.2 var(--mm-display);
	text-align: center;
}

.mm-map__actions span + span {
	background: var(--mm-wash);
	color: var(--mm-deep);
}

.mm-map__services {
	display: flex;
	gap: 0.45rem;
	margin: 0 0 0.7rem;
	padding: 0;
	list-style: none;
}

.mm-map__services img {
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
}

.mm-map__privacy {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	color: var(--mm-deep);
	font: 700 0.95rem/1 var(--mm-display);
}

@media (min-width: 64em) {
	.mm-map {
		margin-bottom: 2rem;
	}

	.mm-map__card {
		left: auto;
		right: -1.5rem;
		bottom: 2rem;
		transform: none;
	}
}

/* Map legend (place types) ---------------------------------------------- */

.mm-legend {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
	gap: 0.35rem 1rem;
	margin: 0;
	padding: 1rem;
	list-style: none;
	border-radius: var(--mm-radius);
	background: var(--mm-white);
	border: 2px solid var(--mm-wash);
}

.mm-legend__item {
	display: grid;
	grid-template-columns: 1.4rem 1fr;
	column-gap: 0.5rem;
	align-items: center;
	padding: 0.35rem 0;
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 48em) {
	.mm-legend {
		grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
		gap: 0.35rem 1.25rem;
		padding: 1.5rem;
	}

	.mm-legend__item {
		grid-template-columns: 1.6rem 1fr;
		column-gap: 0.65rem;
		padding: 0.4rem 0;
		font-size: var(--wp--preset--font-size--base);
	}
}

.mm-legend__pin {
	grid-row: span 2;
	width: 100%;
}

.mm-legend__name {
	font-weight: 700;
	line-height: 1.25;
}

.mm-legend__description {
	color: var(--mm-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.mm-legend.has-descriptions {
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	row-gap: 0.85rem;
}

.mm-legend.has-descriptions .mm-legend__item {
	align-items: start;
}

/* Services, accessibility, hospitality ----------------------------------- */

/* Rows of icon + label: labels never wrap under icons of different
   heights. Services take the full width; accessibility and hospitality
   share the row below. */
.mm-services {
	display: grid;
	gap: var(--wp--preset--spacing--50) 3rem;
}

.mm-services__group {
	padding-top: 1.25rem;
	border-top: 2px solid var(--mm-wash);
}

.mm-services__title {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--lg);
}

.mm-services__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr));
	gap: 0.85rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-services__item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
}

.mm-services__item img {
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
}

@media (min-width: 48em) {
	.mm-services__list {
		grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
		gap: 0.85rem 1.5rem;
	}

	.mm-services__item {
		gap: 0.75rem;
		font-size: var(--wp--preset--font-size--base);
	}

	.mm-services__item img {
		width: 3rem;
		height: 3rem;
	}
}

@media (min-width: 64em) {
	.mm-services {
		grid-template-columns: 1fr 1fr;
	}

	.mm-services__group--service {
		grid-column: 1 / -1;
	}
}

/* Privacy levels: an ordered scale, joined by a dotted line on wide screens. */

.mm-privacy {
	display: grid;
	gap: 1.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.mm-privacy__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.mm-privacy__icon {
	flex: none;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--mm-white);
}

.mm-privacy__name {
	margin: 0.35rem 0 0.2rem;
	font: 700 var(--wp--preset--font-size--lg)/1.2 var(--mm-display);
}

.mm-privacy__description {
	margin: 0;
	color: var(--mm-muted);
}

@media (min-width: 48em) {
	.mm-privacy {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}

	.mm-privacy__item {
		flex-direction: column;
		gap: 0.75rem;
	}

	.mm-privacy__item:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 2rem;
		left: 5rem;
		right: -1.5rem;
		border-top: 3px dotted var(--mm-sky);
	}
}

/* Store badges and QR --------------------------------------------------- */

.mm-stores {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 2rem;
}

.mm-stores__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.mm-stores__badge img {
	display: block;
	height: 3rem;
	width: auto;
}

.mm-stores__qr {
	display: none;
	align-items: center;
	gap: 0.9rem;
	margin: 0;
	max-width: 15rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
}

.mm-stores__qr img {
	width: 6.5rem;
	height: 6.5rem;
	padding: 0.35rem;
	border-radius: 0.75rem;
	background: var(--mm-white);
}

@media (min-width: 64em) {
	.mm-stores__qr {
		display: flex;
	}
}

/* Download band (footer, every page) ------------------------------------ */

.mm-download {
	background: var(--mm-butter);
	color: var(--mm-ink);
}

.mm-download__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 3rem;
	max-width: var(--mm-frame);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--50) var(--mm-gutter);
}

.mm-download__title {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--xxl);
}

.mm-download__text p {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
}

/* Footer ---------------------------------------------------------------- */

.mm-footer {
	background: var(--mm-ink);
	color: #DCE7F0;
}

.mm-footer a {
	color: var(--mm-white);
	text-decoration: none;
}

.mm-footer a:hover {
	text-decoration: underline;
	text-decoration-color: var(--mm-butter);
	text-decoration-thickness: 0.2em;
	text-underline-offset: 0.25em;
}

.mm-footer :focus-visible {
	outline-color: var(--mm-butter);
}

.mm-footer__main {
	display: grid;
	gap: 2rem;
	max-width: var(--mm-frame);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--60) var(--mm-gutter) var(--wp--preset--spacing--50);
}

.mm-footer__brand p {
	max-width: 30ch;
	margin: 1rem 0 0;
}

.mm-footer__heading {
	margin: 0 0 0.75rem;
	color: var(--mm-white);
	font: 700 1.1rem/1.2 var(--mm-display);
}

.mm-footer__list,
.mm-footer__legal {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-footer__list li + li {
	margin-top: 0.5rem;
}

.mm-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	max-width: var(--mm-frame);
	margin: 0 auto;
	padding: 1.25rem var(--mm-gutter) 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: var(--wp--preset--font-size--small);
}

.mm-footer__copy {
	margin: 0;
}

.mm-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.mm-footer .mm-lang {
	margin-left: auto;
}

.mm-footer .mm-lang a,
.mm-footer .mm-lang span {
	color: var(--mm-white);
}

.mm-footer .mm-lang span {
	background: rgba(255, 255, 255, 0.14);
}

.mm-footer .mm-lang a:hover {
	background: rgba(255, 255, 255, 0.08);
	text-decoration: none;
}

@media (min-width: 48em) {
	.mm-footer__main {
		grid-template-columns: 2fr 1fr 1fr;
	}
}

/* Blog cards, archives, pagination --------------------------------------- */

.mm-archive__list {
	max-width: var(--mm-frame);
	margin: 0 auto;
	padding: 0 var(--mm-gutter) var(--wp--preset--spacing--60);
}

.mm-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 2.5rem 1.75rem;
}

.mm-card__image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--mm-radius);
}

.mm-card__title {
	margin: 1rem 0 0.25rem;
	font-size: var(--wp--preset--font-size--lg);
}

.mm-card__title a {
	color: var(--mm-ink);
	text-decoration: none;
}

.mm-card__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--mm-butter);
	text-decoration-thickness: 0.2em;
}

.mm-card__date,
.mm-post__date,
.mm-press__date {
	margin: 0;
	color: var(--mm-muted);
	font-size: var(--wp--preset--font-size--small);
}

.mm-card__summary {
	margin: 0.5rem 0 0;
}

.mm-empty {
	color: var(--mm-muted);
}

.pagination,
.navigation.pagination {
	margin-top: var(--wp--preset--spacing--50);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font: 700 1rem/1 var(--mm-display);
}

.nav-links .page-numbers {
	padding: 0.6rem 0.9rem;
	border-radius: 999px;
	color: var(--mm-ink);
	text-decoration: none;
}

.nav-links .page-numbers.current {
	background: var(--mm-wash);
}

.nav-links a.page-numbers:hover {
	background: var(--mm-butter-soft);
}

/* Single post ----------------------------------------------------------- */

.mm-post__header {
	max-width: calc(var(--mm-content) + 2 * var(--mm-gutter));
}

.mm-post__back {
	margin: 0 0 1rem;
	font: 700 1rem/1 var(--mm-display);
}

.mm-post__back a {
	color: var(--mm-deep);
}

.mm-post__header .mm-post__date {
	margin-top: 0.75rem;
}

.mm-post__image {
	max-width: var(--mm-frame);
	margin: 0 auto var(--wp--preset--spacing--50);
	padding: 0 var(--mm-gutter);
}

.mm-post__image img {
	display: block;
	width: 100%;
	max-height: 32rem;
	object-fit: cover;
	border-radius: var(--mm-radius);
}

/* Press ----------------------------------------------------------------- */

.mm-press__list {
	display: grid;
	gap: 1.75rem;
	max-width: var(--mm-frame);
	margin: 0 auto;
	padding: 0 var(--mm-gutter) var(--wp--preset--spacing--60);
	list-style: none;
}

.mm-press__item {
	display: grid;
	gap: 1rem;
	align-items: center;
}

.mm-press__image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--mm-radius);
}

.mm-press__outlet {
	margin: 0;
	color: var(--mm-deep);
	font: 700 0.95rem/1.2 var(--mm-display);
}

.mm-press__title {
	margin: 0.2rem 0 0.35rem;
	font-size: var(--wp--preset--font-size--lg);
}

.mm-press__title a {
	color: var(--mm-ink);
	text-decoration: none;
}

.mm-press__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--mm-butter);
	text-decoration-thickness: 0.2em;
}

@media (min-width: 48em) {
	.mm-press__item {
		grid-template-columns: 14rem 1fr;
		gap: 1.75rem;
	}
}

/* 404 ------------------------------------------------------------------- */

.mm-notfound__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	max-width: var(--mm-frame);
	margin: 0 auto;
	padding: 0 var(--mm-gutter) var(--wp--preset--spacing--70);
}

/* Buttons and forms ----------------------------------------------------- */

.mm-button,
.search-form button,
.search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.6rem;
	border: 0;
	border-radius: 999px;
	background: var(--mm-deep);
	color: var(--mm-white);
	font: 700 1.1rem/1.2 var(--mm-display);
	text-decoration: none;
	cursor: pointer;
}

.mm-button:hover,
.search-form button:hover,
.search-submit:hover {
	background: var(--mm-ink);
}

.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.search-form label {
	flex: 1 1 14rem;
}

input[type="search"],
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 2px solid #C9D9E6;
	border-radius: 0.75rem;
	background: var(--mm-white);
	color: var(--mm-ink);
	font: inherit;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--mm-deep);
	outline: none;
}

/* Core block tweaks ----------------------------------------------------- */

.wp-block-button__link {
	text-decoration: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent;
	color: var(--mm-deep);
}

.wp-block-image img {
	border-radius: var(--mm-radius);
}

.has-butter-background-color a:where(:not(.wp-element-button)),
.has-butter-soft-background-color a:where(:not(.wp-element-button)) {
	color: var(--mm-ink);
}

/* Home sections ---------------------------------------------------------- */

/* Section titles and intros start at the wide grid's left edge, with a
   readable measure, instead of sitting in a narrower centred column. */
.mm-section > :not(.alignwide):not(.alignfull) {
	max-width: var(--mm-content) !important;
	margin-left: max(0px, calc((100% - var(--mm-wide)) / 2)) !important;
	margin-right: auto !important;
}

.mm-section > .wp-block-heading {
	margin-bottom: 0.4em;
}

.mm-section > .mm-lead {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--40);
}

.mm-hero-wrap {
	padding-top: var(--wp--preset--spacing--40);
}

.mm-hero h1 {
	max-width: 17ch;
}

/* The three roles: an app-style butter circle above each column. */
.mm-roles {
	gap: var(--wp--preset--spacing--50) !important;
	margin-top: var(--wp--preset--spacing--40);
}

.mm-roles > .wp-block-column::before {
	content: "";
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: var(--mm-butter) center / 42% no-repeat;
}

.mm-roles > .wp-block-column:nth-child(1)::before {
	background: url("../img/services/breastFeedingPlaces.webp") center / contain no-repeat;
}

.mm-roles > .wp-block-column:nth-child(2)::before {
	background-image: url("../img/pins/hostelry.png");
	background-size: 30%;
}

.mm-roles > .wp-block-column:nth-child(3)::before {
	background-image: url("../img/logo-symbol.svg");
	background-size: 52%;
}

.mm-roles h3 {
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--lg);
}

.mm-roles p {
	margin: 0;
}

.mm-privacy-title {
	margin-top: var(--wp--preset--spacing--60) !important;
}

/* Latest posts (core block) styled like the blog cards. */
.mm-latest.wp-block-latest-posts {
	padding: 0;
	gap: 2.5rem 1.75rem;
}

.mm-latest.wp-block-latest-posts.is-grid li {
	margin: 0;
}

.mm-latest .wp-block-latest-posts__featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--mm-radius);
}

.mm-latest .wp-block-latest-posts__post-title {
	display: block;
	margin-top: 1rem;
	color: var(--mm-ink);
	font: 700 var(--wp--preset--font-size--lg)/1.2 var(--mm-display);
	text-decoration: none;
}

.mm-latest .wp-block-latest-posts__post-title:hover {
	text-decoration: underline;
	text-decoration-color: var(--mm-butter);
	text-decoration-thickness: 0.2em;
}

.mm-latest .wp-block-latest-posts__post-date {
	color: var(--mm-muted);
	font-size: var(--wp--preset--font-size--small);
}

.mm-more {
	margin-top: var(--wp--preset--spacing--40);
	font: 700 1.1rem/1.2 var(--mm-display);
}

@media (min-width: 48em) {
	.mm-latest.wp-block-latest-posts.is-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	.mm-latest.wp-block-latest-posts.is-grid li {
		width: auto;
	}
}

/* App features (home): four points with butter icons ---------------------- */

.mm-features {
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) !important;
	margin-top: var(--wp--preset--spacing--40);
}

.mm-features > .wp-block-column::before {
	content: "";
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 0.85rem;
	background: center / contain no-repeat;
}

.mm-features > .wp-block-column:nth-child(1)::before {
	background-image: url("../img/features/filter.svg");
}

.mm-features > .wp-block-column:nth-child(2)::before {
	background-image: url("../img/features/clock.svg");
}

.mm-features > .wp-block-column:nth-child(3)::before {
	background-image: url("../img/features/route.svg");
}

.mm-features > .wp-block-column:nth-child(4)::before {
	background-image: url("../img/features/bell.svg");
}

.mm-features h3 {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--md);
}

.mm-features p {
	margin: 0;
	color: var(--mm-muted);
}

@media (min-width: 48em) and (max-width: 63.99em) {
	.mm-features {
		flex-wrap: wrap !important;
	}

	.mm-features > .wp-block-column {
		flex-basis: calc(50% - 1.5rem) !important;
	}
}

/* Mapper page: steps and the Free / Premium comparison --------------------- */

.mm-steps {
	counter-reset: mm-step;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

.mm-steps > li {
	position: relative;
	max-width: 62ch;
	margin: 0 0 1.4rem;
	padding-left: 3.25rem;
}

.mm-steps > li::before {
	counter-increment: mm-step;
	content: counter(mm-step);
	position: absolute;
	left: 0;
	top: -0.15rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--mm-butter);
	color: var(--mm-ink);
	font: 800 1.1rem/1 var(--mm-display);
}

.mm-plans {
	gap: var(--wp--preset--spacing--40) !important;
	margin-top: var(--wp--preset--spacing--40);
}

.mm-plans > .wp-block-column {
	padding: 1.5rem 1.6rem 1.75rem;
	border-radius: var(--mm-radius);
	border: 2px solid var(--mm-wash);
	background: var(--mm-white);
}

.mm-plans > .wp-block-column:nth-child(2) {
	border-color: var(--mm-butter);
	background: var(--mm-butter-soft);
}

.mm-plans h3 {
	margin: 0 0 0.25rem;
}

.mm-plans .mm-plans__tagline {
	margin: 0 0 1rem;
	color: var(--mm-muted);
}

.mm-plans ul {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.mm-plans li {
	position: relative;
	padding-left: 1.75rem;
}

.mm-plans li + li {
	margin-top: 0.6rem;
}

.mm-plans li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: var(--mm-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}

/* Loyalty: the app's "My Rewards" wallet, as an illustration ------------- */

.mm-loyalty {
	align-items: center !important;
	gap: var(--wp--preset--spacing--50) !important;
}

.mm-rewards {
	display: grid;
	place-items: center;
	padding: 2rem 1rem;
}

.mm-rewards__card {
	width: min(21rem, 100%);
	padding: 1.25rem 1.25rem 1.4rem;
	border-radius: 1.5rem;
	background: var(--mm-white);
	box-shadow: var(--mm-shadow);
}

.mm-rewards__title {
	margin: 0 0 1rem;
	font: 800 1.35rem/1.2 var(--mm-display);
}

.mm-rewards__wallet {
	display: grid;
	grid-template-columns: 1.6rem 1fr auto;
	align-items: center;
	gap: 0.75rem;
}

.mm-rewards__wallet img {
	width: 100%;
}

.mm-rewards__venue {
	margin: 0;
	font-weight: 700;
	line-height: 1.25;
}

.mm-rewards__visits {
	margin: 0;
	color: var(--mm-muted);
	font-size: var(--wp--preset--font-size--small);
}

.mm-rewards__balance {
	margin: 0;
	color: var(--mm-deep);
	font: 800 1.3rem/1 var(--mm-display);
}

.mm-rewards__progress {
	height: 0.6rem;
	margin: 1rem 0 0.4rem;
	border-radius: 999px;
	background: var(--mm-wash);
	overflow: hidden;
}

.mm-rewards__progress span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--mm-butter);
}

.mm-rewards__next {
	margin: 0 0 1.1rem;
	color: var(--mm-muted);
	font-size: var(--wp--preset--font-size--small);
}

.mm-rewards__qr {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0.55rem 1rem;
	border-radius: 999px;
	background: var(--mm-deep);
	color: var(--mm-white);
	font: 700 1rem/1.2 var(--mm-display);
}

.mm-rewards__qr img {
	width: 1.6rem;
	height: 1.6rem;
	padding: 0.1rem;
	border-radius: 0.3rem;
	background: var(--mm-white);
}

.mm-note {
	margin: 0.5rem 0 0;
	color: var(--mm-muted);
	font-size: var(--wp--preset--font-size--small);
}

.mm-loyalty .mm-steps {
	margin-top: 0;
}

/* A list with tick marks (Mapper page). */
.mm-checks {
	padding-left: 0 !important;
	list-style: none;
}

.mm-checks li {
	position: relative;
	padding-left: 1.75rem;
}

.mm-checks li + li {
	margin-top: 0.6rem;
}

.mm-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: var(--mm-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}

/* Contact form ------------------------------------------------------------ */

.mm-form-wrap {
	scroll-margin-top: 6rem;
}

.mm-form {
	display: grid;
	gap: 1.1rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--mm-radius);
	background: var(--mm-wash);
}

.mm-form__grid {
	display: grid;
	gap: 1.1rem 1.25rem;
}

@media (min-width: 48em) {
	.mm-form__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.mm-form__field {
	display: grid;
	align-content: start;
	gap: 0.35rem;
	margin: 0;
}

.mm-form label {
	font-weight: 700;
}

.mm-form__optional {
	color: var(--mm-muted);
	font-weight: 500;
}

.mm-form__field.has-error input,
.mm-form__field.has-error textarea {
	border-color: #B3261E;
}

.mm-form__error {
	color: #B3261E;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.mm-form__alert {
	padding: 0.85rem 1rem;
	border-radius: 0.75rem;
	background: #FDECEA;
	color: #8C1D18;
	font-weight: 600;
}

.mm-form__consent {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0;
}

.mm-form__consent label {
	flex: 1 1 18rem;
	font-weight: 500;
}

.mm-form__consent input {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--mm-deep);
}

.mm-form__consent .mm-form__error {
	flex-basis: 100%;
}

/* The honeypot: off-screen for people, still in the form for bots. */
.mm-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mm-form__actions {
	margin: 0;
}

.mm-form__done {
	padding: 1.5rem;
	border-radius: var(--mm-radius);
	background: var(--mm-butter-soft);
}

.mm-form__done-title {
	margin: 0 0 0.35rem;
	font: 700 var(--wp--preset--font-size--lg)/1.2 var(--mm-display);
}

.mm-form__done p:last-child {
	margin: 0;
}