/*
  newsletter.css
  Full-width dark blue band with a headline and an email signup form.
  This is the only big block of colour on the page, so keep it that way.
  Needs css/base.css.
*/

.fm-newsletter { padding-block: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); background: var(--fm-blue-deep); color: #fff; }

/* Phones: text above the form. Desktop: text left, form right (see bottom). */
.fm-newsletter__inner { display: grid; gap: 2rem; align-items: center; }
.fm-newsletter h2 { max-width: 24ch; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.015em; }
.fm-newsletter p { margin-top: 0.75rem; max-width: 32rem; font-size: var(--fm-t-md); line-height: 1.5; color: #b9cfdd; }

/* Email box and button sit side by side, and wrap onto two lines if there isn't room */
.fm-newsletter__form { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.fm-newsletter__form input[type="email"] {
  flex: 1 1 15rem; min-width: 0; padding: 1rem 1.25rem;
  font: inherit; font-size: var(--fm-t-sm);
  border: 0; border-radius: 999px; background: #fff; color: var(--fm-ink);
}
.fm-newsletter__form small { flex-basis: 100%; font-size: var(--fm-t-xs); color: #9bb6c7; }   /* consent text goes on its own line */

@media (min-width: 62rem) { .fm-newsletter__inner { grid-template-columns: 7fr 5fr; gap: calc(var(--fm-gap) * 3); } }