/*
Theme Name: SEMI Crawlers
Theme URI: https://semicrawlers.com
Author: Andrea Day — Daylight Creative
Author URI: https://daylightcreative.tech
Description: Custom block theme for SEMI Crawlers — a bold industrial brand (red / black / white) built on native Gutenberg blocks. Replaces the previous Divi build. Design source of truth: "concept 02".
Version: 0.2.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: semi
*/

/* ==========================================================================
   SEMI Crawlers — supplemental styles
   (Design tokens live in theme.json; this file holds only what theme.json
   can't express: nav behavior, hover polish, utility classes, and the
   carried-over custom CSS. Keep it lean.)
   ========================================================================== */

/* --- Utility: red content panel (the recurring "red text block" motif) --- */
.is-style-red-panel,
.semi-red-panel {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.semi-red-panel :where(h1, h2, h3, h4, h5, h6),
.is-style-red-panel :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--base);
}

/* --- Utility: thin red underline beneath a section heading --- */
.semi-heading-rule > h2,
.semi-heading-rule > h3 {
	padding-bottom: 0.6rem;
	border-bottom: 3px solid var(--wp--preset--color--primary);
	display: inline-block;
}

/* Headings are uppercase globally (theme.json). These remain for explicit control. */
.semi-caps { text-transform: uppercase; }
/* Italic heading treatment (matches the slanted "phrase" headings in the concept) */
.semi-italic { font-style: italic; }

/* Decorative brand arrow element (carried from the original design) */
.semi-arrow { color: var(--wp--preset--color--primary); font-size: 1.2rem; line-height: 1; margin: 0.5rem 0 0; }

/* Equal-height split (red "experience" panel + gray "why choose us") — stretch on all side-by-side breakpoints.
   White gutter between the columns = the theme block-gap token, so it always matches the white space above/below. */
/* Experience / Why-Choose-Us split: CSS grid (desktop) gives a deterministic 1/3 : 2/3 split,
   immune to flexbox content-width quirks; equal column heights come free from grid's default stretch.
   The gutter uses the theme block-gap token so it always equals the white space above/below.
   Phones (<=781px) keep WordPress's normal full-width stacking. */
.semi-equal-cols > .wp-block-column { min-width: 0; }
@media (min-width: 782px) {
	.semi-equal-cols {
		display: grid !important;
		/* 1/3 : 2/3 base, nudged +40px to red / -40px to gray (Andrea's tuning) */
		grid-template-columns:
			calc((100% - var(--wp--style--block-gap, 1.2rem)) / 3 + 40px)
			calc((100% - var(--wp--style--block-gap, 1.2rem)) * 2 / 3 - 40px);
		column-gap: var(--wp--style--block-gap, 1.2rem);
		align-items: stretch;
	}
}

