/*
Theme Name: Magnet Mailer Postcards
Theme URI: https://www.magnetmailerpostcards.com/
Author: Ezdirectmail, Inc.
Description: Lightweight block theme for MagnetMailerPostcards.com. Design tokens live in theme.json; reusable sections are block patterns.
Version: 0.6.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: magnetmailer
*/

/* No gaps between header, main content and footer, or between full-width page
   sections (WordPress adds a 24px gap that shows as a white stripe between colored bands). */
.wp-site-blocks > * + *,
.wp-block-post-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* Header: pinned to the top while scrolling, on desktop and phone. */
.mmp-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* Faint line so the grey header never blends into a light section below it. */
	box-shadow: 0 1px 0 rgba(21, 21, 21, 0.08);
}
.admin-bar .mmp-site-header {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .mmp-site-header {
		top: 46px;
	}
}
@media (max-width: 600px) {
	/* WordPress un-pins its admin bar on small phones, so the header goes back to the very top. */
	.admin-bar .mmp-site-header {
		top: 0;
	}
}

/* Header layout by screen width (menu: Magnet Mailers, About Us, Contact, phone, Get a Quote; Blog hidden
   until there are real posts, and the widths below were sized with it, so there is spare room):
   1240px+     logo 360px, 32px gaps (the content area tops out at 1200px)
   1024-1239px logo 220px, 20px gaps
   under 1024  logo, Call button, burger menu
   Menu text never wraps; each range keeps 30px+ of spare room (checked at 1024, 1239, 1240, 1440). */
.mmp-logo img {
	width: 400px;
	max-width: min(400px, 52vw);
	height: auto;
	/* The logo is 10:1; reserving its shape stops the header shifting as it loads. */
	aspect-ratio: 10 / 1;
}
.mmp-site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	white-space: nowrap;
}
@media (min-width: 1240px) {
	.mmp-logo img {
		max-width: 360px;
	}
	.mmp-site-header .wp-block-navigation,
	.mmp-site-header .wp-block-navigation__container {
		gap: 32px !important;
	}
}
@media (min-width: 1024px) and (max-width: 1239px) {
	.mmp-logo img {
		max-width: 220px;
	}
	.mmp-site-header .wp-block-navigation,
	.mmp-site-header .wp-block-navigation__container {
		gap: 20px !important;
	}
}
@media (max-width: 1023px) {
	/* WordPress only switches to the burger below 600px; switch earlier so tablets don't overflow. */
	.mmp-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.mmp-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}
@media (min-width: 1024px) {
	.mmp-header-call {
		display: none;
	}
}

/* Phone icon (outline handset), drawn in the current text color. */
.mmp-nav-phone > .wp-block-navigation-item__content::before,
.mmp-header-call a::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 6px;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask: var(--mmp-icon-phone) center / contain no-repeat;
	mask: var(--mmp-icon-phone) center / contain no-repeat;
}
:root {
	--mmp-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* Header menu hover: items turn dark orange (#B33912 passes text contrast on the grey header). A dropdown's parent item (and its arrow) stays
   orange while the dropdown is open. The Get a Quote button keeps its own hover. */
.mmp-site-header .wp-block-navigation-item:not(.mmp-nav-cta) > .wp-block-navigation-item__content:hover,
.mmp-site-header .wp-block-navigation-item:not(.mmp-nav-cta) > .wp-block-navigation-item__content:focus-visible,
.mmp-site-header .wp-block-navigation-submenu:hover > .wp-block-navigation-item__content,
.mmp-site-header .wp-block-navigation-submenu:focus-within > .wp-block-navigation-item__content,
.mmp-site-header .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-icon,
.mmp-site-header .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--primary-dark);
}

/* Phone number in the menu: no line break inside the number. */
.wp-block-navigation .mmp-nav-phone > .wp-block-navigation-item__content {
	white-space: nowrap;
}

/* "Call" button on tablets and phones: orange outline, fills orange on tap. */
.mmp-header-call {
	margin: 0;
}
.mmp-header-call a {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--button);
	color: var(--wp--preset--color--primary-dark);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}
.mmp-header-call a:hover,
.mmp-header-call a:focus {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* "Get a Quote" in the menu, styled as an orange button. */
.wp-block-navigation .mmp-nav-cta > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--button);
	padding: 10px 24px;
	font-weight: 700;
}
.wp-block-navigation .mmp-nav-cta > .wp-block-navigation-item__content:hover,
.wp-block-navigation .mmp-nav-cta > .wp-block-navigation-item__content:focus {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
}

/* Dropdown menus: white panel, soft shadow, wide enough for one-line items. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--white);
	border: 0;
	border-radius: 8px;
	box-shadow: var(--wp--preset--shadow--card);
	padding: 8px 0;
	min-width: 270px;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 20px;
}
/* Links inside the desktop dropdowns are 14px; the top-level menu items stay 16px. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	font-size: var(--wp--preset--font-size--small);
}

/* Phone menu (burger): left-aligned, roomy, readable links.
   !important because a plugin stylesheet otherwise removes the side padding. */
.wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	padding: 24px 20px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	font-size: 18px;
	gap: 16px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	min-width: 0;
	box-shadow: none;
	background: transparent;
	padding: 8px 0 0 16px !important;
	gap: 12px;
}
.wp-block-navigation__responsive-container.is-menu-open .mmp-nav-cta {
	margin-top: 8px;
}
.wp-block-navigation__responsive-container.is-menu-open .mmp-nav-cta > .wp-block-navigation-item__content {
	padding: 12px 35px;
}

/* Buttons keep 19px bold text on every screen. WordPress's fluid typography would
   otherwise shrink them to 14px on phones (too small to read on orange, and under
   the 44px minimum tap height). */
.wp-block-button__link,
.wp-element-button {
	font-size: 19px;
}

/* Large button (hero): pick "Large" in the button's Styles panel. */
.wp-block-button.is-style-large .wp-block-button__link {
	padding: 12px 45px;
	font-size: 20px;
	font-weight: 700;
}

/* Footer site name stays 18px on phones (WordPress would shrink it to 14px). */
.mmp-site-footer .wp-block-column:first-child > p:first-child {
	font-size: 18px !important;
}

/* Footer: sage-green links on black, as on the original site. */
.mmp-site-footer a {
	color: var(--wp--preset--color--footer-link);
	text-decoration: none;
}
.mmp-site-footer a:hover,
.mmp-site-footer a:focus,
.mmp-site-footer .wp-block-navigation .wp-block-navigation-item__content:hover,
.mmp-site-footer .wp-block-navigation .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--footer-link-hover);
}
@media (max-width: 781px) {
	/* Phones: columns stack, so drop the empty right column and line everything up on the left. */
	.mmp-footer-spacer {
		display: none;
	}
	.mmp-footer-nav {
		justify-content: flex-start !important;
		row-gap: 10px !important;
	}
	.mmp-footer-copyright {
		text-align: left !important;
	}
}

/* ==========================================================================
   Sections (block patterns)
   ========================================================================== */

/* Intro paragraphs under headings, and a comfortable line length for centered text. */
.mmp-lead {
	color: var(--wp--preset--color--body-text);
	line-height: 1.6;
}
.mmp-measure {
	max-width: 760px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Hero: a little more breathing room under the H1. */
.mmp-hero h1 {
	margin-bottom: 0.4em;
}
.mmp-hero .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--40);
}

/* Card: white rounded box with a soft shadow ("Card" style on a Group). */
.wp-block-group.is-style-mmp-card {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--card);
	padding: 24px 28px 28px;
	height: 100%;
}
/* Buttons sit at the bottom of cards so cards in a row line up. */
.wp-block-group.is-style-mmp-card > .wp-block-buttons:last-child {
	margin-top: auto;
	padding-top: 4px;
}
/* Photos fill the card width; icons keep their own size. */
.is-style-mmp-card .wp-block-image:not(.mmp-icon),
.is-style-mmp-card .wp-block-image:not(.mmp-icon) img {
	width: 100%;
}

/* Icons. */
.mmp-icon img {
	display: block;
	width: 48px;
	height: 48px;
}
.mmp-icon--sm img {
	width: 28px;
	height: 28px;
}
.mmp-feature h3,
.is-style-mmp-card h3 {
	margin-top: 4px;
}

/* Check list: orange check marks instead of bullets. */
ul.mmp-checklist {
	list-style: none;
	padding-left: 0;
}
ul.mmp-checklist li {
	position: relative;
	padding-left: 34px;
	margin-bottom: 12px;
}
ul.mmp-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 22px;
	height: 22px;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: url("assets/icons/circle-check.svg") center / contain no-repeat;
	mask: url("assets/icons/circle-check.svg") center / contain no-repeat;
}

/* Outline button: orange border, fills orange on hover. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-dark);
	padding: 8px 33px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}
/* Outline next to a large button: same height. */
.mmp-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 10px 43px;
	font-size: 20px;
}
/* Download buttons get a download icon. */
.mmp-download > .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 8px;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask: url("assets/icons/download.svg") center / contain no-repeat;
	mask: url("assets/icons/download.svg") center / contain no-repeat;
}
/* Template cards: fixed width, centered as a row whatever the number of cards. */
.mmp-template-grid > .is-style-mmp-card {
	flex: 0 1 320px;
	height: auto;
	align-items: center;
	text-align: center;
}
.mmp-template-thumb img {
	max-height: 180px;
	width: auto !important;
	margin: 0 auto;
}

