/*
Theme Name: Matcha Meadows
Theme URI: https://matchameadows.com
Author: Yunn
Description: A block theme for personal blogs and journals. Two-column layout with a sticky sidebar for author, playlist and newsletter cards, a swipeable category rail on mobile, and post cards that sit slightly tilted like photos on a table. Colours and type live in theme.json; every section edits directly in the Site Editor.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: matcha-meadows
Tags: blog, one-column, two-columns, block-patterns, full-site-editing, custom-colors, custom-menu, featured-images
*/

/* -------------------------------------------------------------------------
   Matcha Meadows — supplemental styles
   Design tokens live in theme.json. This file only covers what blocks
   can't express: hover motion, decorative overlays, scroll behaviour.
   ---------------------------------------------------------------------- */

/* --- Paper texture ----------------------------------------------------- */

/* The PNG carries an alpha channel, so the speckles sit straight on top of
   the cream from theme.json — no blend mode needed. Kept at native size so
   the grain stays crisp instead of turning into visible tiles. */
body {
	background-color: var(--wp--preset--color--base);
	background-image: url("assets/images/natural-paper-bg.png");
	background-repeat: repeat;
	background-size: 523px auto;
}

/* --- Hero header ------------------------------------------------------- */

.mm-hero {
	position: relative;
	isolation: isolate;
}

/* Neutralises the cover's overlay layer.
 *
 * The hero was first built with a flat sage overlay standing in for the
 * watercolour that didn't exist yet. Once the real image went in, the
 * overlay stayed on top of it at 50% and tinted everything green —
 * confirmed in the console as rgb(168,184,154) at opacity .5, which is
 * the sage preset.
 *
 * It's removed from parts/header.html, but the live site's header lives in
 * the database (edited via the Site Editor), and that copy wins over the
 * theme file. The overlay control resisted every attempt to clear it from
 * the editor UI, so this closes it off in CSS instead.
 *
 * This is a patch: it hides the layer rather than removing it. Drop this
 * rule if a deliberate hero overlay is ever wanted. */
.mm-hero .wp-block-cover__background {
	opacity: 0;
}

/* Fades the watercolor meadow into the page background so the seam between
   the hero image and the body is invisible.
 *
 * Full height with intermediate stops rather than a band pinned to the
 * bottom: a 40%-tall layer starts abruptly at its own top edge, and on a
 * pale image that edge is visible as a faint line. Staying transparent
 * through the first third and easing in from there has no start edge to
 * see.
 *
 * It resolves to cream, not pure white, on purpose — the page behind is
 * cream, so ending anywhere else just moves the seam instead of hiding
 * it. */
.mm-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(253, 250, 243, 0) 0%,
		rgba(253, 250, 243, 0) 70%,
		rgba(253, 250, 243, 0.55) 88%,
		rgb(253, 250, 243) 100%
	);
	pointer-events: none;
	z-index: 1;
}

/* Only the inner container is lifted above the gradient — never `> *`.
 *
 * The cover's other direct children are the overlay span and, once an image
 * is set, `<img class="wp-block-cover__image-background">`, which core
 * positions absolutely. A blanket `.mm-hero > *` rule forced that image to
 * `position: relative`, dropping it into normal flow where it displaced the
 * title and nav — the header looked like adding a background erased the
 * text. */
.mm-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* Set here rather than left to the block's own colour: this header lives in
   the database, so the value in parts/header.html never reaches the site. */
.mm-hero .wp-block-site-title,
.mm-hero .wp-block-site-title a {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 700;
}

/* Taller so there's watercolour left to see once the category cards ride up
   over it. !important because the height is an inline attribute on the
   cover, and this header lives in the database — a markup change wouldn't
   reach the live site. */
/* The bottom padding is what clears the nav from the category cards: the
   cards ride up 5.5rem into the hero, so the padding has to exceed that
   plus a gap or the pill collides with them. Change one and check the
   other. */
.mm-hero.wp-block-cover {
	min-height: 340px !important;
	padding-bottom: 7rem !important;
}

/* --- Pill navigation --------------------------------------------------- */

.mm-nav .wp-block-navigation__container {
	background: rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.4rem 0.75rem;
	gap: 0.25rem;
}

/* The translucency belongs to the container alone. When the items carry it
   too, two 72% layers stack to roughly 92% and the pill reads as solid. */
