/* Code 3 / WashCommand — shared front-end UI (lightbox + tool page repairs) */

/* ---------------------------------------------------------------
 * Photo lightbox
 * --------------------------------------------------------------- */

.c3-zoom-cursor { cursor: zoom-in; }

html.c3lb-lock,
html.c3lb-lock body { overflow: hidden; }

.c3lb {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	background: #06080b;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.c3lb.is-open { display: block; }

.c3lb-stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: none;
}

.c3lb-img {
	max-width: 100vw;
	max-height: 100vh;
	object-fit: contain;
	transform-origin: center center;
	transition: transform .16s ease-out;
	will-change: transform;
	-webkit-user-drag: none;
}

.c3lb.is-zoomed .c3lb-img {
	transition: none;
	cursor: grab;
}

.c3lb-close {
	position: absolute;
	top: max(12px, env(safe-area-inset-top));
	right: 12px;
	z-index: 3;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(7, 16, 25, .72);
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}

.c3lb-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	background: rgba(7, 16, 25, .62);
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	display: none;
}

.c3lb.has-nav .c3lb-nav { display: block; }
.c3lb-prev { left: 10px; }
.c3lb-next { right: 10px; }

.c3lb-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
	background: linear-gradient(transparent, rgba(6, 8, 11, .85));
	color: #c9d4dc;
	font: 600 13px/1.3 Arial, sans-serif;
	pointer-events: none;
}

