/* ============================================
   COLOR PALETTE — edit these to retheme the site
   ============================================ */
:root {
	--color-primary: #042941;
	/* main brand color: headings, borders, nav links, form bg */
	--color-primary-dark: #013028;
	/* hover states */
	--color-primary-deep: #bc271e;
	/* darker accent: list item left borders */
	--color-surface: #Fefefe;
	/* light background: header, cards, list items */
	--color-bg: #fefefe;
	/* page background */
	--color-text: #2C2C2A;
	/* body text */
	--color-text-light: #fefefe;
	/* text on dark backgrounds (form) */
	--color-accent: #E8C05A;
	/* submit/button highlight color */
	--color-secondary: #bc271e;

}

/* ============================================
   BASE
   ============================================ */
body {
	font-family: 'Roboto', 'Open Sans', Arial, sans-serif;
	font-size: 16px;
	color: var(--color-text);
	background-color: var(--color-bg);
	margin: 0 auto;
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
}

main>*:not(.fullBleed) {
	width: min(90ch, calc(100% - 2rem));
}

.fullBleed {
	width: 100%;
}

.fullBleed>* {
	margin: 0 auto;
	width: min(90ch, 95%);
}

img {
	max-width: 100%;
	height: auto;
}

h1 {
	font-size: 2.5rem;
	margin: 2rem 0;
}

/* 40px if base is 16px */
h2 {
	font-size: 2rem;
	color: var(--color-primary);
	margin: 1.5rem 0;
}

/* 32px */
h3 {
	font-size: 1.75rem;
	color: var(--color-primary);
	margin: 1.25rem 0;
}

/* 28px */
h4 {
	font-size: 1.5rem;
	color: var(--color-primary);
	margin: 1rem 0;
}

/* 24px */
h5 {
	font-size: 1.25rem;
	margin: .75rem 0;
}

/* 20px */
h6 {
	font-size: 1.1rem;
	margin: .6rem 0;
}

p {
	margin: .5rem 0;
}

/* ============================================
   HEADER
   ============================================ */
.headerWrapper {
	/*background-color: rgba(245, 240, 232, 0.98); Light */
	background-color: rgba(3, 43, 68, 0.98);
	border-bottom: 2px solid var(--color-secondary);
	position: sticky;
	top: 0;
	padding-top: 0.8rem;
	z-index: 10;
}

header {
	width: min(120ch, calc(100% - 4rem)) !important;
	display: flex;
	height: 85px;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

header h1 {
	margin: 0;
}

header img {
	max-height: 70px;
	width: auto;
}

header svg {
	fill: var(--color-primary);
}

#header-contact {
	margin-left: 1rem;
	margin-right: auto;
	font-size: 0.9rem;
	line-height: 1.5;
}

#header-contact p {
	margin: 0;
	color: var(--color-text-light);
}

#header-contact a {
	color: var(--color-text-light);
	text-decoration: none;
}

#header-contact a:hover {
	color: var(--color-accent);
}

header nav {
	display: flex;
	justify-content: flex-end;
	gap: .5rem 2rem;
	flex-wrap: wrap;
}

header nav a {
	text-decoration: none;
	color: var(--color-surface);
	font-weight: 500;
	font-size: 1.2rem;
}

header nav a:hover {
	color: var(--color-secondary);
}

#menuToggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
}

#menuToggle span {
	display: block;
	width: 25px;
	height: 3px;
	background-color: var(--color-surface);
	border-radius: 2px;
	transition: transform 150ms ease, opacity 150ms ease;
}

#menuLinks {
	display: flex;
	gap: 0.5rem 2rem;
	flex-wrap: wrap;
	justify-content: flex-end;
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-contact {
	display: none;
}

/* ============================================
   SECTIONS
   ============================================ */
section {
	margin: 2rem auto;
	padding: 1rem;
	scroll-margin-top: 100px;
}

#serviceMowing,
#serviceMulchPine,
#serviceTrimming,
#serviceLeaves,
#serviceSeasonal {
	scroll-margin-top: 100px;
}

/*.heroWrapper {
	background-image: url("/assets/images/grass.jpg");
}
*/
.heroWrapper {
	background-color: var(--color-bg);
}

/* ============================================
   QUOTE SECTION
   ============================================ */
#sectionQuote {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	padding: 2rem min(4rem, 5%);
	gap: 2rem;
	width: min(120ch, calc(100% - 4rem)) !important;
	margin: 0 auto;
}

#heroH1 {
	font-size: 1rem;
	color: var(--color-text);
	opacity: 0.85;
	margin: 0 0 0.5rem;
	font-weight: 400;
}

#heroSlideshow {
	position: relative;
	width: 100%;
	height: 60%;
	min-height: 300px;
	margin: auto;
}

#heroSlideshow img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s ease;
	border-radius: 6px;
	/* override the global img styles */
	min-width: unset;
	max-width: unset;
	margin: 0;
	flex: unset;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#heroSlideshow img.active {
	opacity: 1;
}

