/*
Theme Name: Max Machinery
Theme URI: https://maxmachinery.com
Author: Max Machinery, Inc.
Author URI: https://maxmachinery.com
Description: A professional FSE block theme for Max Machinery — Precision Flow Meters for Critical Applications. Features a clean industrial design with orange brand accents, built with native WordPress blocks and Full Site Editing.
Version: 1.30.39
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: max-machinery
Template: twentytwentyfive
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing, one-column, wide-blocks
*/

/* ==========================================================================
   CSS CUSTOM PROPERTIES
   These supplement the theme.json tokens for use in custom CSS.
   ========================================================================== */

:root {
	/* Colors — mirrored from theme.json palette */
	--mm-color-primary:       #F27A21;
	--mm-color-primary-dark:  #D96A1A;
	--mm-color-primary-light: #FFF3E8;
	--mm-color-neutral-900:   #111827;
	--mm-color-neutral-800:   #1F2937;
	--mm-color-neutral-700:   #374151;
	--mm-color-neutral-600:   #4B5563;
	--mm-color-neutral-500:   #6B7280;
	--mm-color-neutral-400:   #9CA3AF;
	--mm-color-neutral-300:   #D1D5DB;
	--mm-color-neutral-200:   #E5E7EB;
	--mm-color-neutral-100:   #F3F4F6;
	--mm-color-neutral-50:    #F9FAFB;
	--mm-color-white:         #FFFFFF;
	--mm-color-success:       #059669;

	/* Typography */
	--mm-font-primary: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--mm-font-mono:    'JetBrains Mono', 'SF Mono', Consolas, 'Courier New', monospace;

	/* Layout metrics
	   Single source of truth for the sticky header's height. Consumed by
	   .site-header's min-height below and by any element that has to clear the
	   header (e.g. the products-archive sticky sidebar). Keep these two in
	   step with the .site-header min-height breakpoints. */
	--mm-header-height: 5rem;

	/* Transitions */
	--mm-transition-fast:   150ms ease;
	--mm-transition-normal: 200ms ease;
	--mm-transition-slow:   300ms ease;

	/* Shadows */
	--mm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--mm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--mm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--mm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

	/* Border Radius */
	--mm-radius-sm:   0.375rem;
	--mm-radius-md:   0.5rem;
	--mm-radius-lg:   0.75rem;
	--mm-radius-xl:   1rem;
	--mm-radius-2xl:  1.5rem;
	--mm-radius-full: 9999px;
}

/* ==========================================================================
   BASE RESET & FOUNDATION
   ========================================================================== */

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

html {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body,
body * {
	font-weight: inherit;
}

body {
	font-weight: 400;
}

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

/* ==========================================================================
   SITE HEADER
   ========================================================================== */

/* Sticky must live on the template-part wrapper — .site-header's parent is
   exactly its own height, so sticky on .site-header itself never engages. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Keep the sticky header below the WP admin bar for logged-in users */
body.admin-bar header.wp-block-template-part {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}

.site-header {
	border-bottom: 1px solid var(--mm-color-neutral-200);
	background: rgba(255, 255, 255, 0.95) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	min-height: var(--mm-header-height);
}

@media (min-width: 1024px) {
	:root {
		--mm-header-height: 6rem;
	}
}

.site-header .wp-block-navigation a {
	color: var(--mm-color-neutral-700);
	font-weight: 500;
	font-size: 0.875rem;
	text-decoration: none;
	transition: color var(--mm-transition-fast);
}

.site-header .wp-block-navigation a:hover {
	color: var(--mm-color-primary);
}

/* Phone number link in header */
.site-header a[href^="tel"] {
	color: var(--mm-color-neutral-700);
	font-size: 0.75rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--mm-transition-fast);
}

.site-header a[href^="tel"]:hover {
	color: var(--mm-color-primary);
}

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */

.site-footer .wp-block-navigation a {
	color: var(--mm-color-neutral-400);
	font-size: 0.875rem;
	text-decoration: none;
	transition: color var(--mm-transition-fast);
}

.site-footer .wp-block-navigation a:hover {
	color: var(--mm-color-white);
}

/* Bottom-bar legal links (Warranty / Terms of Use / Privacy Policy / Vendor
   Terms) — same light grey and 14px size as the footer column links
   (.mm-footer-links). Explicit size (2026-10-08): inheriting picked up 16px
   from the stale footer-CTA paragraph rule further down. */
.site-footer .mm-footer-legal a {
	color: var(--mm-color-neutral-300);
	font-size: 0.875rem;
	font-weight: inherit;
	text-decoration: none;
	transition: color var(--mm-transition-fast);
}

.site-footer .mm-footer-legal a:hover {
	color: var(--mm-color-primary);
}

/* ==========================================================================
   SECTION LABEL — decorative rule + uppercase text
   ========================================================================== */

