/* NLD Northstar: northstarcontractingservices.com's own fixes (repo newlightdigital/northstarcontracting). */

/* Contact form 44844, on /contact-us/ and in the Let's Talk pop-up (task 14): a label above every
   field instead of placeholders that vanish, one column on phones, and a real file button. */
.wpcf7 .nld-label {
	display: block;
}
.wpcf7 .nld-label-text {
	display: block;
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 500;
	color: #ececec;
}
.wpcf7 .nld-hint {
	display: block;
	margin-top: 8px;
	font-size: 16px;
	line-height: 1.5;
	color: #c9c9c9;
}
@media (max-width: 767px) {
	.wpcf7 .column-2 {
		flex-direction: column;
		gap: 16px;
	}
}
.wpcf7 input[type="file"] {
	max-width: 100%;
	font-size: 15px;
	color: #c9c9c9;
}
.wpcf7 input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 10px 18px;
	border: 1px solid #ececec;
	background: transparent;
	color: #ececec;
	font: inherit;
	cursor: pointer;
}
.wpcf7 input[type="file"]::file-selector-button:hover {
	background: #ececec;
	color: #121212;
}

/* Two things sit over the page and hide whatever is under them (task 16): on phones and tablets
   (up to 1180px, the site's tablet breakpoint) a header pinned to the top, and on computers a 100px
   rail down the left edge. Content at the top of a page, or at its left edge on a computer, starts
   past them. The header's height depends on the screen: the logo widget shows a wide wordmark on
   sharp screens (1.5x and up, nearly every phone and tablet: 77px phones, 100px tablets) and a
   156px star on plain ones (177px phones, 159px tablets). If the header changes (task 13), change
   these numbers. */
:root {
	--nld-hdr: 0px;
	--nld-rail: 0px;
}
@media (max-width: 1180px) {
	:root {
		--nld-hdr: 159px;
	}
}
@media (max-width: 767px) {
	:root {
		--nld-hdr: 177px;
	}
}
@media (max-width: 1180px) and (min-resolution: 144dpi) {
	:root {
		--nld-hdr: 100px;
	}
}
@media (max-width: 767px) and (min-resolution: 144dpi) {
	:root {
		--nld-hdr: 77px;
	}
}
@media (min-width: 1181px) {
	:root {
		--nld-rail: 100px;
	}
}

/* Pages whose first heading or photo started under the header: it now starts 40px below it. Where
   the page already pushes its heading down (150px on tablets, 90 to 100px on phones), only the
   difference is added. */
@media (max-width: 1180px) {
	.elementor-42187 .elementor-element.elementor-element-b15edc5 {
		--margin-top: calc(var(--nld-hdr) + 40px);
		--padding-left: 20px;
		--padding-right: 20px;
	}
	.elementor-41952 {
		padding-top: calc(var(--nld-hdr) + 40px);
	}
	.elementor-37791,
	.elementor-36408,
	.page-id-41222 .elementor-41222 {
		padding-top: max(0px, calc(var(--nld-hdr) + 40px - 150px));
	}
	.elementor-36788 .elementor-element.elementor-element-cc16385 {
		--margin-top: calc(var(--nld-hdr) + 40px);
	}
	/* The theme's own style.css forces this page's padding with !important (added 10 Mar 2026). */
	body .elementor-45279 .elementor-element.elementor-element-0c33c09 {
		padding-top: calc(var(--nld-hdr) + 40px) !important;
	}
	.elementor-38303 .elementor-element.elementor-element-e3063ad {
		--padding-top: calc(var(--nld-hdr) + 40px);
	}
}
@media (max-width: 767px) {
	.elementor-37791 {
		padding-top: max(0px, calc(var(--nld-hdr) + 40px - 100px));
	}
	.elementor-36408 {
		padding-top: max(0px, calc(var(--nld-hdr) + 40px - 90px));
	}
}
/* Motorized Shading centers its heading in the photo, which put it under the tall low-density header
   at 320px; with the short header it already clears it. */
