/* Newsletter band. Uses the theme's design tokens (defined in the theme stylesheet):
   --band, --card-border, --heading, --muted, --line, --bg, --accent-text,
   --btn-bg, --btn-hover, --on-btn. Both themes work through those variables. */

.ty-newsletter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  padding: 32px 40px;
  background: var(--band);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}
.ty-newsletter__copy { flex: 1 1 240px; display: flex; flex-direction: column; gap: 8px; }
.ty-newsletter__title { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 600; color: var(--heading); }
.ty-newsletter__support { margin: 0; font-size: 14px; color: var(--muted); }

.ty-newsletter__form { flex: 1.2 1 320px; display: flex; flex-direction: column; gap: 8px; }
.ty-newsletter__row { display: flex; flex-wrap: wrap; gap: 12px; }
.ty-newsletter__row[hidden],
.ty-newsletter__note[hidden] { display: none; }

.ty-newsletter .ty-field {
  flex: 1 1 200px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--heading);
  font: inherit;
  font-size: 16px;
}
.ty-newsletter .ty-field::placeholder { color: var(--muted); }
.ty-newsletter .ty-field:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }

.ty-newsletter .ty-btn--primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: var(--btn-bg);
  color: var(--on-btn);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease-out;
}
.ty-newsletter .ty-btn--primary:hover { background: var(--btn-hover); }
.ty-newsletter .ty-btn--primary:disabled { opacity: 0.6; cursor: default; }
.ty-newsletter .ty-btn--primary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }

.ty-newsletter__note { margin: 0; font-size: 12px; color: var(--muted); }
.ty-newsletter__msg { margin: 0; min-height: 1.4em; font-size: 16px; color: var(--heading); }
.ty-newsletter__msg.is-error { color: var(--danger, #C84B4B); }

/* Honeypot: off-screen for people, still present for bots. */
.ty-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }