/**
 * =====================================================================
 * NEWSLETTER COMPONENT — STYLES
 * =====================================================================
 * .newsletter/.newsletter__form/etc. copied EXACTLY from the
 * authoritative uploaded style.css, per the explicit instruction to
 * use the supplied CSS as-is and not alter the frontend design.
 *
 * Tag qualifiers and font-family !important applied to the base rules
 * from the start — both confirmed necessary, repeatedly, elsewhere in
 * this project: a bare single-class selector loses to Blocksy's own
 * base styling, and font-family specifically needs !important since
 * Blocksy uses !important on that property too.
 *
 * THE ONLY ADDITIONS NOT IN THE ORIGINAL CSS: ".is-error"/".is-ok" on
 * ".form__msg" — the original design had this element but no defined
 * visual state for it, since the original static site's JS just set
 * plain text with no error/success distinction. This component adds
 * real success/error handling (server-side validation, provider
 * failures), so those two states need an actual visual treatment.
 * =====================================================================
 */

div.newsletter {
  background: var(--ink); color: var(--white);
  border-radius: var(--radius-lg);
  padding: 70px clamp(30px, 5vw, 80px);
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center;
  position: relative; overflow: hidden;
}
.newsletter::before {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(200,16,46,0.55), transparent 60%);
  pointer-events: none;
}
.newsletter h2 { color: var(--white); }
.newsletter p { color: rgba(255,255,255,0.75); }
form.newsletter__form {
  display: flex; gap: 8px; background: var(--white);
  border-radius: 999px; padding: 6px; align-items: center;
  position: relative; z-index: 1;
}
.newsletter__form input {
  flex: 1; border: 0; background: transparent;
  font-family: var(--font-sans) !important;
  padding: 14px 18px; color: var(--ink); outline: none; font-size: 15px;
}
.newsletter__form input:disabled { opacity: 0.6; }
.newsletter__form button {
  font-family: var(--font-sans) !important;
  padding: 14px 24px; border-radius: 999px; background: var(--red); color: var(--white);
  font-weight: 500; transition: background 0.3s var(--ease);
  min-width: 96px;
}
.newsletter__form button:hover { background: var(--red-deep); }
.newsletter__form button:disabled { opacity: 0.75; cursor: default; }
p.newsletter__note { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 12px; }
@media (max-width: 900px) {
  div.newsletter { grid-template-columns: 1fr; padding: 40px 24px; }
}

/* form__msg success/error states — see file header note above. */
div.form__msg {
  font-family: var(--font-sans) !important;
  font-size: 13px;
  margin-top: 10px;
  min-height: 1.2em; /* Reserves space so the layout doesn't jump when a message appears. */
  color: rgba(255,255,255,0.85);
}
.form__msg.is-ok { color: #7ee787; }
.form__msg.is-error { color: #ff9b9b; }