@media (max-width: 767px) and (max-resolution: 143dpi) {
	.elementor-43500 .elementor-element.elementor-element-57047ed {
		--padding-top: calc(var(--nld-hdr) + 40px);
	}
}

/* Pages whose content ran under the rail on a computer. */
@media (min-width: 1181px) {
	.elementor-42187,
	.elementor-41952,
	.elementor-37791 {
		padding-left: calc(var(--nld-rail) + 40px);
		padding-right: 40px;
	}
	body .elementor-45279 .elementor-element.elementor-element-0c33c09 {
		padding-left: calc(var(--nld-rail) + 40px) !important;
		padding-right: 40px !important;
	}
	.error404 .cmsmasters-main {
		padding-left: calc(var(--nld-rail) + 40px);
		padding-right: 40px;
	}
}

/* The privacy policy ran as one 1,300px line on a computer: a readable column instead. */
.elementor.elementor-45279 .elementor-element.elementor-element-92b7305.elementor-widget {
	width: 100%;
	max-width: 800px;
	margin-inline: auto;
}

/* Thank-you page /success/ (tasks 14 and 16): room at the screen edges, and past the rail. */
.page-id-41222 .elementor-41222 > .e-con {
	padding-left: max(16px, calc(var(--nld-rail) + 40px));
	padding-right: clamp(16px, 3vw, 40px);
}

/* Services hero: on tablets the heading had a 130 to 250px column beside the video, so words broke in
   two. Tablets now stack it the way phones do. On computers the heading shrinks with the window
   until "CONTRACTING" fits its column, and the empty band beside the video is narrower. */
@media (min-width: 768px) and (max-width: 1180px) {
	.elementor-38303 .elementor-element.elementor-element-0657a51 {
		--flex-direction: row-reverse;
		--flex-wrap: wrap-reverse;
		--min-height: 0px;
	}
	.elementor-38303 .elementor-element.elementor-element-1b2c8b5 {
		--width: 100%;
		--padding-left: 0px;
		--padding-right: 0px;
	}
	.elementor-38303 .elementor-element.elementor-element-bb0bdd9 {
		--width: 100%;
		--min-height: clamp(320px, 50vw, 520px);
	}
}
@media (min-width: 1181px) {
	.elementor-38303 .elementor-element.elementor-element-1b2c8b5 {
		--padding-right: 40px;
	}
	.elementor-38303 .elementor-element.elementor-element-4cf5af1 .elementor-heading-title {
		font-size: clamp(36px, calc(6.3vw - 27px), 60px);
	}
}

/* Contact hero: the same on tablets, text above the photo; on small phones the heading shrinks so
   "CONTRACTING" fits. */
@media (min-width: 768px) and (max-width: 1180px) {
	.elementor-36788 .elementor-element.elementor-element-940586f {
		--flex-wrap: wrap;
	}
	.elementor-36788 .elementor-element.elementor-element-cc16385 {
		--width: 100%;
		--margin-left: 0px;
		--padding-left: 30px;
		--padding-right: 30px;
	}
	.elementor-36788 .elementor-element.elementor-element-eb51ee4 {
		--width: 100%;
		--min-height: clamp(320px, 50vw, 520px);
	}
}
@media (max-width: 767px) {
	.elementor-36788 .elementor-element.elementor-element-c0d79d3 .elementor-heading-title {
		font-size: clamp(30px, 10.6vw, 36px);
	}
	/* Homepage: "CONSTRUCTION." and "ENGINEERING" were wider than a 320px phone. */
	.elementor-37375 .elementor-element.elementor-element-61795ff .elementor-heading-title {
		font-size: clamp(28px, 10.2vw, 36px);
	}
	.elementor-37375 .elementor-element.elementor-element-2975fad .elementor-heading-title {
		font-size: clamp(32px, 13.4vw, 44px);
	}
}

/* Audio & Video and Outdoor Entertainment: six buttons in one row on a tablet broke their words
   ("Theate r"); the row wraps instead and a label never breaks. */
