/*
 * Mozhi & Miles — styles theme.json cannot express.
 * Logical properties only (inline/block), so an RTL/Arabic version needs no rewrite.
 * Colour rule: coral (#E8705A) is decorative only; any text uses coral-deep or darker.
 */

:root {
	--mm-card-radius: var(--wp--custom--radius--card, 14px);
	--mm-header-h: 88px;
	--mm-focus: var(--wp--preset--color--forest);
}

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

html {
	scroll-behavior: smooth;
}

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

img {
	max-inline-size: 100%;
	block-size: auto;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--mm-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--forest);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--cream);
}

.mm-main {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

.mm-main--wide {
	padding-block: 0;
}

/* ---------- Script accent: one phrase per section ---------- */

.mm-script,
.is-style-script {
	font-family: var(--wp--preset--font-family--script);
	font-weight: 600;
	color: var(--wp--preset--color--coral-deep);
	letter-spacing: 0;
}

/* Decorative coral is allowed only when large (≥ 24px). */
.mm-script--decorative {
	color: var(--wp--preset--color--coral);
	font-size: var(--wp--preset--font-size--script);
	line-height: 1.1;
}

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

.mm-site-header {
	position: sticky;
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: var(--wp--preset--color--cream);
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 70%, transparent);
}

.mm-header {
	max-inline-size: 1200px;
	margin-inline: auto;
	padding-block: 0.5rem;
	padding-inline: var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--30);
}

.mm-logo {
	display: block;
	flex: none;
	line-height: 0;
	border-radius: 50%;
}

.mm-logo img {
	inline-size: 64px;
	block-size: 64px;
}

.mm-header__nav {
	gap: var(--wp--preset--spacing--40);
}

.mm-nav .wp-block-navigation-item__content {
	padding-block: 0.5rem;
}

.mm-nav .wp-block-navigation__container {
	gap: 1.5rem;
}

.mm-header__cta .wp-block-button__link {
	padding: 0.65em 1.2em;
	white-space: nowrap;
}

/* Mobile overlay menu (colours come from the block's overlay colour attributes). */
.mm-nav .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	padding: var(--wp--preset--spacing--50);
}

.mm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.25rem;
}

/* The desktop "justify right" layout leaks into the overlay; start-align the list there. */
.mm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.mm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.mm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
	text-align: start;
	inline-size: 100%;
}

.mm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--lora);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.mm-nav .wp-block-navigation__responsive-container-open,
.mm-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--forest);
	padding: 0.5rem;
	margin: -0.5rem;
}

.mm-nav .wp-block-navigation__responsive-container-open svg,
.mm-nav .wp-block-navigation__responsive-container-close svg {
	inline-size: 30px;
	block-size: 30px;
}

/* Mobile: button first, menu toggle at the far edge (where thumbs expect it). */
@media (max-width: 599px) {
	.mm-header__cta {
		order: -1;
	}
}

@media (max-width: 380px) {
	.mm-header__cta .wp-block-button__link {
		font-size: 0.875rem;
		padding: 0.6em 0.95em;
	}
}

/* Narrower than any current phone (< 330px, e.g. a squeezed side panel): logo + menu only. */
@media (max-width: 329px) {
	.mm-header .mm-header__cta.wp-block-buttons {
		display: none;
	}

	.mm-logo img {
		inline-size: 56px;
		block-size: 56px;
	}
}

@media (min-width: 782px) {
	.mm-logo img {
		inline-size: var(--mm-header-h);
		block-size: var(--mm-header-h);
	}

	.mm-header {
		padding-block: 0.625rem;
	}
}

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

.mm-site-footer {
	margin-block-start: 0;
}

.mm-footer {
	position: relative;
	background: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--ink);
	padding-block: 0 var(--wp--preset--spacing--50);
	margin-block-start: clamp(60px, 9vw, 140px);
}

.mm-footer > .mm-footer__hills {
	max-inline-size: none;
	margin: 0;
}

.mm-footer__hills {
	position: absolute;
	inset-inline: 0;
	inset-block-end: calc(100% - 1px); /* 1px overlap hides the anti-aliased seam */
	block-size: clamp(60px, 9vw, 140px);
	line-height: 0;
	pointer-events: none;
}

.mm-footer__hills .mm-svg,
.mm-footer__hills svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.mm-footer__inner {
	padding-block-start: var(--wp--preset--spacing--40);
}

.mm-footer__cols {
	gap: var(--wp--preset--spacing--50);
}

