/* ==========================================================================
   MM Roofing — Hello Elementor migration fixes (replaces JupiterX theme-wrapper rules)
   ========================================================================== */

/* JupiterX rendered the Elementor header inside .jupiterx-header, which the legacy CSS set to
   position:absolute; width:100%. That is what made the header float over the hero (transparent
   band, inset white bar). Hello Elementor wraps the Theme Builder header in .elementor-location-header
   in normal flow, so reproduce the same behaviour there and lift it above the page so the
   hover mega-menu panels (.roofing-menu etc.) are not painted behind the hero section. */
.elementor-location-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}
.admin-bar .elementor-location-header { top: 32px; }

/* Mega-menu panels are absolutely positioned inside the header; make sure nothing clips them. */
.elementor-location-header,
.elementor-location-header .main-header,
.elementor-location-header .mega-section { overflow: visible; }

/* The legacy CSS targets JupiterX's Raven nav-menu item class; Elementor Pro's Nav Menu uses .elementor-item */
.main-header li a.elementor-item { font-size: 16px !important; font-weight: 600; }

/* Mobile menu (converted from the Unlimited Elements full-screen menu): green round hamburger like production */
.mm-mobile-menu .elementor-menu-toggle {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #3FAA6C;
	color: #fff;
	margin-left: auto;
}
.mm-mobile-menu .elementor-menu-toggle:hover,
.mm-mobile-menu .elementor-menu-toggle.elementor-active { background: #294932; color: #fff; }
.mm-mobile-menu .elementor-nav-menu--dropdown { background: #fff; border-radius: 12px; margin-top: 8px; box-shadow: rgba(100,100,111,.2) 0 7px 29px 0; }
.mm-mobile-menu .elementor-nav-menu--dropdown a { padding: 12px 20px; color: #151313; }
.mm-mobile-menu .elementor-nav-menu--dropdown .sub-menu a { padding-left: 36px; font-size: 15px; }

/* Rebuilt JetElements timeline (Roof Insurance Claims page): numbered steps with a vertical line.
   Tokens from the old widget: line 12px #F0ECEC, point 80px #CCCCCC / white 30px bold, cards 1px #0000001A radius 19px */
.mm-timeline { position: relative; padding-left: 0; }
.mm-timeline > .e-con-inner {  }
.mm-timeline.e-con:not(.elementor-hidden-desktop):not(.elementor-hidden-laptop):not(.elementor-hidden-tablet):not(.elementor-hidden-mobile),
.mm-timeline.e-con { flex-direction: column; gap: 40px; }
.mm-timeline-item { position: relative; display: flex; flex-direction: row; align-items: flex-start; gap: 40px; padding-left: 0; }
.mm-timeline-item .elementor-widget-heading.mm-timeline-num,
.mm-timeline-num { flex: 0 0 80px; width: 80px; }
.mm-timeline-num .elementor-heading-title {
	width: 80px; height: 80px; border-radius: 50%; background: #CCCCCC; color: #FFFFFF;
	font-size: 30px !important; font-weight: 700; line-height: 80px !important; text-align: center; margin: 0;
	position: relative; z-index: 2;
}
.mm-timeline-item:first-child .mm-timeline-num .elementor-heading-title { background: #3FAA6C; }
.mm-timeline-item:not(:last-child)::before {
	content: ""; position: absolute; left: 34px; top: 80px; bottom: -40px; width: 12px; background: #F0ECEC; z-index: 1;
}
.mm-timeline-item .elementor-widget-icon-box { flex: 1 1 auto; }
.mm-timeline-item .elementor-widget-icon-box .elementor-widget-container {
	border: 1px solid rgba(0,0,0,.1); border-radius: 19px; padding: 30px; background: #fff;
}
.mm-timeline-item .elementor-icon-box-title { font-size: 30px; color: #151313; margin-bottom: 10px; }
.mm-timeline-item .elementor-icon-box-description { font-size: 20px; color: #151313; }
@media (max-width: 1036px) {
	.mm-timeline-num, .mm-timeline-item .elementor-widget-heading.mm-timeline-num { flex-basis: 60px; width: 60px; }
	.mm-timeline-num .elementor-heading-title { width: 60px; height: 60px; line-height: 60px !important; font-size: 24px !important; }
	.mm-timeline-item:not(:last-child)::before { left: 24px; top: 60px; }
	.mm-timeline-item .elementor-icon-box-title { font-size: 24px; }
	.mm-timeline-item .elementor-icon-box-description { font-size: 17px; }
}
@media (max-width: 767px) {
	.mm-timeline-item { gap: 20px; }
	.mm-timeline-num, .mm-timeline-item .elementor-widget-heading.mm-timeline-num { flex-basis: 40px; width: 40px; }
	.mm-timeline-num .elementor-heading-title { width: 40px; height: 40px; line-height: 40px !important; font-size: 18px !important; }
	.mm-timeline-item:not(:last-child)::before { left: 14px; top: 40px; width: 8px; }
}

/* Rebuilt blog table (post 8583) — base look; the "Responsive Blog Tables" rules in legacy-customizer.css add the rest */
.mm-blog-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.mm-blog-table th, .mm-blog-table td { border: 1px solid #E0E0E0; padding: 12px 14px; text-align: left; vertical-align: top; }
.mm-blog-table thead th { background: #294932; color: #fff; font-weight: 600; }

/* Blog category filter pills (Elementor Pro Taxonomy Filter replacing the Raven "sortable" tabs) */
.mm-blog-filter .e-filter { gap: 10px; flex-wrap: wrap; }
.mm-blog-filter .e-filter-item {
	background: #161616; color: #fff; border-radius: 30px; padding: 10px 22px; font-size: 15px; line-height: 1.2;
	font-family: "Satoshi", sans-serif; transition: background .2s ease;
}
.mm-blog-filter .e-filter-item:hover,
.mm-blog-filter .e-filter-item[aria-pressed="true"] { background: #3FAA6C; color: #fff; }

/* Hide the "Uncategorized" pill in blog filters */
.mm-blog-filter .e-filter-item[data-filter="uncategorized"] { display: none; }

/* Desktop nav: dropdown chevrons on the items that open mega-menu panels (Raven's nav menu drew these) */
.mm-desktop-menu .elementor-nav-menu--main li.roofing > a::after,
.mm-desktop-menu .elementor-nav-menu--main li.siding > a::after,
.mm-desktop-menu .elementor-nav-menu--main li.areas > a::after,
.mm-desktop-menu .elementor-nav-menu--main li.whyus > a::after,
.mm-desktop-menu .elementor-nav-menu--main li.pay-roof > a::after {
	content: "\f078";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 8px;
	margin-left: 6px;
	vertical-align: middle;
	opacity: .8;
	/* Reset the absolute strip geometry that Elementor's underline pointer and the legacy
	   Vector-4.png rule put on this same pseudo — otherwise the chevron renders at the
	   bottom-left, i.e. before the label instead of after it. */
	position: static;
	display: inline-block;
	width: auto;
	height: auto;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	background: none;
}

/* "Understand The Terms" glossary carousel (insurance-slider): numeral + term on top, definition below,
   as the original Unlimited Elements card did (h4.slide-number, h4.slide-title, then p) */
.insurance-slider .elementor-testimonial { display: flex; flex-direction: column; }
.insurance-slider .elementor-testimonial__footer { order: -1; margin-bottom: 18px; display: block; }
.insurance-slider .elementor-testimonial__cite { display: flex; flex-direction: column; }
.insurance-slider .elementor-testimonial__title { order: -1; font-size: 40px !important; line-height: 1 !important; font-weight: 700 !important; color: #3FAA6C !important; margin-bottom: 12px; display: block; }
.insurance-slider .elementor-testimonial__name { font-size: 26px !important; line-height: 1.2 !important; font-weight: 600 !important; color: #151313 !important; display: block; }
.insurance-slider .elementor-testimonial__content { order: 1; }
.insurance-slider .elementor-testimonial__text { font-size: 17px; line-height: 1.6; }

/* Blog post body: links were styled by JupiterX's content CSS; Hello Elementor resets them */
.elementor-widget-theme-post-content a:not(.elementor-button):not(.wp-block-button__link) {
	color: #3FAA6C;
	text-decoration: underline;
	font-size: inherit;
}
.elementor-widget-theme-post-content a:not(.elementor-button):hover { color: #294932; }
/* Blog tables: centred cells with brand-tinted zebra rows, like production */
.elementor-widget-theme-post-content table th,
.elementor-widget-theme-post-content table td,
.mm-blog-table th, .mm-blog-table td { text-align: center; }
.elementor-widget-theme-post-content table tbody tr:nth-child(even) td,
.mm-blog-table tbody tr:nth-child(even) td { background: #EAF7EF; }

/* Storm-damage announcement bar (replaces the Announcer plugin) */
.mm-storm-banner {
	position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
	display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
	min-height: 52px; padding: 8px 56px 8px 20px; background: #D61F1F; color: #fff;
	font-family: "Satoshi", sans-serif; font-size: 16px; line-height: 1.3;
}
.mm-storm-banner strong { font-weight: 700; }
.mm-storm-banner .mm-storm-banner__btn {
	display: inline-block; background: #fff; color: #000; border-radius: 24px; padding: 8px 18px;
	font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap;
}
.mm-storm-banner .mm-storm-banner__btn:hover { background: #F1EFEB; color: #000; }
.mm-storm-banner .mm-storm-banner__close {
	position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
	background: transparent; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
body.mm-has-storm-banner .elementor-location-header { top: var(--mm-banner-h, 52px); }
body.mm-has-storm-banner.admin-bar .elementor-location-header { top: calc(var(--mm-banner-h, 52px) + 32px); }
body.mm-has-storm-banner.admin-bar .mm-storm-banner { top: 32px; }
@media (max-width: 767px) { .mm-storm-banner { font-size: 14px; gap: 10px; padding-right: 48px; } }

/* Production kept the header in normal flow on single posts/works, archives, search and 404 (only pages/landing
   pages had heroes designed to sit under the floating header). Match that. */
body.single .elementor-location-header,
body.archive .elementor-location-header,
body.search .elementor-location-header,
body.error404 .elementor-location-header { position: relative; z-index: 100; background: #fff; }
body.mm-has-storm-banner.single .elementor-location-header,
body.mm-has-storm-banner.archive .elementor-location-header,
body.mm-has-storm-banner.search .elementor-location-header,
body.mm-has-storm-banner.error404 .elementor-location-header { margin-top: var(--mm-banner-h, 52px); }

/* In-flow header (single/archive/search/404): the banner offset must come from margin only, never `top` */
body.single .elementor-location-header,
body.archive .elementor-location-header,
body.search .elementor-location-header,
body.error404 .elementor-location-header { top: auto !important; }

/* Single post sidebar "Recent Post" list: titles only, like the original Raven posts widget */
.recent-posts-list .elementor-widget-theme-post-featured-image,
.recent-posts-list .elementor-widget-button { display: none; }
.recent-posts-list .e-loop-item { padding: 0 0 14px; border-bottom: 1px solid rgba(0,0,0,.08); }
.recent-posts-list .elementor-widget-theme-post-title .elementor-heading-title { font-size: 18px !important; line-height: 1.35 !important; }
.recent-posts-list .elementor-widget-theme-post-title a { color: #151313; text-decoration: none; }
.recent-posts-list .elementor-widget-theme-post-title a:hover { color: #3FAA6C; }


/* ==========================================================================
   Mega menu + homepage visual fixes
   ========================================================================== */

/* Desktop nav hover: no underline bar — hover stays color-only (green, set on the widget).
   The bar is Elementor's "underline" pointer; its pseudo-elements are shared with the
   chevron glyphs above, so only the bar's background is removed (not the pseudo itself). */
.mm-desktop-menu .e--pointer-underline .elementor-item:before,
.mm-desktop-menu .e--pointer-underline .elementor-item:after {
	background: transparent !important;
}
.mm-desktop-menu .elementor-nav-menu--main .elementor-item:hover,
.mm-desktop-menu .elementor-nav-menu--main .elementor-item:focus,
.mm-desktop-menu .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: #3FAA6C !important;
}

/* Payment Options panel: same base positioning as the other mega panels
   (the legacy CSS only ever gave it display:none, so it rendered in-flow, way off) */
.mega-section .pay-menu {
	position: absolute !important;
	top: 0;
}

/* Sticky (scrolled) state: pin the mega section directly below the real header.
   site.js measures the header bottom into --mm-mega-top; the legacy hardcoded
   top:50px / top:100px values made panels cover the header. */
.sticky_mega_section {
	top: var(--mm-mega-top, 90px) !important;
}
.sticky_mega_section .roofing-menu,
.sticky_mega_section .siding-windows-menu,
.sticky_mega_section .areas-menu,
.sticky_mega_section .whyus-menu,
.sticky_mega_section .pay-menu {
	top: 0 !important;
}

/* Recent-work cards, arrows and pagination now live in assets/css/portfolio.css */

/* Blog cards ("M&M Roofing News" loop grid + Related Posts): uniform image size + cohesive card */
.sortable_post .hover-scale-down img,
.blog_single_related .hover-scale-down img {
	width: 100%;
	height: 260px !important;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}
.sortable_post .services-excerpt,
.blog_single_related .services-excerpt { margin-top: 16px; }
.sortable_post .services-excerpt .elementor-heading-title,
.blog_single_related .services-excerpt .elementor-heading-title {
	font-size: 20px !important;
	line-height: 1.45 !important;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.sortable_post .no-padding .elementor-button,
.blog_single_related .no-padding .elementor-button {
	background: #161616;
	color: #fff;
	border-radius: 30px;
	padding: 10px 24px !important;
	font-size: 15px !important;
	line-height: 1.2;
	transition: background .2s ease;
}
.sortable_post .no-padding .elementor-button:hover,
.blog_single_related .no-padding .elementor-button:hover { background: #3FAA6C; color: #fff; }

/* Site-wide content width: the kit's 1639px boxed width ran nearly edge-to-edge; use 1320px
   everywhere. Deliberately lower specificity than Elementor's per-element width rules, so
   pages with explicit widths (Houston's 1320px containers, the header's 812px mega panels,
   the homepage's 800px section) keep their own values. */
body .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1320px;
}
body .e-con { --container-max-width: 1320px; }

/* Header bar stays at the original kit width so logo + nav + CTA fit on one row.
   Scoped to .main-header only — a blanket header rule was stretching mega panels to 1639px. */
.elementor-location-header .main-header.elementor-section-boxed > .elementor-container {
	max-width: 1639px;
}
.elementor-location-header .main-header .elementor-widget-wrap {
	flex-wrap: nowrap;
}

/* Mega-menu panels stay the original compact card width */
.elementor-location-header .mega-section.elementor-section-boxed > .elementor-container,
.mega-section .roofing-menu > .elementor-container,
.mega-section .siding-windows-menu > .elementor-container,
.mega-section .areas-menu > .elementor-container,
.mega-section .whyus-menu > .elementor-container,
.mega-section .pay-menu > .elementor-container {
	max-width: 812px;
}

/* Recent-work section, unified site-wide: one soft beige band with normalized spacing.
   (Replaces the homepage's half-white/half-beige gradient and matches the beige already
   used on the 36 other pages that have this section.) */
.portfolio-section {
	background-image: none !important;
	background-color: #F1EFEB !important;
	padding-top: 50px !important;
	padding-bottom: 40px !important;
	margin-top: 0 !important;
}


/* Blog cards: equal-height cards with the Read More buttons aligned along the bottom
   (structure: .e-loop-item > .e-con > .e-con-inner > image / title / button) */
.sortable_post .e-loop-item,
.blog_single_related .e-loop-item { height: 100%; }
.sortable_post .e-loop-item > .e-con,
.blog_single_related .e-loop-item > .e-con { height: 100%; }
.sortable_post .e-loop-item .e-con-inner,
.blog_single_related .e-loop-item .e-con-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.sortable_post .e-con-inner > .elementor-widget-button,
.blog_single_related .e-con-inner > .elementor-widget-button {
	margin-top: auto;
	padding-top: 16px;
}
.sortable_post .services-excerpt,
.blog_single_related .services-excerpt { margin-bottom: 4px; }

/* Featured Post loop (template 13203): mint panel + green arrow CTA.
   Scoped to .elementor-13203 — the Featured Posts section also contains the
   regular blog-loop cards, which must keep homepage card styles. */
.elementor-13203.e-loop-item > .e-con {
	background: #F1F9F5;
	border-radius: 20px;
	overflow: hidden;
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
}
.elementor-13203 > .e-con > .e-con-inner {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	padding: 0 !important;
	gap: 0;
}
.elementor-13203 > .e-con > .e-con-inner > .e-con {
	width: 50%;
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
}
.elementor-13203 > .e-con > .e-con-inner > .e-con.e-con-boxed > .e-con-inner {
	padding: 0;
	height: 100%;
}
.elementor-13203 .elementor-widget-theme-post-featured-image,
.elementor-13203 .elementor-widget-theme-post-featured-image .elementor-widget-container,
.elementor-13203 .elementor-widget-theme-post-featured-image a {
	display: block;
	height: 100%;
}
.elementor-13203 .elementor-widget-theme-post-featured-image img {
	width: 100%;
	height: 100%;
	min-height: 420px;
	object-fit: cover;
	border-radius: 20px;
	display: block;
}
.elementor-13203 > .e-con > .e-con-inner > .e-con:last-child > .e-con-inner {
	padding: 48px 56px !important;
	justify-content: center;
	display: flex;
	flex-direction: column;
}
.elementor-13203 .featured-meta .elementor-icon-list-icon,
.elementor-13203 .elementor-post-info .elementor-icon {
	display: none;
}
.elementor-13203 .featured-meta .elementor-icon-list-items,
.elementor-13203 .elementor-post-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.elementor-13203 .elementor-post-info__item--type-terms,
.elementor-13203 .elementor-post-info__terms-list,
.elementor-13203 .elementor-post-info__terms-list-item {
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #151313;
	text-decoration: none;
}
.elementor-13203 .elementor-post-info__item--type-date,
.elementor-13203 .elementor-post-info__item--type-date time {
	color: #B1B1B1;
	font-size: 14px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}
.elementor-13203 .elementor-widget-theme-post-title .elementor-heading-title {
	font-size: clamp(24px, 1.6vw + 14px, 38px) !important;
	font-weight: 500;
	line-height: 1.2 !important;
	color: #151313;
}
.elementor-13203 .elementor-widget-theme-post-title a {
	color: inherit;
	text-decoration: none;
}
.elementor-13203 .elementor-widget-theme-post-title a:hover { color: #3FAA6C; }
.elementor-13203 .content_post { display: none; }
.elementor-13203 .elementor-widget-button .elementor-button {
	background: #3FAA6C;
	color: #fff;
	border-radius: 10px;
	padding: 19px 25px;
	font-family: "Satoshi", Sans-serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	transition: background .2s ease;
}
.elementor-13203 .elementor-widget-button .elementor-button:hover {
	background: #111111;
	color: #fff;
}
.elementor-13203 .elementor-widget-button .elementor-button-content-wrapper {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
}
.elementor-13203 .elementor-widget-button .elementor-button-text::after {
	content: "\f061";
	font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.8em;
	line-height: 1;
	margin-left: 14px;
}
@media (max-width: 1024px) {
	.elementor-13203 > .e-con > .e-con-inner {
		flex-direction: column;
	}
	.elementor-13203 > .e-con > .e-con-inner > .e-con {
		width: 100%;
	}
	.elementor-13203 .elementor-widget-theme-post-featured-image img {
		min-height: 0;
		height: 420px;
	}
	.elementor-13203 > .e-con > .e-con-inner > .e-con:last-child > .e-con-inner {
		padding: 28px 24px 32px !important;
	}
}
@media (max-width: 767px) {
	.elementor-13203 .elementor-widget-theme-post-featured-image img {
		height: auto;
		min-height: 220px;
	}
	.elementor-13203 .elementor-widget-button .elementor-button {
		font-size: 16px;
		padding: 14px 20px;
	}
}


/* ==========================================================================
   Site-wide type scale + mobile fixes
   ========================================================================== */

/* Golden-ratio type scale (each step ~ phi^0.5 = 1.272), replacing the kit's oversized
   70/60/50/30 heading ladder. Same selectors as the kit CSS (post-5.css); this file loads
   later so these win without !important, while widgets with explicit per-element sizes
   keep their own values. clamp() covers the laptop/tablet/mobile breakpoints in one rule. */
.elementor-kit-5 { font-size: clamp(15px, 1.2vw + 8px, 18px); }
.elementor-kit-5 h1 { font-size: clamp(32px, 2.2vw + 20px, 48px); line-height: 1.15em; }
.elementor-kit-5 h2 { font-size: clamp(28px, 1.4vw + 20px, 38px); line-height: 1.2em; }
.elementor-kit-5 h3 { font-size: clamp(24px, 0.85vw + 19px, 30px); line-height: 1.25em; }
.elementor-kit-5 h4 { font-size: clamp(19px, 0.7vw + 15px, 24px); line-height: 1.35em; }
.elementor-kit-5 h5 { font-size: clamp(17px, 0.4vw + 15px, 20px); line-height: 1.4em; }

/* Breathing room between headings and the text that follows them (was very cramped) */
.elementor-widget-heading .elementor-heading-title { margin-bottom: 0.4em; }

/* First page section: clear the floating header. Houston city pages are excluded. */
body:not(.single):not(.archive):not(.search):not(.error404):not(.elementor-page-1346) [data-elementor-type="wp-page"] > .elementor-section:first-child:not(.section-zero),
body:not(.single):not(.archive):not(.search):not(.error404):not(.elementor-page-1346) [data-elementor-type="wp-page"] > .e-con:first-child {
	padding-top: 140px !important;
}
body.mm-has-storm-banner:not(.single):not(.archive):not(.search):not(.error404):not(.elementor-page-1346) [data-elementor-type="wp-page"] > .elementor-section:first-child:not(.section-zero),
body.mm-has-storm-banner:not(.single):not(.archive):not(.search):not(.error404):not(.elementor-page-1346) [data-elementor-type="wp-page"] > .e-con:first-child {
	padding-top: calc(var(--mm-banner-h, 52px) + 140px) !important;
}

/* ==========================================================================
   Hero CTAs on one row + vertical balance (.section-zero, not Houston)
   ========================================================================== */

/* Only auto-width widgets (CTAs, compact review badge) share a wrap row.
   Headings and full-width copy still take the whole column — this is what
   was stretching the city-page 4.8 / stars card. */
body:not(.elementor-page-1346) .section-zero .elementor-inner-section:first-child .elementor-widget-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 12px;
	row-gap: 12px;
}
body:not(.elementor-page-1346) .section-zero .elementor-inner-section:first-child .elementor-widget-wrap > * {
	flex: 1 0 100%;
}
body:not(.elementor-page-1346) .section-zero .elementor-inner-section:first-child .elementor-widget-wrap > .elementor-widget__width-auto,
body:not(.elementor-page-1346) .section-zero .elementor-inner-section:first-child .elementor-widget-wrap > .elementor-widget-button.elementor-widget__width-auto {
	flex: 0 1 auto;
	width: auto !important;
	max-width: none;
}
body:not(.elementor-page-1346) .section-zero .elementor-inner-section:first-child .elementor-widget-button.elementor-widget__width-auto + .elementor-widget-spacer {
	flex: 0 0 0;
	width: 0 !important;
	height: 0 !important;
	min-height: 0 !important;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}
body:not(.elementor-page-1346) .section-zero .elementor-inner-section:first-child .elementor-widget-button.elementor-widget__width-auto .elementor-button {
	white-space: nowrap;
}

/* Residential Roofing only: Call Now used 50px top margin vs 30px on Get A Free Inspection */
.elementor-3663 .elementor-element.elementor-element-62fd3d6 > .elementor-widget-container {
	margin-top: 30px;
}

/* Hero padding/height come from Elementor (Residential Roofing as the site-wide
   frame). Only add the storm-banner offset here so those values still clear the header. */
body.mm-has-storm-banner:not(.elementor-page-1346) .section-zero {
	padding-top: calc(var(--mm-banner-h, 52px) + 210px) !important;
}
@media (max-width: 1024px) {
	body.mm-has-storm-banner:not(.elementor-page-1346) .section-zero {
		padding-top: calc(var(--mm-banner-h, 52px) + 160px) !important;
	}
}
@media (max-width: 767px) {
	body.mm-has-storm-banner:not(.elementor-page-1346) .section-zero {
		padding-top: calc(var(--mm-banner-h, 52px) + 110px) !important;
	}
}

/* Tablet + phone: keep CTAs readable; do not override Elementor hero padding. */
@media (max-width: 1036px) {
	body:not(.elementor-page-1346) .section-zero {
		overflow-x: hidden;
	}
	body:not(.elementor-page-1346) .section-zero .elementor-heading-title {
		overflow-wrap: anywhere;
		word-break: break-word;
	}
	body:not(.elementor-page-1346) .section-zero .elementor-inner-section:first-child .elementor-widget-button.elementor-widget__width-auto {
		flex: 1 1 calc(50% - 8px);
		max-width: calc(50% - 6px);
		min-width: 0;
	}
	body:not(.elementor-page-1346) .section-zero .elementor-inner-section:first-child .elementor-widget-button.elementor-widget__width-auto .elementor-button {
		width: 100%;
		justify-content: center;
		padding: 10px 8px;
		font-size: 12px !important;
		white-space: normal;
		line-height: 1.2;
		text-align: center;
	}
	body:not(.elementor-page-1346) .section-zero .elementor-inner-section:first-child .elementor-widget-button.elementor-widget__width-auto .elementor-button-icon {
		display: none;
	}

	/* Trust stats: three equal columns on one row (beat Elementor's 50% mobile stack) */
	body:not(.elementor-page-1346) .section-zero .elementor-inner-section:has(.elementor-widget-image-box) > .elementor-container {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: stretch;
		gap: 6px;
	}
	body:not(.elementor-page-1346) .section-zero .elementor-inner-section:has(.elementor-widget-image-box) .elementor-column {
		width: 33.333% !important;
		flex: 1 1 0 !important;
		min-width: 0 !important;
		max-width: 33.333% !important;
	}
	body:not(.elementor-page-1346) .section-zero .elementor-inner-section:has(.elementor-widget-image-box) .elementor-image-box-wrapper {
		text-align: center;
	}
	body:not(.elementor-page-1346) .section-zero .elementor-inner-section:has(.elementor-widget-image-box) .elementor-image-box-img {
		margin: 0 auto 6px;
	}
	body:not(.elementor-page-1346) .section-zero .elementor-inner-section:has(.elementor-widget-image-box) .elementor-image-box-img img {
		width: 32px !important;
		height: 32px !important;
		max-width: 32px;
		object-fit: contain;
	}
	body:not(.elementor-page-1346) .section-zero .elementor-inner-section:has(.elementor-widget-image-box) .elementor-image-box-title {
		font-size: 11px !important;
		line-height: 1.2 !important;
		font-weight: 600;
		margin: 0;
	}
	body:not(.elementor-page-1346) .section-zero .elementor-inner-section:has(.elementor-widget-image-box) .elementor-image-box-description {
		display: none;
	}
}

/* Trust row: hide “Over 800+ 5-Star Google Reviews” on phones so Years + Warranty sit side by side. */
@media (max-width: 767px) {
	.elementor-column.mm-trust-google,
	.elementor-column:has(.elementor-widget-icon-list.m-list),
	.elementor-column:has(img[src*="Group-1577706639"]),
	.elementor-column:has(img[src*="icon-22.svg"]) {
		display: none !important;
	}
}

/* Desktop nav has 8 items since "Learning Center" was added (Sept 2026). At 1025–1599px the default
   20px item padding pushed the menu onto a second row, which also breaks the fixed header-offset
   rules above (the first section clears a one-row header). Tighten spacing so it stays one row. */
@media (min-width: 1025px) and (max-width: 1599px) {
	.mm-desktop-menu .elementor-nav-menu--main .elementor-item { padding-left: 11px !important; padding-right: 11px !important; }
	.main-header li a.elementor-item { font-size: 15px !important; }
}
@media (min-width: 1025px) and (max-width: 1439px) {
	.mm-desktop-menu .elementor-nav-menu--main .elementor-item { padding-left: 8px !important; padding-right: 8px !important; }
	.main-header li a.elementor-item { font-size: 14px !important; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
	.mm-desktop-menu .elementor-nav-menu--main .elementor-item { padding-left: 5px !important; padding-right: 5px !important; }
	.main-header li a.elementor-item { font-size: 12.5px !important; }
	/* style.css (legacy) adds `margin-right: 22px !important` to .main-header li in this range. */
	.main-header .mm-desktop-menu li { margin-right: 0 !important; }
	.main-header .elementor-widget-image a img { max-width: 118px !important; }
}
@media (min-width: 1025px) and (max-width: 1079px) {
	.mm-desktop-menu .elementor-nav-menu--main .elementor-item { padding-left: 4px !important; padding-right: 4px !important; }
	.main-header li a.elementor-item { font-size: 12px !important; }
	.main-header .elementor-widget-image a img { max-width: 108px !important; }
}