/* Contact form — self-contained, theme-aware, no dependencies.
   Every class is prefixed cf- so it cannot collide with a site's own CSS.
   Colours come from CSS variables, so a site can override just these. */

.cf-form, .cf-notice, .cf-wrap {
  --cf-ink:    #14161A;
  --cf-muted:  #5C6470;
  --cf-rule:   #D9D5CE;
  --cf-bg:     #FFFFFF;
  --cf-accent: #1D6B57;
  --cf-err:    #B3261E;
  --cf-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--cf-ink);
}
@media (prefers-color-scheme: dark) {
  .cf-form, .cf-notice, .cf-wrap {
    --cf-ink: #ECEDEE; --cf-muted: #99A1AA; --cf-rule: #333A40;
    --cf-bg: #16191C; --cf-accent: #58C4A4; --cf-err: #F2B8B5;
  }
}

.cf-wrap { max-width: 40rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; line-height: 1.6; }
.cf-wrap h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.15; margin: 0 0 .4em; }
.cf-lede { font-size: 1.1rem; color: var(--cf-muted); margin: 0 0 2rem; }

.cf-form { max-width: 34rem; }
.cf-field { margin-bottom: 1.25rem; }
.cf-field label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; }
.cf-opt { font-weight: 400; color: var(--cf-muted); }
.cf-hint { font-size: .875rem; color: var(--cf-muted); margin: 0 0 .4rem; }
.cf-legal { margin-top: 1rem; }

.cf-field input[type=text],
.cf-field input[type=email],
.cf-field textarea,
.cf-field select {
  width: 100%; box-sizing: border-box; padding: .7rem .8rem;
  font: inherit; color: var(--cf-ink); background: var(--cf-bg);
  border: 1px solid var(--cf-rule); border-radius: var(--cf-radius);
}
.cf-field textarea { min-height: 9rem; resize: vertical; }
.cf-field input:focus, .cf-field textarea:focus, .cf-field select:focus {
  outline: 2px solid var(--cf-accent); outline-offset: 1px; border-color: var(--cf-accent);
}
.cf-err { color: var(--cf-err); font-size: .875rem; margin: .35rem 0 0; }

.cf-check { display: flex; gap: .65rem; align-items: flex-start; }
.cf-check input { margin-top: .3rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--cf-accent); }
.cf-check label { font-weight: 400; font-size: .95rem; }

/* Honeypot: off-screen, NOT display:none — bots skip obviously hidden fields. */
.cf-hp { position: absolute !important; left: -9999px !important; top: auto;
         width: 1px; height: 1px; overflow: hidden; }

.cf-btn {
  display: inline-block; padding: .8rem 1.5rem; border-radius: var(--cf-radius);
  background: var(--cf-accent); color: #fff; border: 1px solid var(--cf-accent);
  font: inherit; font-weight: 600; cursor: pointer;
}
.cf-btn:hover { filter: brightness(.92); }
.cf-btn:focus-visible { outline: 2px solid var(--cf-ink); outline-offset: 2px; }

.cf-notice { padding: 1rem 1.2rem; border-radius: var(--cf-radius);
             border: 1px solid var(--cf-rule); margin-bottom: 1.5rem; }
.cf-notice h2 { margin: 0 0 .4em; font-size: 1.2rem; }
.cf-notice p  { margin: 0; }
.cf-ok  { border-color: var(--cf-accent); }
.cf-bad { border-color: var(--cf-err); color: var(--cf-err); }

.cf-turnstile { margin-bottom: 1.25rem; }