/* Michigan's Choice - shared city hub page styles.
   Class-based, not ID-based, so these rules survive page duplication:
   Elementor rewrites element IDs when a page is copied, but CSS classes carry over.
   Apply .mcs-cta to the closing call-to-action section on every city page. */

/* CTA heading: keep it on a single line across the whole desktop range.
   The column is width-constrained by design (text sits left of the background
   focal point), so at 48px the heading wraps below ~1280px. This scales the
   heading down just enough to stay on one row, and never above the 48px the
   rest of the page uses. Ratio derived from the measured single-line width of
   "Ready to Schedule Your Inspection?" (771px at 48px) against the available
   column width at each breakpoint. */
@media (min-width: 1025px) {
	.mcs-cta .elementor-widget-heading .elementor-heading-title {
		font-size: clamp(40px, 5px + 3.5vw, 48px);
		text-wrap: balance;
	}
}

/* Below the desktop breakpoint the column goes full width and the heading is
   allowed to wrap normally - forcing one line on a phone would shrink it to
   an unreadable size. */

/* CTA action row: keep the buttons next to each other rather than spread
   across a full-width grid. The container is flex, this just stops either
   button from stretching if a preset tries to. */
.mcs-cta-actions {
	width: auto;
}

.mcs-cta-actions > .elementor-widget-button {
	width: auto;
	flex: 0 0 auto;
}

/* Local Resources: the external link sits inside the intro text block, so it
   needs to read as a link without competing with the card heading. */
.mcs-res-link {
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.4;
}

.mcs-res-link a {
	color: #6C9F00; /* darkened from the #88CB00 brand accent to clear 4.5:1 on white */
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(108, 159, 0, 0.35);
	padding-bottom: 1px;
	transition: color 0.15s ease, border-color 0.15s ease;
	word-break: break-word;
}

/* Outbound arrow drawn from CSS, not typed into the content. A literal U+2197
   in the markup gets swapped by WordPress's wp-emoji script for an <img> hosted
   on s.w.org, which costs an external request per link and renders at emoji size.
   CSS generated content is not scanned by that script. */
.mcs-res-link a::after {
	content: "\2197";
	display: inline-block;
	margin-left: 4px;
	font-size: 0.9em;
	text-decoration: none;
}

.mcs-res-link a:hover,
.mcs-res-link a:focus-visible {
	color: #17202A;
	border-bottom-color: #17202A;
}

.mcs-res-link a:focus-visible {
	outline: 2px solid #6C9F00;
	outline-offset: 3px;
}


/* Policy 04 S36: stacked mobile CTAs share one width, set by the widest
   button (Book Consultation), so the pair reads as a single control group.
   The row shrinks to its widest child rather than spanning full width, which
   keeps S35 (do not make every button full width) satisfied. Desktop is
   untouched: this applies only below 768px where the row is already column. */
@media (max-width:767px){
.mcs-btnrow{width:fit-content;max-width:100%;align-items:stretch;}
.mcs-btnrow > .elementor-widget-button{width:100%;max-width:100%;}
.mcs-btnrow .elementor-button{width:100%;display:flex;justify-content:center;text-align:center;}
}


/* Policy 04 SS10-14, S56: mobile content order for image/text sections.
   Elementor boxed containers render an .e-con-inner wrapper, so the columns are
   grandchildren of the section - descendant selectors are required here.
   Desktop keeps its approved IMAGE|TEXT and TEXT|IMAGE alternation untouched.
   At mobile the text column is flattened with display:contents so its heading,
   body and supporting content become siblings of the image column, giving the
   required HEADING -> IMAGE -> BODY -> SUPPORTING -> CTA sequence.
   These text columns carry no padding, background or margin, so removing their
   box at mobile has no visual cost. */
@media (max-width:767px){
.mcs-imgtext > .e-con-inner{display:flex;flex-direction:column;}
.mcs-imgtext .mcs-textcol{display:contents;}
.mcs-imgtext .mcs-textcol > *{order:3;}
.mcs-imgtext .mcs-textcol > *:first-child{order:1;}
.mcs-imgtext .mcs-imgcol{order:2;}
}


/* Policy 04 S2/S59: desktop keeps its approved two-row card titles and card
   spacing. These overrides apply below 768px only, where the card is full width
   and the forced break/extra spacing are not wanted. */
@media (max-width:767px){
.mcs-cardtitle br{display:none;}
.mcs-cardtitle .elementor-image-box-title br{display:none;}
.mcs-cardtitle .elementor-heading-title{margin:0;}
.mcs-cardtitle + .elementor-widget-divider{--divider-gap:0px;margin-top:0;margin-bottom:0;}
.mcs-cardtitle + .elementor-widget-divider .elementor-divider{padding-block-start:0;padding-block-end:0;}
}


/* ============================================================================
   POLICY 02 - CITY HUB HEADING ACCENT
   The accent phrase in a hub heading is brand green #88CB00; the rest of the
   heading stays black. Elementor only colors .elementor-heading-title, never
   the span, so neither rule below needs !important.

   RULE (Policy 02, 2026-09-11): every future city-hub heading accent phrase
   MUST carry the semantic class below, set on the span inside the Elementor
   heading widget's Title field:
       Inspection Services Available in <span class="mcs-heading-accent">[City]</span>
   The class lives in the widget's content, so it survives Elementor Duplicate,
   Save-as-Template and Import, all of which rewrite element IDs. New master or
   template work must not add ID-dependent heading styling when this class is
   available. The Master City Hub (Eastpointe, post 2647) carries the class on
   all six accent headings.
   ============================================================================ */
.elementor-widget-heading .elementor-heading-title .mcs-heading-accent {
	color: #88CB00;
}

/* LEGACY COMPATIBILITY ONLY - the 42 city hubs rolled out before Policy 02
   carry plain <span> accents with no class. They were cloned at the data level,
   so these six heading widgets share the same element IDs on all 42 hubs and on
   no other page; scoping by ID is the narrowest selector that reaches them
   without a generic .elementor-heading-title span rule leaking into unrelated
   headings. Do not extend this list for new pages - use .mcs-heading-accent. */
.elementor-element-70c15c5 .elementor-heading-title > span,
.elementor-element-fbaa46a .elementor-heading-title > span,
.elementor-element-3b802b6 .elementor-heading-title > span,
.elementor-element-4009599 .elementor-heading-title > span,
.elementor-element-1b73a8f .elementor-heading-title > span,
.elementor-element-035451b .elementor-heading-title > span {
	color: #88CB00;
}