/*
 * West Roots – Service Area Template
 * Values ported 1:1 from the design's inline styles. Everything is scoped
 * under .wrsa so the site's header/footer and other pages are untouched.
 */

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300 800;
	font-stretch: 100%;
	font-display: swap;
	src: url(../fonts/open-sans-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url(../fonts/oswald-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Let the template run full width inside Astra ---- */
body.wrsa-template .site-content > .ast-container {
	max-width: none;
	padding: 0;
	margin: 0;
	display: block;
}
body.wrsa-template.ast-separate-container,
body.wrsa-template .site-content { background: #ffffff; }

/* ---- Base + theme resets (scoped) ---- */
.wrsa {
	container-type: inline-size;
	width: 100%;
	background: #ffffff;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #2b2f24;
	-webkit-font-smoothing: antialiased;
}
.wrsa *, .wrsa *::before, .wrsa *::after { box-sizing: border-box; }
.wrsa h1, .wrsa h2, .wrsa h3, .wrsa p, .wrsa ul, .wrsa figure, .wrsa blockquote { margin: 0; }
.wrsa h1, .wrsa h2, .wrsa h3 { letter-spacing: normal; }
.wrsa a { box-shadow: none; transition: color .15s, background-color .15s, border-color .15s; }
.wrsa a:focus-visible, .wrsa summary:focus-visible { outline: 3px solid #a9c77e; outline-offset: 3px; }
.wrsa svg { display: inline-block; vertical-align: middle; flex: none; }
.wrsa img { max-width: 100%; height: auto; }

.wrsa-wrap { max-width: 1200px; margin: 0 auto; }
.wrsa-wrap--narrow { max-width: 900px; }
.wrsa-stack { display: flex; flex-direction: column; gap: 32px; }
.wrsa-stack--md { gap: 28px; }
.wrsa-stack--sm { gap: 24px; }
.wrsa-stack--nearby { gap: 22px; }
.wrsa-head { display: flex; flex-direction: column; gap: 12px; }
.wrsa-center { align-self: center; }

.wrsa-sec { background: #ffffff; padding: 72px 24px; }
.wrsa-sec--grey { background: #f2f2f2; }
.wrsa-sec--dark { background: #202714; color: #e6ecdb; }
.wrsa-sec--tight { padding: 64px 24px; }

/* Type */
.wrsa .wrsa-h2 {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: clamp(28px, 3.2cqi, 42px);
	line-height: 1.15;
	text-transform: uppercase;
	color: #202714;
}
.wrsa .wrsa-h2--sm { font-size: clamp(26px, 2.8cqi, 36px); }
.wrsa .wrsa-sec--dark .wrsa-h2 { color: #ffffff; }
.wrsa-lead { font-size: 17px; line-height: 1.65; color: #3f4636; max-width: 720px; }
.wrsa-lead--wide { max-width: 760px; }
.wrsa-lead--full { max-width: none; }

/* Buttons */
.wrsa .wrsa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #557a17;
	color: #ffffff;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	padding: 14px 24px;
	border-radius: 26px;
	border: 0;
	text-decoration: none;
}
.wrsa .wrsa-btn:hover { background: #4f7016; color: #ffffff; }
.wrsa .wrsa-btn--lg { font-size: 17px; padding: 16px 30px; border-radius: 28px; }
.wrsa .wrsa-btn--ghost { background: transparent; border: 2px solid #a9c77e; padding: 12px 22px; }
.wrsa .wrsa-btn--ghost:hover { background: #2c3520; }
.wrsa .wrsa-btn--outline {
	min-height: 48px;
	padding: 0 30px;
	border: 2px solid #557a17;
	background: #ffffff;
	color: #4f7016;
}
.wrsa .wrsa-btn--outline:hover { background: #EDFBE2; color: #4f7016; }
.wrsa .wrsa-textlink { font-weight: 700; font-size: 16px; color: #4f7016; text-decoration: underline; }
.wrsa .wrsa-textlink--sm { font-size: 15px; width: fit-content; }

/* Icon dots */
.wrsa-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 20px;
	background: #EDFBE2;
	color: #4f7016;
}
.wrsa-dot--lg { width: 52px; height: 52px; border-radius: 26px; }

/* Editor-only placeholders + notes */
.wrsa-ph {
	background: #3d4a2a;
	color: #dfe8cf;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	padding: 24px;
	font-size: 14px;
	line-height: 1.5;
}
.wrsa-ph strong { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; }
.wrsa-ph--hero { aspect-ratio: 4 / 3; border-radius: 8px; }
.wrsa-ph--job { aspect-ratio: 3 / 2; font-size: 13px; gap: 8px; }
.wrsa mark.wrsa-note { background: #FFF4E6; color: #9a3412; font-weight: 600; padding: 0; }

/* ---- 1. Hero ---- */
.wrsa-hero { background: #ffffff; padding: 48px 24px 64px; }
.wrsa-hero__grid { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.wrsa-hero__copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.wrsa-hero__grid--solo .wrsa-hero__copy { max-width: 760px; }
.wrsa-crumbs { font-size: 14px; color: #5a5a5a; }
.wrsa .wrsa-crumbs a { color: #4f7016; text-decoration: underline; }
.wrsa-hero__titles { display: flex; flex-direction: column; gap: 8px; }
.wrsa .wrsa-eyebrow {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #557a17;
}
.wrsa .wrsa-h1 {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: clamp(36px, 4.6cqi, 62px);
	line-height: 1.05;
	text-transform: uppercase;
	color: #202714;
}
.wrsa-hero__intro { font-size: 18px; line-height: 1.65; color: #3f4636; max-width: 620px; }
.wrsa-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.wrsa .wrsa-hero__phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #202714;
	font-weight: 700;
	font-size: 20px;
	text-decoration: none;
	padding: 10px 0;
}
.wrsa-hero__phone svg { color: #557a17; }
.wrsa-hero__media { flex: 1 1 420px; min-width: 0; }
.wrsa .wrsa-hero__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.wrsa-trust {
	margin: 40px auto 0 !important;
	padding: 22px 0 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px 32px;
	border-top: 1px solid #e3e6dc;
	font-size: 16px;
	font-weight: 700;
	color: #202714;
}
.wrsa-trust li { display: flex; align-items: center; gap: 12px; margin: 0; }

/* ---- 2. Services ---- */
.wrsa-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1024px) { .wrsa-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wrsa-services { grid-template-columns: 1fr; } }
.wrsa .wrsa-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: #ffffff;
	border: 1px solid #dfe3d6;
	border-radius: 10px;
	padding: 26px 22px;
	text-decoration: none;
	color: #2b2f24;
}
.wrsa .wrsa-card:hover { border-color: #557a17; color: #2b2f24; }
.wrsa-card__title { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 22px; line-height: 1.3; text-transform: uppercase; color: #202714; }
.wrsa-card__text { font-size: 15px; line-height: 1.6; color: #3f4636; }
.wrsa-card__link { margin-top: auto; font-weight: 700; font-size: 15px; color: #4f7016; }
.wrsa-card:hover .wrsa-card__link { text-decoration: underline; }

/* ---- 3. Trees ---- */
.wrsa-trees { display: flex; flex-direction: column; border-bottom: 1px solid #dfe3d6; }
.wrsa-trees__th {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 32px;
	padding: 0 0 12px;
	border-bottom: 2px solid #202714;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #557a17;
}
.wrsa-trees__row { display: flex; flex-wrap: wrap; gap: 6px 32px; padding: 22px 0; border-top: 1px solid #dfe3d6; }
.wrsa-trees__c1 { flex: 1 1 200px; }
.wrsa-trees__c2 { flex: 1 1 240px; }
.wrsa-trees__c3 { flex: 2 1 380px; }
.wrsa .wrsa-trees__name { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 22px; line-height: 1.3; text-transform: uppercase; color: #202714; }
.wrsa-trees__where { font-size: 15px; line-height: 1.6; color: #5a5a5a; }
.wrsa-trees__problem { font-size: 16px; line-height: 1.6; color: #2b2f24; }

/* ---- 4. Weather ---- */
.wrsa-weather { display: flex; flex-wrap: wrap; gap: 48px; }
.wrsa-weather__copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.wrsa-weather__text { font-size: 17px; line-height: 1.7; color: #dfe6d2; }
.wrsa-weather__btns { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 6px; }
.wrsa-weather__note { font-size: 15px; color: #a9c77e; }
.wrsa .wrsa-weather__note a { color: #ffffff; font-weight: 700; text-decoration: underline; }
.wrsa-weather__panel {
	flex: 1 1 380px;
	min-width: 0;
	align-self: flex-start;
	background: #2c3520;
	border-radius: 10px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.wrsa .wrsa-weather__h3 { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; color: #bcba63; }
.wrsa-weather__panel ul { padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.55; color: #e6ecdb; list-style: disc; }
.wrsa-weather__panel li { margin: 0; }

/* ---- 5. Permits ---- */
.wrsa-permits { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.wrsa-permit { border: 1px solid #dfe3d6; border-radius: 10px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.wrsa .wrsa-permit h3 { font-family: 'Open Sans', sans-serif; font-size: 17px; line-height: 1.4; font-weight: 700; text-transform: none; color: #202714; }
.wrsa-permit p { font-size: 15px; line-height: 1.6; color: #3f4636; }

/* ---- 6. Recent work ---- */
.wrsa-work { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.wrsa-job { background: #ffffff; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.wrsa .wrsa-job__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.wrsa-job figcaption { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.wrsa-job__area { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: #557a17; }
.wrsa-job__line { font-size: 16px; line-height: 1.55; color: #2b2f24; }
.wrsa-areas { display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: flex-start; }
.wrsa-work + .wrsa-areas { margin-top: 24px; padding-top: 48px; border-top: 1px solid #dfe3d6; }
.wrsa-areas__head { flex: 1 1 340px; min-width: 0; }
.wrsa-areas__body { flex: 1.4 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.wrsa-areas__intro { font-size: 17px; line-height: 1.65; color: #3f4636; }
.wrsa .wrsa-areas__list {
	list-style: none;
	padding: 0;
	margin: 0;
	columns: 2;
	column-gap: 32px;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 600;
	color: #202714;
}
.wrsa .wrsa-areas__list li {
	position: relative;
	margin: 0 0 12px;
	padding-left: 22px;
	break-inside: avoid;
}
.wrsa .wrsa-areas__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #557a17;
}
@media (max-width: 480px) { .wrsa .wrsa-areas__list { columns: 1; } }

/* ---- 7. Reviews ---- */
.wrsa-reviews__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.wrsa-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.wrsa .wrsa-review {
	margin: 0;
	background: #f7f8f4;
	border: 0;
	border-radius: 10px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-style: normal;
	quotes: none;
}
.wrsa .wrsa-review::before, .wrsa .wrsa-review::after { content: none; }
.wrsa-review__stars { color: #8a8836; font-size: 18px; letter-spacing: 2px; }
.wrsa-review p { font-size: 16px; line-height: 1.65; color: #2b2f24; }
.wrsa-review footer { margin-top: auto; font-size: 14px; color: #5a5a5a; }
.wrsa-review footer strong { color: #202714; }

/* ---- 8. FAQ ---- */
.wrsa-faqs { display: flex; flex-direction: column; gap: 12px; }
.wrsa-faq { background: #ffffff; border-radius: 10px; padding: 20px 24px; }
.wrsa-faq summary { cursor: pointer; font-weight: 700; font-size: 18px; line-height: 1.4; color: #202714; }
.wrsa-faq__a { margin: 12px 0 0; font-size: 16px; line-height: 1.65; color: #3f4636; }
.wrsa-faq__a p + p { margin-top: 12px; }
.wrsa .wrsa-faq__a a { font-weight: 700; color: #4f7016; text-decoration: underline; }

/* ---- 9. Nearby ---- */
.wrsa-nearby {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 0;
	border-top: 2px solid #202714;
	border-bottom: 1px solid #dfe3d6;
	padding: 22px 0;
}
.wrsa .wrsa-nearby a {
	padding: 4px 28px 4px 0;
	margin-right: 28px;
	border-right: 2px solid #bcba63;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #202714;
	text-decoration: underline;
	text-decoration-color: #6a961f;
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}
.wrsa .wrsa-nearby a:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
.wrsa .wrsa-nearby a:hover { color: #557a17; }

/* ---- 10. CTA ---- */
.wrsa-cta { scroll-margin-top: 80px; }
.wrsa-cta__grid { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.wrsa-cta__copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.wrsa .wrsa-cta__h2 {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: clamp(30px, 3.6cqi, 46px);
	line-height: 1.1;
	text-transform: uppercase;
	color: #ffffff;
}
.wrsa-cta__text { font-size: 17px; line-height: 1.7; color: #dfe6d2; }
.wrsa .wrsa-cta__phone { display: inline-flex; align-items: center; gap: 12px; color: #ffffff; font-weight: 700; font-size: 24px; text-decoration: none; width: fit-content; }
.wrsa-cta__phone svg { color: #a9c77e; }
.wrsa .wrsa-cta__instant { color: #a9c77e; font-weight: 700; font-size: 16px; text-decoration: underline; }
.wrsa .wrsa-cta__instant:hover { color: #ffffff; }
.wrsa-cta__form { flex: 1 1 440px; min-width: 0; background: #ffffff; border-radius: 12px; padding: 30px; color: #2b2f24; }

/* WPForms inside the CTA card — match the design's form */
.wrsa-cta__form .wpforms-container { margin: 0 !important; }
.wrsa-cta__form .wpforms-field-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0 16px;
}
.wrsa-cta__form .wpforms-field { padding: 8px 0 !important; min-width: 0; }
.wrsa-cta__form .wpforms-field-textarea,
.wrsa-cta__form .wpforms-field-checkbox,
.wrsa-cta__form .wpforms-field-radio,
.wrsa-cta__form .wpforms-field-file-upload,
.wrsa-cta__form .wpforms-field-html,
.wrsa-cta__form .wpforms-field-divider,
.wrsa-cta__form .wpforms-field-address,
.wrsa-cta__form .wpforms-field-captcha,
.wrsa-cta__form .wpforms-field-gdpr-checkbox { grid-column: 1 / -1; }
.wrsa-cta__form .wpforms-field input,
.wrsa-cta__form .wpforms-field select,
.wrsa-cta__form .wpforms-field textarea { width: 100% !important; max-width: 100% !important; }
.wrsa-cta__form .wpforms-submit-container { padding-top: 8px !important; }
.wrsa-cta__form .wpforms-field-label { font-weight: 700 !important; font-size: 14px !important; color: #202714 !important; }
.wrsa-cta__form input[type="text"],
.wrsa-cta__form input[type="tel"],
.wrsa-cta__form input[type="email"],
.wrsa-cta__form select,
.wrsa-cta__form textarea {
	border: 1px solid #c9cfbd !important;
	border-radius: 6px !important;
	font-family: inherit !important;
	font-size: 16px !important;
}
.wrsa-cta__form input[type="text"],
.wrsa-cta__form input[type="tel"],
.wrsa-cta__form input[type="email"],
.wrsa-cta__form select { height: 46px !important; padding: 0 12px !important; }
.wrsa-cta__form textarea { padding: 12px !important; }
.wrsa-cta__form button[type="submit"],
.wrsa-cta__form .wpforms-submit {
	width: 100% !important;
	height: 54px !important;
	border: 0 !important;
	border-radius: 27px !important;
	background: #557a17 !important;
	color: #ffffff !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	font-size: 17px !important;
	cursor: pointer;
}
.wrsa-cta__form button[type="submit"]:hover,
.wrsa-cta__form .wpforms-submit:hover { background: #4f7016 !important; }

/* ---- Small screens (matches the design's 390px "compact" board) ---- */
@media (max-width: 767px) {
	.wrsa-hero { padding: 32px 20px 48px; }
	.wrsa-sec, .wrsa-sec--tight { padding: 56px 20px; }
	.wrsa-hero__grid, .wrsa-weather, .wrsa-cta__grid { gap: 32px; }
	.wrsa-hero__copy, .wrsa-hero__media, .wrsa-weather__copy, .wrsa-weather__panel, .wrsa-cta__copy, .wrsa-cta__form { flex-basis: 100%; }
	.wrsa-trees__th { display: none; }
	.wrsa-trust { margin: 32px auto 0 !important; }
	.wrsa-cta__form { padding: 22px; }
	.wrsa .wrsa-nearby a { font-size: 20px; padding-right: 18px; margin-right: 18px; }
}