/* Palette pulled directly from getComputedStyle() on the live lindalepark.org
   (not the theme source — Weebly injects the real values server-side, and
   this site's editor sets colors per text block rather than through a
   consistent token system, so this is the closest a systematic palette
   can get, not a byte-for-byte match of every hand-picked instance). */
:root {
  --forest: #355E3B;       /* real body/header/footer background green */
  --forest-dark: #1B3B0F;  /* real button fill / hover green */
  --cream: #F5F5DC;        /* real light-section background */
  --ivory: #FFFFF0;        /* real text/border color on green backgrounds */
  --charcoal: #222222;     /* real heading color on light backgrounds */
  --gray: #2C2D36;         /* real body text color on light backgrounds */
  --gold: #B8860B;         /* real secondary-button border/text color */
  --banner-orange: #D2691E; /* real news-banner background */
  --tan: #EDE8D5;          /* not confirmed on the live site; kept as a secondary neutral */

  --font-heading: "Butler", Georgia, serif;
  --font-body: "Jost", sans-serif;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--gray);
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--charcoal);
}

a {
  color: var(--forest);
}

/* Self-hosted Butler (the live site's real heading font, confirmed via
   getComputedStyle — see palette note above) */
@font-face {
  font-family: "Butler";
  src: url("/fonts/Butler-Light.woff2") format("woff2"),
       url("/fonts/Butler-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Butler";
  src: url("/fonts/Butler.woff2") format("woff2"),
       url("/fonts/Butler.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Butler";
  src: url("/fonts/Butler-Medium.woff2") format("woff2"),
       url("/fonts/Butler-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Butler";
  src: url("/fonts/Butler-Bold.woff2") format("woff2"),
       url("/fonts/Butler-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Butler";
  src: url("/fonts/Butler-ExtraBold.woff2") format("woff2"),
       url("/fonts/Butler-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Butler";
  src: url("/fonts/Butler-Black.woff2") format("woff2"),
       url("/fonts/Butler-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

/* Home page opts out of main's contained width so the hero/service-boxes
   can run full-bleed; the real site's page shell is green, with a lot of
   green negative space around the light-cream sections. */
body.home {
  background: var(--forest);
}

body.home main {
  max-width: none;
  padding: 0;
}

.news-banner {
  background: var(--banner-orange);
  color: var(--cream);
  text-align: center;
  padding: 10px 16px;
  font-weight: 700;
}

.news-banner a {
  color: #FFFFFF;
  text-decoration: none;
}

.content-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px;
}

/* Hero split (40/60 pattern adapted from the Weebly theme export) */

.hero-split {
  display: flex;
  min-height: 420px;
}

.hero-split__image {
  flex: 1;
  min-width: 0;
}

.hero-split__image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
}

.hero-split__content {
  flex: 1;
  min-width: 0;
  background: var(--forest);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 48px;
  box-sizing: border-box;
}

.hero-split__content .subtitle {
  color: #FAF7F0;
}

.hero-split__content .big-header {
  font-size: 2.25rem;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--cream);
}

.hero-split__content .big-paragraph {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 24px;
  color: #FFFFFF;
}

@media (max-width: 820px) {
  .hero-split {
    flex-direction: column;
    min-height: 0;
  }

  .hero-split__image img {
    min-height: 240px;
    max-height: 280px;
  }

  .hero-split__content {
    padding: 40px 24px;
  }
}

/* Service boxes row (adapted from the Weebly theme export) — real site
   uses generous green padding around this row and small gaps between the
   cards themselves, not shared borders. */

.service-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 80px 12px;
}

.service-box {
  flex: 1;
  min-width: 240px;
  background: var(--cream);
  padding: 48px 32px;
  text-align: center;
}

.service-box h2 {
  font-size: 1.4rem;
  margin: 0 0 20px;
}

@media (max-width: 700px) {
  .service-boxes {
    padding: 40px 12px;
  }

  .service-box {
    flex-basis: 100%;
  }
}

main img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 8px 0;
}

main ul, main ol {
  padding-left: 1.25em;
}

main li {
  margin-bottom: 6px;
}

main blockquote {
  margin: 16px 0;
  padding: 8px 16px;
  border-left: 4px solid var(--gold);
  color: var(--gray);
  font-style: italic;
}

.btn {
  display: inline-block;
  background: transparent;
  color: var(--gold);
  text-decoration: none;
  padding: 13px 28px;
  border: 1px solid var(--gold);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 8px 8px 8px 0;
  transition: background-color 150ms ease, color 150ms ease;
}

.btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #FFFFFF;
}

/* Solid variant matching the real site's primary CTA (always filled,
   not outline-until-hover) — used for the hero button on a dark panel */
.btn--solid {
  background: var(--forest-dark);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.btn--solid:hover {
  background: transparent;
  border-color: #FFFFFF;
  color: #FFFFFF;
  opacity: 0.85;
}

.subtitle {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  color: var(--forest);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 16px 0;
}

.card {
  background: var(--tan);
  border-radius: 6px;
  padding: 16px 20px;
}

.card h3 {
  margin-top: 0;
}

.note {
  background: var(--tan);
  border-left: 4px solid var(--gold);
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 0.9rem;
}

.contact-block {
  margin: 16px 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
}

table caption {
  text-align: left;
  font-weight: 600;
  margin-bottom: 8px;
}

th, td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--tan);
}

/* Nav */

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  background: var(--forest);
  padding: 16px 24px;
  border-bottom: 2px solid var(--ivory);
}

.site-nav__brand {
  font-family: var(--font-body);
  color: var(--ivory);
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.site-nav__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__menu > li {
  position: relative;
}

.site-nav__menu > li > a,
.site-nav__toggle {
  display: block;
  padding: 8px 12px;
  color: var(--ivory);
  text-decoration: none;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: opacity 200ms ease;
}

.site-nav__menu > li > a:hover,
.site-nav__toggle:hover,
.site-nav__toggle:focus {
  opacity: 0.7;
}

.site-nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--forest-dark);
  list-style: none;
  margin: 0;
  padding: 8px 0;
  z-index: 10;
}

.site-nav__item--dropdown:hover .site-nav__dropdown,
.site-nav__item--dropdown:focus-within .site-nav__dropdown {
  display: block;
}

.site-nav__dropdown a {
  display: block;
  padding: 10px 16px;
  color: var(--ivory);
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.site-nav__dropdown a:hover,
.site-nav__dropdown a:focus {
  background: var(--forest);
}

/* Footer */

.site-footer {
  background: var(--forest);
  color: var(--ivory);
  padding: 32px 24px;
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  align-items: flex-start;
  font-size: 0.95rem;
}

.site-footer__org {
  font-family: var(--font-heading);
  color: var(--ivory);
  font-weight: 600;
  margin: 0 0 4px;
}

.site-footer__address p {
  margin: 0;
}

.site-footer__contact a {
  color: var(--ivory);
  text-decoration: none;
}

.site-footer__social {
  display: flex;
  gap: 16px;
}

.site-footer__social a {
  color: var(--ivory);
  text-decoration: none;
  font-weight: 600;
}

.site-footer__copyright {
  width: 100%;
  margin: 8px 0 0;
  color: var(--ivory);
  opacity: 0.75;
  font-size: 0.85rem;
}