.mm-nav .wp-block-navigation-item,
.mm-nav .wp-block-navigation-link,
.mm-nav .wp-block-navigation-item__content {
	background-color: transparent;
}

.mm-nav .wp-block-navigation-item__content {
	padding: 0.4rem 0.9rem;
	border-radius: var(--wp--custom--radius--pill);
	transition: background-color 160ms ease, color 160ms ease;
}

.mm-nav .wp-block-navigation-item__content:hover,
.mm-nav .wp-block-navigation-item__content:focus-visible {
	background: rgba(255, 255, 255, 0.95);
	text-decoration: none;
}

.mm-nav .current-menu-item > .wp-block-navigation-item__content {
	background: #fff;
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
}

/* --- Icons ------------------------------------------------------------- */

/* Material Symbols as inline SVG rather than the icon font. Nine glyphs
   don't justify a webfont, and inlining avoids the request to Google's CDN
   — same reasoning as self-hosting the text faces.
 *
 * `currentColor` on the fill means the icon inherits whatever colour its
 * card sets, so no per-icon rules are needed. */
.mm-icon {
	display: block;
	line-height: 0;
	text-align: center;
	margin-block-end: 0.5rem;
	color: var(--wp--preset--color--primary);
}

.mm-icon svg {
	display: inline-block;
	vertical-align: middle;
}

/* --- Cards (category, feature, post) ----------------------------------- */

/* Both forms are matched on purpose: patterns hardcode `mm-card`, while the
   registered block style renders as `is-style-mm-card` when the client
   applies "Cozy Card" from the editor sidebar. Same for the rules below. */
.mm-card,
.is-style-mm-card {
	border-radius: var(--wp--custom--radius--card);
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.mm-card:hover,
.is-style-mm-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--lifted);
}

/* Icons ride in the hero's top-right corner rather than in a row of their
   own, so the site title can start at the very top and stay optically
   centred — a flex row with the title and the icons as siblings would push
   the title off-centre by the width of the icons. */
.mm-hero__icons {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--30);
	inset-inline-end: var(--wp--preset--spacing--40);
	z-index: 3;
	margin: 0;
}

/* Category strip sits half-overlapping the hero, on a translucent cream
   band that carries the cards and softens the seam with the watercolour. */
/* Rides up into the hero so the watercolour runs behind the cards instead
   of stopping above them. The band's own background is dropped: over the
   illustration it would just be a pale rectangle hiding what we're trying
   to reveal. */
.mm-category-strip {
	margin-block-start: -5.5rem;
	position: relative;
	z-index: 3;
	padding: 0;
}

/* Cards at 35% so the watercolour reads through them, matching the nav pill.
   !important is needed because the block carries `has-base-2-background-color`,
   which core emits with !important of its own. The blur keeps the labels
   legible over whatever part of the illustration lands behind them. */
.mm-category-strip .mm-card {
	background-color: rgba(255, 255, 255, 0.35) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

@media (max-width: 781px) {
	.mm-category-strip {
		margin-block-start: -1.5rem;
	}
}

/* --- Post cards -------------------------------------------------------- */

/* The card is a white sheet with the image inset inside it — the padding
   is what creates the photo-frame border around the featured image. */
.mm-post-card {
	--mm-tilt: -0.8deg;
	background: var(--wp--preset--color--base-2);
	border-radius: var(--wp--custom--radius--card);
	padding: 0.75rem;
	box-shadow: var(--wp--preset--shadow--soft);
	height: 100%;
	transform: rotate(var(--mm-tilt));
	transition: transform 260ms ease, box-shadow 260ms ease;
}

/* Scattered-photo feel. The angles are deliberately uneven and never
   repeat on consecutive cards — a strict alternation reads as a pattern,
   which is the rigidity we're trying to avoid. Kept under ~1.5deg so text
   baselines stay comfortable to read.

   nth-child targets .wp-block-post (the <li> the post template emits),
   not the card itself — the card is always the only child of its item. */
.wp-block-post:nth-child(4n + 1) .mm-post-card {
	--mm-tilt: -0.9deg;
}

.wp-block-post:nth-child(4n + 2) .mm-post-card {
	--mm-tilt: 1.1deg;
}

.wp-block-post:nth-child(4n + 3) .mm-post-card {
	--mm-tilt: 0.6deg;
}

.wp-block-post:nth-child(4n + 4) .mm-post-card {
	--mm-tilt: -1.3deg;
}

/* Straightens on hover, as if picked up off the table. */
.mm-post-card:hover {
	transform: rotate(0deg) translateY(-4px);
	box-shadow: var(--wp--preset--shadow--lifted);
}

.mm-post-card__media {
	position: relative;
	margin: 0;
}

.mm-post-card .wp-block-post-featured-image {
	border-radius: var(--wp--custom--radius--soft);
	overflow: hidden;
	margin: 0;
}

.mm-post-card .wp-block-post-featured-image img {
	transition: transform 400ms ease;
	display: block;
	width: 100%;
}

.mm-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.mm-post-card__body {
	padding: 0.85rem 0.4rem 0.4rem;
}

/* Date on the left, favourite heart on the right, one row. */
.mm-post-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: 0.35rem;
}