/* Black "end of paragraph" triangle in the red experience panel */
.semi-tri { width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 15px solid #000000; margin-top: 1.6rem; }

/* Responsive hero swap — the headline art is baked into the hero image */
.semi-hero-mobile { display: none; }
@media (max-width: 781px) {
	.semi-hero-desktop { display: none; }
	.semi-hero-mobile { display: block; }
}

/* Interior-page hero covers on phones (Andrea, 2026-07-26).
   The hero art is a wide 2500x638 banner (~3.9:1) shown with object-fit:cover.
   At the desktop 440px min-height a 390px phone only revealed ~23% of the
   picture's width — you couldn't tell what the subject was. Dropping the
   min-height to 230px widens the visible slice to ~45% and lets the browser
   pick a sharper srcset candidate (see the cover `sizes` filter in
   functions.php). Desktop is untouched — this is inside the phone query. */
@media (max-width: 781px) {
	.wp-block-cover.alignfull { min-height: 230px !important; }
}

/* --- Header: utility bar + primary nav --- */
.semi-utility-bar a { color: inherit; }
.wp-block-navigation {
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
}
.wp-block-navigation a:hover { color: var(--wp--preset--color--primary); }

/* Header primary nav — lighter Archivo, left-aligned, with red "|" separators (matches the original design) */
.semi-nav {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-variation-settings: "wdth" 70, "wght" 700; /* Archivo Condensed Bold */
	font-size: 1.33rem; /* ~16pt */
	letter-spacing: 0.02em;
}
.semi-nav a { color: #808080; }
.semi-nav a:hover { color: var(--wp--preset--color--primary); }
.semi-nav .wp-block-navigation-item:not(:last-child)::after {
	content: "|";
	color: var(--wp--preset--color--primary);
	margin-left: 0.6rem;
	font-variation-settings: "wdth" 100, "wght" 400; /* clean thin pipe */
}

/* --- Header utility: Get-a-Quote flush to the top-right corner --- */
.semi-header { position: relative; }
.semi-quote { position: absolute; top: 0; right: 0; z-index: 10; margin: 0 !important; }
.semi-quote .wp-block-button__link { padding: 1.6rem 2.4rem; font-size: 1.15rem; border-radius: 0; }

/* --- Address + phone: Archivo SemiExpanded, address Light / phone Black, ~+4pt --- */
.semi-toprow { padding-right: 18rem; }
/* Address/phone: gray #808080, lifted to sit beside the Get-a-Quote button (not centered against the tall logo) */
.semi-utility-text { font-size: 1.2rem; color: #808080; align-self: flex-start; margin-top: 0.4rem; }
.semi-utility-text .semi-addr  { font-variation-settings: "wdth" 112, "wght" 300; }
.semi-utility-text .semi-sep   { color: #808080; margin: 0 0.5rem; font-variation-settings: "wdth" 112, "wght" 700; }
.semi-utility-text .semi-phone { color: #808080; font-variation-settings: "wdth" 112, "wght" 900; }

/* --- Buttons: ensure square, bold, uppercase even outside theme.json reach --- */
.wp-block-button__link { transition: background-color 0.15s ease; }

/* --- Images: never overflow on small screens --- */
img { max-width: 100%; height: auto; }

/* --- Why-Choose-Us icon grid: vector icons (label baked in) sized down so they don't read "horsey", left-aligned --- */
.semi-why-icons figure.wp-block-image { align-items: flex-start; }
.semi-why-icons figure.wp-block-image img { width: 70%; height: auto; }

/* --- "We offer solutions" black band: text stretches to 90%, image strip is full-width & flush --- */
.semi-offer-text { max-width: 90vw !important; margin-left: auto !important; margin-right: auto !important; }
.semi-offer-gallery.wp-block-gallery { gap: 0 !important; }

/* --- Equipment photo grid: spaced columns, red title panels (equal height), black triangle + white divider --- */
.semi-eq-col { display: flex !important; flex-direction: column; }
.semi-eq-cols { column-gap: 20px !important; row-gap: 20px !important; }
.semi-eq-panel { flex: 1 1 auto; display: flex !important; }
.semi-eq-head { flex: 1 1 auto; display: flex; align-items: stretch; gap: 0.55rem; }
.semi-eq-tri { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 11px solid #000000; align-self: flex-start; flex: 0 0 auto; margin-top: 0.15rem; }
/* Thin divider, to the RIGHT of the triangle, spanning the full panel so all dividers match the longest title */
.semi-eq-rule { width: 1px; background: var(--wp--preset--color--base); flex: 0 0 auto; align-self: stretch; }
.semi-eq-label { margin: 0; align-self: flex-start; font-family: var(--wp--preset--font-family--heading); font-weight: 900; font-size: 20px; line-height: 1.1; text-transform: uppercase; color: var(--wp--preset--color--base); overflow-wrap: normal; word-break: normal; hyphens: none; }
.semi-eq-photo { margin: 0; }
.semi-eq-photo img { width: 100%; height: 300px; object-fit: cover; display: block; }

/* --- About: full-width red mission (left) + gray history (right), white gutter; 4 landscape images overlap the red --- */
.semi-about-cols { column-gap: var(--wp--style--block-gap, 1.2rem) !important; align-items: flex-start; }
.semi-about-imgs { margin-top: -3rem !important; max-width: 85%; margin-left: auto !important; margin-right: auto !important; position: relative; z-index: 2; }
.semi-about-imgs figure.wp-block-image img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; }

/* Desktop: the 2x2 photo cluster fills the whole area beside the red panel, so every white
   gap in the section is the SAME size (Andrea, 2026-07-27) — one block-gap between the red
   panel and the photos, the same between each photo, and the block runs flush to the section
   edges top, bottom and right, mirroring the red panel.
   Two things this has to beat:
   1. Core's gallery layout sets `display:flex` at higher specificity — hence the
      `.wp-block-gallery.semi-about-imgs` selector and `display:grid !important`. Without it
      grid-template-rows is silently ignored and the rows grow to full height each.
   2. Grid tracks won't shrink below an image's intrinsic width, so the tracks are
      `minmax(0,1fr)` and the figures get `min-width:0` — otherwise the right column overflows.
   The column is absolutely positioned so its height is driven by the red panel rather than by
   its own content (otherwise `height:100%` is circular and the grid doubles in height). */
@media (min-width: 782px) {
	.semi-about-cols { align-items: stretch !important; }
	.semi-about-cols > .wp-block-column { align-self: stretch !important; }
	.semi-about-cols > .wp-block-column:last-child { position: relative; }
	.wp-block-gallery.semi-about-imgs {
		position: absolute;
		inset: 0;
		margin: 0 !important;
		max-width: none !important;
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--wp--style--block-gap, 1.2rem);
	}
	.wp-block-gallery.semi-about-imgs figure.wp-block-image {
		margin: 0 !important;
		width: auto !important;
		min-width: 0;
		height: 100%;
		overflow: hidden;
	}
	.wp-block-gallery.semi-about-imgs figure.wp-block-image img {
		width: 100% !important;
		height: 100% !important;
		aspect-ratio: auto !important;
		object-fit: cover;
		display: block;
	}
}
/* Inset the text in both boxes 15px more L/R; extra top/bottom on the red box */
.semi-about-cols .wp-block-group.has-primary-background-color { padding: calc(var(--wp--preset--spacing--40) + 20px) calc(var(--wp--preset--spacing--40) + 15px) !important; }
.semi-about-cols > .wp-block-column.has-light-gray-background-color { padding-left: calc(var(--wp--preset--spacing--40) + 15px) !important; padding-right: calc(var(--wp--preset--spacing--40) + 15px) !important; }
/* --- About: affiliation logo row (Jackie's catch, fixed 2026-07-27) ---
   The block is a plain `wp:group` with no layout attribute, so it was flowing the four
   logos vertically at full column width on desktop. Grid (not flex) so the count is
   guaranteed: 4 across on desktop, 2x2 on phones — flex let the wider logos claim a
   whole row. Two of the four (Pipeliners, PLCA) are flat files with white backgrounds
   baked in, so ALL four sit on matching white chips — otherwise two float on the red
   and two look like mistakes. Swap the chips out if transparent versions ever arrive. */
.semi-affil-logos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: center;
	justify-items: center;
	gap: 1.25rem 1.5rem;
	margin-top: 1.5rem;
}
.semi-affil-logos figure.wp-block-image {
	margin: 0 !important;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border-radius: 6px;
	padding: 10px 14px;
}
.semi-affil-logos img { width: auto; max-width: 100%; max-height: 80px; height: auto; display: block; }

/* --- About on phones (Andrea, 2026-07-25) --- */
@media (max-width: 781px) {
	/* Logos go 2x2 on phones (Andrea, 2026-07-27) */
	.semi-affil-logos { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
	.semi-affil-logos figure.wp-block-image { padding: 10px 12px; }
	.semi-affil-logos img { max-height: 64px; }
	/* Photo cluster: stack the 2x2 grid into a single column, and drop the desktop
	   -3rem overlap (which would collide with the red panel above once stacked). */
	.semi-about-imgs .wp-block-image { width: 100% !important; }
	.semi-about-imgs { margin-top: var(--wp--preset--spacing--30) !important; }
}

/* --- Nationwide row: widen to 85% of the viewport, centered --- */
.semi-nationwide-row { max-width: 85vw !important; margin-left: auto !important; margin-right: auto !important; }

/* --- Utility Support / Clean Energy: two equal columns, white gutter.
   The pole/windmill sit as bottom-right BACKGROUND images on the gray panels, so they never affect the text width. --- */
.semi-util-cols { column-gap: var(--wp--style--block-gap, 1.2rem) !important; }
.semi-util-col { background-repeat: no-repeat; background-position: right bottom; background-origin: border-box; background-size: 45% auto; padding-bottom: var(--wp--preset--spacing--40) !important; }
.semi-util-pole { background-image: url(/wp-content/uploads/2025/08/utility-power-c.webp); background-size: 100% auto; background-position: center bottom; padding-bottom: 20% !important; }
/* Utility Support column: hold the text upper-left, clear of the full-width power-line image */
.semi-util-pole .semi-util-text { max-width: calc(50% + 40px); line-height: 1.65; }
.semi-util-wind { background-image: url(/wp-content/uploads/2026/07/sustainability-truck-dirt-2026-07-v3.webp); background-size: 100% auto; background-position: center bottom; padding-bottom: 22% !important; }
/* Sustainability column: hold the text to the upper-left and lift it clear of the full-width truck + ground */
.semi-util-wind .semi-util-text { max-width: calc(50% + 40px); line-height: 1.65; }
.semi-util-text { max-width: 52%; }
/* Dividing line: longer than the text, anchored left */
.semi-util-text .wp-block-separator { width: 160% !important; max-width: 160% !important; margin-left: 0 !important; margin-right: auto !important; }
@media (max-width: 781px) {
	/* Headline + text to 80% of the viewport, centered (Andrea). The desktop
	   left-bias rules (.semi-util-pole/.semi-util-wind .semi-util-text) win on
	   specificity, so force the width here; zero the column side-padding so the
	   text can reach a true 80vw. */
	.semi-util-col { padding-left: 0 !important; padding-right: 0 !important; }
	.semi-util-pole .semi-util-text,
	.semi-util-wind .semi-util-text {
		max-width: 80vw !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.semi-util-text .wp-block-separator { width: 100% !important; max-width: 100% !important; }
	/* Show the decorative cut-out images on phones (Andrea: "the image isn't
	   appearing"). The desktop bg images now carry through (the old "none"
	   override is removed); reserve each image's height at full mobile width via
	   padding-bottom (≈ image aspect ratio) so it sits BELOW the text, not behind it. */
	.semi-util-pole { padding-bottom: 75% !important; }  /* utility-power-c.webp  1400×1046 */
	.semi-util-wind { padding-bottom: 55% !important; }  /* sustainability-truck-dirt-2026-07-v3.webp 1480×820 */
}

/* --- Our Equipment: the yellow truck floats right so the paragraph wraps and "hugs" it; stacks on phones --- */
.semi-truck-wrap { float: right; width: 52%; margin-top: 0.4rem; margin-bottom: 1rem; margin-left: 1.6rem; margin-right: calc(-1 * var(--wp--preset--spacing--30)); }
.semi-truck-wrap img { width: 100%; height: auto; }
@media (max-width: 781px) {
	.semi-truck-wrap { float: none; width: 100%; margin: 1rem 0 0; }
}

/* --- Footer logo: render the color logo as white on the black footer --- */
.semi-logo-invert img { filter: brightness(0) invert(1); }

/* --- Footer headings: keep office labels tight --- */
.semi-footer h4 { margin-bottom: 0.25rem; }
.semi-footer p { line-height: 1.5; }

/* --- Footer: logo row + content at 80% width; larger social icons, office headers + menu --- */
.semi-footer-inner { max-width: 80vw !important; margin-left: auto !important; margin-right: auto !important; }
.semi-footer .semi-socials { font-size: 30px !important; }
.semi-footer h4 { font-size: 20px !important; }
.semi-footer .wp-block-navigation { font-size: 20px !important; }
.semi-footer p:not(.has-text-align-center) { font-size: 16px !important; }
/* Narrow the testimonial so it doesn't crowd the addresses column */
.semi-footer .wp-block-column:first-child p { max-width: 85%; }

/* --- Mobile readability: comfortable body, generous tap targets --- */
@media (max-width: 781px) {
	.wp-block-navigation { font-size: 1rem; }
	body { line-height: 1.65; }
	/* Keep the phone header tidy: drop the long address line, keep logo + Get a Quote + menu */
	.semi-utility-text { display: none; }
	/* No pipe separators in the mobile dropdown menu */
	.semi-nav .wp-block-navigation-item::after { content: none; }
	/* On phones the Get-a-Quote button flows normally instead of pinned to the corner */
	.semi-quote { position: static; }
	.semi-toprow { padding-right: 0; }

	/* --- Mobile header: logo left + hamburger right on one line; Get-a-Quote 80% below --- */
	/* Neutralize WP nav's own positioning context so the hamburger anchors to .semi-header (the logo line) */
	.semi-nav,
	.semi-nav-wrap,
	.semi-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { position: static !important; }
	/* Hamburger pinned to the logo's line, top-right, in black */
	.semi-header .wp-block-navigation__responsive-container-open {
		position: absolute;
		top: 2.4rem;
		right: clamp(1.5rem, 4vw, 4rem);
		margin: 0;
		color: #000000;
		z-index: 11;
	}
	.semi-header .wp-block-navigation__responsive-container-open svg { fill: currentColor; }
	/* The (now empty) nav wrapper collapses so the absent hamburger leaves no gap */
	.semi-nav-wrap { padding-top: 0 !important; padding-bottom: 0 !important; }
	/* Get a Quote: 80% of the viewport, centered, below the logo+hamburger row; tighter top/bottom padding (−8px) */
	.semi-quote { display: flex; justify-content: center; width: 100%; margin-top: 30px !important; }
	.semi-quote .wp-block-button { width: 80vw; max-width: 80vw; }
	.semi-quote .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		padding-top: calc(1.6rem - 8px);
		padding-bottom: calc(1.6rem - 8px);
	}
}

/* --- Pipeline Solutions: process-card grid (red caption panel overlaps the photo) --- */
.semi-pipe-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--wp--preset--spacing--30);
	row-gap: var(--wp--preset--spacing--40);
}
.semi-pipe-grid > * { margin-block: 0 !important; }
.semi-pipe-card { margin: 0 !important; }
.semi-pipe-photo { margin: 0 !important; }
.semi-pipe-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
/* Red caption lifts up to overlap the photo, inset from the card edges (the concept-02 layered look) */
.semi-pipe-cap {
	position: relative;
	z-index: 2;
	width: 86%;
	margin: -2.6rem auto 0 !important;
	padding: 0.95rem 1.25rem !important;
}
.semi-pipe-cap .semi-eq-label { font-size: 18px; }

/* --- Inset 2x2 landscape grid with clear space above (Hauling, Utility, Clean Energy, etc.) --- */
.semi-haul-imgs,
.semi-img-grid {
	margin-top: var(--wp--preset--spacing--40) !important;
	max-width: 85%;
	margin-left: auto !important;
	margin-right: auto !important;
	position: relative;
	z-index: 2;
}
.semi-haul-imgs figure.wp-block-image img,
.semi-img-grid figure.wp-block-image img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; }

/* Utility Support's inset grid is the only 2-column one on the site, and it holds
   three photos — so the third sat alone at full width and dwarfed the two above it
   (Andrea, 2026-07-27). Match it to its siblings and centre it under them. */
.semi-img-grid.columns-2 > figure.wp-block-image:nth-child(3):last-child {
	flex: 0 0 calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2);
	max-width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2);
	/* core's gallery CSS zeroes figure margins, so the auto-centring needs to win */
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Partner credit on Sustainability (Evans supply SEMI's wash-bay treatment system) */
.semi-evans-credit { margin-top: 1.75rem; }
.semi-evans-label {
	margin: 0 0 0.6rem;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: #55565a;
}
.semi-evans-logo { width: 210px; max-width: 60%; height: auto; display: block; }

@media (max-width: 781px) {
	.semi-pipe-grid { grid-template-columns: 1fr; }
	.semi-pipe-cap { width: 90%; margin-top: -2rem !important; }
	/* White gap between the stacked red & gray intro columns on phones (pipeline + hauling intros) */
	.semi-pipe-intro, .semi-stack-gap { row-gap: var(--wp--style--block-gap, 1.2rem) !important; }
	/* Inset 2x2 grid: a touch less space on phones */
	.semi-haul-imgs, .semi-img-grid { margin-top: var(--wp--preset--spacing--30) !important; max-width: 92%; }
}

/* --- Equipment: spec-sheet cards (photo thumbnail + model name + Download Spec Sheet button) --- */
.semi-spec-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--20);
}
.semi-spec-grid > * { margin-block: 0 !important; }
.semi-spec-card {
	position: relative;
	background-color: var(--wp--preset--color--light-gray);
	display: flex !important;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.8rem;
	padding: var(--wp--preset--spacing--20);
	height: 100%;
}
.semi-spec-photo { margin: 0 !important; width: 100%; }
.semi-spec-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #282829; display: block; }
.semi-spec-name { margin: 0; font-size: 20px; line-height: 1.1; }
.semi-spec-card .wp-block-buttons { margin-top: auto; }
.semi-spec-card .wp-block-button__link { font-size: 13px; padding: 0.7rem 1.1rem; }
/* For models whose photo/PDF isn't in yet — a gray box + a muted note in place of the button */
.semi-spec-noimg { width: 100%; aspect-ratio: 4 / 3; background: #d6d6d6; display: flex; align-items: center; justify-content: center; color: #888888; font-size: 13px; font-style: italic; }
.semi-spec-soon { margin: auto 0 0 !important; font-size: 13px; font-style: italic; color: var(--wp--preset--color--body); }
@media (max-width: 1080px) { .semi-spec-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 781px) { .semi-spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .semi-spec-grid { grid-template-columns: 1fr; } }
/* "Sell Only" badge — top-left, over the spec photo (for sell-only models) */
.semi-sell-tag {
	position: absolute;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	z-index: 2;
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 11px;
	line-height: 1;
	padding: 0.35rem 0.6rem;
}

/* --- Equipment: "Compare Specifications" collapsible comparison table --- */
.semi-spec-compare { margin-top: var(--wp--preset--spacing--40); }
.semi-spec-compare > summary {
	list-style: none;
	cursor: pointer;
	display: inline-block;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 14px;
	padding: 0.85rem 1.6rem;
}
.semi-spec-compare > summary::-webkit-details-marker { display: none; }
.semi-spec-compare > summary::after { content: " \25BE"; }
.semi-spec-compare[open] > summary::after { content: " \25B4"; }
.semi-spec-compare > summary:hover { background: var(--wp--preset--color--contrast); }
.semi-spec-table-wrap { overflow-x: auto; margin-top: 1rem; }
.semi-spec-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.semi-spec-table th, .semi-spec-table td { border: 1px solid #d6d6d6; padding: 0.55rem 0.7rem; text-align: left; white-space: nowrap; }
.semi-spec-table thead th { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; font-size: 12px; white-space: normal; }
.semi-spec-table tbody th { background: #f2f2f2; font-weight: 700; }
.semi-spec-table tbody tr:nth-child(even) td { background: #fafafa; }

/* --- Gravity Forms: brand the submit button + headings/labels to match the theme --- */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_button {
	background: var(--wp--preset--color--primary) !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.9rem 2.2rem !important;
	cursor: pointer;
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_button:hover { background: var(--wp--preset--color--contrast) !important; }
.gform_wrapper .gfield_label { font-family: var(--wp--preset--font-family--heading); }

/* --- Mobile sticky "Call Now" button (fixed to the bottom of the viewport; phones only) --- */
.semi-call-now { display: none; }
@media (max-width: 781px) {
	.semi-call-now {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.55rem;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		background: var(--wp--preset--color--primary);
		color: #ffffff !important;
		text-decoration: none;
		font-family: var(--wp--preset--font-family--heading);
		font-weight: 900;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		font-size: 1.1rem;
		padding: 1rem 1.2rem;
		padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.28);
	}
	.semi-call-now svg { width: 1.15em; height: 1.15em; fill: currentColor; flex: 0 0 auto; }
	/* Keep the footer's last line clear of the fixed call bar */
	.semi-footer { padding-bottom: calc(var(--wp--preset--spacing--40) + 4.5rem) !important; }
}

/* ==========================================================================
   Carried-over custom CSS (from the old site's HFCM "Custom CSS" snippet)
   TODO: paste the 630-char snippet here during build (fetch from wp_hfcm_scripts).
   ========================================================================== */

/* ==========================================================================
   About — company history timeline ("Our Story") — alternating vertical
   ========================================================================== */
.semi-timeline { padding: var(--wp--preset--spacing--50) 0; }
.semi-timeline-title {
	color: var(--wp--preset--color--primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 3rem;
}
.semi-tl { position: relative; max-width: 980px; margin: 0 auto; }
.semi-tl::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 50%;
	width: 3px;
	background: var(--wp--preset--color--primary);
	transform: translateX(-50%);
}
.semi-tl-item {
	position: relative;
	width: 50%;
	padding: 0 2.75rem 3rem;
	box-sizing: border-box;
}
.semi-tl-item:nth-child(odd) { left: 0; text-align: right; }
.semi-tl-item:nth-child(even) { left: 50%; text-align: left; }
.semi-tl-item::after {
	content: "";
	position: absolute;
	top: 0.35rem;
	width: 16px; height: 16px;
	background: var(--wp--preset--color--primary);
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary);
}
.semi-tl-item:nth-child(odd)::after { right: -9px; }
.semi-tl-item:nth-child(even)::after { left: -9px; }
.semi-tl-year {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 900;
	color: var(--wp--preset--color--primary);
	font-size: 1.5rem;
	line-height: 1;
	margin-bottom: 0.4rem;
}
.semi-tl-head {
	display: block;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #111;
	margin-bottom: 0.6rem;
	font-size: 0.95rem;
}
.semi-tl-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
	margin-bottom: 0.8rem;
}
.semi-tl-cap { color: #444; font-size: 0.95rem; line-height: 1.55; margin: 0; }
.semi-video-band { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30); }
.semi-tl-video { max-width: 880px; margin: 0 auto; }
.semi-tl-video .semi-embed {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	background: #000;
}
.semi-tl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Black cover that hides Vimeo's "More from …" end screen once the film finishes.
 * Added by assets/js/vimeo-endscreen.js; sits above the iframe and takes the
 * pointer events, so the recommendations can't be seen or clicked. */
.semi-video-cover {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.semi-video-cover.is-visible {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.35s ease, visibility 0s;
}
.semi-video-replay {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0.7rem 1.5rem;
	border: 2px solid var(--wp--preset--color--primary, #df3427);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.semi-video-replay:hover,
.semi-video-replay:focus-visible {
	background: var(--wp--preset--color--primary, #df3427);
}
.semi-video-replay svg { width: 1.15em; height: 1.15em; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
	.semi-video-cover,
	.semi-video-cover.is-visible { transition: none; }
}

@media (max-width: 781px) {
	.semi-video-replay { font-size: 0.78rem; padding: 0.55rem 1.15rem; }
}

@media (max-width: 781px) {
	.semi-tl::before { left: 7px; }
	.semi-tl-item {
		width: 100%;
		left: 0 !important;
		text-align: left !important;
		padding-left: 2.25rem;
		padding-right: 0;
	}
	.semi-tl-item::after { left: 0 !important; right: auto !important; }
}

/* ==========================================================================
   Featured-photo + thumbnail gallery (.semi-gallery) — Crawler / Hauling / Pipeline
   ========================================================================== */
.semi-gallery { margin: var(--wp--preset--spacing--30) auto 0; }
.semi-gallery-main { background: #282829; border-radius: 2px; overflow: hidden; }
.semi-gallery-main img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 3 / 2; object-fit: cover;
}
.semi-gallery-thumbs {
	display: flex; gap: 8px; margin-top: 8px;
	overflow-x: auto; scroll-snap-type: x proximity;
	padding-bottom: 6px; scrollbar-width: thin;
}
.semi-gallery-thumb {
	flex: 0 0 auto; width: 88px; height: 62px; padding: 0; margin: 0;
	border: 2px solid transparent; border-radius: 2px; overflow: hidden;
	cursor: pointer; background: #282829; scroll-snap-align: start;
	transition: border-color 0.15s ease, opacity 0.15s ease; opacity: 0.72;
}
.semi-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.semi-gallery-thumb:hover { opacity: 1; }
.semi-gallery-thumb.is-active { border-color: var(--wp--preset--color--primary); opacity: 1; }
.semi-gallery-thumbs::-webkit-scrollbar { height: 6px; }
.semi-gallery-thumbs::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; }
/* compact variant inside a crawler spec card */
.semi-spec-card .semi-gallery { margin-top: 0; }
.semi-spec-card .semi-gallery-thumb { width: 54px; height: 38px; }

/* ==========================================================================
   Crawler spec-card photo SLIDER (.semi-card-slider) — swipe / scroll one photo at a time
   ========================================================================== */
.semi-card-slider-wrap { position: relative; overflow: hidden; }
.semi-card-slider {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.semi-card-slider::-webkit-scrollbar { display: none; }
.semi-card-slide { flex: 0 0 100%; scroll-snap-align: start; }
.semi-card-slide img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 3 / 2; object-fit: cover; background: #282829;
}
.semi-slider-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 30px; height: 30px; border: 0; border-radius: 50%;
	background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 1.2rem; line-height: 1;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	opacity: 0; transition: opacity 0.15s ease; z-index: 2;
}
.semi-card-slider-wrap:hover .semi-slider-arrow { opacity: 1; }
.semi-slider-prev { left: 6px; }
.semi-slider-next { right: 6px; }
.semi-slider-dots {
	position: absolute; bottom: 8px; left: 0; right: 0;
	display: flex; gap: 5px; justify-content: center; z-index: 2; pointer-events: none;
}
.semi-slider-dots span {
	width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.55);
}
.semi-slider-dots span.is-active { background: var(--wp--preset--color--primary); }
@media (hover: none) {
	.semi-slider-arrow { opacity: 1; background: rgba(0, 0, 0, 0.32); }
}

/* ==========================================================================
   Parts — category card grid (.semi-parts-grid)
   ========================================================================== */
.semi-parts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--wp--preset--spacing--30);
	row-gap: var(--wp--preset--spacing--40);
}
.semi-parts-grid > * { margin-block: 0 !important; }
.semi-parts-card { margin: 0 !important; }
@media (max-width: 1024px) { .semi-parts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .semi-parts-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Parts — "manufacturers we carry" logo strip (.semi-mfr-strip)
   Kato featured on top; the rest in a centered wrapping row beneath.
   ========================================================================== */
.semi-mfr-strip {
	background: #ffffff;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	text-align: center;
}
.semi-mfr-title {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #9a9a9a;
	font-size: 0.95rem;
	margin: 0 0 2rem;
}
.semi-mfr-featured { margin-bottom: 2.5rem; }
.semi-mfr-featured img { height: 88px; width: auto; display: inline-block; }
.semi-mfr-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2.2rem 3.5rem;
	max-width: 1100px;
	margin: 0 auto;
}
.semi-mfr-row img { height: 44px; width: auto; object-fit: contain; display: block; }
@media (max-width: 600px) {
	.semi-mfr-featured img { height: 62px; }
	.semi-mfr-row { gap: 1.6rem 2.2rem; }
	.semi-mfr-row img { height: 34px; }
}

/* ==========================================================================
   MOBILE REVISIONS — 2026-06-24 (Jaclyn's phone review, actioned with Andrea)
   ========================================================================== */

/* --- Global rule (Andrea): on phones, body text spans 80% of the browser
   window, centered — leaving even ~10% gutters each side. DESKTOP UNCHANGED.
   max-width:80vw is self-limiting: it only reins in text that would otherwise
   run wider than 80vw, and leaves text already inside narrower panels/cards
   untouched. Scoped to page content (.wp-block-post-content) so the header and
   footer chrome are unaffected. Components that run their own width/alignment
   (equipment labels, pipeline captions, the About timeline, spec cards, forms)
   are explicitly opted back out so nothing shifts. --- */
@media (max-width: 781px) {
	.wp-block-post-content p,
	.wp-block-post-content h1,
	.wp-block-post-content h2,
	.wp-block-post-content h3,
	.wp-block-post-content h4,
	.wp-block-post-content h5,
	.wp-block-post-content h6,
	.wp-block-post-content ul,
	.wp-block-post-content ol,
	.wp-block-post-content blockquote {
		max-width: 80vw;
		margin-inline: auto;
	}
	/* Opt-outs — these components manage their own layout; leave them full width */
	.wp-block-post-content .semi-eq-label,
	.wp-block-post-content .semi-pipe-cap,
	.wp-block-post-content .semi-pipe-cap *,
	.wp-block-post-content .semi-timeline,
	.wp-block-post-content .semi-timeline *,
	.wp-block-post-content .semi-spec-card,
	.wp-block-post-content .semi-spec-card *,
	.wp-block-post-content .semi-mfr-strip *,
	.wp-block-post-content .gform_wrapper,
	.wp-block-post-content .gform_wrapper * {
		max-width: none;
		margin-inline: 0;
	}
}

/* --- Home: keep the "Sustainability" heading on ONE line on phones (Jaclyn).
   Shrink-to-fit with a viewport-scaled size + a nowrap guard. --- */
@media (max-width: 781px) {
	.semi-util-wind .semi-util-text h2 {
		white-space: nowrap;
		font-size: clamp(1.15rem, 5.5vw, 1.55rem);
	}
}

/* --- Home: 30px above the "Over the Road Steerable Pole Trailers" headline in
   the Our Equipment section on phones, so it doesn't crowd the Crawler Carriers
   text above it (Andrea). Mobile only; desktop spacing unchanged. --- */
@media (max-width: 781px) {
	.semi-mobile-gap-30 { margin-top: 30px !important; }
}

/* --- Footer testimonial blurb to 80% of the screen on phones (Andrea).
   Overrides the desktop 85%-of-column cap; mobile only. --- */
@media (max-width: 781px) {
	.semi-footer .wp-block-column:first-child p { max-width: 80vw; }
}

/* --- Scroll-to-top button (Andrea): 50px black square, fixed on the right,
   on every page. Visible by default (degrades gracefully if JS is stripped);
   the small script in footer.html hides it near the very top and reveals it
   once you scroll down. On phones it floats just above the sticky Call-Now bar. --- */
.semi-scrolltop {
	position: fixed;
	right: 16px;
	bottom: 20px;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #000000;
	color: #ffffff;
	cursor: pointer;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.15s ease;
}
.semi-scrolltop svg { width: 26px; height: 26px; fill: currentColor; }
.semi-scrolltop:hover { background: var(--wp--preset--color--primary); }
.semi-scrolltop.is-hidden { opacity: 0; visibility: hidden; }
@media (max-width: 781px) {
	/* sit just above the sticky Call-Now bar */
	.semi-scrolltop { bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   MOBILE REVISIONS — 2026-07-24 (Jaclyn's 2nd phone review: stop word-chopping)
   Several desktop side-by-side splits carry `is-not-stacked-on-mobile`, so they
   stay two-up on phones too — squeezing columns so narrow that headings snap
   mid-word ("EXPE / RIENC / E", "STEERABL / E", "UNDERSTA / ND", "SUSTAINABILI"
   clipped off-screen). Fix: let these stack on phones, the way the Parts page
   already does. DESKTOP IS UNTOUCHED — every rule here lives inside the
   max-width:781px query and the flags stay on the blocks, so >=782px renders
   exactly as before. --- */
@media (max-width: 781px) {
	/* Force these desktop two-up splits to stack (full-width columns) on phones */
	.semi-equal-cols.is-not-stacked-on-mobile,   /* interior-page intros (red + gray) + Home hero split */
	.semi-eq-cols.is-not-stacked-on-mobile,      /* Home: the 5 equipment categories */
	.semi-util-cols.is-not-stacked-on-mobile,    /* Home: Utility Support + Sustainability */
	.semi-mobile-stack {                         /* Home: Our Equipment + We Understand (no wrapper class of its own) */
		flex-direction: column !important;
	}
	.semi-equal-cols.is-not-stacked-on-mobile > .wp-block-column,
	.semi-eq-cols.is-not-stacked-on-mobile > .wp-block-column,
	.semi-util-cols.is-not-stacked-on-mobile > .wp-block-column,
	.semi-mobile-stack > .wp-block-column {
		flex-basis: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		/* border-box so the column's side padding lives INSIDE the 100% width —
		   otherwise the padding fell outside and the column overflowed the phone
		   viewport (~+64px), shoving centered text off-center (2026-07-25). */
		box-sizing: border-box !important;
	}
	/* Home hero split ONLY: show "Why Choose Us?" ABOVE the red experience panel (Jaclyn).
	   Higher specificity than the stack rule above, so it wins for this one block. */
	.semi-equal-cols.semi-mobile-reverse.is-not-stacked-on-mobile {
		flex-direction: column-reverse !important;
	}
	/* Spacing pass (Andrea, 2026-07-25): inside the Home hero split and the
	   Our-Equipment / We-Understand split, let text run to the column's padding
	   edge instead of taking the global 80vw inset on top of the column padding.
	   Result: equal left/right gutters (= the column's own padding) and the red
	   copy lines up with its black arrow, which sits at that same padding edge. */
	.wp-block-post-content .semi-equal-cols.is-not-stacked-on-mobile :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote),
	.wp-block-post-content .semi-mobile-stack :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote) {
		max-width: none !important;
		margin-inline: 0 !important;
	}
	/* We-Understand truck (Andrea): keep the left gap aligned with the copy, but let the
	   image's RIGHT edge kiss the screen edge — break out of the column's right padding only.
	   (The centering fix above would otherwise pull it in; this restores the original look.) */
	.semi-truck-wrap {
		width: auto !important;
		margin-right: calc(-1 * var(--wp--preset--spacing--30)) !important;
	}
}

/* ============================================================================
   QR landing pages (equipment stickers)  —  template: page-qr.html
   One page per crawler carrier. Reached ONLY by scanning a QR sticker on the
   machine itself, so this is built for a phone in a field, not a desk:
     · no site nav/footer — nothing to get lost in, one job per page
     · big tap targets (gloved thumbs), high contrast (direct sunlight)
     · unavailable manuals render as a muted, non-tappable "coming soon" card
       so the page reads as complete rather than broken
   ========================================================================== */
.semi-qr-page {
	max-width: 34rem;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--30) 1.25rem
	         calc(var(--wp--preset--spacing--30) + env(safe-area-inset-bottom, 0px));
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.semi-qr-logo { margin: 0 0 var(--wp--preset--spacing--30) !important; }
.semi-qr-logo img { display: block; }

/* Model name — the confirmation you scanned the right machine, so make it loud */
.semi-qr-model {
	margin: 0 0 var(--wp--preset--spacing--30) !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(30px, 8vw, 40px);
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast);
}
.semi-qr-model .semi-qr-make {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.42em;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.35em;
}

/* Button stack */
.semi-qr-links { width: 100%; display: flex; flex-direction: column; gap: 0.85rem; }
.semi-qr-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 4.25rem;          /* generous — thumbs, gloves, bumpy ground */
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 17px;
	line-height: 1.15;
	border: 0;
	transition: background-color 0.15s ease;
}
.semi-qr-btn:hover,
.semi-qr-btn:active { background: var(--wp--preset--color--contrast); color: #ffffff; }
.semi-qr-btn:focus-visible { outline: 3px solid var(--wp--preset--color--contrast); outline-offset: 3px; }

/* Not available yet — looks deliberate, not broken. Not a link, not tappable. */
.semi-qr-btn.is-soon {
	background: var(--wp--preset--color--light-gray);
	color: #8a8a8a;
	cursor: default;
	flex-direction: column;
	gap: 0.3rem;
	pointer-events: none;
}
.semi-qr-btn.is-soon .semi-qr-soon-note {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
	font-size: 13px;
}

/* Tap-to-call — a parts question in the field shouldn't dead-end at this page */
.semi-qr-help {
	margin: var(--wp--preset--spacing--30) 0 0 !important;
	font-size: 15px;
	color: var(--wp--preset--color--body);
}
.semi-qr-help a {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	white-space: nowrap;
}

/* --- /qr/ index — the browsable list of all 14 machines (noindex'd) --- */
.semi-qr-idx-intro {
	margin: 0 0 var(--wp--preset--spacing--30) !important;
	font-size: 15px;
	color: var(--wp--preset--color--body);
}
.semi-qr-index { width: 100%; display: flex; flex-direction: column; gap: 0.5rem; }
.semi-qr-idx {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3.4rem;
	padding: 0.8rem 1rem;
	background: var(--wp--preset--color--light-gray);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.semi-qr-idx:hover,
.semi-qr-idx:active { background: var(--wp--preset--color--primary); color: #ffffff; }
.semi-qr-idx-make {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.semi-qr-idx:hover .semi-qr-idx-make { color: #ffffff; }
.semi-qr-idx-model {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 19px;
	text-transform: uppercase;
}

/* --- Equipment: category-level "Download Spec Sheet" button (pole + track trailers) ---
   On phones the photo grid above it is inset to 92% (.semi-img-grid), so an unconstrained
   button block sits ~14px further left than the photos. Match the grid's inset so the
   button's left edge lines up with the photos. Desktop is unaffected. */
@media (max-width: 781px) {
	.semi-cat-download { max-width: 92%; margin-inline: auto; }
}