@import url('../fonts/google/poppins-noital/font.css');


:root {
	--fs-sm: 0.8125rem;
	--fs-base: 1rem;
	--fs-md: 1.25rem;
	--fs-lg: 1.625rem;
	--fs-xl: 2.125rem;
	--fs-2xl: 2.75rem;
	--fs-3xl: 3.5rem;
	--fs-4xl: 4.5rem;
	--main-font: 'Poppins', sans-serif;
	--second-font: 'Poppins', sans-serif;
	--para-font: 'Gotham';
	--accent-color: #ff6a00;
	--light-color: #abb545;
	--para-color: #2e2e2e;
	--text-color: #444444;
	--black-color: #000000;
	--white-color: #ffffff;
	--trans: all.3s ease-in-out;
	--shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
}


body {

	background-image: url('/images/black-hex.jpg');

	color: #ffffff;

	font-family: Poppins;

	position: relative;

	font-size: 1rem;

}





p {

	margin-top: 1em;

}



h1, h2, h3, h4, h5 {

	margin-top: 1em;

}





#header, #content, #footer {

	margin: 0 auto;

	width: 100%;

	position: relative;

	max-width: 1280px;

}



#content, #footer {

	background-color: #ffffff;

	color: #000000;

}



#header {

	background-color: black;

	background-image: none;

	height: 170px;

	border-bottom: 3px solid coral;

}



	#header .menu {

		display: flex;

		list-style: none;

		position: absolute;

		top: 130px;

		left: 2em;

		margin: 0px;

		padding: 0.5em 0px;

		border-top: 1px solid coral;

	}



		#header .menu li {

			padding-right: 1em;

		}



			#header .menu li a {

				text-decoration: none;

				color: white;

				font-weight: bold;

			}



				#header .menu li a:hover {

					text-decoration: none;

					color: coral;

					font-weight: bold;

				}



#content, #footer {

	padding: 2em;

	padding-bottom: 4em;

}



#footer {

	padding-top: 1em;

	border-top: 3px solid coral;

}

.call-us {

	position: absolute;

	width: auto;

	display: block;

	right: 10px;

	top: 30px;

	background-color: #ff6a00;

	padding: 0.5em 1em;

	border-radius: 1em;

	color: #1a1a1a;

	text-decoration: none;

	text-align: center;

	z-index: 10;

}

#measure-your-roof {

	position: absolute;

	width: auto;

	display: block;

	right: 10px;

	top: 80px;

	background-color: #ff6a00;

	padding: 0.5em 1em;

	border-radius: 1em;

	color: #1a1a1a;

	text-decoration: none;

	text-align: center;

	z-index: 10;

	border: 0px;

}



#instantroofer{

 background-color: white;

 color: black;

 width: 400px;

 margin: auto auto;

 padding: 2em;

 border-radius: 1em;





}



.logo {

	height: auto;

	background-color: #000000;

	color: white;

	font-size: 13px;

	padding: 1em;

	position: absolute;

	left: 64px;

	max-width: 400px;

}



	.logo img {

		max-width: 325px;

	}

#footer {

	background-color: black;

	color: white;

}

	#footer a {

		color: coral;

	}



#footer ul {

	display: flex;

	list-style: none;

	margin-left: 0px;

	padding: 0px;

}



	#footer ul li {

		display: block;

		margin: 0px;

		padding-right: 1em;

	}



.black, .desc {

	color: white;

	background-color: black;

}



#instantroofer iframe {

	display: block;

	aspect-ratio: 0.53;

	width: 345px;

	inline-size: 345px;

	height: 650px;

	block-size: 650px;

	margin-left: auto;

	margin-right: auto;

	position: static;

	align-content: normal;

	align-items: normal;

	align-self: auto;

	bottom: auto;

	box-sizing: content-box;

	clear: none;

	clip: auto;

	display: block;

	flex-basis: auto;

	flex-direction: row;

	flex-grow: 0;

	flex-shrink: 1;

	flex-wrap: nowrap;

	float: none;

	justify-content: normal;

	left: auto;

	max-block-size: none;

	max-height: none;

	max-inline-size: none;

	max-width: none;

	min-block-size: 0px;

	min-height: 0px;

	min-inline-size: 0px;

	min-width: 0px;

	overflow-x: clip;

	overflow-y: clip;

	padding-bottom: 0px;

	padding-left: 0px;

	padding-right: 0px;

	padding-top: 0px;

	resize: none;

	right: auto;

	top: auto;

	visibility: visible;

	z-index: auto;

	border: none

}




/* DESIGN-8-NAV: Desktop button styling */
#header .menu button.nav-parent {
	background: none;
	border: 0;
	font: inherit;
	color: white;
	font-weight: bold;
	cursor: pointer;
	padding: 0;
	text-decoration: none;
	display: inline-block;
}

#header .menu button.nav-parent:hover {
	color: coral;
}