#quotePitch {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 280px;
	border-radius: 6px;
	align-self: stretch;
	color: var(--color-text-light);
	gap: 0.5rem;
}

#quotePitch h2 {
	color: var(--color-secondary);
	font-size: 2.5rem;
	margin-top: 0;
	margin-bottom: 0
}

#quotePitch p {
	color: var(--color-primary);
	opacity: 0.85;
	font-size: 1.4rem;
	font-weight: 600;
	margin-top: 0;
}

#sectionQuote>form {
	flex: 1;
	min-width: 300px;
	background-color: var(--color-primary);
	color: var(--color-text-light);
	padding: 2rem;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	font-size: 1.2rem;
}

#otherCount.at-limit {
	color: #ff6b6b;
	opacity: 1;
}

#sectionQuote>form input,
#sectionQuote>form textarea {
	font-family: inherit;
}


#otherMsg,
#contactEmail,
#contactPhone {
	display: none;
	background-color: white;
	color: var(--color-text);
}

#otherMsg::placeholder,
#contactEmail::placeholder,
#contactPhone::placeholder {
	color: rgba(0, 0, 0, 0.4);
}

#sectionQuote>form>input {
	border-radius: 4px;
	box-sizing: border-box;
	padding: .5rem 1rem;
	font-size: 1rem;
}

#sectionQuote>form>select {
	padding: .5rem 1rem;
	border-radius: 4px;
}

#sectionQuote>form>fieldset {
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 6px;
	padding: 0.75rem 1rem;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#sectionQuote>form>fieldset>legend {
	padding: 0 0.5rem;
	font-weight: 500;
}

#sectionQuote>form>fieldset>label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

#otherMsg {
	width: 100%;
	min-height: 80px;
	margin-top: 0.25rem;
	padding: 0.5rem;
	border-radius: 4px;
	border: none;
	font-size: 1rem;
	box-sizing: border-box;
	resize: vertical;
}

#contactEmail,
#contactPhone {
	margin-top: 0.25rem;
	padding: 0.5rem 1rem;
	border-radius: 4px;
	border: none;
	font-size: 1rem;
	box-sizing: border-box;
	width: 100%;
}

#sectionQuote>form>input[type=button],
input[type=submit],
input[type=reset] {
	background-color: var(--color-accent);
	color: var(--color-primary);
	font-size: 1.2rem;
	font-weight: bold;
	border: none;
	padding: 16px 32px;
	text-decoration: none;
	margin: 4px 2px;
	cursor: pointer;
	width: 50%;
	align-self: center;
}

input[type=submit] {
	transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

input[type=submit]:hover {
	background-color: #e8c05a;
	color: #1C3D2A;
	transform: scale(1.05);
	cursor: pointer;
}

/* ============================================
   SERVICE SECTIONS
   ============================================ */
#sectionWhy p,
#serviceMowing p,
#serviceMulchPine>p,
#serviceTrimming p,
#serviceLeaves>p,
#serviceSeasonal p {
	line-height: 1.6;
	font-size: 1.2rem;
}

#sectionWhy div,
#serviceMowing div,
#serviceMulchPine div,
#serviceTrimming div,
#serviceLeaves>div,
#serviceSeasonal div {
	display: flex;
	flex-wrap: wrap;
	column-gap: 2rem;
	margin: auto;
}

#serviceMulchPine article,
#serviceLeaves>div>div {
	flex: 1;
}

#sectionWhy img,
#serviceMowing img,
#serviceMulchPine img,
#serviceTrimming img,
#serviceLeaves img,
#serviceSeasonal img {
	flex: 1;
	width: 100%;
	min-width: 350px;
	max-width: 45%;
	height: auto;
	margin-top: 1.5rem;
	margin-bottom: 3rem;
	margin-left: auto;
	margin-right: auto;
	display: block;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#serviceMowing img {
	min-width: 350px;
}

#sectionWhy ul {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: .5rem 1.5rem;
}

#sectionWhy li {
	padding: 1rem;
	background-color: var(--color-surface);
	border-left: 4px solid var(--color-secondary);
	margin: 0.5rem 0;
	box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

#sectionWhy>div:nth-of-type(2) article,
#serviceMulchPine article,
#serviceLeaves>div {
	text-align: center;
}

#sectionServices>ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	max-width: 100vw;
	padding: 0;
	margin: 0;
	justify-content: center;
	gap: 1rem;
}

#sectionServices>ul>li>a {
	display: block;
	padding: 1rem;
	text-decoration: none;
	color: var(--color-text-light);
	background-color: var(--color-secondary);
	border: 2px solid var(--color-primary);
	font-weight: 600;
	border-radius: 4px;
	transition: transform 100ms;
}

#sectionServices>ul>li>a:hover {
	color: var(--color-text-light);
	transform: scale(1.05);
}

#serviceMowing ul,
#serviceMulchPine ul,
#serviceTrimming ul,
#serviceSeasonal ul {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: .5rem;
}

