/* ===========================
   Verdant brand variables
=========================== */
:root{
  --primary:#007A53;   /* Verdant Green */
  --charcoal:#333333;  /* Body text */
  --light:#F5F5F5;     /* Page background */
  --link:#007ACC;      /* Links/buttons */
  --highlight:#FFD700; /* Accent hover */
  --white:#FFFFFF;
}

/* Base & typography (keep your existing) */
html, body { height: 100%; }
body {
  margin: 0;
  display: flex;            /* Footer pinning */
  flex-direction: column;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--charcoal);
  background-color: var(--light);
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  color: var(--charcoal);
}

/* ===========================
   Footer pinned to bottom
=========================== */
body > header, body > footer { flex-shrink: 0; }
main { flex: 1; }

/* Brand footer */
footer {
  background: var(--primary);
  color: var(--white);
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
  border-top: 0;
}

/* ===========================
   HEADER (Ananke uses background_color_class on wrapper)
=========================== */

/* Our custom background class hooked by config: background_color_class="bg-verdant" */
.bg-verdant {
  background-color: var(--primary) !important; /* Header background now Verdant Green */
}

/* Header title/subtitle in Ananke often use Tachyons classes like light-silver / white-80.
   Force them to white for contrast on green. */
header .light-silver,
header .white-80,
header .white-90 {
  color: var(--white) !important;
}

/* Keep links readable in header */
header a {
  color: var(--white) !important;
}
header a:hover { color: var(--highlight) !important; }

/* If the logo sits in the header and looks small, control its height */
header img.site-logo,
header nav .flex-l.center.items-center.justify-between > a img {
  height: 80px;            /* adjust to taste */
  width: auto;
  max-width: none;
}

/* ===========================
   HERO / COVER (homepage banner under header)
=========================== */

/* Reduce hero height on non-home pages */
body:not(.home) .cover,
body:not(.home) .hero {
  padding: 1.5rem 1rem; /* smaller padding for secondary pages */
}

.cover img,
.hero img {
  max-height: 280px; /* was 240px */
}

.cover,
.hero {
  background-color: var(--primary) !important;  /* Verdant Green banner */
  color: var(--white) !important;
  padding: 3rem 2rem;
  text-align: center;
}
.cover h1, .cover h2, .cover p,
.hero h1, .hero h2, .hero p {
  color: var(--white) !important;               /* strong contrast on green */
}
.cover img, .hero img {
  max-height: 240px;
  width: auto;
  margin: 0 0 .75rem 0;
}