.mm-post-card__meta .wp-block-post-date {
	margin: 0;
	text-transform: lowercase;
}

.mm-post-card__heart {
	flex: none;
	line-height: 0;
	color: var(--wp--preset--color--accent-clay);
}

/* Title reads as ink, not as a link — the "read more" carries the affordance. */
.mm-post-card .wp-block-post-title {
	margin: 0 0 0.4rem;
}

.mm-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.mm-post-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary-dark);
}

.mm-post-card .wp-block-post-excerpt {
	margin: 0 0 0.6rem;
}

.mm-post-card .wp-block-post-excerpt__more-text {
	display: none;
}

/* Category pill floating over the featured image */
.mm-post-card__media .wp-block-post-terms {
	position: absolute;
	inset-block-start: 0.6rem;
	inset-inline-start: 0.6rem;
	margin: 0;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.2rem 0.7rem;
	font-size: var(--wp--preset--font-size--x-small);
	z-index: 2;
}

/* Without a featured image the media box collapses to zero height and an
   absolute pill would land on top of the title. Fall back to inline flow. */
.mm-post-card__media:not(:has(img)) .wp-block-post-terms {
	position: static;
	display: inline-block;
	margin-bottom: 0.5rem;
}

.mm-post-card .wp-block-post-terms a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

/* --- "read more →" link ------------------------------------------------ */

/* Element-qualified on purpose. An unqualified `.is-style-mm-readmore::after`
   plus `.is-style-mm-readmore a::after` both match a <p> wrapping an <a>,
   which renders the arrow twice. Splitting by tag makes them exclusive:
   on a paragraph the arrow follows the inner link, on the core/read-more
   block (which *is* an <a>) it follows the element itself. */
p.mm-readmore a::after,
p.is-style-mm-readmore a::after,
a.mm-readmore::after,
a.is-style-mm-readmore::after {
	content: " →";
	display: inline-block;
	transition: transform 160ms ease;
}

p.mm-readmore:hover a::after,
p.is-style-mm-readmore:hover a::after,
a.mm-readmore:hover::after,
a.is-style-mm-readmore:hover::after {
	transform: translateX(3px);
}

.is-style-mm-readmore,
.is-style-mm-readmore a {
	text-decoration: none;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* --- Sidebar ----------------------------------------------------------- */

@media (min-width: 782px) {
	.mm-sidebar {
		position: sticky;
		top: 2rem;
		align-self: start;
	}
}

/* Newsletter card uses a dashed border to read as a "note" */
.mm-newsletter {
	border: 1.5px dashed var(--wp--preset--color--secondary);
	border-radius: var(--wp--custom--radius--card);
}

/* Deliberately generic: a newsletter plugin (MailPoet, MC4WP, Fluent Forms…)
   drops its own markup inside this wrapper, and we can't know its class
   names. Styling by element type means any provider's form inherits the
   theme look without per-plugin CSS. */
.mm-newsletter input[type="email"],
.mm-newsletter input[type="text"] {
	width: 100%;
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: var(--wp--custom--radius--soft);
	padding: 0.65rem 0.9rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	background: #fff;
}

.mm-newsletter input::placeholder {
	color: var(--wp--preset--color--contrast-2);
}

.mm-newsletter input[type="submit"],
.mm-newsletter button[type="submit"],
.mm-newsletter .wp-block-button__link {
	width: 100%;
	border: none;
	border-radius: var(--wp--custom--radius--soft);
	padding: 0.7rem 1.5rem;
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.mm-newsletter input[type="submit"]:hover,
.mm-newsletter button[type="submit"]:hover,
.mm-newsletter .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
}

/* Most plugins wrap fields in <p> with default margins that break the
   card's rhythm. */
.mm-newsletter form p {
	margin: 0 0 0.6rem;
}

.mm-newsletter form p:last-child {
	margin-bottom: 0;
}

/* Success / error notices */
.mm-newsletter .mailpoet_validate_success,
.mm-newsletter .mc4wp-success {
	color: var(--wp--preset--color--primary-dark);
	font-size: var(--wp--preset--font-size--x-small);
}

.mm-newsletter .mailpoet_validate_error,
.mm-newsletter .mc4wp-error {
	color: var(--wp--preset--color--accent-clay);
	font-size: var(--wp--preset--font-size--x-small);
}

/* --- Now Playing card -------------------------------------------------- */

/* The card chrome is ours; AudioIgniter only renders the transport inside.
   Its markup is matched with attribute selectors instead of exact class
   names so a plugin update that renames classes degrades to "unstyled but
   working" rather than "broken layout". */

.mm-player__label {
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
	font-weight: 600;
}

.mm-player [class*="audioigniter"] {
	--ai-accent: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--ui);
	background: transparent;
	border: none;
	box-shadow: none;
}

