/* ==========================================================================
   Acres MHP, LLC
   Brand palette is pulled straight from the logo and the entry sign:
     brown  #75420F   cream #FAEED7   green #287241   saddle #AD6F3E
   ========================================================================== */

:root {
	--brown:        #75420f;
	--brown-dark:   #4e2c09;
	--brown-light:  #ad6f3e;
	--cream:        #faeed7;
	--cream-soft:   #fdf8ee;
	--green:        #287241;
	--green-dark:   #1d5530;
	--ink:          #241a10;
	--muted:        #6a5c4c;
	--line:         #e6d9be;
	--shadow:       0 10px 30px rgba(36, 26, 16, .08);
	--radius:       10px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink);
	background: #fff;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, .font-display {
	font-family: 'Bitter', Georgia, 'Times New Roman', serif;
	font-weight: 700;
	line-height: 1.2;
	color: var(--brown-dark);
}

h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

a { color: var(--brown); }
a:hover { color: var(--green); }

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1200;
	background: var(--brown);
	color: #fff;
	padding: 12px 20px;
}
.skip-link:focus { left: 0; color: #fff; }

/* --- Buttons ------------------------------------------------------------ */

.btn-brand,
.btn-green,
.btn-outline-cream {
	border-radius: 4px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 13px 30px;
	border: 2px solid transparent;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn-brand { background: var(--brown); color: #fff; }
.btn-brand:hover, .btn-brand:focus { background: var(--brown-dark); color: #fff; }

.btn-green { background: var(--green); color: #fff; }
.btn-green:hover, .btn-green:focus { background: var(--green-dark); color: #fff; }

.btn-outline-cream { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn-outline-cream:hover, .btn-outline-cream:focus { background: var(--cream); color: var(--brown-dark); }

.btn-sm { padding: 8px 18px; font-size: .875rem; }

/* --- Header / nav ------------------------------------------------------- */

.site-header {
	background: var(--cream-soft);
	border-bottom: 3px solid var(--brown);
	position: sticky;
	top: 0;
	z-index: 1030;
}

.site-header .navbar { padding: .65rem 0; }

.navbar-brand img {
	height: 52px;
	width: auto;
	display: block;
}

.site-header .nav-link {
	color: var(--brown-dark);
	font-weight: 600;
	padding: .5rem .85rem;
	border-bottom: 2px solid transparent;
}
.site-header .nav-link:hover,
.site-header .nav-link[aria-current="page"] {
	color: var(--green);
	border-bottom-color: var(--green);
}

.navbar-toggler {
	border-color: var(--brown);
	box-shadow: none !important;
}
.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2375420f' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Hero --------------------------------------------------------------- */

.hero {
	position: relative;
	background: var(--brown-dark) center/cover no-repeat;
	color: #fff;
}
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(36, 22, 8, .88) 0%, rgba(36, 22, 8, .72) 45%, rgba(36, 22, 8, .45) 100%);
}
.hero > .container {
	position: relative;
	z-index: 1;
	padding-block: clamp(72px, 11vw, 130px);
}
.hero h1 { color: #fff; }
.hero .lead {
	font-family: 'Bitter', Georgia, serif;
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	color: var(--cream);
	margin-top: .75rem;
}
.hero p { color: rgba(255, 255, 255, .9); max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }

/* Compact hero used on interior pages */
.page-hero { background: var(--brown-dark); color: #fff; }
.page-hero > .container { padding-block: clamp(48px, 7vw, 76px); }
.page-hero h1 { color: #fff; margin: 0; }
.page-hero p { color: var(--cream); margin: .75rem 0 0; max-width: 66ch; }

/* --- Section rhythm ----------------------------------------------------- */

.section { padding-block: clamp(48px, 7vw, 84px); }
.section-cream { background: var(--cream-soft); }
.section-brown { background: var(--brown); color: var(--cream); }
.section-brown h2, .section-brown h3 { color: #fff; }
.section-green { background: var(--green); color: #fff; }
.section-green h2 { color: #fff; }

.eyebrow {
	font-family: 'Source Sans 3', sans-serif;
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--green);
	margin-bottom: .5rem;
}
.section-brown .eyebrow, .section-green .eyebrow { color: var(--cream); }

.lead-copy { font-size: 1.125rem; color: var(--muted); max-width: 68ch; }
.section-brown .lead-copy, .section-green .lead-copy { color: rgba(255, 255, 255, .88); }

.rule {
	width: 64px;
	height: 4px;
	background: var(--green);
	border: 0;
	opacity: 1;
	margin: 1.25rem 0 1.5rem;
}
.rule-center { margin-inline: auto; }
.section-brown .rule, .section-green .rule { background: var(--cream); }

/* --- Cards -------------------------------------------------------------- */

.pillar {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 32px 26px;
	height: 100%;
	box-shadow: var(--shadow);
}
.pillar-step {
	font-family: 'Bitter', serif;
	font-size: 2rem;
	color: var(--brown-light);
	line-height: 1;
	display: block;
	margin-bottom: .35rem;
}
.pillar h3 { margin-bottom: .5rem; }
.pillar p { margin: 0; color: var(--muted); }

.community-card {
	display: block;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	height: 100%;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--shadow);
	transition: transform .18s ease, box-shadow .18s ease;
}
.community-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(36, 26, 16, .14);
	color: inherit;
}
.community-card img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}
.community-card-body { padding: 22px 24px 26px; }
.community-card-body h3 { margin-bottom: .35rem; }
.community-card-body p { margin: 0 0 .35rem; color: var(--muted); }
.community-card-body p:last-of-type { margin-bottom: 0; }
.community-card-meta { font-weight: 600; color: var(--brown) !important; }
/* One community on its own would look stranded in a 3-across grid, so it gets
   a full-width card with the photo beside the copy. */
@media (min-width: 992px) {
	.community-card.is-wide { display: grid; grid-template-columns: 5fr 6fr; }
	.community-card.is-wide img { height: 100%; min-height: 330px; }
	.community-card.is-wide .community-card-body { padding: 40px 44px; align-self: center; }
	.community-card.is-wide .community-card-body h3 { font-size: 1.75rem; }
}

.community-card .more {
	display: inline-block;
	margin-top: 1rem;
	font-weight: 700;
	color: var(--green);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .875rem;
}

/* --- Split feature ------------------------------------------------------ */

.split img {
	width: 100%;
	height: 100%;
	min-height: 300px;
	object-fit: cover;
	border-radius: var(--radius);
}

/* --- Community detail --------------------------------------------------- */

.community-banner {
	height: clamp(240px, 38vw, 440px);
	background: var(--brown-dark) center/cover no-repeat;
}
.fact-list { list-style: none; padding: 0; margin: 0; }
.fact-list li {
	display: flex;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
}
.fact-list li:last-child { border-bottom: 0; }
.fact-list .label {
	flex: 0 0 108px;
	font-weight: 700;
	color: var(--brown-dark);
}
.gallery img {
	width: 100%;
	height: 280px;
	object-fit: cover;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: #fff;
}
.map-embed {
	width: 100%;
	height: 380px;
	border: 0;
	border-radius: var(--radius);
	display: block;
}

/* --- Forms -------------------------------------------------------------- */

.form-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(24px, 4vw, 40px);
	box-shadow: var(--shadow);
}
.form-card label { font-weight: 600; margin-bottom: .25rem; }
.form-card .form-control {
	border-radius: 4px;
	border-color: var(--line);
	padding: .65rem .85rem;
}
.form-card .form-control:focus {
	border-color: var(--green);
	box-shadow: 0 0 0 .2rem rgba(40, 114, 65, .15);
}
.hp-field { position: absolute; left: -9999px; }

.form-status { margin-top: 1rem; font-weight: 600; }
.form-status.is-error { color: #a12b19; }
.form-status.is-ok { color: var(--green); }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
	background: var(--brown-dark);
	color: rgba(250, 238, 215, .82);
	padding-top: 56px;
}
.footer-logo { height: 60px; width: auto; }
.footer-tagline {
	font-family: 'Bitter', serif;
	color: var(--cream);
	margin-top: 1rem;
	max-width: 34ch;
}
.footer-heading {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--cream);
	margin-bottom: 1rem;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { padding: 4px 0; }
.footer-links a { color: rgba(250, 238, 215, .82); text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
	border-top: 1px solid rgba(250, 238, 215, .18);
	margin-top: 42px;
	padding-block: 20px;
	font-size: .9375rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: rgba(250, 238, 215, .82); }

/* --- Prose (privacy policy etc.) ---------------------------------------- */

.prose { max-width: 74ch; }
.prose h2 { font-size: 1.35rem; margin-top: 2.25rem; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: .4rem; }

/* --- Responsive tweaks -------------------------------------------------- */

@media (max-width: 991.98px) {
	.site-header .navbar-collapse { padding-block: .75rem; }
	.site-header .nav-link { padding-inline: 0; }
	.site-header .nav-link[aria-current="page"] { border-bottom-color: transparent; }
	.navbar-brand img { height: 44px; }
	.hero::after {
		background: linear-gradient(180deg, rgba(36, 22, 8, .84) 0%, rgba(36, 22, 8, .74) 100%);
	}
}

@media (max-width: 575.98px) {
	.fact-list li { flex-direction: column; gap: 2px; }
	.fact-list .label { flex: none; }
	.gallery img { height: 220px; }
}