/* Hudson Stoneworks site upgrades. Loaded by hsw-site-upgrades.php after everything Enfold prints (merged CSS with Quick CSS at its tail).
   1 mobile bar   2 burger menu   3 estimate form   4 small fixes
   767px is Enfold's switch to the burger menu, and was the old bar's breakpoint. Brand: #F4CC43 on #111, Oswald headings, Lato body.
   Selectors that tie with the legacy Quick CSS rules carry a leading "html " so they win on specificity, not on file order. */

:root {
	--hsw-yellow: #F4CC43;
	--hsw-ink: #111;
	--hsw-error: #FF8A80;
	--hsw-bar-h: 73px; /* 10 + 52 + 10 + 1 border; the script replaces it with the measured height */
}

/* ---------------------------------------------------------------- 1 mobile bar */
html #top .hsw-mobile-bar { display: none; }

.hsw-icon,
#top #wrap_all .hsw-icon { fill: none; stroke: currentColor; }

@media (max-width: 767px) {
	/* room for the bar so it never hides the last lines of the page (same element the old bar reserved space on) */
	html #top #wrap_all { padding-bottom: calc(var(--hsw-bar-h) + env(safe-area-inset-bottom, 0px)); }
	/* a focused link near the bottom edge is scrolled clear of the bar */
	html { scroll-padding-bottom: calc(var(--hsw-bar-h) + 16px); }

	html #top .hsw-mobile-bar {
		display: flex;
		gap: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		box-sizing: border-box;
		margin: 0;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
		background: rgba(17, 17, 17, .96);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border: 0;
		border-top: 1px solid rgba(255, 255, 255, .08);
		border-radius: 0;
		box-shadow: none;
		transform: translateY(0);
		transition: transform .25s ease, visibility 0s;
	}
	/* hidden until the script says otherwise, and while the burger is open (JS clears .is-visible too; this covers a stalled script) */
	html.js_active #top .hsw-mobile-bar:not(.is-visible),
	html.av-burger-overlay-active #top .hsw-mobile-bar {
		transform: translateY(100%);
		visibility: hidden;
		transition: transform .25s ease, visibility 0s linear .25s;
	}

	html #top .hsw-mobile-bar a {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 52px;
		box-sizing: border-box;
		margin: 0;
		padding: 0 10px;
		border: 2px solid var(--hsw-yellow);
		border-radius: 10px;
		font: 700 16px/1.2 Lato, Helvetica, Arial, sans-serif;
		text-align: center;
		text-decoration: none;
		white-space: normal;
	}
	html #top .hsw-mobile-bar a.hsw-bar-call { background: transparent; color: #fff !important; }
	html #top .hsw-mobile-bar a.hsw-bar-estimate { background: var(--hsw-yellow); color: var(--hsw-ink) !important; }
	html #top .hsw-mobile-bar a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
	html #top .hsw-mobile-bar .hsw-icon { flex: none; width: 20px; height: 20px; }
}

@media (max-width: 340px) {
	html #top .hsw-mobile-bar a { padding: 0 6px; gap: 6px; font-size: 15px; }
}

/* if the script never armed itself (blocked, failed to parse) the bar appears after 4s instead of staying hidden */
@keyframes hsw-bar-failsafe { to { transform: translateY(0); visibility: visible; } }
html.js_active:not(.hsw-armed) #top .hsw-mobile-bar:not(.is-visible) { animation: hsw-bar-failsafe 0s linear 4s forwards; }

@media (prefers-reduced-motion: reduce) {
	html.js_active #top .hsw-mobile-bar,
	html.js_active #top .hsw-mobile-bar:not(.is-visible),
	html.av-burger-overlay-active #top .hsw-mobile-bar { transition: none; }
}

/* ---------------------------------------------------------------- 2 burger menu */
/* the CTA items live in the main menu so Enfold clones them into the burger; nowhere else may show them */
#top #avia-menu > li.hsw-burger-only,
#top #avia3-menu > li.hsw-burger-only { display: none !important; }

