@import url("https://fonts.googleapis.com/css?family=Oswald:700");

/* ===================================================================
   Airtight Roofing & Pointing — site enhancements
   Kept separate from roofing.css so the base theme stays untouched.
   =================================================================== */

/* --- Header: white background, larger logo --- */
#header {
	background-color: #ffffff;
	color: #333333;
	border-bottom: solid 1px rgba(0, 0, 0, 0.08);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
	height: 6.5em;
	line-height: 6.5em;
}

	#header > h1 {
		display: flex;
		align-items: flex-start;
		color: #333333;
	}

		#header > h1 a {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			height: 100%;
			line-height: normal;
		}

	#header > a {
		color: #444444;
	}

		#header > a:hover {
			color: #4CAF50;
		}

		#header > a[href="#menu"]:before {
			color: rgba(0, 0, 0, 0.45);
		}

		#header > a + a[href="#menu"]:last-child {
			border-left-color: rgba(0, 0, 0, 0.12);
		}

body {
	padding-top: 6.5em;
}

/* Logo mark */
#header .logo-mark {
	height: 84px;
	width: auto;
	vertical-align: middle;
}

/* Tagline removed from under the logo per request */
#header .header-page-title {
	display: none !important;
}

@media screen and (max-width: 980px) {

	#header,
	body.is-loading #header {
		height: 76px;
		line-height: 76px;
	}

	body {
		padding-top: 76px;
	}

	#header .logo-mark {
		height: 58px;
	}

}

@media screen and (max-width: 480px) {

	#header,
	body.is-loading #header {
		height: 62px;
		line-height: 62px;
	}

	body {
		padding-top: 62px;
	}

	#header .logo-mark {
		height: 46px;
	}

}

/* --- Header quick links (desktop only; mobile keeps the hamburger menu) --- */
@media screen and (max-width: 1300px) {

	#header > a.quicklink,
	#header > div.quicklink-dropdown {
		display: none;
	}

	#header > a + a[href="#menu"]:last-child {
		border-left: none;
		margin-left: 0;
	}

}

/* Services dropdown in the desktop header nav */
#header > div.quicklink-dropdown {
	position: relative;
}

@media screen and (min-width: 1301px) {

	#header > div.quicklink-dropdown {
		display: inline-block;
		vertical-align: top;
	}

}

	#header .quicklink-dropdown > a {
		display: inline-block;
		padding: 0 0.75em;
		color: #444444;
		text-decoration: none;
		-moz-transition: color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out;
	}

		#header .quicklink-dropdown > a:hover {
			color: #4CAF50;
		}

	#header .quicklink-dropdown-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 12em;
		background-color: #ffffff;
		border-radius: 0 0 6px 6px;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
		padding: 0.5em 0;
		text-align: left;
		line-height: normal;
		z-index: 10001;
	}

	#header .quicklink-dropdown:hover .quicklink-dropdown-menu,
	#header .quicklink-dropdown:focus-within .quicklink-dropdown-menu {
		display: block;
	}

		#header .quicklink-dropdown-menu a {
			display: block;
			padding: 0.5em 1.25em;
			color: #444444;
			text-decoration: none;
			text-transform: none;
			letter-spacing: normal;
			font-size: 0.85em;
			font-weight: 400;
			white-space: nowrap;
		}

			#header .quicklink-dropdown-menu a:hover {
				background-color: rgba(76, 175, 80, 0.08);
				color: #4CAF50;
			}

/* --- Floating WhatsApp button --- */
.whatsapp-float {
	position: fixed;
	bottom: 1.5em;
	right: 1.5em;
	width: 3.4em;
	height: 3.4em;
	background-color: #25D366;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	z-index: 10000;
	text-decoration: none;
	-moz-transition: -moz-transform 0.2s ease;
	-webkit-transition: -webkit-transform 0.2s ease;
	-ms-transition: -ms-transform 0.2s ease;
	transition: transform 0.2s ease;
}

	.whatsapp-float:before {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		content: '\f232';
		color: #ffffff;
		font-size: 1.8em;
		position: absolute;
		top: 50%;
		left: 50%;
		-moz-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	.whatsapp-float:hover {
		-moz-transform: scale(1.08);
		-webkit-transform: scale(1.08);
		-ms-transform: scale(1.08);
		transform: scale(1.08);
	}

@media screen and (max-width: 480px) {

	.whatsapp-float {
		width: 3em;
		height: 3em;
		bottom: 1em;
		right: 1em;
	}

		.whatsapp-float:before {
			font-size: 1.6em;
		}

}

/* Fill the viewport under the taller header, but grow if the hero content needs more room
   (fixed height caused the heading to clip under the header and the form to overlap the
   next section once USPs/call button/form pushed content taller than one screen) */
#banner {
	height: auto;
	min-height: calc(100vh - 6.5em);
	background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url("../../images/banner6.jpg");
}