.mm-section-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--mm-color-primary);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.mm-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #fafbfc 0%, #f4f6f8 100%) !important;
}

/* Animated streamline background — override constrained layout max-width */
.mm-hero-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
}

.mm-hero-bg-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(250,251,252,0.95) 0%, rgba(250,251,252,0.55) 38%, rgba(250,251,252,0) 60%);
	pointer-events: none;
}

@keyframes flowDash {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: -900; }
}

@media (prefers-reduced-motion: reduce) {
	.mm-streamlines path { animation: none !important; }
}

.mm-hero-inner {
	position: relative;
	z-index: 1;
	min-height: calc(100vh - 6rem);
	display: flex;
	align-items: center;
}

/* Hero badge pill */
.mm-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 1rem;
	border-radius: var(--mm-radius-full);
	border: 1px solid rgba(242, 122, 33, 0.25);
	background-color: var(--mm-color-primary-light);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--mm-color-primary);
}

.mm-hero-badge::before {
	content: '';
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--mm-radius-full);
	background-color: var(--mm-color-primary);
	flex-shrink: 0;
	animation: mm-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes mm-ping {
	75%, 100% { transform: scale(2); opacity: 0; }
}

/* Hero H1 override — match handoff large bold heading */
.mm-hero h1.wp-block-heading {
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--mm-color-neutral-900);
}

@media (min-width: 640px) {
	.mm-hero h1.wp-block-heading { font-size: 3rem; }
}

@media (min-width: 1024px) {
	.mm-hero h1.wp-block-heading { font-size: 3.5rem; }
}

/* Hero spec text — orange bold, same font as body (matches handoff) */
.mm-spec {
	font-weight: 600;
	color: var(--mm-color-primary);
}

/* Hero trust stats row */
.mm-hero-stats {
	border-top: 1px solid var(--mm-color-neutral-200);
	padding-top: 2rem;
}

.mm-hero-stat-value {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--mm-color-neutral-900);
	line-height: 1;
}

.mm-hero-stat-label {
	font-size: 0.875rem;
	color: var(--mm-color-neutral-500);
	margin-top: 0.25rem;
}

/* Stats row: the three groups carry inline 3rem side padding + borders, so
   below ~1100px (phones, and the two-column hero on tablets) they wrapped into
   a staircase. Hold them in one row of three columns (middle one wider for
   "100,000+"). */
@media (max-width: 1100px) {
	.mm-hero-stats {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
		align-items: start !important;
	}
	.mm-hero-stats > .wp-block-group {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	.mm-hero-stats > .wp-block-group:first-child { padding-left: 0 !important; }
	.mm-hero-stats > .wp-block-group:last-child { padding-right: 0 !important; }
	.mm-hero-stats .mm-hero-stat-value { white-space: nowrap; }
}

@media (max-width: 480px) {
	.mm-hero-stats > .wp-block-group {
		padding-left: 0.625rem !important;
		padding-right: 0.625rem !important;
	}
	.mm-hero-stats .mm-hero-stat-value {
		font-size: 1.125rem !important;
	}
	.mm-hero-stats .mm-hero-stat-label { font-size: 0.75rem !important; }
}

/* Hero visual card (right column) */
.mm-hero-visual {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Hero product card — fixed 29rem square matching handoff */
.mm-hero-product-card {
	position: relative;
	width: min(24rem, 100%);
	height: min(24rem, 100vw);
	background: #F3F4F6;
	border-radius: var(--mm-radius-2xl);
	overflow: hidden;
	box-shadow: var(--mm-shadow-xl);
}

@media (min-width: 640px) {
	.mm-hero-product-card {
		width: 29rem;
		height: 29rem;
	}
}

.mm-hero-product-card .wp-block-image {
	margin: 0;
	width: 100%;
	height: 100%;
}

.mm-hero-product-card .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mm-hero-product-icon {
	display: flex;
	width: 5rem;
	height: 5rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--mm-radius-full);
	background-color: rgba(242, 122, 33, 0.1);
	color: var(--mm-color-primary);
	margin: 0 auto 1rem;
}

/* Floating badge — inside the product card, bottom-left */
.mm-hero-floating-badge {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding: 0.5rem 1rem;
	background-color: var(--mm-color-white);
	border-radius: var(--mm-radius-lg);
	box-shadow: var(--mm-shadow-lg);
	white-space: nowrap;
}

.mm-hero-floating-label {
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--mm-color-neutral-500) !important;
	margin: 0 !important;
}

.mm-hero-floating-value {
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	color: var(--mm-color-primary) !important;
	margin: 0 !important;
}

/* Floating stat badge (top-right of hero visual) */
.mm-hero-floating-stat {
	position: absolute;
	top: -1rem;
	right: -1rem;
	z-index: 3;
	padding: 0.75rem 1rem;
	background-color: var(--mm-color-primary);
	border-radius: var(--mm-radius-xl);
	box-shadow: var(--mm-shadow-lg);
	text-align: center;
}

