/* Dezelfde inkt als de app: warm papier, flesgroen, hairlines, plat. */
:root {
  --page: #F6F4EF;
  --block: #ECE9E1;
  --card: #FCFBF8;
  --separator: rgba(32, 31, 26, 0.12);
  --text: #201F1A;
  --text-secondary: #5E5B51;
  --text-tertiary: #8A8677;
  --accent: #2E7256;
  --accent-wash: #DDEAE0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #171A17;
    --block: #212520;
    --card: #252A24;
    --separator: rgba(235, 233, 222, 0.10);
    --text: #EBE9E0;
    --text-secondary: #A9A69A;
    --text-tertiary: #73706A;
    --accent: #95C9AA;
    --accent-wash: #25332B;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 24px 64px;
  background: var(--page);
  color: var(--text);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 640px; margin: 0 auto; }

header { padding: 64px 0 8px; text-align: center; }

.mark { width: 76px; height: 76px; margin: 0 auto 24px; display: block; }

h1 { font-size: 40px; line-height: 1.15; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.02em; }
h2 { font-size: 22px; font-weight: 600; margin: 48px 0 12px; letter-spacing: -0.01em; }
h3 { font-size: 17px; font-weight: 600; margin: 28px 0 6px; }

.lead { font-size: 21px; color: var(--text-secondary); margin: 0; }

p { margin: 0 0 16px; }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-wash); }
a:hover { border-bottom-color: var(--accent); }

ul { padding-left: 22px; margin: 0 0 16px; }
li { margin-bottom: 8px; }

.points { list-style: none; padding: 0; margin: 40px 0; }
.points li { border-top: 1px solid var(--separator); padding: 20px 0 4px; margin: 0; }
.points strong { display: block; font-size: 17px; margin-bottom: 2px; }
.points span { color: var(--text-secondary); }

.note {
  background: var(--block);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 32px 0;
}
.note p:last-child { margin-bottom: 0; }

.meta { color: var(--text-tertiary); font-size: 14px; }

nav.langs { text-align: center; padding: 24px 0 0; font-size: 14px; color: var(--text-tertiary); }
nav.langs a { border: 0; }

footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--separator);
  color: var(--text-tertiary);
  font-size: 14px;
  text-align: center;
}
footer a { border: 0; }

/* --- Contactformulier ------------------------------------------------- */

.contact-form { margin: 32px 0 8px; }

.field { margin-bottom: 20px; }

.field label {
  display: block;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--separator);
  border-radius: 6px;
  padding: 10px 12px;
  -webkit-appearance: none;
  appearance: none;
}

.field select { background-image: none; }

.field textarea { resize: vertical; min-height: 140px; line-height: 1.5; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: transparent;
}

/* De rekensom: label en invoer naast elkaar, invoer klein. */
.captcha-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.captcha-row span { font-size: 14px; color: var(--text-secondary); }
.captcha-row input { width: 5em; }

.contact-form button {
  font: inherit;
  font-weight: 600;
  color: var(--page);
  background: var(--accent);
  border: 0;
  border-radius: 6px;
  padding: 12px 24px;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.contact-form button:hover { opacity: 0.92; }
.contact-form button:active { transform: scale(0.98); }
.contact-form button[disabled] { opacity: 0.5; cursor: default; transform: none; }

/* Meldingen. Leeg = onzichtbaar, zodat er geen lege blokken staan. */
#form-success:not(:empty),
#form-error:not(:empty) {
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 15px;
}
#form-success:not(:empty) { background: var(--accent-wash); color: var(--text); }
#form-error:not(:empty)   { background: var(--block);       color: var(--text); }

/* Zonder JavaScript valt er niets te versturen; zeg dat dan ook. */
.no-js-note { font-size: 14px; color: var(--text-tertiary); }

/* Link naar het contactformulier op damonia.com — ziet eruit als de oude verstuurknop. */
.contact-link { margin: 28px 0 12px; }
.contact-link a {
  display: inline-block;
  font-weight: 600;
  color: var(--page);
  background: var(--accent);
  border-radius: 6px;
  padding: 12px 24px;
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.contact-link a:hover { opacity: 0.92; }
.contact-link a:active { transform: scale(0.98); }