@media (max-width: 767px) {
	/* panel: full width, #111, slides in from the right in 250ms */
	html.html_av-overlay-side #top .av-burger-overlay-scroll {
		width: 100%;
		max-width: 100%;
		background: #111;
		transform: translateX(100%);
		transition: transform .25s ease;
	}
	html.html_av-overlay-side.av-burger-overlay-active-delayed #top .av-burger-overlay-scroll { transform: translateX(0); }
	html #top .av-burger-overlay-bg { background: #111; opacity: 1; }

	#top #wrap_all #av-burger-menu-ul {
		padding: 84px 20px calc(32px + env(safe-area-inset-bottom, 0px)) !important;
		vertical-align: top;
		text-align: left;
	}
	#top #wrap_all #av-burger-menu-ul > li { margin: 0; padding: 0; opacity: 1; top: 0; font-size: inherit; }
	/* keys must not scroll the page behind the open panel (the close control would scroll away) */
	html.av-burger-overlay-active, html.av-burger-overlay-active body { overflow: hidden; }
	.av-burger-overlay-scroll { overscroll-behavior: contain; }

	/* top level: Home, Services, Our Work, Contact Us */
	#top #wrap_all #av-burger-menu-ul > li > a {
		display: flex;
		align-items: center;
		min-height: 56px;
		box-sizing: border-box;
		padding: 0 4px !important;
		font: 400 22px/1.2 Oswald, Helvetica, Arial, sans-serif !important;
		letter-spacing: .04em;
		text-transform: uppercase !important;
		text-align: left;
		color: #fff !important;
		border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
	}

	/* the six services: a tighter group under Services */
	#top #wrap_all #av-burger-menu-ul ul {
		margin: 4px 0 8px 6px;
		padding: 0 0 0 14px;
		list-style: none;
		border-left: 2px solid rgba(244, 204, 67, .5);
		background: transparent;
	}
	#top #wrap_all #av-burger-menu-ul ul li { margin: 0; padding: 0; font-size: inherit; }
	#top #wrap_all #av-burger-menu-ul ul li a {
		display: flex;
		align-items: center;
		min-height: 44px;
		box-sizing: border-box;
		padding: 0 4px !important;
		font: 400 17px/1.3 Lato, Helvetica, Arial, sans-serif !important;
		text-transform: none !important;
		letter-spacing: 0;
		color: #e5e5e5 !important;
		border-bottom: 0 !important;
	}
	#top #wrap_all #av-burger-menu-ul .avia-bullet { display: none !important; }
	/* "All Services" repeats Services (both go to /masonry-stoneworks/); the desktop dropdown keeps it */
	#top #wrap_all #av-burger-menu-ul .menu-item-263 { display: none !important; }

	/* hover, focus, current page */
	#top #wrap_all #av-burger-menu-ul a:hover,
	#top #wrap_all #av-burger-menu-ul a:focus-visible {
		background: #1c1c1c !important;
		color: var(--hsw-yellow) !important;
		opacity: 1;
	}
	#top #wrap_all #av-burger-menu-ul a:focus-visible { outline: 3px solid var(--hsw-yellow); outline-offset: -3px; }
	#top #wrap_all #av-burger-menu-ul .current-menu-item > a,
	#top #wrap_all #av-burger-menu-ul .current-menu-ancestor > a,
	#top #wrap_all #av-burger-menu-ul .current-menu-parent > a { color: var(--hsw-yellow) !important; }
	/* the current page is also marked with a bar, not by colour alone */
	#top #wrap_all #av-burger-menu-ul li.current-menu-item > a { box-shadow: inset 4px 0 0 var(--hsw-yellow); }

	/* CTA block at the bottom: Call, Free estimate, then one line of service area */
	#top #wrap_all #av-burger-menu-ul > li.hsw-burger-only { border: 0; }
	#top #wrap_all #av-burger-menu-ul > li.hsw-burger-call { margin-top: 28px; }
	#top #wrap_all #av-burger-menu-ul > li.hsw-burger-only > a {
		display: flex !important;
		align-items: center;
		justify-content: center;
		min-height: 52px;
		margin-top: 12px;
		padding: 0 16px !important;
		border: 2px solid var(--hsw-yellow) !important;
		border-radius: 10px;
		background: transparent;
		color: #fff !important;
		font: 700 16px/1.2 Lato, Helvetica, Arial, sans-serif !important;
		letter-spacing: 0;
		text-align: center;
		text-transform: none !important;
	}
	#top #wrap_all #av-burger-menu-ul > li.hsw-burger-only .avia-menu-text { display: inline-flex; align-items: center; gap: 10px; }
	#top #wrap_all #av-burger-menu-ul > li.hsw-burger-only .hsw-icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; }
	#top #wrap_all #av-burger-menu-ul > li.hsw-burger-estimate > a { background: var(--hsw-yellow) !important; color: var(--hsw-ink) !important; }
	#top #wrap_all #av-burger-menu-ul > li.hsw-burger-estimate > a:hover,
	#top #wrap_all #av-burger-menu-ul > li.hsw-burger-estimate > a:focus-visible { background: #ffd95e !important; color: var(--hsw-ink) !important; }
	#top #wrap_all #av-burger-menu-ul > li.hsw-burger-call > a:hover,
	#top #wrap_all #av-burger-menu-ul > li.hsw-burger-call > a:focus-visible { background: #1c1c1c !important; color: #fff !important; }
	#top #wrap_all #av-burger-menu-ul > li.hsw-burger-only > a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
	#top #wrap_all #av-burger-menu-ul .hsw-burger-note {
		display: block;
		margin: 14px 4px 0;
		font: 400 14px/1.4 Lato, Helvetica, Arial, sans-serif;
		color: #c4c4c4;
		text-wrap: balance;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.html_av-overlay-side #top .av-burger-overlay-scroll { transition: none; }
	.av-hamburger-inner, .av-hamburger-inner::before, .av-hamburger-inner::after { transition: none !important; }
}