.mm-hero-floating-stat-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.75);
}

.mm-hero-floating-stat-value {
	display: block;
	font-family: var(--mm-font-mono);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--mm-color-white);
	margin-top: 0.125rem;
}

/* ==========================================================================
   SOCIAL PROOF / LOGO BAR
   ========================================================================== */

/* 4×2 card grid */
.wp-block-group.mm-logo-card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.wp-block-group.mm-logo-card-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 1rem;
	}
}

/* Individual logo card */
.wp-block-group.mm-logo-card {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 5.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--mm-color-neutral-200);
	border-radius: var(--mm-radius-lg);
	background: var(--mm-color-white);
	transition: border-color var(--mm-transition-normal), box-shadow var(--mm-transition-normal);
}

.wp-block-group.mm-logo-card:hover {
	border-color: var(--mm-color-neutral-300);
	box-shadow: var(--mm-shadow-sm);
}

.mm-logo-card .wp-block-image {
	margin: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.mm-logo-card .wp-block-image img {
	max-height: 2.25rem;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
}

/* Per-logo sizing matching handoff exactly. Matched by alt text as well as
   attachment ID, so a re-uploaded logo (new ID, e.g. the 2026-10 WebP
   versions) keeps its size. */
/* 3M — wide logo, fill most of card width */
.mm-logo-card .wp-image-15,
.mm-logo-card img[alt="3M"] {
	max-height: none !important;
	width: 80% !important;
	height: auto !important;
	transform: none !important;
}

/* Boeing — wide, keep short */
.mm-logo-card .wp-image-16,
.mm-logo-card img[alt="Boeing"] { max-height: 1.5rem !important; }

/* ExxonMobil — standard */
.mm-logo-card .wp-image-17 { max-height: 2.25rem !important; }

/* General Motors — tall/square */
.mm-logo-card .wp-image-18,
.mm-logo-card img[alt="General Motors"] { max-height: 2.75rem !important; }

/* Lockheed Martin — wide */
.mm-logo-card .wp-image-19 { max-height: 1.5rem !important; }

/* NASA — tall */
.mm-logo-card .wp-image-20,
.mm-logo-card img[alt="NASA"] { max-height: 2.75rem !important; }

/* Shell — tall */
.mm-logo-card .wp-image-21,
.mm-logo-card img[alt="Shell"] { max-height: 2.75rem !important; }

/* Tesla — custom small */
.mm-logo-card .wp-image-22 { max-height: 1.8rem !important; }


/* ==========================================================================
   STATS BAR
   ========================================================================== */

.mm-stats-bar {
	position: relative;
}

.mm-stat-item {
	position: relative;
}

@media (min-width: 1024px) {
	.mm-stat-item + .mm-stat-item::before {
		content: '';
		position: absolute;
		left: -1rem;
		top: 0;
		bottom: 0;
		width: 1px;
		background-color: var(--mm-color-neutral-700);
	}
}

.mm-stat-icon {
	display: inline-flex;
	width: 3rem;
	height: 3rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--mm-radius-xl);
	background-color: rgba(242, 122, 33, 0.1);
	color: var(--mm-color-primary);
	flex-shrink: 0;
}

/* Stat value — Inter not monospace, override WP fluid clamp */
.mm-stat-value {
	font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 1.875rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.025em !important;
	color: var(--mm-color-white);
	line-height: 1.1;
	margin-top: 1rem;
}

@media (min-width: 1024px) {
	.mm-stat-value {
		font-size: 2.25rem !important;
	}
}

.mm-stat-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--mm-color-neutral-300);
	margin-top: 0.25rem;
}

.mm-stat-description {
	font-size: 0.75rem;
	color: var(--mm-color-neutral-500);
	margin-top: 0.125rem;
}

/* ==========================================================================
   WHY MAX — FEATURE CARDS
   ========================================================================== */

.mm-feature-card {
	background-color: var(--mm-color-neutral-50);
	border: 1px solid var(--mm-color-neutral-200);
	border-radius: var(--mm-radius-2xl);
	padding: 2rem;
	transition: border-color var(--mm-transition-normal),
	            background-color var(--mm-transition-normal),
	            box-shadow var(--mm-transition-normal);
}

.mm-feature-card:hover {
	border-color: rgba(242, 122, 33, 0.35);
	background-color: var(--mm-color-white);
	box-shadow: var(--mm-shadow-lg);
}

.mm-feature-icon {
	display: flex;
	width: 3.5rem;
	height: 3.5rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--mm-radius-xl);
	background-color: rgba(242, 122, 33, 0.1);
	color: var(--mm-color-primary);
	transition: background-color var(--mm-transition-normal),
	            color var(--mm-transition-normal);
}