/* Track titles */
.mm-player [class*="audioigniter"] [class*="track"] {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

/* Transport buttons — round, matcha on hover */
.mm-player [class*="audioigniter"] button {
	background: transparent;
	border: none;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

.mm-player [class*="audioigniter"] button:hover {
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--primary-dark);
}

.mm-player [class*="audioigniter"] svg {
	fill: currentColor;
}

/* Progress bar */
.mm-player [class*="audioigniter"] [class*="progress"],
.mm-player [class*="audioigniter"] [class*="seek"] {
	background: var(--wp--preset--color--tertiary);
	border-radius: var(--wp--custom--radius--pill);
	height: 4px;
	overflow: hidden;
}

.mm-player [class*="audioigniter"] [class*="progress"] > *,
.mm-player [class*="audioigniter"] [class*="seek"] > * {
	background: var(--wp--preset--color--primary);
}

/* Cover art */
.mm-player [class*="audioigniter"] img {
	border-radius: var(--wp--custom--radius--soft);
}

/* --- Ritual checklist -------------------------------------------------- */

/* The block style puts the class on the <ul> itself, so target it directly
   rather than as a descendant. */
.mm-ritual,
.is-style-mm-ritual {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mm-ritual li,
.is-style-mm-ritual li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding-block: 0.3rem;
	font-size: var(--wp--preset--font-size--small);
}

.mm-ritual li::before,
.is-style-mm-ritual li::before {
	content: "✓";
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	display: grid;
	place-items: center;
	border-radius: 4px;
	background: var(--wp--preset--color--secondary);
	color: #fff;
	font-size: 0.7rem;
}

/* --- Decorative quote mark --------------------------------------------- */

.mm-quote-mark {
	font-family: var(--wp--preset--font-family--display);
	font-size: 3rem;
	line-height: 1;
	color: var(--wp--preset--color--secondary);
	opacity: 0.6;
}

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

/* Links inherit the matcha green from theme.json, which is invisible on the
   green footer. Force cream and lean on opacity for the hover state. */
.mm-footer-links p {
	margin: 0;
}

.mm-footer-links a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-weight: 600;
	opacity: 0.85;
	transition: opacity 160ms ease;
}

.mm-footer-links a:hover {
	opacity: 1;
	text-decoration: underline;
}

.mm-footer-credit {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--base);
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	opacity: 0.85;
}

.mm-footer-credit__heart {
	line-height: 0;
	display: inline-flex;
}

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

/* Category as a pill above the title, echoing the one on the post cards so
   a post looks like the card it was opened from. */
.mm-single__cat {
	text-align: center;
}

.mm-single__cat a {
	display: inline-block;
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.2rem 0.85rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--x-small);
	text-decoration: none;
	letter-spacing: 0.02em;
}

.mm-single__cat a:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.mm-single__meta {
	font-family: var(--wp--preset--font-family--ui);
	color: var(--wp--preset--color--contrast-2);
}

.mm-single__meta p,
.mm-single__meta .wp-block-post-date,
.mm-single__meta .wp-block-post-author-name {
	margin: 0;
}

/* The lead-in: a slightly larger first paragraph pulls the reader into the
   article. Classic editorial trick, and cheaper than a drop cap, which
   tends to look dated at small sizes. */