@media (min-width: 768px) and (max-width: 1180px) {
	.elementor-43329 .elementor-element.elementor-element-fdc8e19,
	.elementor-43395 .elementor-element.elementor-element-5d8021c {
		--flex-wrap: wrap;
		--justify-content: center;
		--row-gap: 16px;
	}
}
.elementor-43329 .elementor-element-fdc8e19 .elementor-button-text,
.elementor-43395 .elementor-element-5d8021c .elementor-button-text {
	white-space: nowrap;
}

/* Motorized Shading FAQ: each question was a box sitting on its answer's box, 0px apart, with the
   answer's text 1 to 7px from the frame. Each question is now one framed box, 16px or more apart,
   with its answer 20px inside. */
.elementor-43500 .elementor-element.elementor-element-39465af {
	--n-accordion-item-title-space-between: clamp(16px, 1.6vw, 20px);
}
.elementor-43500 .elementor-element-39465af .e-n-accordion-item {
	border: 1px solid rgba(204, 204, 204, 0.19);
}
.elementor-43500 .elementor-element-39465af .e-n-accordion-item > .e-n-accordion-item-title {
	border: 0;
	padding-top: 16px;
	padding-bottom: 16px;
}
.elementor-43500 .elementor-element-39465af .e-n-accordion-item > .e-con {
	border: 0;
	--padding-top: 20px;
	--padding-right: 20px;
	--padding-bottom: 20px;
	--padding-left: 20px;
}

/* Footer: the copyright line ran 4px from the screen edge on phones. */
@media (max-width: 767px) {
	.elementor-193 .elementor-element.elementor-element-41835420 {
		--padding-left: 20px;
		--padding-right: 20px;
	}
}

/* 404 page: a 13px search field makes an iPhone zoom in, and its button was a 13px sliver on top of
   the field's end. The field now stops where a 48px button starts, under one shared underline. */
body.error404 .cmsmasters-search-form {
	border-bottom: 1px solid #3b3b3b;
	text-align: left;
}
body.error404 .cmsmasters-search-form:focus-within {
	border-bottom-color: var(--cmsmasters-input-focus-colors-bd, #888888);
}
body.error404 .cmsmasters-search-form input.cmsmasters-search-form__input {
	width: calc(100% - 48px);
	padding-right: 8px;
	border-bottom-width: 0;
	font-size: 16px;
}
body.error404 .cmsmasters-search-form .cmsmasters-search-form__button {
	min-width: 48px;
	min-height: 48px;
}

/* Icons that are not links are pictures: they take no part in the mouse's hover. */
.elementor-widget-icon .elementor-icon:not(a),
.elementor-widget-icon-box .elementor-icon:not(a) {
	pointer-events: none;
}

/* The side MENU is a button now (ui.php): the mouse and the keyboard see it is one by color alone,
   since its bars no longer animate. */
#side-cast:hover .elementor-heading-title,
#side-cast:focus-visible .elementor-heading-title {
	color: var(--e-global-color-accent);
}
#side-cast .e-lottie__animation svg {
	color: #ffffff;
}
#side-cast:hover .e-lottie__animation svg,
#side-cast:focus-visible .e-lottie__animation svg {
	color: var(--e-global-color-accent);
}
#side-cast .e-lottie__animation path[fill]:not([fill="none"]) {
	fill: currentColor;
}
#side-cast .e-lottie__animation path[stroke] {
	stroke: currentColor;
}
#side-cast:focus-visible {
	outline: 2px solid var(--e-global-color-accent);
	outline-offset: 4px;
}

/* Back-to-top button: only once the visitor has scrolled a full screen (ui.php sets the class), so
   it no longer sits on the first screen of every page over a photo or a button. */
#cmsmasters-scroll-top .elementor-element-1669ad86 {
	visibility: hidden;
}
html.nld-scrolled #cmsmasters-scroll-top .elementor-element-1669ad86 {
	visibility: visible;
}

/* Header: a reload in the middle of a page used to animate its sizes and colors with nobody
   touching anything. Until the first wheel, touch, key or click (ui.php) it switches instantly. */
html.nld-still .elementor-130,
html.nld-still .elementor-130 * {
	transition: none !important;
}