.mm-feature-card:hover .mm-feature-icon {
	background-color: var(--mm-color-primary);
	color: var(--mm-color-white);
}

/* ==========================================================================
   PRODUCT CARDS
   ========================================================================== */

.mm-product-card {
	background-color: var(--mm-color-white);
	border: 1px solid var(--mm-color-neutral-200);
	border-radius: var(--mm-radius-2xl);
	overflow: hidden;
	transition: border-color var(--mm-transition-normal),
	            box-shadow var(--mm-transition-normal);
	display: flex;
	flex-direction: column;
}

/* Kill WordPress flow-layout auto-margins inside product cards */
.mm-product-card > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.mm-product-card:hover {
	border-color: rgba(242, 122, 33, 0.35);
	box-shadow: var(--mm-shadow-xl);
}

.mm-product-visual {
	height: 20.25rem;
	background-color: var(--mm-color-neutral-100);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 1.5rem;
}

.mm-product-visual .wp-block-image {
	width: 100%;
	height: 100%;
	margin: 0;
}

.mm-product-visual .wp-block-image img {
	width: 100%;
	/* !important: editor re-saves serialize resized images with inline
	   "height:auto", which breaks the contain-fit inside the fixed panel. */
	height: 100% !important;
	object-fit: contain;
	transition: transform var(--mm-transition-normal);
}

.mm-product-card:hover .mm-product-visual .wp-block-image img {
	transform: scale(1.05);
}

.mm-product-number {
	display: flex;
	width: 5.5rem;
	height: 5.5rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--mm-radius-full);
	background-color: rgba(242, 122, 33, 0.12);
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--mm-color-primary);
	transition: transform var(--mm-transition-normal);
}

.mm-product-card:hover .mm-product-number {
	transform: scale(1.1);
}

/* Tags row — below image, outside visual area */
.mm-product-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 1rem 1.5rem 0;
}

.mm-product-tag {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	border-radius: var(--mm-radius-full);
	background-color: var(--mm-color-neutral-100);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--mm-color-neutral-700);
	white-space: nowrap;
}

.mm-product-body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Kill WP flow margin between body children, then restore intentional ones */
.mm-product-body > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Description: 12px below title (neutral-600 paragraph is the desc).
   The 24px below it is the minimum gap to the specs on the longest card. */
.mm-product-body > .has-neutral-600-color {
	margin-top: 0.75rem !important;
	margin-bottom: 1.5rem !important;
}

/* Specs + Learn More sit at the bottom of the card, so they line up across a
   row however many lines each description wraps to. */
.mm-product-body > .mm-product-specs {
	margin-top: auto !important;
}

.mm-product-body > .mm-product-link {
	margin-top: 1.5rem !important;
}

.mm-product-specs {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--mm-color-neutral-100);
}

.mm-product-spec-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.875rem;
}

.mm-product-specs .mm-product-spec-row + .mm-product-spec-row {
	margin-top: 0.5rem;
}

.mm-product-spec-label {
	color: var(--mm-color-neutral-500);
}

.mm-product-spec-value {
	font-weight: 500;
	color: var(--mm-color-neutral-900);
}

/* ==========================================================================
   VISCOSITY RANGE INDICATOR
   Sits in the value slot of each product card's Viscosity spec row, in place of
   the numeric range: a solid grey track with "Low" / "High" under its ends,
   and an orange band marking where the series sits.

   NO NUMBERS, by request. The exact cSt range is carried in a
   .screen-reader-text span so the real spec survives for screen readers,
   crawlers, find-in-page and copy-paste.

   Band positions are computed from a log axis (0.1 to 10,000,000 cSt, 8
   decades) against the published ranges, not chosen by eye:
     Piston   0.5–50 cSt         8.7% – 33.7%
     Gear     1–100,000 cSt     12.5% – 75.0%
     Helical  1–1,000,000 cSt   12.5% – 87.5%
   Gear and Helical share a left edge because both meters go down to ~1 cSt —
   the difference between them is how thick they go, not how thin. Staggering
   their starts would claim the helical cannot measure thin fluids, which is
   false.
   ========================================================================== */

/* flex-basis AND an explicit height are both required: the band inside is
   absolutely positioned, so an empty flex child with neither computes to 0x0
   and nothing renders. The row is justify-content: space-between, so this sits
   hard right like the text values in the sibling rows. */
/* The client's Water card copy wraps to three lines where the other three wrap to
   two, so its card is ~25px taller and the pair in each row ends unlevel. The
   column already stretches to the taller card; make the card fill it. Nothing to
   do with the viscosity bar — all four spec blocks measure an identical 101px. */
.wp-block-column > .mm-product-card {
	height: 100%;
}

