/* SSU Donate minimalist theme - ALL body text 14px Open Sans.
   Headings proportional; error styles included (no extra CSS needed). */
:root{
  --bg:#ffffff;
  --grey-50:#f7f7f7;
  --grey-100:#efefef;
  --grey-300:#d9d9d9;
  --grey-600:#666666;
  --grey-800:#333333;
  --green:#2e7d32;
  --green-200:#aed580;
}

/* Base typography */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:var(--bg);
  color:var(--grey-800);
  font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:14px;
  line-height:1.75;
}

/* Ensure ALL controls use Open Sans 14px */
input, select, textarea, button, .btn {
  font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  font-size:14px !important;
  line-height:1.75;
}
::placeholder {
  font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:14px;
}

/* Headings: proportional sizes */
h1,h2,h3,h4,h5,h6 { font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; font-weight:700; margin:0 0 6px 0; line-height:1.35; }
h1{ font-size:24px; }
h2{ font-size:20px; }
h3{ font-size:18px; }
h4{ font-size:16px; }
h5{ font-size:15px; }
h6{ font-size:14px; }

.wrap{max-width:980px;margin:0 auto;padding:0 16px}
.hero{background:var(--green);border-bottom:1px solid #236227}
.hero h1,.hero p{color:#fff}
.hero .wrap{padding:24px 16px}

.boxed{background:#fff;border:1px solid var(--grey-300);padding:24px;margin:24px auto;border-radius:0} /* sharp corners */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1 / -1}

.label{display:block;margin-bottom:4px;color:var(--grey-600);font-weight:600}
.input, select, .select, textarea{width:100%;padding:12px;border:1px solid var(--grey-300);border-radius:0;background:#fff;color:var(--grey-800)}
.select{appearance:none}

.help{font-size:14px;color:var(--grey-600);margin-top:4px}

.actions{display:flex;gap:12px;justify-content:space-between;margin-top:16px}
.btn{display:inline-block;padding:12px 16px;border:1px solid var(--grey-300);background:var(--green);color:#fff;text-decoration:none;text-align:center;cursor:pointer;border-radius:0;font-weight:600}
.btn.secondary{background:var(--green-200);color:#053b06;border-color:#7fb857}
.btn.ghost{background:#fff;color:var(--grey-800)}

.summary{background:var(--grey-50);border:1px solid var(--grey-300);padding:16px;margin:8px 0}
.kv{display:grid;grid-template-columns:180px 1fr;gap:8px;font-size:14px}
.kv div{padding:2px 0;border-bottom:1px dashed var(--grey-100)}

.badge{display:inline-block;padding:2px 8px;border:1px solid var(--grey-300);background:#fff;margin-left:8px}
.note{background:#f9fff5;border:1px solid #cfe8c8;padding:12px;margin-top:8px}

.footer{background:var(--green);border-top:1px solid #236227;padding:24px 0;color:#fff;text-align:left}
.footer a{color:#fff}

/* Step title styled like an H2 */
.step-title{margin:0 0 8px 0;font-size:20px;font-weight:700;line-height:1.35}

hr{border:none;border-top:1px solid var(--grey-100);margin:16px 0}

@media(max-width:720px){.form-grid{grid-template-columns:1fr}}

/* ========= Error styling (from JS validator) ========= */
.help.__auto {
  font-size: 12px !important;
  color: #d32f2f !important; /* red */
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: #d32f2f !important;
  outline: none;
}

/* Sticky footer (compact, boxed-safe) */
html,body{height:100%}
body{min-height:100vh;display:flex;flex-direction:column;align-items:stretch}
.footer{margin-top:auto}
main:not(.boxed){flex:1}
main.wrap{width:100%}

/* Force green belts everywhere, with fallback */
.hero,.footer{background:var(--green,#006400)!important;color:#fff!important}
.hero a,.footer a{color:#fff!important}