/* ---------------------------------------------------------------- 3 estimate form (/contact-us/) */
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form {
	box-sizing: border-box;
	padding: 32px;
	background: #202020;
	border: 1px solid #3f3f3f;
	border-radius: 10px;
	color: #fff;
}
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form > h2,
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form > h3 {
	margin: 0 0 12px;
	font-size: 25px;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
}
/* a fieldset is as wide as its widest child by default; that is what stretched every field to the Turnstile's 300px */
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

/* every field: full width, no side margin or padding; email + phone and city + start sit side by side from 990px */
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form .form_element {
	float: none;
	clear: both;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0 0 20px;
	padding: 0;
}
@media (min-width: 990px) {
	#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form .form_element.form_element_half {
		float: left;
		clear: none;
		width: calc(50% - 8px);
		margin-left: 16px;
	}
	#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form .form_element.form_element_half.first_form { clear: both; margin-left: 0; }
}

/* labels, required markers, notes */
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form label {
	display: block;
	position: static;
	visibility: visible;
	margin: 0 0 8px;
	font: 700 15px/1.3 Lato, Helvetica, Arial, sans-serif;
	letter-spacing: 0;
	text-transform: none;
	color: #eee;
}
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form abbr.required {
	margin-left: 2px;
	border: 0;
	text-decoration: none;
	cursor: inherit;
	color: var(--hsw-yellow);
}
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form .av-form-text {
	clear: both;
	margin: 0 0 20px;
	font: 400 15px/1.5 Lato, Helvetica, Arial, sans-serif;
	color: #d6d6d6;
}
/* Enfold floats every paragraph in the form, which collapses the note's own margin; keep it in flow */
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form .av-form-text p { float: none; clear: none; width: auto; margin: 0; }
/* links inside a sentence in the aside card: underlined so they do not rely on colour alone */
#top #wrap_all .hsw-contact-wrap .hsw-contact-aside p a { text-decoration: underline; }
/* a phone number must not break across two lines */
#top #wrap_all .hsw-contact-wrap a[href^="sms:"],
#top #wrap_all .hsw-contact-wrap a[href^="tel:"] { white-space: nowrap; }
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form .av-form-text a {
	color: var(--hsw-yellow);
	font-weight: 700;
	text-decoration: underline;
}

/* fields: dark, 52px tall, 2px border, 8px radius, 17px text (no iOS zoom).
   Border is #767676, not #666: #666 on the #202020 card is 2.84:1 and WCAG 1.4.11 asks for 3:1 (this is 3.59:1). */
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form input.text_input,
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form select.select,
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form textarea.text_area {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 14px;
	background-color: #151515;
	border: 2px solid #767676;
	border-radius: 8px;
	font: 400 17px/1.4 Lato, Helvetica, Arial, sans-serif;
	color: #fff;
	color-scheme: dark;
}
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form textarea.text_area { min-height: 150px; resize: vertical; }
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form input.text_input:focus,
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form select.select:focus,
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form textarea.text_area:focus {
	outline: 3px solid var(--hsw-yellow);
	outline-offset: 2px;
	border-color: #ffe27a;
}

/* selects: the chevron Enfold's appearance:none removed, and a muted placeholder */
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form select.select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23F4CC43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px 16px;
}
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form select.select option { background: #151515; color: #fff; }
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form select.select option[value=""],
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form select.select.hsw-placeholder { color: #a3a3a3; }

/* error state: border and message colour 7:1 on the card, plus an icon and text so colour is not the only signal */
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form .form_element.error input.text_input,
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form .form_element.error select.select,
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form .form_element.error textarea.text_area { border-color: var(--hsw-error); }
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form .hsw-field-error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 8px 0 0;
	font: 400 14px/1.4 Lato, Helvetica, Arial, sans-serif;
	color: var(--hsw-error);
}
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form .hsw-field-error svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }

/* Turnstile: full width of the card (script-scaled when the card is narrower than 300px), 16px above the button */
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form .cf-turnstile {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 65px;
	margin: 4px 0 16px;
}