/* Top 20px: the bar (track line + orange band), centred on the label text.
   Below it: "Low" / "High" under the two ends. The axis line itself is the
   element's background so ::before/::after are free for the labels. */
.mm-visc {
	position: relative;
	flex: 0 1 280px;
	min-width: 110px;
	height: 34px;
	background: linear-gradient(var(--mm-color-neutral-400), var(--mm-color-neutral-400)) 0 8.5px / 100% 3px no-repeat;
	border-radius: 2px;
}

/* Labels are decorative — the exact cSt range is in the .screen-reader-text span. */
.mm-visc::before,
.mm-visc::after {
	position: absolute;
	top: 22px;
	font-size: 0.6875rem;
	line-height: 1;
	color: var(--mm-color-neutral-500);
}
.mm-visc::before {
	content: 'Low';
	left: 0;
}
.mm-visc::after {
	content: 'High';
	right: 0;
}

/* The row centres its children; keep the label level with the bar, not with
   the bar + labels block. */
.mm-product-spec-row:has(> .mm-visc) {
	align-items: flex-start;
}

.mm-visc__band {
	position: absolute;
	top: 3px;
	height: 14px;
	left: var(--from);
	right: calc(100% - var(--to));
	border-radius: 3px;
	background: var(--mm-color-primary);
}

/* Visually hidden but present in the DOM. Carries the exact cSt range for the
   viscosity bars, and is also used by functions.php:953/:964 — which until now
   relied on WordPress core's block-library CSS shipping this rule. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   APPLICATIONS / INDUSTRY CARDS
   ========================================================================== */

.mm-app-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.5rem;
	border: 1px solid var(--mm-color-neutral-200);
	border-radius: var(--mm-radius-xl);
	background-color: var(--mm-color-white);
	text-decoration: none;
	transition: border-color var(--mm-transition-normal),
	            box-shadow var(--mm-transition-normal);
}

.mm-app-card:hover {
	border-color: rgba(242, 122, 33, 0.35);
	box-shadow: var(--mm-shadow-lg);
}

.mm-app-icon {
	display: flex;
	width: 3rem;
	height: 3rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--mm-radius-lg);
	background-color: var(--mm-color-neutral-100);
	color: var(--mm-color-neutral-600);
	transition: background-color var(--mm-transition-normal),
	            color var(--mm-transition-normal);
	flex-shrink: 0;
}

.mm-app-card:hover .mm-app-icon {
	background-color: var(--mm-color-primary);
	color: var(--mm-color-white);
}

.mm-app-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: auto;
	padding-top: 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--mm-color-primary);
	text-decoration: none;
}

/* Industries We Serve: the global link underline lands on the inner <a>. */
.mm-app-link a,
.mm-app-link a:hover,
.mm-app-link a:focus {
	text-decoration: none;
}

.mm-app-link svg {
	transition: transform var(--mm-transition-fast);
}

.mm-app-card:hover .mm-app-link svg {
	transform: translateX(4px);
}

/* ==========================================================================
   COMPANY STORY SECTION
   ========================================================================== */

.mm-story-section {
	position: relative;
}

.mm-story-visual {
	position: relative;
}

/* Image container — matches handoff: gray square with contained product photo */
.mm-story-visual .wp-block-image {
	aspect-ratio: 1;
	border-radius: var(--mm-radius-2xl);
	background-color: #E5E7EB;
	overflow: hidden;
	margin: 0;
}

.mm-story-visual .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 2rem;
}

.mm-story-card {
	aspect-ratio: 1;
	border-radius: var(--mm-radius-2xl);
	background-color: var(--mm-color-neutral-800);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	padding: 2rem;
}

.mm-story-years {
	font-size: 6rem;
	font-weight: 700;
	color: var(--mm-color-primary);
	line-height: 1;
}

@media (min-width: 640px) {
	.mm-story-years {
		font-size: 8rem;
	}
}

.mm-story-years-label {
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--mm-color-white);
	margin-top: 0.5rem;
}

.mm-story-years-sub {
	font-size: 0.875rem;
	color: var(--mm-color-neutral-400);
	margin-top: 1rem;
}

/* Floating badge — bottom-left of story visual */
.mm-story-float-left {
	position: absolute;
	bottom: -1.5rem;
	left: -1.5rem;
	z-index: 2;
	background-color: var(--mm-color-white);
	border-radius: var(--mm-radius-xl);
	padding: 1rem;
	box-shadow: var(--mm-shadow-xl);
	min-width: 9rem;
}

/* Floating badge — top-right of story visual, protrudes above image */
.mm-story-float-right {
	position: absolute;
	top: -3.5rem;
	right: -1.5rem;
	z-index: 2;
	background-color: var(--mm-color-primary);
	border-radius: var(--mm-radius-xl);
	padding: 1rem;
	box-shadow: var(--mm-shadow-xl);
	text-align: center;
	min-width: 5rem;
}

