/* ──────────────────────────────────────────────────────────────────
   AnchorWithin — Email Capture (shared component)
   ──────────────────────────────────────────────────────────────────
   Token-only. Zero hardcoded colors / type. Expects tokens.css loaded.
   Visual feel: Ghibli-Noir (Soul) — bronze gold against deep surface.
   ────────────────────────────────────────────────────────────────── */

.aw-email-capture {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.aw-email-capture > input[type="email"] {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  background: var(--aw-surface);
  color: var(--aw-cream);
  border: 1px solid var(--aw-border);
  border-radius: var(--r);
  font: 400 var(--text-base)/1.4 var(--aw-sans);
  transition:
    border-color var(--dur-2) var(--ease),
    box-shadow   var(--dur-2) var(--ease),
    background   var(--dur-2) var(--ease);
}

.aw-email-capture > input[type="email"]::placeholder {
  color: var(--aw-muted);
}

.aw-email-capture > input[type="email"]:hover {
  border-color: var(--aw-border-hi);
}

.aw-email-capture > input[type="email"]:focus {
  outline: none;
  border-color: var(--aw-gold);
  background: var(--aw-lift);
  box-shadow: var(--aw-glow-gold);
}

.aw-email-capture > input[type="email"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.aw-email-capture__submit {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-6);
  background: linear-gradient(180deg, var(--aw-gold-lt), var(--aw-gold));
  color: var(--aw-bg);
  border: none;
  border-radius: var(--r);
  font: 600 var(--text-base)/1 var(--aw-sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    transform  var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    opacity    var(--dur-2) var(--ease);
}

.aw-email-capture__submit:hover {
  transform: translateY(-1px);
  box-shadow: var(--aw-glow-gold-hi);
}

.aw-email-capture__submit:active {
  transform: translateY(0);
}

.aw-email-capture__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Honeypot — visually hidden but still focusable-by-bot.
   Not display:none (some bots skip those entirely). */
.aw-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.aw-email-capture__msg {
  min-height: 1.4em;
  margin: 0;
  font: 400 var(--text-sm)/1.4 var(--aw-sans);
  color: var(--aw-muted);
  text-align: center;
  transition: color var(--dur-2) var(--ease);
}

.aw-email-capture__msg[data-state="success"] {
  color: var(--aw-teal);
}

.aw-email-capture__msg[data-state="error"] {
  color: var(--aw-red-dim);
}

/* Success state — soften the entire form once submitted */
.aw-email-capture.is-success > input[type="email"],
.aw-email-capture.is-success > .aw-email-capture__submit {
  opacity: 0.5;
}

/* Loading state — subtle pulse on the button */
.aw-email-capture.is-loading > .aw-email-capture__submit {
  opacity: 0.7;
}

/* Responsive: side-by-side at wider widths (when the consuming page
   wraps the form in a container that allows the row layout) */
@media (min-width: 520px) {
  .aw-email-capture[data-layout="row"] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .aw-email-capture[data-layout="row"] > input[type="email"] {
    flex: 1 1 220px;
    width: auto;
  }
  .aw-email-capture[data-layout="row"] > .aw-email-capture__submit {
    flex: 0 0 auto;
    width: auto;
  }
  .aw-email-capture[data-layout="row"] > .aw-email-capture__msg {
    flex: 1 1 100%;
  }
}