/* The logo is mint-on-transparent, which disappears on the sage footer: sit it on a cream disc. */
.mm-footer__logo {
	display: inline-block;
	line-height: 0;
	padding: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--cream);
	box-shadow: var(--wp--preset--shadow--card);
}

.mm-footer__logo img {
	inline-size: 128px;
	block-size: 128px;
}

.mm-footer__tagline {
	margin-block: 0.75rem 0.25rem;
	line-height: 1.25;
}

.mm-footer__tagline-serif {
	display: block;
	font-family: var(--wp--preset--font-family--lora);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--wp--preset--color--forest);
}

/* coral-deep on sage ≈ 3.9:1 — passes AA for large text only, which this is (≥ 28px). */
.mm-footer__tagline .mm-script {
	display: block;
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
}

.mm-footer__pillars {
	font-size: var(--wp--preset--font-size--small);
}

.mm-footer__pillars strong {
	color: var(--wp--preset--color--forest);
}

.mm-footer__heading {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--forest);
	margin-block-end: 0.75rem;
}

.mm-footer-nav .wp-block-navigation__container {
	gap: 0.15rem;
}

.mm-footer-nav .wp-block-navigation-item__content {
	display: inline-block;
	padding-block: 0.4rem;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
}

.mm-footer-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--forest);
}

.mm-footer .mm-footer__social {
	margin-block-start: var(--wp--preset--spacing--50);
	gap: 0.75rem;
}

.mm-footer__signoff {
	font-family: var(--wp--preset--font-family--lora);
	font-style: italic;
	color: var(--wp--preset--color--forest);
	margin-block-start: 0.5rem;
}

.mm-footer__legal {
	font-size: var(--wp--preset--font-size--small);
	margin-block-start: 0.25rem;
}

.mm-footer :focus-visible {
	--mm-focus: var(--wp--preset--color--forest);
}

/* ---------- Heart divider (hairline — heart — hairline) ---------- */

.mm-heart-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	margin-block: var(--wp--preset--spacing--40);
}

.mm-heart-divider__line {
	inline-size: min(160px, 28vw);
	block-size: 1px;
	background: var(--wp--preset--color--mint);
}

.mm-footer .mm-heart-divider__line {
	background: var(--wp--preset--color--forest);
	opacity: 0.35;
}

.mm-svg {
	display: inline-block;
	line-height: 0;
}

/* ---------- TODO placeholder (visible on purpose; every one is in OPEN_ITEMS.md) ---------- */

.is-style-todo {
	border: 2px dashed var(--wp--preset--color--mustard);
	background: #fff7e8;
	color: var(--wp--preset--color--ink);
	border-radius: 10px;
	padding: 0.75rem 1rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

p.is-style-todo {
	font-family: var(--wp--preset--font-family--lato);
}

.mm-footer .is-style-todo {
	background: #fbf3e0;
	margin: 0;
}

/* ---------- Cards ---------- */

.is-style-card {
	background: var(--wp--preset--color--cream);
	border-radius: var(--mm-card-radius);
	box-shadow: var(--wp--preset--shadow--card);
	padding: var(--wp--preset--spacing--40);
}

.is-style-taped-card {
	--mm-tape: var(--wp--preset--color--mint);
	position: relative;
	background: #fff;
	border-radius: 3px;
	box-shadow: var(--wp--preset--shadow--card);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}

.is-style-taped-card::before {
	content: "";
	position: absolute;
	inset-block-start: -12px;
	inset-inline-start: 50%;
	inline-size: 76px;
	block-size: 24px;
	translate: -50% 0;
	rotate: -4deg;
	background:
		radial-gradient(circle, rgb(255 255 255 / 0.55) 1px, transparent 1.4px) 0 0 / 7px 7px,
		var(--mm-tape);
	opacity: 0.9;
	clip-path: polygon(0 8%, 100% 0, 97% 25%, 100% 50%, 97% 75%, 100% 100%, 0 100%, 3% 75%, 0 50%, 3% 25%);
}

.is-style-taped-card.mm-tape--mustard { --mm-tape: var(--wp--preset--color--mustard); }
.is-style-taped-card.mm-tape--coral { --mm-tape: var(--wp--preset--color--coral); }

.is-style-page-card img,
.is-style-page-card .components-resizable-box__container {
	background: var(--wp--preset--color--cream);
	padding: 10px;
	border-radius: 10px;
	box-shadow: var(--wp--preset--shadow--card);
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Header, main and footer sit flush: the sections carry their own spacing. */
.wp-site-blocks > * {
	margin-block: 0;
}