/*================================================
GLOBAL STYLES (ALL DEVICES)
================================================*/
header {
	position: sticky;
	top: 0;
	z-index: 1000;
}
/*////////////Sticky header////////////////*/
.sticky-header {
	position: sticky !important;
	top: 0 !important;
	z-index: 9999 !important;
	margin: 0 !important;
	padding: 0 !important;
}
/*//////Keeps phone bar + nav stuck as one unit//////*/
.sticky-header .wp-block-html {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
}
/*//////Forces top bar to full width, removes gap//////*/
.sticky-header .wp-block-html > div {
	width: 100% !important;
	box-sizing: border-box !important;
}
/*//////Ensures inner div fills the group//////*/
.sticky-header .wp-block-columns {
	margin: 0 !important;
	padding: 0 !important;
}
/*//////Removes gap between top bar and nav//////*/
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
	font-family: 'Raleway', sans-serif !important;
}
/*/////Adds font to navigation in header////*/
.service-card {
	overflow: hidden;
	transition: transform .3s ease;
}
.service-card:hover {
	transform: scale(1.03);
}
/*Creates effect for blocks with service card class */
.cover-block-1,
.cover-block-2,
.cover-block-3 {
	cursor: pointer !important;
}
/*//////Shows pointer cursor on clickable covers//*/
/*================================================
DESKTOP STYLES (769px+)
================================================*/
@media (min-width: 769px) {
	.hero-btn .wp-block-button__link {
		font-size: 20px !important;
		border-radius: 5px !important;
	}
	/*//////Controls both hero buttons desktop/////*/
	.hero-section .wp-block-buttons {
		gap: 5px !important;
		justify-content: flex-start !important;
	}
	/*////////Gap + align hero buttons desktop//////*/
	.hero-section {
		padding-right: 60% !important;
	}
	/*//////Shifts hero content left desktop////////*/
	.hero-section .wp-block-cover__background {
		-webkit-mask-image: linear-gradient(
			to right,
			rgba(0,0,0,1) 50%,
			rgba(0,0,0,0) 100%
		) !important;
		mask-image: linear-gradient(
			to right,
			rgba(0,0,0,1) 40%,
			rgba(0,0,0,0) 50%
		) !important;
	}
	/*//////Hero overlay fades left to right////////*/
}
/*================================================
MOBILE STYLES (768px and below)
================================================*/
@media (max-width: 768px) {

	/* Two columns: phones left, email+NJ right */
	#top-bar {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		flex-wrap: nowrap !important;
		padding: 14px 15px !important;
		gap: 8px !important;
	}
	/*//////Top bar stays as two columns on mobile//////*/

	/* Left column: phone numbers stacked */
	#top-bar > div:first-child {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 30px !important;
		flex-shrink: 1 !important;
		min-width: 0 !important;
	}
	/*//////Phone numbers stack vertically on the left//////*/

	#top-bar > div:first-child a {
		font-size: 15px !important;
		white-space: nowrap !important;
	}
	/*//////Phone number text size//////*/

	/* Right column: email + Serving NJ stacked */
	#top-bar > div:last-child {
		flex-direction: column !important;
		align-items: flex-end !important;
		justify-content: center !important;
		gap: 15px !important;
		flex-shrink: 1 !important;
		min-width: 0 !important;
	}
	/*//////Email and Serving NJ stack vertically on the right//////*/

	#top-bar > div:last-child a {
		font-size: 15px !important;
		white-space: nowrap !important;
	}
	/*//////Email text size//////*/

	#top-bar > div:last-child span {
		font-size: 15px !important;
		white-space: nowrap !important;
	}
	/*//////Serving NJ text size//////*/

	.wp-block-navigation__responsive-container-open {
		background: #3D3D3D !important;
		border-radius: 8px !important;
		padding: 10px 22px !important;
		border: none !important;
		min-width: 64px !important;
		min-height: 44px !important;
	}
	/*///////Adjusts hamburger button//////*/
	.wp-block-navigation__responsive-container-open svg {
		display: none !important;
	}
	/*///hides default hamburger icon to swap//*/
	.wp-block-navigation__responsive-container-open::before {
		content: '';
		display: block;
		width: 25px;
		height: 2px;
		background: #ffffff;
		box-shadow: 0 7px 0 #ffffff, 0 14px 0 #ffffff;
	}
	/*/////////////Our hamburger icon///////////*/
	.wp-block-navigation__responsive-container.is-menu-open {
		background: #3D3D3D !important;
	}
	/*//////////Hamburger menu background///////*/
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
		font-family: 'Montserrat', sans-serif !important;
		color: #ffffff !important;
		font-size: 26px !important;
		padding: 18px 20px !important;
		border-bottom: 1px solid rgba(255,255,255,0.1) !important;
		text-align: center !important;
		justify-content: center !important;
		display: flex !important;
	}
	/*//adjusts text inside the hamburger menu//*/
	.wp-block-navigation__responsive-container-close {
		color: #ffffff !important;
	}
	/*////////X close button on burger menu/////*/
	.hero-btn .wp-block-button__link {
		font-size: 15px !important;
		padding: 12px !important;
		border-radius: 1px !important;
	}
	/*//////Controls both hero buttons mobile/////*/
	.hero-section .wp-block-buttons {
		gap: 5px !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
	}
	/*////////Gap + side by side hero buttons mobile*/
	.hero-section {
		padding-right: 5% !important;
	}
	/*//////Shifts hero content left mobile////////*/

	/*//////Shrinks cover block (image + text) on mobile only//////*/
	.service-card  {
		transform: scale(0.95) !important;
		transform-origin: top center !important;
		margin-bottom: -20px !important;
	}
	/*//////Compensates for extra space left by scale//////*/
/*//////Shrinks text below service card covers on mobile only//////*/
	.service-card + p {
		font-size: 18px !important;
	}
	/*//////Shrinks hero intro heading text on mobile only//////*/
	.hero-section h1 {
		font-size: 22px !important;
	}
	/*//////Shows icon-only phone/email on mobile, keeps text on desktop//////*/
	.topbar-text {
		display: none !important;
	}
	.topbar-icon {
		font-size: 25px !important;
		display: inline-flex !important;
		align-items: center !important;
	}
	/*//////SVG icons scale via 1em width/height, so both icons now match exactly//////*/
	
	/*//////Keeps phone/email icons side by side and vertically centered on mobile//////*/
	#top-bar > div:first-child {
		flex-direction: row !important;
		align-items: center !important;
		gap: 20px !important;
	}

	#top-bar > div:first-child a {
		display: inline-flex !important;
		align-items: center !important;
	}
	/*//////Ensures icons are vertically centered within their links//////*/

}
/*================================================
END
================================================*/