.mm-float-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.mm-story-float-left .mm-float-label {
	color: var(--mm-color-neutral-500);
}

.mm-story-float-right .mm-float-label {
	color: rgba(255, 255, 255, 0.75);
}

.mm-float-value {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	margin-top: 0.25rem;
}

.mm-story-float-left .mm-float-value {
	color: var(--mm-color-neutral-900);
}

.mm-story-float-right .mm-float-value {
	color: var(--mm-color-white);
}

/* Company meta badges row */
.mm-company-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	font-size: 0.875rem;
	color: var(--mm-color-neutral-400);
}

.mm-company-meta-badge {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.mm-company-meta-sep {
	color: var(--mm-color-neutral-600);
}

/* ==========================================================================
   CTA SECTION
   ========================================================================== */

.mm-cta-option-card {
	background-color: var(--mm-color-white);
	border: 1px solid var(--mm-color-neutral-200);
	border-radius: var(--mm-radius-xl);
	padding: 1.5rem;
	text-align: center;
	transition: box-shadow var(--mm-transition-normal);
}

.mm-cta-option-card > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Restore icon bottom margin */
.mm-cta-option-card > .mm-cta-option-icon,
.mm-cta-option-card > .wp-block-group:first-child {
	margin-bottom: 1rem !important;
}

/* Fix anchor links in CTA cards */
.mm-cta-option-card a {
	text-decoration: none !important;
	color: var(--mm-color-primary);
	font-weight: 500;
}

.mm-cta-option-card a:hover {
	color: var(--mm-color-primary-dark);
}

.mm-cta-option-card:hover {
	box-shadow: var(--mm-shadow-md);
}

.mm-cta-option-icon {
	display: flex !important;
	width: 3rem !important;
	height: 3rem !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: var(--mm-radius-full) !important;
	background-color: rgba(242, 122, 33, 0.1) !important;
	color: var(--mm-color-primary);
	margin-left: auto !important;
	margin-right: auto !important;
	flex-shrink: 0;
}

/* ==========================================================================
   BUTTON BLOCK STYLE EXTENSIONS
   ========================================================================== */

/* is-style-outline-orange — overrides theme default outline */
.wp-block-button.is-style-outline-orange .wp-block-button__link {
	background-color: transparent !important;
	color: var(--mm-color-primary) !important;
	border: 2px solid var(--mm-color-primary) !important;
	transition: background-color var(--mm-transition-fast),
	            color var(--mm-transition-fast);
}

.wp-block-button.is-style-outline-orange .wp-block-button__link:hover {
	background-color: var(--mm-color-primary) !important;
	color: var(--mm-color-white) !important;
}

/* is-style-outline-white — for dark sections */
.wp-block-button.is-style-outline-white .wp-block-button__link {
	background-color: transparent !important;
	color: var(--mm-color-white) !important;
	border: 2px solid rgba(255, 255, 255, 0.4) !important;
	transition: background-color var(--mm-transition-fast),
	            border-color var(--mm-transition-fast);
}

.wp-block-button.is-style-outline-white .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.1) !important;
	border-color: rgba(255, 255, 255, 0.6) !important;
}

/* is-style-large — larger padding */
.wp-block-button.is-style-large .wp-block-button__link {
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
	padding-left: 2rem !important;
	padding-right: 2rem !important;
	font-size: 1rem !important;
}

/* ==========================================================================
   GROUP BLOCK STYLE EXTENSIONS
   ========================================================================== */

/* is-style-card */
.wp-block-group.is-style-card {
	background-color: var(--mm-color-white);
	border: 1px solid var(--mm-color-neutral-200);
	border-radius: var(--mm-radius-xl);
	transition: box-shadow var(--mm-transition-normal),
	            border-color var(--mm-transition-normal);
}

.wp-block-group.is-style-card:hover {
	box-shadow: var(--mm-shadow-lg);
	border-color: rgba(242, 122, 33, 0.3);
}

/* is-style-dark-section */
.wp-block-group.is-style-dark-section {
	background-color: var(--mm-color-neutral-900);
	color: var(--mm-color-white);
}

/* ==========================================================================
   RESPONSIVE UTILITIES
   ========================================================================== */

/* Stack columns on mobile */
@media (max-width: 639px) {
	.mm-columns-stack > .wp-block-columns {
		flex-direction: column;
	}
}

