/* Global */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

:root {
  --brand-green: #1a7f3f;
  --brand-green-dark: #145f2d;
  --light-bg: #f5f9fb;
  --card-bg: #ffffff;
  --muted: #777;
}

* { box-sizing: border-box; }
body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--light-bg);
  color: #222;
  line-height: 1.6;
}

/* Header / Nav */
.site-header {
  background-color: var(--brand-green);
  color: #fff;
  padding: 28px 20px;
  text-align: center;
}
.site-logo { max-height: 72px; display: inline-block; vertical-align: middle; }
.site-tagline { margin: 8px 0 0; font-weight: 500; }

.site-nav {
  background: #ffffff;
  text-align: center;
  padding: 10px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.site-nav .nav-link {
  margin: 0 14px;
  color: var(--brand-green);
  text-decoration: none;
  font-weight: 600;
}
.site-nav .nav-link:hover { color: var(--brand-green-dark); text-decoration: underline; }

/* Main content container used on pages like About */
.content-container {
  max-width: 900px;
  margin: 36px auto;
  padding: 24px;
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

/* Headings & text */
.content-container h1 {
  color: var(--brand-green-dark);
  font-size: 2.0rem;
  margin: 0 0 12px;
}
.content-container h2 {
  color: var(--brand-green);
  margin-top: 20px;
  font-size: 1.25rem;
}
.content-container p { margin-bottom: 1em; color: #333; }
.content-container ul { margin-left: 1.2em; margin-bottom: 1em; }

/* Highlight box */
.highlight-box {
  background: #e8f5e9;
  border-left: 4px solid var(--brand-green);
  padding: 12px;
  margin: 16px 0;
  border-radius: 4px;
}

/* Footer */
.site-footer {
  background: transparent;
  color: var(--muted);
  text-align: center;
  padding: 20px;
  font-size: 0.95rem;
}
.site-footer .footer-link { color: var(--brand-green); text-decoration: none; }
.site-footer .footer-link:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 768px) {
  .content-container { margin: 20px; padding: 18px; }
  .site-nav .nav-link { display: inline-block; margin: 8px; }
}