.mm-single__content > .entry-content > p:first-of-type,
.mm-single__content .wp-block-post-content > p:first-of-type {
	font-size: 1.1rem;
	line-height: 1.65;
	color: var(--wp--preset--color--contrast);
}

.mm-single__figure img {
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--soft);
}

.mm-single__sprout {
	font-size: 1.25rem;
	opacity: 0.7;
}

/* Long-form rhythm: content blocks need more air than cards do. */
.mm-single__content p {
	margin-block: 0 1.15em;
}

.mm-single__content h2,
.mm-single__content h3 {
	margin-block-start: 2em;
}

.mm-single__content .wp-block-quote {
	border-left: 3px solid var(--wp--preset--color--secondary);
	padding-left: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--50);
	font-size: 1.15rem;
}

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

/* --- Author box -------------------------------------------------------- */

.mm-authorbox__label {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}

.mm-authorbox .wp-block-post-author-name {
	font-family: var(--wp--preset--font-family--display);
	margin: 0;
}

.mm-authorbox .wp-block-post-author-biography {
	margin: 0.25rem 0 0;
}

.mm-authorbox .wp-block-avatar img {
	display: block;
}

/* --- Previous / next --------------------------------------------------- */

.mm-postnav__card {
	flex: 1 1 240px;
	box-shadow: var(--wp--preset--shadow--soft);
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.mm-postnav__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--lifted);
}

.mm-postnav__card p {
	margin: 0;
	font-family: var(--wp--preset--font-family--ui);
}

.mm-postnav__card a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	line-height: 1.3;
}

.mm-postnav__card a:hover {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

/* Core prints its own arrows in the link; ours live in the label above. */
.mm-postnav__card .wp-block-post-navigation-link {
	margin: 0;
}

.mm-postnav__card--next {
	text-align: right;
}

/* --- Comments ---------------------------------------------------------- */

.mm-comments {
	border-top: 1px solid var(--wp--preset--color--tertiary);
	padding-top: var(--wp--preset--spacing--50);
}

.mm-comments .wp-block-comment-author-name {
	font-weight: 600;
}

.mm-comments .wp-block-comment-date {
	color: var(--wp--preset--color--contrast-2);
}

@media (max-width: 781px) {
	.mm-postnav__card--next,
	.mm-postnav__card--next p {
		text-align: left;
	}
}

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

.mm-404 {
	box-shadow: var(--wp--preset--shadow--soft);
	transform: rotate(-0.6deg);
}

/* Oversized and faint: sets the tone without competing with the heading
   that carries the actual message. */
.mm-404__number {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(4rem, 14vw, 6.5rem);
	line-height: 0.9;
	margin: 0;
	color: var(--wp--preset--color--secondary);
	opacity: 0.45;
	letter-spacing: 0.02em;
}

.mm-404__links a {
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1.5px solid transparent;
	transition: border-color 160ms ease;
}

.mm-404__links a:hover {
	border-bottom-color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.mm-404__links p {
	margin: 0;
}

/* --- Mobile ------------------------------------------------------------ */

/* 781px is WordPress's own stacking breakpoint — matching it keeps our
   overrides in step with core's column behaviour instead of fighting it. */
@media (max-width: 781px) {

	/* Hero: the desktop min-height eats most of a phone screen before any
	   content appears. Inline style on the cover, so !important is the only
	   way over it. */
	.mm-hero.wp-block-cover {
		min-height: 240px !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
	}

	.mm-hero .wp-block-site-title {
		font-size: clamp(2rem, 11vw, 2.75rem);
	}

	/* Category strip becomes a swipeable rail. Five stacked full-width cards
	   would push the journal below two screens of scrolling; a rail keeps
	   every category reachable in one gesture. */
	/* The rail runs edge to edge on a phone, so the band drops its radius —
	   a rounded corner cut off by the viewport reads as a rendering fault. */
	.mm-category-strip {
		margin-inline: calc(-1 * var(--wp--preset--spacing--40));
		border-radius: 0;
		padding-inline: 0;
	}

	.mm-hero__icons {
		inset-inline-end: var(--wp--preset--spacing--30);
	}

	.mm-category-strip .wp-block-columns {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		padding-inline: var(--wp--preset--spacing--40);
		padding-block-end: 0.5rem;
	}

	.mm-category-strip .wp-block-columns::-webkit-scrollbar {
		display: none;
	}

	.mm-category-strip .wp-block-column {
		flex: 0 0 8.5rem;
		scroll-snap-align: center;
	}

	/* Feature cards read better as a 2x2 block than as four stacked bars.
	   Core sets flex-basis:100% !important below this breakpoint, so this
	   has to answer in kind. */
	.mm-feature-cards .wp-block-columns {
		flex-wrap: wrap !important;
		gap: var(--wp--preset--spacing--30);
	}

	.mm-feature-cards .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--30) / 2) !important;
	}

	/* Softer tilt: a full-width card has more height for the rotation to
	   throw sideways, and less room to absorb it. */
	.mm-post-card {
		--mm-tilt: -0.4deg;
	}

	.wp-block-post:nth-child(4n + 2) .mm-post-card {
		--mm-tilt: 0.5deg;
	}

	.wp-block-post:nth-child(4n + 3) .mm-post-card {
		--mm-tilt: 0.3deg;
	}

	.wp-block-post:nth-child(4n + 4) .mm-post-card {
		--mm-tilt: -0.6deg;
	}

	/* Portrait crops get tall on a narrow screen — squarer keeps the excerpt
	   and read-more above the fold. */
	.mm-post-card .wp-block-post-featured-image img {
		aspect-ratio: 1 / 1 !important;
	}

	/* Sidebar has just been unstacked from beside the content; it needs a
	   real gap or it reads as part of the last post card. */
	.mm-sidebar {
		margin-top: var(--wp--preset--spacing--60);
	}

	/* Footer stacks and centres. */
	.mm-footer-links {
		justify-content: center;
		gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}

	.wp-block-site-title,
	.mm-footer-credit {
		text-align: center;
	}

	.mm-footer-credit {
		justify-content: center;
		width: 100%;
	}

	/* Comfortable thumb targets on links that sit alone in a row. */
	.is-style-mm-readmore,
	.mm-footer-links a {
		display: inline-block;
		padding-block: 0.4rem;
	}
}