#serviceMowing li,
#serviceMulchPine li,
#serviceTrimming li,
#serviceSeasonal li {
	padding: 1rem;
	background-color: var(--color-surface);
	border-left: 4px solid var(--color-secondary);
	margin: 0.5rem 0;
	box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

/* ============================================
   FOOTER
   ============================================ */
.footerWrapper {
	border-top: 2px solid var(--color-secondary);
}

footer {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	justify-content: space-between;
	text-align: left;
	padding-bottom: 0.5rem;
}

footer h2 {
	margin: 1.5rem 0 1rem 0;
	font-size: 1.5rem;
}

footer div>div {
	margin-top: 1rem;
}

footer div>div>a {
	padding-left: 12px;
}

footer section {
	margin: 0;
}

footer dl {
	display: grid;
	margin: 0;
	grid-template-columns: auto 1fr;
	grid-template-rows: 1fr;
	line-height: 1.6;
}

footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	line-height: 1.6;
}

footer a {
	text-decoration: underline;
	color: var(--color-text);
}

footer a:hover {
	color: var(--color-secondary);
}

.copyright {
	width: 100%;
	text-align: center;
	padding: 1rem 0 1.5rem;
	font-size: 0.9rem;
	color: #666;
}


/* MODAL FORM SUBMISSION */
.modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	opacity: 0;
	transition: opacity 200ms ease;
	pointer-events: none;
}

.modal-backdrop.visible {
	opacity: 1;
	pointer-events: all;
}

.modal {
	background: #fefefe;
	border-radius: 8px;
	padding: 2rem;
	width: min(420px, 90vw);
	position: relative;
	text-align: center;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 20px;
	color: #888;
	opacity: 0;
	transition: opacity 150ms ease;
	pointer-events: none;
}

.modal-close.visible {
	opacity: 1;
	pointer-events: all;
}

.status-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
	font-size: 22px;
}

.status-icon.success {
	background: #e6f4ea;
	color: #2d7a3a;
}

.status-icon.error {
	background: #fdecea;
	color: #c0392b;
}

.modal-title {
	font-size: 1.2rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
	color: #042941;
}

.modal-title.success {
	color: #2d7a3a;
}

.modal-title.error {
	color: #c0392b;
}

.modal-sub {
	font-size: 0.95rem;
	color: #555;
	margin: 0 0 0.5rem;
	line-height: 1.6;
}

.contact-pill {
	display: inline-block;
	background: #f4f4f4;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 6px 14px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #042941;
}

.error-list {
	text-align: left;
	background: #fdecea;
	border: 1px solid #f5c6c6;
	border-radius: 4px;
	padding: 10px 14px;
	margin: 0.75rem 0 0;
	font-size: 0.9rem;
	color: #c0392b;
	list-style: none;
}

.error-list li::before {
	content: '· ';
	font-weight: 700;
}

.dots {
	display: flex;
	gap: 6px;
	justify-content: center;
	margin-top: 1rem;
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ccc;
	animation: pulse 1.2s ease-in-out infinite;
}

.dot:nth-child(2) {
	animation-delay: 0.2s;
}

.dot:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes pulse {

	0%,
	80%,
	100% {
		opacity: 0.3;
		transform: scale(0.85);
	}

	40% {
		opacity: 1;
		transform: scale(1);
	}
}

@media (max-width: 600px) {

	section {
		margin: 1.5rem auto;
		padding: 0.5rem;
	}

	header {
		width: calc(100% - 2rem) !important;
	}

	#heroSlideshow {
		display: none;
	}

	#sectionQuote>form>input,
	#sectionQuote>form>fieldset {
		box-sizing: border-box;
		width: 100%;
	}

	#sectionQuote {
		width: calc(100% - 2rem) !important;
		padding: 1rem;
		gap: 1rem;
		flex-direction: column;
	}

	#sectionQuote>form {
		min-width: unset;
		width: 100%;
		padding: 1rem;
		box-sizing: border-box;
	}

	#quotePitch {
		min-width: unset;
		width: 100%;
	}

	.headerWrapper {
		position: sticky;
		top: 0;
		z-index: 10;
	}

	#menuToggle {
		display: flex;
	}

	#menuLinks {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 100%;
		right: 0;
		background-color: var(--color-surface);
		border: 1px solid var(--color-primary);
		padding: 1rem;
		gap: 1rem;
		width: 200px;
	}

	#menuLinks>li>a {
		color: var(--color-primary);
		text-decoration: underline var(--color-primary);
	}

	#menuLinks.open {
		display: flex;
	}

	.menu-contact {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		border-top: 1px solid var(--color-secondary);
		padding-top: 0.75rem;
		margin-top: 0.25rem;
	}

	.menu-contact a {
		color: var(--color-primary);
		font-size: 0.95rem;
		text-decoration: none;
	}

	#header-contact {
		display: none;
	}
}