/* Newsletter signup — scoped under #newsletter-signup. Reuses the
 * landing's design-token colors from tailwind.config.cjs:
 *   brand-600 #1E4FE0   brand-700 #173EB3
 *   ink-50    #FAFAFB   ink-100   #F3F4F6   ink-200 #E5E7EB
 *   ink-500   #6B7280   ink-700   #23272F   ink-900 #0F1117
 *   success   #15803D   danger    #B91C1C
 * Mirrored here as CSS custom properties so the dark-mode media query
 * can flip them without duplicating the rule body. No new color
 * literals beyond what landing/index.html already defines.
 */

#newsletter-signup {
  --nl-ink-50:   #FAFAFB;
  --nl-ink-100:  #F3F4F6;
  --nl-ink-200:  #E5E7EB;
  --nl-ink-500:  #6B7280;
  --nl-ink-700:  #23272F;
  --nl-ink-900:  #0F1117;
  --nl-brand:    #1E4FE0; /* brand-600 — same as .btn-primary */
  --nl-brand-h:  #173EB3; /* brand-700 — .btn-primary:hover */
  --nl-success:  #15803D;
  --nl-danger:   #B91C1C;
  --nl-surface:  #FFFFFF;
  --nl-on-bg:    var(--nl-ink-900);
  --nl-muted:    var(--nl-ink-700);
  --nl-border:   var(--nl-ink-200);

  display: block;
  max-width: 36rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--nl-border);
  border-radius: 0.75rem;
  background: var(--nl-surface);
  color: var(--nl-on-bg);
  font: inherit;
  box-shadow: 0 1px 2px rgba(15, 17, 23, 0.04), 0 4px 16px rgba(15, 17, 23, 0.06);
}

#newsletter-signup .nl-heading {
  margin: 0 0 0.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--nl-on-bg);
}

#newsletter-signup .nl-blurb {
  margin: 0 0 0.875rem 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--nl-muted);
}

#newsletter-signup .nl-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
}

#newsletter-signup label[for="newsletter-email"] {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--nl-muted);
}

#newsletter-signup input[type="email"] {
  flex: 1 1 16rem;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--nl-border);
  border-radius: 0.5rem;
  background: var(--nl-ink-50);
  color: var(--nl-on-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#newsletter-signup input[type="email"]::placeholder {
  color: var(--nl-ink-500);
  opacity: 1;
}

#newsletter-signup input[type="email"]:hover {
  border-color: var(--nl-ink-500);
}

#newsletter-signup input[type="email"]:focus,
#newsletter-signup input[type="email"]:focus-visible {
  outline: none;
  border-color: var(--nl-brand);
  box-shadow: 0 0 0 3px rgba(30, 79, 224, 0.25);
}

#newsletter-signup input[type="email"]:invalid:not(:placeholder-shown) {
  border-color: var(--nl-danger);
}

#newsletter-signup button[type="submit"] {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--nl-brand);
  border-radius: 0.5rem;
  background: var(--nl-brand);
  color: #FFFFFF;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#newsletter-signup button[type="submit"]:hover {
  background: var(--nl-brand-h);
  border-color: var(--nl-brand-h);
}

#newsletter-signup button[type="submit"]:focus,
#newsletter-signup button[type="submit"]:focus-visible {
  outline: 2px solid var(--nl-brand);
  outline-offset: 2px;
}

#newsletter-signup button[type="submit"][disabled],
#newsletter-signup button[type="submit"][aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}

#newsletter-signup .nl-status {
  min-height: 1.25rem;
  margin-top: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--nl-muted);
}

#newsletter-signup .nl-status[data-state="success"] { color: var(--nl-success); }
#newsletter-signup .nl-status[data-state="error"]   { color: var(--nl-danger);  }

#newsletter-signup noscript a {
  color: var(--nl-brand);
  text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
  #newsletter-signup {
    --nl-surface: #171A21;   /* ink-800 */
    --nl-on-bg:   #FAFAFB;   /* ink-50  */
    --nl-muted:   #D1D5DB;   /* ink-300 */
    --nl-border:  #3A3F4B;   /* ink-600 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.5);
  }
  #newsletter-signup input[type="email"] {
    background: #0F1117; /* ink-900 */
    color: var(--nl-on-bg);
  }
  #newsletter-signup input[type="email"]::placeholder {
    color: #9CA3AF; /* ink-400 */
  }
}