/**
 * CF Newsletter — six-mode framework per CF_MODULE_GUIDE §8.
 *
 * Wraps a Mailchimp signup form with editorial copy. Two-column grid
 * on desktop (copy left, form right), single column on mobile.
 *
 * Modes:
 *   .cf-newsletter--light-sky    Briefing-grade default (mockup)
 *   .cf-newsletter--light-slate  Analytical / operational
 *   .cf-newsletter--light-paper  Editorial / long-form (white bg)
 *   .cf-newsletter--light-mint   Positive outcome / growth
 *   .cf-newsletter--dark-navy    Brand authority anchor
 *   .cf-newsletter--dark-ops     GSOC / command center
 *
 * Override variables:
 *   --cfnl-bg          section background
 *   --cfnl-eyebrow     small uppercase label color
 *   --cfnl-heading     h2 color
 *   --cfnl-body        body / fineprint color
 *   --cfnl-line        section top rule
 *   --cfnl-input-bg    input background
 *   --cfnl-input-text  input text + focus border
 *   --cfnl-button-bg   submit button background
 *   --cfnl-button-fg   submit button text
 *   --cfnl-button-hov  submit button hover background
 */

.cf-newsletter {
  /* Base defaults = light_sky. Mode classes below override. */
  --cfnl-bg: var(--cf-sky-light);
  --cfnl-eyebrow: var(--cf-sky-mid);
  --cfnl-heading: var(--cf-navy);
  --cfnl-body: var(--cf-blue-gray);
  --cfnl-line: var(--cf-blue-gray-tint);
  --cfnl-input-bg: rgba(255, 255, 255, 0.7);
  --cfnl-input-text: var(--cf-navy);
  --cfnl-button-bg: var(--cf-navy);
  --cfnl-button-fg: var(--cf-white);
  --cfnl-button-hov: var(--cf-sky-mid);

  background: var(--cfnl-bg);
  color: var(--cfnl-body);
  border-top: 1px solid var(--cfnl-line);
  padding: 64px 24px;
  font-family: var(--cf-font-stack);
  box-sizing: border-box;
}

.cf-newsletter *,
.cf-newsletter *::before,
.cf-newsletter *::after {
  box-sizing: inherit;
}

/* Full-bleed: break out of constrained ancestors. */
.cf-newsletter--fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ── Modes ──────────────────────────────────────────────────────────── */
.cf-newsletter--light-sky {
  --cfnl-bg: var(--cf-sky-light);
  --cfnl-eyebrow: var(--cf-sky-mid);
  --cfnl-heading: var(--cf-navy);
  --cfnl-body: var(--cf-blue-gray);
}

.cf-newsletter--light-slate {
  --cfnl-bg: var(--cf-blue-gray-lightest);
  --cfnl-eyebrow: var(--cf-navy);
  --cfnl-heading: var(--cf-navy);
  --cfnl-body: var(--cf-blue-gray);
}

.cf-newsletter--light-paper {
  --cfnl-bg: var(--cf-white);
  --cfnl-eyebrow: var(--cf-navy);
  --cfnl-heading: var(--cf-navy);
  --cfnl-body: var(--cf-blue-gray);
}

.cf-newsletter--light-mint {
  --cfnl-bg: var(--cf-apple-pale);
  --cfnl-eyebrow: var(--cf-leaf);
  --cfnl-heading: var(--cf-navy);
  --cfnl-body: var(--cf-blue-gray);
  --cfnl-button-bg: var(--cf-leaf);
  --cfnl-button-fg: var(--cf-navy);
  --cfnl-button-hov: var(--cf-navy);
}

.cf-newsletter--dark-navy {
  --cfnl-bg: var(--cf-navy);
  --cfnl-eyebrow: var(--cf-sky);
  --cfnl-heading: var(--cf-navy-lightest);
  --cfnl-body: color-mix(in srgb, var(--cf-navy-lightest) 75%, transparent);
  --cfnl-line: rgba(255, 255, 255, 0.10);
  --cfnl-input-bg: rgba(255, 255, 255, 0.08);
  --cfnl-input-text: var(--cf-navy-lightest);
  --cfnl-button-bg: var(--cf-sky);
  --cfnl-button-fg: var(--cf-navy);
  --cfnl-button-hov: var(--cf-navy-lightest);
}

.cf-newsletter--dark-ops {
  --cfnl-bg: var(--cf-slate-section);
  --cfnl-eyebrow: var(--cf-golden-orange);
  --cfnl-heading: var(--cf-blue-gray-tint);
  --cfnl-body: var(--cf-blue-gray-soft);
  --cfnl-line: rgba(255, 255, 255, 0.08);
  --cfnl-input-bg: var(--cf-slate-card);
  --cfnl-input-text: var(--cf-blue-gray-tint);
  --cfnl-button-bg: var(--cf-golden-orange);
  --cfnl-button-fg: var(--cf-slate-section);
  --cfnl-button-hov: var(--cf-blue-gray-tint);
}

/* ── Layout ─────────────────────────────────────────────────────────── */
.cf-newsletter__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.cf-newsletter__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

@media (min-width: 1024px) {
  .cf-newsletter__grid {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
  }
}

/* ── Copy column ────────────────────────────────────────────────────── */
.cf-newsletter__eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cfnl-eyebrow);
  margin-bottom: 16px;
}

.cf-newsletter__heading {
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--cfnl-heading);
  margin: 0 0 12px;
}

.cf-newsletter__body {
  color: var(--cfnl-body);
  font-size: 15px;
  line-height: 1.55;
  max-width: 460px;
  margin: 0;
}

/* ── Form column ────────────────────────────────────────────────────── */
.cf-newsletter__form-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The Mailchimp signup block renders its own <form> inside .cf-newsletter__form.
   We restyle inputs and the submit button to match the mockup, without
   touching the form's structure or behavior. */
.cf-newsletter__form form,
.cf-newsletter__form .mailchimp-signup-subscribe-form,
.cf-newsletter__form > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cf-newsletter__form input[type="text"],
.cf-newsletter__form input[type="email"] {
  background: var(--cfnl-input-bg);
  border: none;
  border-bottom: 1px solid var(--cfnl-input-text);
  color: var(--cfnl-input-text);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  border-radius: 2px;
  width: 100%;
}

.cf-newsletter__form input[type="text"]::placeholder,
.cf-newsletter__form input[type="email"]::placeholder {
  color: var(--cfnl-body);
  opacity: 0.85;
}

.cf-newsletter__form input[type="text"]:focus,
.cf-newsletter__form input[type="email"]:focus {
  background: var(--cf-white);
}

.cf-newsletter__form input[type="submit"],
.cf-newsletter__form button[type="submit"] {
  margin-top: 8px;
  background: var(--cfnl-button-bg);
  color: var(--cfnl-button-fg);
  border: none;
  padding: 14px 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  align-self: flex-start;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.cf-newsletter__form input[type="submit"]:hover,
.cf-newsletter__form button[type="submit"]:hover {
  background: var(--cfnl-button-hov);
}

/* Hide the Mailchimp block's own header/title — we render our heading
   in the copy column. The wrapper class can vary across mailchimp_signup
   versions, so we target the most common ones. */
.cf-newsletter__form > h2,
.cf-newsletter__form .block__title,
.cf-newsletter__form .mailchimp-signup-subscribe-form-description {
  display: none;
}

.cf-newsletter__fineprint {
  font-size: 11px;
  color: var(--cfnl-body);
  margin-top: 4px;
  line-height: 1.5;
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cf-newsletter__form input[type="submit"],
  .cf-newsletter__form button[type="submit"] {
    transition: none !important;
  }
}