/* Bolder hero heading, no divider line under it */
#banner .hero-copy h1.major {
	font-family: 'Oswald', Helvetica, Arial, sans-serif;
	font-weight: 700;
	letter-spacing: 0.02em;
}

	#banner .hero-copy h1.major:after {
		display: none;
	}

/* Key USPs under the hero heading */
#banner .hero-usps {
	list-style: none;
	padding: 0;
	margin: 1.25em 0 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.75em;
}

	#banner .hero-usps li {
		display: flex;
		align-items: flex-start;
		text-align: left;
		font-weight: 700;
		text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
	}

		#banner .hero-usps li:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			content: '\f00c';
			color: #4CAF50;
			margin-right: 0.5em;
			margin-top: 0.15em;
			font-size: 1.1em;
			flex-shrink: 0;
		}

@media screen and (max-width: 980px) {

	#banner {
		height: auto;
		min-height: calc(100vh - 76px);
	}

}

@media screen and (max-width: 480px) {

	#banner {
		height: auto;
		min-height: calc(100vh - 62px);
	}

}

/* --- Hero split layout (heading left, quote form right on desktop) --- */
#banner .hero-flex {
	display: flex;
	flex-direction: column;
	align-items: center;
}

	#banner .hero-copy {
		width: 100%;
		text-align: left;
	}

		#banner .hero-copy ul.actions.vertical li {
			text-align: left;
		}

	#banner .hero-form-col {
		width: 100%;
		display: flex;
		justify-content: center;
	}

@media screen and (min-width: 981px) {

	#banner .hero-flex {
		flex-direction: row;
		align-items: center;
		gap: 3em;
		max-width: 68em;
		text-align: left;
	}

		#banner .hero-copy {
			flex: 1 1 50%;
			text-align: left;
		}

		#banner .hero-form-col {
			flex: 0 0 24em;
			justify-content: flex-start;
		}

		#banner .hero-copy ul.actions.vertical li {
			text-align: left;
		}

		.hero-quote-form {
			margin: 40px 0 0 0;
		}

}

/* --- Hero quote form --- */
.hero-quote-form {
	background-color: rgba(255, 255, 255, 0.95);
	color: #444;
	border-radius: 6px;
	padding: 1.25em 1.75em 1em 1.75em;
	max-width: 26em;
	width: 100%;
	margin: 40px auto 0 auto;
	text-align: left;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

	.hero-quote-form h3 {
		color: #444 !important;
		text-align: center;
		margin-bottom: 0.15em;
		font-size: 1.2em;
	}

	.hero-quote-form p.hero-quote-sub {
		text-align: center;
		margin-bottom: 0.6em;
		font-size: 0.82em;
		color: #666;
	}

	.hero-quote-form label {
		display: none;
	}

	.hero-quote-form input,
	.hero-quote-form textarea {
		width: 100%;
		margin-bottom: 0.5em;
		color: #444 !important;
	}

	.hero-quote-form input[type="text"],
	.hero-quote-form input[type="email"] {
		height: 2.25em;
	}

	.hero-quote-form textarea {
		padding: 0.5em 0.75em;
	}

	.hero-quote-form .hero-hp {
		display: none !important;
	}

	#banner .hero-quote-form input[type="submit"] {
		margin-bottom: 0;
		width: 100%;
		background-color: #4CAF50 !important;
		border-color: #4CAF50 !important;
		color: #ffffff !important;
	}

		#banner .hero-quote-form input[type="submit"]:hover {
			background-color: #66BB6A !important;
			border-color: #66BB6A !important;
		}

/* --- Gallery: responsive grid for portrait project photos --- */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1em;
	margin-bottom: 3em;
}

	.gallery-grid-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.gallery-grid .image {
		margin: 0;
	}

	.gallery-grid .image img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: 4px;
		background-color: #eee;
	}

@media screen and (max-width: 980px) {

	.gallery-grid,
	.gallery-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

}