/* ------------------------------------------------------------------
 * newsletter.css -- "Rockabulls per E-Mail" signup section + form.
 * Layered over the HalfTone theme AFTER contact.css, non-destructive:
 * remove the <link> in index.html to revert. Mirrors the contact form
 * visuals (contact.css) but scoped to the newsletter ids so the two
 * forms coexist on the homepage. The submit button reuses the theme
 * .link-button / .music-btn; success + privacy notes reuse the
 * .contact-done / .contact-privacy classes from contact.css.
 * ------------------------------------------------------------------ */

.section-newsletter {
  text-align: center;
  padding: 8px 0 24px;
}
#newsletter { scroll-margin-top: 72px; }

/* Heading: match the calmer contact/band/music headline (kill theme emboss) */
#main #newsletter .headline {
  margin: 8px auto 12px;
  font-weight: 400;
  color: #222;
  text-shadow: none !important;
  letter-spacing: 0.2px;
  font-size: clamp(1.4rem, 1rem + 2.1vw, 2rem);
  line-height: 1.25;
}

.section-newsletter .newsletter-lead {
  max-width: 62ch;
  margin: 0 auto 20px;
  line-height: 1.55;
  color: #444;
}

/* --- The form: a centered, left-aligned column ------------------- */
#newsletterform {
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
}
#newsletterform label {
  display: block;
  margin: 14px 0 4px;
  font-weight: 700;
  color: #444;
  font-size: 0.95rem;
}
#newsletterform input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #cabfa9;      /* warm cream border */
  border-radius: 4px;
  color: #333;
  font-size: 16px;                /* 16px avoids iOS zoom-on-focus */
  font-family: inherit;
  line-height: 1.5;
}
#newsletterform input:focus {
  outline: none;
  border-color: #1f7a7e;          /* --rb-teal */
  background: #fff;
  box-shadow: 0 0 0 3px rgba(31, 122, 126, 0.15);
}

/* --- Submit row ------------------------------------------------- */
#newsletterSubmit {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
/* the reCAPTCHA button already carries .link-button.music-btn */
#newsletterSubmit .g-recaptcha.link-button {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
#newsletterConfirm {
  font-size: 0.9rem;
  color: #777;
}
#newsletterConfirm.is-error {
  color: #bf553a;            /* --rb-coral-ink */
  font-weight: 700;
}

/* --- Phone: same 20px gutter as the other sections -------------- */
@media (max-width: 767px) {
  .section-newsletter { padding-inline: 20px; }
  #newsletterSubmit .g-recaptcha.link-button { padding: 12px 16px; }
}