/* Welche-Zimmerpflanze — shared stylesheet.
   Foundation-level visual layer: clean, green, readable. Intentionally plain;
   the polished design (imagery, type scale) is a later pass. All pages share
   this file via base.html. */

:root {
  --green: #2e7d32;
  --green-dark: #1b5e20;
  --green-soft: #e8f3e9;
  --ink: #1f2421;
  --muted: #5c6660;
  --warn: #8a5a00;
  --line: #dfe5e0;
  --maxw: 44rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  line-height: 1.6;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Header / footer chrome ───────────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 1.25rem;
}
.brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--green-dark);
  text-decoration: none;
}
.site-main {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}
.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.25rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.footer-nav a {
  color: var(--muted);
  text-decoration: none;
  margin: 0 0.6rem;
}
.footer-nav a:hover { color: var(--green-dark); text-decoration: underline; }
.footer-legal { margin: 0.5rem 0 0; }

/* ── Landing ──────────────────────────────────────────────────────────── */
.hero { padding: 1rem 0 1.5rem; }
.hero h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 0.75rem; }
.hero-lead { font-size: 1.1rem; margin: 0 0 0.75rem; }
.hero-sub { color: var(--muted); margin: 0 0 1.25rem; }
.hero-cta {
  display: inline-block;
  color: var(--green-dark);
  font-weight: 600;
  text-decoration: none;
}

.intro { background: var(--green-soft); border-radius: 12px; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.intro h2 { margin-top: 0; font-size: 1.2rem; }
.steps { margin: 0; padding-left: 1.2rem; }
.steps li { margin: 0.35rem 0; }

/* ── Form ─────────────────────────────────────────────────────────────── */
.form-section h2 { font-size: 1.3rem; }
.survey fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 1rem 0;
  padding: 1rem 1.1rem;
}
.survey legend { font-weight: 600; padding: 0 0.4rem; }
.opt { display: block; padding: 0.25rem 0; cursor: pointer; }
.survey textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem; font: inherit; }
.hp { position: absolute; left: -9999px; }

.btn-primary {
  font-size: 1rem;
  font-weight: 600;
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: 9px;
  background: var(--green);
  color: #fff;
  cursor: pointer;
}
.btn-primary:hover { background: var(--green-dark); }

/* ── Results ──────────────────────────────────────────────────────────── */
.results-head h1 { font-size: 1.6rem; margin-bottom: 0.25rem; }
.results-meta { color: var(--muted); margin-top: 0; }
.plant-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.plant-name { margin: 0 0 0.5rem; font-size: 1.25rem; }
.botanical { color: var(--muted); font-style: italic; font-weight: 400; font-size: 0.95rem; }
.card-label { font-weight: 600; margin: 0.6rem 0 0.2rem; }
.reasons, .cautions { margin: 0; padding-left: 1.2rem; }
.cautions li { color: var(--warn); }
.results-again { margin-top: 1.5rem; }
.results-again a, .legal a { color: var(--green-dark); }

/* ── Legal pages ──────────────────────────────────────────────────────── */
.legal h1 { font-size: 1.6rem; }
.legal h2 { font-size: 1.15rem; margin-top: 1.5rem; }
.legal-block { line-height: 1.5; }
.draft-banner {
  background: #fff4e0;
  border: 1px solid #e0b873;
  color: var(--warn);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  font-size: 0.92rem;
}
.todo { color: var(--warn); font-weight: 600; }