/* until the check loads (when the visitor starts the form) the box says so, instead of leaving an unexplained gap */
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form .cf-turnstile:empty::before {
	content: "The security check appears when you start the form.";
	display: block;
	padding: 20px 0;
	font: 400 14px/1.4 Lato, Helvetica, Arial, sans-serif;
	color: #bdbdbd;
}

/* submit: full width on mobile, 56px, yellow on #111 */
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form input.button[type="submit"] {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 0 24px;
	background-color: var(--hsw-yellow);
	border: 0;
	border-radius: 8px;
	font: 700 17px/1.2 Lato, Helvetica, Arial, sans-serif;
	letter-spacing: 0;
	color: var(--hsw-ink);
	cursor: pointer;
}
@media (min-width: 768px) {
	#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form input.button[type="submit"] { width: auto; min-width: 260px; }
}
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form input.button[type="submit"]:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form input.button[type="submit"].av-sending-button,
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form input.button[type="submit"][aria-disabled="true"] {
	opacity: .75;
	cursor: progress;
}
#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form .hsw-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* the response (success or error) replaces the form in the same card look.
   Enfold's .load() puts the server's own .ajaxresponse inside the page's: one card, not two. */
#top #wrap_all .hsw-contact-wrap .ajaxresponse:not(.hidden) {
	box-sizing: border-box;
	padding: 28px 32px;
	background: #202020;
	border: 1px solid #3f3f3f;
	border-radius: 10px;
	color: #fff;
}
#top #wrap_all .hsw-contact-wrap .ajaxresponse:not(.hidden) .ajaxresponse {
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}
/* a failed request leaves the response empty; never paint a blank card */
#top #wrap_all .hsw-contact-wrap .ajaxresponse:empty { display: none !important; }
#top #wrap_all .hsw-contact-wrap .ajaxresponse .avia-form-success {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 22px;
	line-height: 1.4;
	text-align: left;
	color: #fff;
}
#top #wrap_all .hsw-contact-wrap .ajaxresponse:focus { outline: 0; }
#top #wrap_all .hsw-contact-wrap .ajaxresponse:focus-visible { outline: 3px solid var(--hsw-yellow); outline-offset: 2px; }

@media (max-width: 767px) {
	#top #wrap_all .hsw-contact-wrap form.hsw-estimate-form { padding: 20px; }
	#top #wrap_all .hsw-contact-wrap .ajaxresponse:not(.hidden) { padding: 20px; }
}

/* ---------------------------------------------------------------- 4 small fixes */
/* Lighthouse link-in-text-block: the footer credit link was told apart by colour alone */
#top #socket .copyright a { text-decoration: underline; }

/* skip link: hidden until it gets keyboard focus */
html #top .hsw-skip-link {
	position: absolute;
	left: 12px;
	top: -120px;
	z-index: 100000;
	padding: 12px 18px;
	border-radius: 8px;
	background: var(--hsw-yellow);
	color: var(--hsw-ink);
	font: 700 16px/1.2 Lato, Helvetica, Arial, sans-serif;
	text-decoration: none;
}
html #top .hsw-skip-link:focus { top: 12px; outline: 3px solid var(--hsw-ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--hsw-yellow); }
/* the skip link's target is focused by script, not by the visitor */
#top main:focus { outline: 0; }

/* before/after sliders (Enfold image diff): keyboard focus ring, and labels with enough contrast if they are ever shown */
html #top .avia-image-diff-container .av-image-diff-handle:focus-visible { outline: 3px solid var(--hsw-yellow); outline-offset: 3px; }
html #top .avia-image-diff-container .av-image-diff-overlay .av-img-diff-label { background: rgba(0, 0, 0, .65); }

/* Enfold sets a:focus { outline: 0 }, which left the logo, footer links, the burger trigger and in-form links with no
   focus indicator at all. One fallback for all of them; the component rules above are more specific and win. */
html #top a:focus-visible,
html #top button:focus-visible { outline: 3px solid var(--hsw-yellow); outline-offset: 2px; }
html #top .av-burger-menu-main > a:focus-visible { outline-offset: -3px; border-radius: 8px; }

/* footer contact block: the business name and contact lines were h2/h3 only for their look; they are paragraphs now
   (headings stay for "Our Services" and "Follow Us on Facebook") and keep the same appearance */
#top #footer .hsw-footer-name { margin: 0 0 14px; font: 600 34px/1.1 Oswald, Helvetica, Arial, sans-serif; }
#top #footer .hsw-footer-line { margin: 0 0 8px; font: 600 20px/1.1 Oswald, Helvetica, Arial, sans-serif; }
#top #footer .hsw-footer-hours { margin: 12px 0 0; font: 400 16px/1.5 Lato, Helvetica, Arial, sans-serif; }