/* Homepage hero stats: two white cards overlapping the bottom of the picture. */
.mmp-hero-media {
	position: relative;
	padding-bottom: 48px;
}
.mmp-stats {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 0;
	justify-content: center;
}
.mmp-stat {
	flex: 1 1 0;
	max-width: 260px;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--counter);
	box-shadow: var(--wp--preset--shadow--counter);
	padding: 16px 20px;
}
.mmp-stat p {
	margin: 0;
	line-height: 1.4;
}
.mmp-stat .mmp-stat__number {
	color: var(--wp--preset--color--stat-blue);
	font-size: clamp(40px, 4vw, 56px);
	font-weight: 800;
	line-height: 1;
}
@media (max-width: 600px) {
	.mmp-hero-media {
		padding-bottom: 0;
	}
	.mmp-stats {
		position: static;
		margin-top: -32px;
		padding: 0 12px;
	}
}

/* Homepage hero video: square, rounded like the photos, never stretched.
   Stacked under the text on tablets and phones, capped so it isn't huge. */
.mmp-hero-video {
	position: relative;
	margin: 0;
	max-width: 600px;
	margin-inline: auto;
}
.mmp-hero-video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 20px;
	background: #E4E1DC;
}
.mmp-video-toggle {
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(21, 21, 21, 0.55);
	color: #FFFFFF;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}
.mmp-video-toggle:hover,
.mmp-video-toggle:focus-visible {
	opacity: 1;
	background: rgba(21, 21, 21, 0.8);
}

/* Size option line. */
.mmp-size {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--heading);
}

/* Navy call-to-action band. */
.mmp-band-dark h2,
.mmp-band-dark p {
	color: var(--wp--preset--color--white);
}

/* Free samples band and newsletter: mascot and logo badge sizes. "Multiply"
   blends their white backgrounds into the cream band, so no white box shows. */
.mmp-mascot img,
.mmp-badge img {
	mix-blend-mode: multiply;
}
.mmp-mascot img {
	max-width: 220px;
	margin: 0 auto;
}
.mmp-badge img {
	max-width: 140px;
	margin: 0 auto;
}
@media (max-width: 781px) {
	.mmp-mascot img {
		max-width: 160px;
	}
	.mmp-badge img {
		max-width: 110px;
	}
}

/* Thank-you pages: mascot centered above the message. */
.mmp-thanks .mmp-mascot img {
	display: block;
	max-width: 200px;
	margin: 0 auto;
}

/* Get a Quote: format picker cards and form panels. */
.mmp-quote-option {
	align-items: center;
	text-align: center;
	border: 2px solid transparent;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mmp-quote-option:hover {
	box-shadow: var(--wp--preset--shadow--counter);
}
.mmp-quote-option.is-active {
	border-color: var(--wp--preset--color--primary);
}
.mmp-quote-option.is-active .is-style-outline > .wp-block-button__link {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}
.mmp-quote-hint {
	margin-top: var(--wp--preset--spacing--40) !important;
	color: var(--wp--preset--color--body-text);
}
/* Once a form is open, the hint is no longer needed. */
.mmp-quote-js .mmp-quote-options:has(.is-active) ~ .mmp-quote-hint {
	display: none;
}
.mmp-quote-panel {
	margin-top: var(--wp--preset--spacing--50) !important;
	scroll-margin-top: 110px;
	max-width: 760px;
	margin-left: auto !important;
	margin-right: auto !important;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--card);
	padding: 32px 28px;
}
/* Closed forms sit off-screen at full width (see quote-picker.js). */
.mmp-quote-js .mmp-quote-panel:not(.is-open) {
	position: absolute !important;
	left: -10000px;
	width: min(760px, calc(100vw - 40px));
	visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
	.mmp-quote-option {
		transition: none;
	}
}

/* HubSpot forms on regular pages: white panel; grows with the form (no fixed height). */
.mmp-form-panel {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--card);
	padding: 32px 28px;
}
/* "Start Your Project Brief" / "Get a Calendar Quote" jump to the form: keep its top clear of the sticky header. */
#project-brief,
#calendar-quote {
	scroll-margin-top: 110px;
}
/* Phones: slimmer panel padding so HubSpot's fields get more width. */
@media (max-width: 600px) {
	.mmp-form-panel,
	.mmp-quote-panel {
		padding: 24px 10px;
	}
}

/* Contact info. */
.mmp-contact__item p {
	margin: 0;
}
.mmp-contact__item {
	align-self: stretch;
}
.mmp-contact__item > .wp-block-group {
	flex: 1 1 auto;
	min-width: 0;
}
.mmp-contact__item .mmp-icon {
	flex: 0 0 auto;
	margin-top: 2px;
}
.mmp-contact__label {
	font-weight: 700;
	color: var(--wp--preset--color--heading);
}

