/* ————————————————————————————————————————————
   lil bit cycling v2 — the newsletter sign-up

   Ported from the first theme's blog.css, applied to the Newsletter plugin's
   forms: the minimal one (.tnp-subscription-minimal — field and button in
   one row) and the standard one (.tnp-subscription — labelled fields, the
   button under them). The plugin's stylesheet names the inputs with their
   element and loads after this one, so every rule here names them the same
   way plus the form, and outranks it.
   ———————————————————————————————————————————— */

div.tnp.tnp-subscription-minimal,
div.tnp.tnp-subscription {
  --paper:     #ffffff;
  --ink:       #212121;
  --ink-soft:  #6e6e6e;
  --rule:      rgba(0, 0, 0, .09);
  --coral:     #fc4c02;
  --coral-deep:#c93e04;
  --sans:      "Quicksand", "helvetica neue", helvetica, arial, sans-serif;

  width: auto;
  max-width: none;
  margin: 1.4rem 0 0;
  padding: 0;
  font-family: var(--sans);
  text-align: left;
}

/* ——— the minimal form: one row ——— */

.tnp-subscription-minimal { display: flex; flex-wrap: wrap; gap: .6rem; }
.tnp-subscription-minimal form { display: contents; white-space: normal; }
/* the field is an address wide, not a column wide; the button sits after it */
.tnp-subscription-minimal form input.tnp-email,
.tnp-subscription-minimal form input.tnp-name { flex: 0 1 22rem; }

/* ——— the standard form: labelled fields, the button under ——— */

div.tnp-subscription form { display: flex; flex-direction: column; gap: .9rem; width: auto; max-width: none; margin: 0; padding: 0; border: 0; }
.tnp-subscription .tnp-field { margin: 0; padding: 0; }
.tnp-subscription .tnp-field label {
  display: block;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .35rem;
}
.tnp-subscription .tnp-field-button { text-align: left !important; }
.tnp-subscription .tnp-privacy-field label,
.tnp-subscription .tnp-field-checkbox label { text-transform: none; letter-spacing: 0; font-size: .85rem; }

/* ——— the field ——— */

.tnp-subscription-minimal form input.tnp-email,
.tnp-subscription-minimal form input.tnp-name,
.tnp-subscription form input.tnp-email,
.tnp-subscription form input.tnp-name,
.tnp-subscription form input.tnp-surname {
  display: block;
  width: 100%;
  max-width: 22rem;
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: .75rem .9rem;
  box-shadow: none;
  box-sizing: border-box;
}
.tnp-subscription-minimal form input.tnp-email { width: auto; min-width: 0; }
.tnp-subscription-minimal form input::placeholder,
.tnp-subscription form input::placeholder { color: var(--ink-soft); }
.tnp-subscription-minimal form input:focus,
.tnp-subscription form input:focus {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
  border-color: transparent;
}

/* ——— the button ——— */

.tnp-subscription-minimal form input.tnp-submit,
.tnp-subscription form input.tnp-submit {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: none;
  margin: 0;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.4;
  text-transform: none;
  color: #fff;
  background: var(--coral);
  background-image: none;
  border: 0;
  border-radius: 10px;
  padding: .8rem 1.3rem;
  box-shadow: none;
  text-shadow: none;
  cursor: pointer;
  transition: background .15s ease;
}
.tnp-subscription-minimal form input.tnp-submit:hover,
.tnp-subscription form input.tnp-submit:hover { background: var(--coral-deep); color: #fff; }
.tnp-subscription-minimal form input.tnp-submit:focus-visible,
.tnp-subscription form input.tnp-submit:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* the plugin stacks the minimal form's inputs under 525px; the row wraps on
   its own, and the field takes the whole line when it does */
@media all and (max-width: 525px) {
  .tnp-subscription-minimal form input.tnp-email { width: 100%; margin: 0; }
  .tnp-subscription-minimal form input.tnp-submit { width: auto; margin: 0; display: inline-flex; }
}