.c3lb-count { font-weight: 800; color: #fff; }
.c3lb.is-zoomed .c3lb-hint { visibility: hidden; }

@media (max-width: 760px) {
	.c3lb-nav { width: 44px; height: 44px; font-size: 26px; }
	.c3lb-hint { font-size: 12px; }
}

@media print {
	.c3lb { display: none !important; }
}

/* ---------------------------------------------------------------
 * Crew tool pages
 *
 * site.css hides the marketing chrome via .page-after-action-report, but
 * nothing was adding that class to <body>, so .c3-mobile-actions — a bar
 * fixed to the bottom of the viewport — sat on top of the tool and ate
 * taps. These rules key off the class the PHP now adds.
 * --------------------------------------------------------------- */

body.c3-mobile-tool .c3-mainnav,
body.c3-mobile-tool .c3-contact-ribbon,
body.c3-mobile-tool .c3-global-footer,
body.c3-mobile-tool .c3-social-footer-band,
body.c3-mobile-tool .c3-mobile-actions { display: none !important; }

@media (max-width: 760px) {
	/* site.css sets this to position:static on mobile, which drops the submit
	   bar behind whatever else is pinned down there. Keep it reachable. */
	body.c3-mobile-tool .c3aar-actionsbar {
		position: sticky;
		bottom: 0;
		z-index: 60;
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	}

	body.c3-mobile-tool .c3aar-actionsbar button,
	body.c3-mobile-tool .c3aar-selector > a,
	body.c3-mobile-tool .c3aar-tool-head > a,
	body.c3-mobile-tool .c3s-copy-row > button,
	body.c3-mobile-tool .c3s-copy-row > a {
		min-height: 52px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* ---------------------------------------------------------------
 * Copy rows — consistent, obviously-tappable buttons everywhere.
 * --------------------------------------------------------------- */

.c3s-copy-row,
.c3-copy-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.c3s-copy-row > button,
.c3-copy-row > button {
	border: 0;
	border-radius: 8px;
	padding: 13px 18px;
	font-weight: 800;
	background: #071019;
	color: #fff;
	cursor: pointer;
}

.c3s-copy-row > button:hover,
.c3-copy-row > button:hover { background: #16232f; }

.c3s-copy-row > button:disabled { opacity: .6; cursor: default; }

@media (max-width: 520px) {
	.c3s-copy-row,
	.c3-copy-row { display: grid; grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------
 * Home services grid
 *
 * site.css pinned this to repeat(7,minmax(0,1fr)) !important while there
 * are eight service cards, so the eighth was pushed off the right edge.
 *
 * auto-fit was the obvious fix but it misbehaves here: .c3-home-services
 * sets its own padding from 100vw, which counts the scrollbar, so the
 * track algorithm thinks it has more room than it does and lays out one
 * column too many. Explicit counts per breakpoint are deterministic and
 * cannot overflow.
 *
 * Four across also just reads better — eight in a row was squeezing
 * "Property Management & Commercial" onto three lines.
 * --------------------------------------------------------------- */

html body .c3-home-services .c3-home-service-grid.c3-home-service-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	width: auto !important;
	max-width: 100%;
	overflow: hidden;
}

@media (max-width: 1100px) {
	html body .c3-home-services .c3-home-service-grid.c3-home-service-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 820px) {
	html body .c3-home-services .c3-home-service-grid.c3-home-service-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 560px) {
	html body .c3-home-services .c3-home-service-grid.c3-home-service-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Cards sit in rows now, so the divider has to follow the row, not the
   single last child site.css assumed. */
html body .c3-home-services .c3-home-service-card {
	min-width: 0;
	border-right: 1px solid #202a33;
	border-bottom: 1px solid #202a33;
}

html body .c3-home-services .c3-home-service-card:nth-child(4n) { border-right: 0; }

@media (max-width: 1100px) {
	html body .c3-home-services .c3-home-service-card:nth-child(4n) { border-right: 1px solid #202a33; }
	html body .c3-home-services .c3-home-service-card:nth-child(3n) { border-right: 0; }
}

@media (max-width: 820px) {
	html body .c3-home-services .c3-home-service-card:nth-child(3n) { border-right: 1px solid #202a33; }
	html body .c3-home-services .c3-home-service-card:nth-child(2n) { border-right: 0; }
}

@media (max-width: 560px) {
	html body .c3-home-services .c3-home-service-card { border-right: 0; }
}

html body .c3-home-services .c3-home-service-card .c3-learn { margin-top: auto; }

/* ---------------------------------------------------------------
 * "Call, text, join, or request a quote." — dark on dark
 *
 * site.css does set .c3-contact-slab h2{color:#fff!important}, but the
 * block theme ships a contrast fallback whose selector
 * (body .wp-site-blocks ... h2:not(.has-text-color)) is far more
 * specific and also !important, so it repainted the heading with the
 * light-background contrast colour over a dark gradient.
 *
 * Doubling the class outruns it without resorting to anything uglier.
 * --------------------------------------------------------------- */

html body .wp-site-blocks .c3-contact-slab.c3-contact-slab h2,
html body .wp-site-blocks .c3-contact-slab.c3-contact-slab h3,
html body .c3-contact-slab.c3-contact-slab h2,
html body .c3-contact-slab.c3-contact-slab h3 {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
}

html body .wp-site-blocks .c3-contact-slab.c3-contact-slab p,
html body .c3-contact-slab.c3-contact-slab p {
	color: #d3dbe1 !important;
	-webkit-text-fill-color: #d3dbe1;
}

html body .wp-site-blocks .c3-contact-slab.c3-contact-slab .c3-kicker,
html body .c3-contact-slab.c3-contact-slab .c3-kicker {
	color: #e8414f !important;
	-webkit-text-fill-color: #e8414f;
}

/* Same trap anywhere else a dark slab is used. */
html body .wp-site-blocks .c3-mainnav.c3-mainnav a,
html body .wp-site-blocks .c3-global-footer.c3-global-footer :is(h2,h3,p,a),
html body .wp-site-blocks .c3-home-services.c3-home-services :is(h2,h3) {
	-webkit-text-fill-color: currentColor;
}


/* ---------------------------------------------------------------
 * Exterior Command
 *
 * A thin credit strip at the top, and the actual pitch above the footer.
 * The loud version sat above Code 3's own offer and pointed off-site, which
 * on paid traffic means paying for a click and then giving it away.
 * --------------------------------------------------------------- */

.c3ec-strip {
	background: #05090d;
	border-bottom: 1px solid #1b2732;
	text-align: center;
}

.c3ec-strip a {
	display: inline-block;
	padding: 7px 14px;
	color: #8ea0af !important;
	font: 700 11px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none !important;
}

.c3ec-strip a b { color: #e85661; font-weight: 800; }
.c3ec-strip a:hover { color: #cfdae3 !important; }

/* The pitch, above the footer. */
.c3ec-pitch {
	background: linear-gradient(140deg, #070d13 0%, #101c27 60%, #16builds 100%);
	background: linear-gradient(140deg, #070d13 0%, #101c27 60%, #16242f 100%);
	border-top: 3px solid #d92632;
	color: #fff;
}

.c3ec-pitch-in {
	width: min(1100px, calc(100% - 36px));
	margin: 0 auto;
	padding: 54px 0 58px;
}

.c3ec-pitch-kicker {
	font: 800 12px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .18em;
	color: #e85661;
	margin-bottom: 14px;
}

.c3ec-pitch h2 {
	font: 700 clamp(26px, 3.4vw, 38px)/1.12 Arial, Helvetica, sans-serif;
	color: #fff !important;
	margin: 0 0 14px;
}

.c3ec-pitch p {
	max-width: 62ch;
	font: 400 16px/1.55 Arial, Helvetica, sans-serif;
	color: #b9c6d2 !important;
	margin: 0 0 26px;
}

.c3ec-pitch-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}

.c3ec-pitch-list li {
	background: rgba(255, 255, 255, .04);
	border: 1px solid #22313d;
	border-radius: 10px;
	padding: 18px;
}

.c3ec-pitch-list b {
	display: block;
	font: 800 15px/1.2 Arial, Helvetica, sans-serif;
	color: #fff;
	margin-bottom: 7px;
}

.c3ec-pitch-list span {
	font: 400 14px/1.5 Arial, Helvetica, sans-serif;
	color: #9fb0bf;
}

.c3ec-pitch-cta {
	display: inline-block;
	background: #d92632;
	color: #fff !important;
	font: 800 15px/1 Arial, Helvetica, sans-serif;
	padding: 16px 24px;
	border-radius: 8px;
	text-decoration: none !important;
}

.c3ec-pitch-cta:hover { background: #ef3946; }

@media (max-width: 860px) {
	.c3ec-pitch-in { padding: 40px 0 44px; }
	.c3ec-pitch-list { grid-template-columns: 1fr; }
	.c3ec-pitch-cta { display: block; text-align: center; }
}

@media print { .c3ec-strip, .c3ec-pitch, .c3ec-credit { display: none !important; } }

.c3ec-credit {
	background: #05090d;
	color: #7f8f9c;
	text-align: center;
	font: 600 13px/1 Arial, Helvetica, sans-serif;
	padding: 14px 16px;
}

.c3ec-credit a { color: #e85661 !important; text-decoration: none !important; }
.c3ec-credit a:hover { text-decoration: underline !important; }

/* ---------------------------------------------------------------
 * Consolidated header: two dropdowns instead of ten flat links.
 *
 * site.css ALREADY styles .c3-nav-submenu properly — white panel, #111820
 * text, red hover. RC50.8 wrongly repainted the panel dark while that text
 * colour stayed !important, giving dark-on-dark. Nothing here touches the
 * panel's colours any more; this only adds what site.css did not have,
 * because it was written when there was a single dropdown.
 * --------------------------------------------------------------- */

/* The submenu is position:absolute, so each group must be its own
   containing block — otherwise the second menu anchors to the first. */
html body .c3-mainnav .c3-nav-group { position: relative; }

/* site.css opens on :hover / :focus-within. The JS toggle (and every tap on
   a touchscreen) needs a class hook as well. */
html body .c3-mainnav .c3-nav-group.c3-subnav-open > .c3-nav-submenu { display: block; }

html body .c3-mainnav .c3-subnav-toggle {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: 0 2px;
	font-size: 12px;
	line-height: 1;
}

@media (max-width: 980px) {
	/* Accordion on mobile: the caret opens the list in place rather than
	   floating a panel over the page. */
	html body .c3-mainnav .c3-nav-group {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	html body .c3-mainnav .c3-nav-group > .c3-nav-parent { flex: 1 1 auto; }
	html body .c3-mainnav .c3-subnav-toggle {
		flex: 0 0 auto;
		font-size: 18px;
		padding: 10px 14px;
	}
	html body .c3-mainnav .c3-nav-group > .c3-nav-submenu {
		position: static;
		flex: 1 1 100%;
		min-width: 0;
		margin: 4px 0 8px;
		box-shadow: none;
	}
}

/* Instant Estimate stays the loudest thing in the header. */
html body .c3-mainnav .c3-navquote {
	background: #d92632 !important;
	color: #fff !important;
	font-weight: 800 !important;
	padding: 11px 16px !important;
	border-radius: 7px !important;
	white-space: nowrap;
}

html body .c3-mainnav .c3-navquote:hover { background: #ef3946 !important; color: #fff !important; }


/* ---------------------------------------------------------------
 * ROOT CAUSE: 100vw padding on full-width sections
 *
 * site.css gets this right in its base rules:
 *     .c3-home-services { padding: 42px max(24px, calc((100% - 1400px)/2)) 20px }
 *     .c3-home-trust    { padding: 28px max(24px, calc((100% - 1400px)/2)) }
 *
 * ...and then a later block under body.c3-managed-page overrides BOTH with:
 *     padding-left:  max(38px, calc((100vw - 1500px)/2)) !important;
 *     padding-right: max(38px, calc((100vw - 1500px)/2)) !important;
 *
 * 100vw is the viewport INCLUDING the scrollbar, and it takes no account of
 * the element's own containing block. So the padding no longer matches the
 * space actually available and the content box ends up wider than the page.
 * That is why the services grid AND the white trust band below it were both
 * clipped on the right by the same amount — one cause, two symptoms, and why
 * changing the column count never fixed it.
 *
 * Back to percentage-based centring, which is relative to the container and
 * excludes the scrollbar. max() still yields the small gutter on phones.
 * --------------------------------------------------------------- */

html body.c3-managed-page .c3-home-services.c3-home-services,
html body .c3-home-services.c3-home-services,
html body.c3-managed-page .c3-home-trust.c3-home-trust,
html body .c3-home-trust.c3-home-trust {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	padding-left: max(18px, calc((100% - 1400px) / 2)) !important;
	padding-right: max(18px, calc((100% - 1400px) / 2)) !important;
}

/* Nothing inside those sections may exceed them either. */
html body .c3-home-service-grid.c3-home-service-grid,
html body .c3-home-trust.c3-home-trust > div {
	box-sizing: border-box !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

/* Same 100vw trap anywhere else a full-bleed section is centred this way. */
html body .c3-home-services,
html body .c3-home-trust,
html body .c3ec-pitch,
html body .c3-contact-slab {
	overflow-x: clip;
}

/* The trust band's dividers follow its four columns; drop the last in each
   row rather than only the final child. */
@media (max-width: 900px) {
	html body .c3-home-trust.c3-home-trust { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	html body .c3-home-trust.c3-home-trust > div:nth-child(2n) { border-right: 0; }
}

@media (max-width: 560px) {
	html body .c3-home-trust.c3-home-trust { grid-template-columns: 1fr !important; }
	html body .c3-home-trust.c3-home-trust > div { border-right: 0; }
}

/* ---------------------------------------------------------------
 * Mailto rescue panel
 *
 * Shown only when a mailto: click produced nothing — i.e. the visitor
 * has no mail program registered, which on Windows raises "This file
 * does not have an app associated with it". See c3-ui.js.
 * --------------------------------------------------------------- */

.c3-mailto-panel {
	position: absolute;
	z-index: 100000;
	width: min(330px, calc(100vw - 24px));
	padding: 16px 16px 14px;
	background: #fff;
	color: #111820;
	border: 1px solid #d4dde3;
	border-top: 4px solid #d92632;
	border-radius: 10px;
	box-shadow: 0 18px 48px rgba(7, 16, 25, .28);
	font: 400 14px/1.5 Arial, Helvetica, sans-serif;
}

.c3-mailto-panel:not(.is-anchored) {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.c3-mailto-lead {
	margin: 0 0 12px !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	color: #111820 !important;
	padding-right: 18px;
}

.c3-mailto-addr {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin-bottom: 12px;
}

.c3-mailto-addr span {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 10px;
	background: #f2f5f7;
	border: 1px solid #dbe3e8;
	border-radius: 6px;
	font: 600 13px/1.3 "SFMono-Regular", Consolas, monospace;
	word-break: break-all;
	-webkit-user-select: all;
	user-select: all;
}

.c3-mailto-copy {
	flex: none;
	border: 0;
	border-radius: 6px;
	padding: 0 14px;
	background: #071019;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
}

.c3-mailto-copy:hover { background: #16232f; }

.c3-mailto-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.c3-mailto-links a {
	display: block;
	text-align: center;
	padding: 10px 8px;
	border-radius: 6px;
	font-weight: 700 !important;
	font-size: 13px;
	text-decoration: none !important;
}

.c3-mailto-gmail {
	background: #d92632;
	color: #fff !important;
}

.c3-mailto-gmail:hover { background: #b51f29; }

.c3-mailto-form {
	background: #eef2f5;
	color: #111820 !important;
	border: 1px solid #dbe3e8;
}

.c3-mailto-form:hover { background: #e2e8ed; }

.c3-mailto-x {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 28px;
	height: 28px;
	border: 0;
	background: transparent;
	color: #7d8b97;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.c3-mailto-x:hover { color: #111820; }

@media (max-width: 420px) {
	.c3-mailto-links { grid-template-columns: 1fr; }
}

.c3-mailto-alt {
	margin: 10px 0 0 !important;
	text-align: center;
	font-size: 12.5px !important;
	line-height: 1.4 !important;
}

.c3-mailto-alt a {
	color: #5b6b78 !important;
	text-decoration: underline !important;
	font-weight: 400 !important;
}

.c3-mailto-alt a:hover { color: #111820 !important; }