/* ============================================================
   Native subscribe form — replaces the beehiiv iframe embeds.
   Posts to /api/subscribe (Netlify function -> beehiiv API).
   Inherits each page's design tokens, so it matches light and
   dark sections without any per-page overrides.
   ============================================================ */

.cta-form-wrap {
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* left-aligned variant (used where the section copy is left-aligned) */
.cta-form-wrap--left { margin-left: 0; margin-right: auto; }

.cta-form {
  display: flex;
  align-items: stretch;
  width: 100%;
  flex-wrap: wrap;
  position: relative;
  text-align: left;
}

.cta-form input[type="email"] {
  flex: 1 1 200px;
  min-width: 0;
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;              /* 16px stops iOS zooming on focus */
  line-height: 1.2;
  color: var(--ink, #1A1A18);
  background: var(--paper, #FFFFFF);
  border: 1px solid var(--ink, #1A1A18);
  border-right: 0;
  padding: 16px 18px;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.2s ease;
}

.cta-form input[type="email"]::placeholder { color: var(--ink-faint, #8B8E96); }
.cta-form input[type="email"]:focus { background: var(--cream, #FAF8F5); }
.cta-form input[type="email"][aria-invalid="true"] { border-color: #B3261E; }

.cta-form button {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--paper, #FFFFFF);
  background: var(--accent, #1A1A18);
  border: 1px solid var(--accent, #1A1A18);
  padding: 16px 24px;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.25s ease, color 0.25s ease;
}

.cta-form button:hover { background: transparent; color: var(--accent, #1A1A18); }
.cta-form button[disabled] { opacity: 0.6; cursor: wait; }
.cta-form button[disabled]:hover { background: var(--accent, #1A1A18); color: var(--paper, #FFFFFF); }

/* honeypot: real people never fill this, bots usually do */
.cta-hp { position: absolute; left: -9999px; top: -9999px; width: 0; height: 0; opacity: 0; }

.cta-form-status {
  flex: 1 0 100%;
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft, #4A4A46);
  margin-top: 10px;
  text-align: center;
}
.cta-form-status:empty { display: none; }
.cta-form-status.is-error { color: #B3261E; }

/* dark sections (footer CTA, dark bands) invert the palette */
.cta-form--invert input[type="email"] {
  background: transparent;
  color: var(--paper, #FFFFFF);
  border-color: rgba(255, 255, 255, 0.45);
}
.cta-form--invert input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.5); }
.cta-form--invert input[type="email"]:focus { background: rgba(255, 255, 255, 0.06); }
.cta-form--invert button {
  color: var(--ink, #1A1A18);
  background: var(--paper, #FFFFFF);
  border-color: var(--paper, #FFFFFF);
}
.cta-form--invert button:hover { background: transparent; color: var(--paper, #FFFFFF); }
.cta-form--invert .cta-form-status { color: rgba(255, 255, 255, 0.7); }

.cta-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Phones: stack the field above the button so neither can ever be clipped,
   and keep both at the 44px tap-target minimum. */
@media (max-width: 560px) {
  .cta-form-wrap { max-width: none; }
  .cta-form input[type="email"] {
    flex: 1 1 100%;
    border-right: 1px solid var(--ink, #1A1A18);
    border-bottom: 0;
  }
  .cta-form--invert input[type="email"] { border-right-color: rgba(255, 255, 255, 0.45); }
  .cta-form button { flex: 1 1 100%; padding: 16px 20px; }
}