/* Very small phones: the category rail cards get their own narrower size so
   two and a bit stay visible, which signals the rail is scrollable. */
@media (max-width: 400px) {
	.mm-category-strip .wp-block-column {
		flex: 0 0 7.5rem;
	}

	.mm-feature-cards .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* --- Accessibility ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mm-card,
	.is-style-mm-card,
	.mm-post-card,
	.mm-post-card .wp-block-post-featured-image img,
	.mm-readmore a::after,
	.mm-readmore::after,
	.is-style-mm-readmore a::after,
	.is-style-mm-readmore::after {
		transition: none;
	}

	.mm-card:hover,
	.is-style-mm-card:hover {
		transform: none;
	}

	.mm-post-card:hover .wp-block-post-featured-image img {
		transform: none;
	}

	/* Holds the tilt instead of resetting it: the angle is decoration, not
	   motion, and snapping to straight without a transition is a jolt. */
	.mm-post-card:hover {
		transform: rotate(var(--mm-tilt));
	}
}

:where(a:focus-visible),
:where(button:focus-visible),
:where(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Core blocks emit .screen-reader-text on their own — the read-more link
   appends ": <post title>" so the label isn't a context-free "read more".
   Classic themes ship these hiding styles; block themes have to declare
   them, and this one didn't. Left undeclared the spans laid out inline and
   pushed the document to ~2x the viewport width (Safari placed them some
   1600px outside it).

   clip-path over the old `left: -9999px` trick on purpose: shifting the
   element off-screen is itself an overflow source, which is the bug we're
   fixing. This keeps the box at its static position, 1px and clipped. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
	word-wrap: normal;

	/* Anchored rather than left at its static position. Measured in Safari,
	   one of these spans resolved ~1636px left of the viewport — harmless
	   there (left overflow isn't scrollable) but the same drift toward the
	   right would bring the horizontal scrollbar straight back. Pinning it
	   to the containing block's origin removes the possibility. */
	left: 0;
	top: 0;
}

/* The skip link is the one that must become visible when focused, so it
   has to undo every hiding rule above — not just reposition itself. */
.skip-link:focus {
	clip-path: none;
	position: fixed;
	top: 1rem;
	left: 1rem;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	white-space: normal;
	z-index: 999;
	background: #fff;
	color: var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--soft);
	box-shadow: var(--wp--preset--shadow--lifted);
}