/* HubSpot form placeholders: clearly marked until the real embed code arrives. */
.mmp-form-placeholder {
	border: 2px dashed var(--wp--preset--color--primary);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--heading);
	padding: 32px 24px;
	text-align: center;
}
.mmp-form-placeholder--large {
	padding: 96px 24px;
}

/* ==========================================================================
   Blog: listing (Magnet Mailer Marketing Tips), topic pages and articles
   ========================================================================== */

/* Topic buttons (categories). */
.mmp-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: var(--wp--preset--spacing--40) auto var(--wp--preset--spacing--50) !important;
}
.mmp-chips li {
	margin: 0;
}
.mmp-chips a,
.wp-block-post-terms.mmp-chips a {
	display: inline-block;
	padding: 8px 20px;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--heading);
	box-shadow: var(--wp--preset--shadow--card);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
}
.mmp-chips a:hover,
.mmp-chips a:focus,
.mmp-chips .current-cat > a {
	background: var(--wp--preset--color--icon-navy);
	color: var(--wp--preset--color--white);
}
/* Post-terms prints separators between links; the pills don't need them. */
.wp-block-post-terms.mmp-chips .wp-block-post-terms__separator {
	display: none;
}
.wp-block-post-terms.mmp-chips {
	margin: 16px auto 0 !important;
}
.mmp-chips--on-dark a {
	box-shadow: none;
	font-size: 15px;
	padding: 6px 16px;
}

/* Post cards: two across on desktop, one on phones. */
.mmp-post-card {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--card);
	overflow: hidden;
}
.mmp-post-card .wp-block-post-featured-image {
	margin: 0;
}
.mmp-post-card .wp-block-post-featured-image img {
	width: 100%;
	transition: transform 0.3s ease;
}
.mmp-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}
.mmp-post-card .mmp-topic-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 1;
	margin: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--icon-navy);
	box-shadow: 0 0 0 4px var(--wp--preset--color--white);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}
.mmp-post-card .mmp-topic-badge a {
	display: inline-block;
	padding: 6px 14px;
	color: var(--wp--preset--color--white);
	text-decoration: none;
}
.mmp-post-card .mmp-topic-badge a:hover,
.mmp-post-card .mmp-topic-badge a:focus {
	text-decoration: underline;
}
/* Show only the post's first topic in the badge. */
.mmp-post-card .mmp-topic-badge a ~ a,
.mmp-post-card .mmp-topic-badge .wp-block-post-terms__separator {
	display: none;
}
.mmp-post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px 32px 32px;
}
.mmp-post-card .wp-block-post-title {
	margin: 0 0 12px;
	line-height: 1.3;
}
.mmp-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}
.mmp-post-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary-dark);
}
.mmp-post-card .wp-block-post-excerpt {
	margin-top: 0;
}
.mmp-post-card .wp-block-post-excerpt__more-link,
.mmp-recent .wp-block-read-more {
	font-weight: 700;
	text-decoration: none;
}
.mmp-post-card .wp-block-post-excerpt__more-link::after,
.mmp-recent .wp-block-read-more::after {
	content: " \2192";
}

/* Page numbers. */
.mmp-pagination {
	margin-top: var(--wp--preset--spacing--60) !important;
	gap: 8px;
}
.mmp-pagination .page-numbers,
.mmp-pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--heading);
	font-weight: 600;
	text-decoration: none;
}
.mmp-pagination .page-numbers.current {
	background: var(--wp--preset--color--icon-navy);
	color: var(--wp--preset--color--white);
}

/* Article: photo header with the headline over it. */
.mmp-post-hero .wp-block-post-title {
	font-size: var(--wp--preset--font-size--huge);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
@media (max-width: 600px) {
	.mmp-post-hero {
		min-height: 320px !important;
	}
}

/* Article text: comfortable reading size and line length. */
.mmp-article__content {
	font-size: 18px;
	line-height: 1.75;
}
.mmp-article__content h2 {
	margin-top: 1.6em;
}
.mmp-article__content .wp-block-image img {
	border-radius: 12px;
}

/* Recent posts sidebar: stays in view while reading (desktop). */
.mmp-recent {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--card);
	padding: 24px;
}
@media (min-width: 782px) {
	.mmp-sidebar {
		position: sticky;
		top: 120px;
		align-self: flex-start;
	}
}
.mmp-recent h2 {
	margin-top: 0;
}
.mmp-recent-item {
	gap: 14px;
}
.mmp-recent-item .wp-block-post-featured-image {
	flex: 0 0 72px;
	margin: 0;
}
.mmp-recent-item .wp-block-post-featured-image img {
	border-radius: 8px;
}
.mmp-recent-item .wp-block-post-title {
	margin: 0 0 4px;
	font-weight: 700;
	line-height: 1.35;
}
.mmp-recent-item .wp-block-post-title a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

/* Clear keyboard focus ring everywhere. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--stat-blue);
	outline-offset: 2px;
}