/* Basic, responsive, accessible starter CSS for nonprofit site */
:root{
  --brand:#0b6b5a;
  --accent:#f5a623;
  --muted:#666;
  --bg:#fff;
  --max-width:980px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:#222;
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:1rem;
}

.site-header{
  border-bottom:1px solid #eee;
  background:#fafafa;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand{
  font-weight:700;
  color:var(--brand);
  text-decoration:none;
  font-size:1.25rem;
}
.main-nav a{
  margin-left:0.75rem;
  text-decoration:none;
  color:inherit;
  font-weight:500;
}
.main-nav a:hover{color:var(--brand)}

.hero{
  padding:2rem 0;
  text-align:left;
}
.lede{color:var(--muted); font-size:1.125rem}

.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem;
}
.card{background:#fff; border:1px solid #f0f0f0; padding:1rem; border-radius:6px}

.program-list{list-style:none; padding:0}
.program-list li{padding:.6rem 0; border-bottom:1px dashed #eee}

.site-footer{
  border-top:1px solid #eee;
  background:#fafafa;
  padding:1rem 0;
  margin-top:2rem;
}

.btn{
  display:inline-block;
  background:var(--brand);
  color:#fff;
  padding:.5rem .9rem;
  border-radius:6px;
  text-decoration:none;
}
.btn.outline{background:transparent; color:var(--brand); border:1px solid var(--brand)}
.btn.donate{background:var(--accent); color:#000}

.muted{color:var(--muted)}

.contact-form label{display:block; margin-bottom:.75rem; font-size:.95rem}
.contact-form input, .contact-form textarea{
  width:100%;
  padding:.5rem;
  border:1px solid #ddd;
  border-radius:4px;
  margin-top:.25rem;
}
@media (max-width:640px){
  .site-header .container{flex-direction:column; align-items:flex-start}
  .main-nav{width:100%; display:flex; gap:.5rem; overflow:auto}
}