/* The newsletter form. Small enough to keep beside the shortcode that loads it. */

.kelo-signup { max-width: 560px; }

.kelo-signup__form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
}

.kelo-signup__field { margin: 0 0 16px; }
.kelo-signup__field label { display: block; font-size: 16px; color: var(--body); }
.kelo-signup__field label { margin-bottom: 6px; font-weight: 600; color: var(--ink); }

.kelo-signup__field input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 8px);
  padding: 11px 13px;
}
.kelo-signup__field input[type="email"]:focus {
  outline: none;
  border-color: var(--pine);
  box-shadow: 0 0 0 3px var(--pine-wash);
}

/* What pressing the button means, said before it is pressed. Full body colour rather than the
   grey of the fine print underneath: this is the sentence consent rests on, not a footnote. */
.kelo-signup__agree {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}

.kelo-signup__actions { margin: 0 0 16px; }
.kelo-signup__actions .kelo-btn { border: 0; font: inherit; font-weight: 600; cursor: pointer; }

.kelo-signup__small { margin: 0; font-size: 14px; line-height: 1.6; color: var(--soft); }

.kelo-signup__note {
  border-radius: var(--r-lg);
  padding: 14px 18px;
  margin: 0 0 20px;
  font-size: 16px;
}
.kelo-signup__note--good { background: var(--pine-wash); color: var(--pine-dark); }
.kelo-signup__note--bad { background: #FBECEC; color: #A11F1F; }

/* Off-screen rather than display:none — a robot skips what is hidden outright. */
.kelo-signup__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 640px) {
  .kelo-signup__form { padding: 20px 18px 18px; }
}