/* Grid column count overrides */
@media (max-width: 767px) {
	.mm-grid-2col,
	.mm-grid-3col,
	.mm-grid-4col {
		grid-template-columns: 1fr !important;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.mm-grid-3col,
	.mm-grid-4col {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ==========================================================================
   WORDPRESS CORE OVERRIDES
   ========================================================================== */

/* Remove WordPress inter-section margins */
:where(.wp-site-blocks) > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Kill WP's global is-layout-flow spacing (1.5rem between all flow children).
   No !important so inline margin-top values on individual blocks still win. */
:root :where(.is-layout-flow) > * {
	margin-block-start: 0;
}

/* Remove flow layout margins on logo cards specifically (grid items still receive them) */
.mm-logo-card-grid > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Remove default paragraph bottom margin inside groups */
.wp-block-group > p:last-child {
	margin-bottom: 0;
}

/* Ensure constrained layout respects our content width */
.wp-block-group.alignfull > .is-layout-constrained > * {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

/* Navigation block adjustments */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--mm-color-white);
	border: 1px solid var(--mm-color-neutral-200);
	border-radius: var(--mm-radius-lg);
	box-shadow: var(--mm-shadow-lg);
	padding: 0.5rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container a {
	border-radius: var(--mm-radius-md);
	padding: 0.5rem 0.75rem;
	display: block;
}

.wp-block-navigation .wp-block-navigation__submenu-container a:hover {
	background-color: var(--mm-color-neutral-50);
}

/* Site logo sizing — height-based to match handoff (height: 3rem at desktop) */
.wp-block-site-logo {
	flex-shrink: 0;
}

.wp-block-site-logo img {
	height: 2.5rem;
	width: auto;
	display: block;
}

@media (min-width: 640px) {
	.wp-block-site-logo img {
		height: 3rem;
	}
}

/* Phone header: logo, search, menu, then Request a Quote and the phone number
   don't fit in one row below ~560px (the button squashed to one letter per line
   and the page scrolled sideways). Flatten the right-hand groups with
   display:contents and reflow into two rows:
     row 1: logo · search · burger
     row 2: Request a Quote · phone
   CSS only — parts/header.html markup is unchanged. */
@media (max-width: 575px) {
	.site-header > .wp-block-group {
		flex-wrap: wrap !important;
		row-gap: 0.75rem;
		column-gap: 0.5rem;
	}
	.site-header > .wp-block-group > .wp-block-group.is-vertical,
	.site-header .mm-header-actions {
		display: contents;
	}
	.site-header .wp-block-site-logo {
		order: 1;
		margin-right: auto;
	}
	.site-header .mm-search-toggle { order: 2; }
	.site-header .mm-nav { order: 3; }
	.site-header .mm-header-actions .wp-block-buttons {
		order: 4;
		flex: 1 0 60%;
	}
	.site-header .mm-header-actions .wp-block-button { width: 100%; }
	.site-header .mm-header-actions .wp-block-button__link {
		display: block;
		width: 100%;
		white-space: nowrap;
	}
	.site-header > .wp-block-group > .wp-block-group.is-vertical > p {
		order: 5;
		margin: 0;
		white-space: nowrap;
	}
}

/* 320px phones: shave the logo so logo · search · burger still share row 1. */
@media (max-width: 359px) {
	.site-header .wp-block-site-logo img { height: 2.125rem; }
}

.site-footer .wp-block-site-logo img {
	height: 3.125rem;
	width: auto;
}

/* Separator styling */
.wp-block-separator.has-alpha-channel-opacity {
	border-color: inherit;
}

/* ==========================================================================
   SECTION HEADING SCALE — matches handoff fluid heading sizes
   ========================================================================== */

/* H2 in all non-hero pattern sections — !important overrides WP fluid clamp inline style */
.mm-social-proof h2.wp-block-heading,
.mm-stats-bar h2.wp-block-heading,
.alignfull h2.wp-block-heading {
	font-size: 1.875rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.025em !important;
	line-height: 1.15 !important;
}

@media (min-width: 640px) {
	.mm-social-proof h2.wp-block-heading,
	.mm-stats-bar h2.wp-block-heading,
	.alignfull h2.wp-block-heading {
		font-size: 2.25rem !important;
	}
}

@media (min-width: 1024px) {
	.mm-social-proof h2.wp-block-heading,
	.mm-stats-bar h2.wp-block-heading,
	.alignfull h2.wp-block-heading {
		font-size: 3rem !important;
	}
}

/* ========== GLOBAL BUTTON FIX ========== */
/* Weight 500 + line-height 1 = exactly 48px at 1rem padding (matches handoff height:3rem) */
.wp-block-button__link,
.wp-element-button {
	font-weight: 500 !important;
	line-height: 1 !important;
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
	.site-header,
	.site-footer {
		display: none;
	}
}
/* Arrow button */ .mm-btn-arrow { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; }

/* ==========================================================================
   FOOTER SPECIFIC STYLES
   ========================================================================== */

/* White logo in dark footer */
.site-footer .wp-block-site-logo img {
	filter: brightness(0) invert(1);
	height: 3.125rem !important;
	width: auto !important;
}

/* Logo sits directly above the address since the tagline was removed —
   keep the gap the tagline paragraph used to provide. */
.site-footer .wp-block-site-logo {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* Footer list links */
.mm-footer-links {
	list-style: none !important;
	padding: 0 !important;
	/* Clear air between the column heading and the list (user request) */
	margin: 1.25rem 0 0 0 !important;
}

.mm-footer-links li {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	/* 0.75rem reduced by 30% (user request) */
	margin-top: 0.525rem !important;
}

.mm-footer-links li:first-child { margin-top: 0 !important; }

.mm-footer-links a {
	color: var(--mm-color-neutral-300) !important;
	font-size: 0.875rem !important;
	text-decoration: none !important;
	transition: color var(--mm-transition-fast);
}

.mm-footer-links a:hover { color: var(--mm-color-primary) !important; }

/* Footer column headings */
.site-footer h5.wp-block-heading {
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: var(--mm-color-neutral-400) !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Kill flow margins in footer columns */
.site-footer .wp-block-column > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Remove WordPress auto-padding on footer */
.site-footer {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Full-width CTA section within footer */
.site-footer .alignfull {
	max-width: none !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
	width: 100vw !important;
}

/* ========== FOOTER PRECISION FIXES ========== */

/* Footer CTA title: 30px (not 48px from alignfull override) */
.site-footer h2.wp-block-heading {
	font-size: 1.875rem !important;
	line-height: 1.3 !important;
	letter-spacing: -0.025em !important;
}

/* Footer column headings: 14px not 12px */
.site-footer h5.wp-block-heading {
	font-size: 0.875rem !important;
}

/* Footer CTA description paragraph: 16px with 8px top gap — target only direct child of CTA flex group */
.site-footer > .alignfull > .wp-block-group > .wp-block-group > p {
	font-size: 1rem !important;
}

/* Restore brand text top margin (zeroed by column rule) */
.site-footer .wp-block-columns .wp-block-column > p {
	margin-top: 1rem !important;
}

/* Links list: 16px gap from heading */
.mm-footer-links {
	margin-top: 1rem !important;
}

/* Individual link items: 12px gap */
.mm-footer-links li + li {
	margin-top: 0.75rem !important;
}

/* Footer columns gap: 32px not 48px */
.site-footer .wp-block-columns {
	gap: 2rem !important;
}

/* Contact icon groups: 12px top spacing */
.site-footer .wp-block-columns .wp-block-column > .wp-block-group {
	margin-top: 0.75rem !important;
}

/* Column heading → link list gap: exactly 10px (user request).
   Highest-specificity pair so the earlier margin kills and the two
   conflicting .mm-footer-links rules above can't interfere. */
.site-footer .wp-block-column > h5.wp-block-heading {
	margin-bottom: 10px !important;
}
.site-footer .wp-block-column > .mm-footer-links {
	margin-top: 0 !important;
}

/* Tighter footer vertical rhythm (user request 2026-10-06).
   Columns: 64px top → 48px; bottom 48px padding + 28px core
   .wp-block-columns margin → 32px. Constrained-layout 24px gap between the
   footer's rows removed; bottom bar 32px → 24px. */
.site-footer > .wp-block-columns {
	padding-top: 3rem !important;
	padding-bottom: 2rem !important;
	margin-bottom: 0 !important;
}
.site-footer > * + * {
	margin-block-start: 0 !important;
}
.site-footer > .alignfull:last-child {
	padding-bottom: 1.5rem !important;
}

/* Force xs font-size preset in footer to be actually 12px */
.site-footer .has-xs-font-size {
	font-size: 0.75rem !important;
}

/* Footer copyright: 14px/400 */
.site-footer .has-neutral-400-color.has-sm-font-size {
	font-size: 0.875rem !important;
	font-weight: 400 !important;
}

/* Footer badge xs size — high specificity to beat the broad alignfull rule (0-5-1 > 0-4-1) */
.site-footer .alignfull p.has-xs-font-size.has-text-color.has-neutral-500-color {
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}

/* ========== CSS CHEVRON ARROWS (replaces inline SVG) ========== */
/* These replace the SVG chevrons removed to fix block validation errors */

.mm-btn-arrow::after,
.mm-app-link a::after,
.mm-product-body p.has-primary-color a::after,
.mm-cta-option-card a:not([href^="tel"])::after {
	content: ' ›';
	font-style: normal;
}

.mm-product-body p.has-primary-color a {
	text-decoration: none !important;
	color: var(--mm-color-primary);
	transition: color var(--mm-transition-fast);
}

.mm-product-body p.has-primary-color a:hover {
	color: var(--mm-color-primary-dark);
}

/* Our Story button in company story */
.mm-btn-story::after {
	content: ' ›';
}

/* Hero description font-size (moved from block inline style to avoid WP fluid-typography mismatch) */
.mm-hero-inner p.has-neutral-600-color {
	font-size: 1.125rem !important;
}