#header .menu button.nav-parent:focus-visible {
	outline: 2px solid coral;
	outline-offset: 2px;
}

/* Show submenu on parent hover, focus-within, or aria-expanded */
#header .menu li:hover > .submenu,
#header .menu li:focus-within > .submenu,
#header .menu button.nav-parent[aria-expanded="true"] ~ .submenu {
	display: block;
	visibility: visible;
}

/* Desktop submenu styling */
#header .menu .submenu {
	position: absolute;
	top: 100%;
	left: 0;
	background-color: black;
	list-style: none;
	margin: 0;
	padding: 0.5em 1em;
	min-width: 200px;
	display: none;
	visibility: hidden;
	z-index: 100;
	border-top: 2px solid coral;
}

#header .menu .submenu li {
	padding: 0.3em 0;
}

#header .menu .submenu li a {
	color: white;
	text-decoration: none;
	font-weight: normal;
}

#header .menu .submenu li a:hover {
	color: coral;
}

#header .menu .submenu li a:focus-visible {
	outline: 2px solid coral;
	outline-offset: 2px;
}

/* Mobile button styling */
#menu button.nav-parent {
	background: none;
	border: 0;
	font: inherit;
	color: #1a1a1a;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	display: block;
	width: 100%;
	text-align: left;
}

#menu button.nav-parent:hover {
	text-decoration: underline;
}

#menu button.nav-parent:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
}

/* Mobile submenu - show/hide based on aria-expanded */
#menu .submenu {
	margin-left: 2em;
	padding-left: 0;
	display: none;
}

#menu button.nav-parent[aria-expanded="true"] ~ .submenu {
	display: block;
}


@media (max-width: 900px) {



	#header .menu, #footer .menu {

		display: none;

		visibility: hidden;

	}



	#header {

		height: 130px;

	}



	.call-us {

		top: 112px;

	}



	#measure-your-roof

	{

		top: 112px;

		left: 1em;

		right: auto;

	}

	.logo {
		left: 64px;
		max-width: calc(100% - 64px - 1em);
		z-index: 1;
	}
	.logo img {

		max-width: 275px;

	}



	.roc {

		font-size: 11px;

	}

}





.areas {

	display: flex;

	list-style-type: none;

	flex-wrap: wrap;

}



	.areas li {

		justify-content: space-between;

		padding: 0.5em;

	}

/* DESIGN-1: Homepage hero H1 responsive sizing */
.welcome h1 {
	width: auto;
	max-width: 100%;
	overflow-wrap: normal;
	text-wrap: balance;
}

@media (max-width: 480px) {
	.welcome h1 {
		font-size: var(--fs-lg);
	}

	/* index.php inline style pads .welcome div 4em (76px/side), leaving ~116px for text */
	body .welcome div {
		padding: 1.5em 1.25em;
	}
}

/* DESIGN-2: Link color treatment - nav submenu and homepage "Learn More" */
/* Mobile menu panel is white: #C24E00 is 4.6:1 */
#menu li ul li a {
	color: #C24E00;
	text-decoration: none;
	font-weight: 600;
}

#menu li ul li a:hover {
	text-decoration: underline;
}

#menu li ul li a:focus-visible {
	outline: 2px solid #C24E00;
	outline-offset: 2px;
}

/* A11Y-15: SERVICES dropdown trigger is not a link */
#menu > li > a,
.nav-parent {
	cursor: pointer;
	text-decoration: none;
	color: #1a1a1a;
	font-weight: 600;
	transition: color 0.3s ease;
}

#menu > li > a:hover,
.nav-parent:hover {
	text-decoration: underline;
}

#menu > li > a:focus-visible,
.nav-parent:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
}

.systems a.btn,
.about a.btn {
	color: #C24E00;
	text-decoration: none;
	font-weight: 600;
}

.systems a.btn:hover,
.about a.btn:hover {
	text-decoration: underline;
}

.systems a.btn:focus-visible,
.about a.btn:focus-visible {
	outline: 2px solid #C24E00;
	outline-offset: 2px;
}


/* DESIGN-5: Tesla Powerwall article body layout and typography */
.article-body {
	max-width: 720px;
	margin: 0 auto;
}

.article-body p,
.article-body li {
	font-size: 16px;
	line-height: 1.6;
}



/* DESIGN-12: object-fit safety net - prevent photos from stretching while preserving logos/icons/diagrams */
#content img { object-fit: cover; }
#content img[src*="logo" i], #content img[src*="Icon" i], #content img[src$=".png" i], #content img[src$=".svg" i], #content img[src*="Longspan_IBeam_IBLS" i], #content img[src*="IBeam_Semi_Full" i], #content img[src*="LightGauge_Semi_Full" i] { object-fit: contain; }
/* Gallery thumbnails show system photos that should remain fully visible */
#content .images img { object-fit: contain; }