/* MyCabin Leads integration seam for the Blog newsletter form (Phase 6).
   Reuses MyCabin Blog's own .blog-newsletter-form/.btn/.btn--ink classes
   for 100% visual parity (Blog still owns that design) — this file adds
   only the invisible/functional pieces MyCabin Leads' own markup needs:
   a hidden honeypot, a status-message region, and (success-state UX
   patch) the submit button's own success animation. No layout, spacing,
   typography, or color rule for anything Blog already styles at rest. */
.mcb-single-article-page .mcl-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Success is now communicated by the button's own pill-to-circle
   animation — the sentence remains in the DOM (role="status"/aria-live,
   set by lead-form-base.js) for assistive technology only, using the
   same clip technique as .mcl-honeypot above. Errors stay visible. */
.mcb-single-article-page .blog-newsletter-form .mcl-form-message {
  flex-basis: 100%;
  margin-top: 6px;
  font: 400 12.5px "Poppins", sans-serif;
}
.mcb-single-article-page .blog-newsletter-form .mcl-form-message[data-mcl-state="error"] { color: #b3261e; }
.mcb-single-article-page .blog-newsletter-form .mcl-form-message[data-mcl-state="success"] {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  flex-basis: auto;
}

/* 0.2.6 layout fix: removed this file's own row-layout override
   entirely. It used to force `display:flex !important; flex-wrap:wrap`,
   which — combined with `single-article.css`'s own input `width:100%`
   (correct for ITS CSS Grid `minmax(0,1fr)` track, meaningless once
   this rule forced flex) — left zero room for the button and dropped it
   to a second row at every width, not just narrow ones (the reported
   "button underneath the email field" bug). MyCabin Blog's own
   `single-article.css` already implements this exact row as a two-
   column CSS Grid (`minmax(0,1fr) auto`), live-hardened in its own
   v0.4.3-0.4.6 rounds against a password-manager browser extension
   injecting a DOM child into the form on focus — deleting the override
   here lets that already-correct, already-proven layout apply
   unmodified, satisfying "reuse the shared Blog newsletter styling"
   rather than maintaining a second, conflicting layout system. The
   right-edge-anchored width-transition success animation below is
   unaffected: empirically re-verified that Grid's `auto` column tracks
   an animating `width` exactly like flex did (same isolated test
   recorded in incoming-page-packs/_build/blog-v2/frontend.css). */
.mcb-single-article-page .blog-newsletter-form .btn[data-mcl-submit] {
  position: relative;
  transition: background var(--mcb-t-med, .25s), color var(--mcb-t-med, .25s), width .35s ease, border-radius .35s ease, padding .35s ease;
}
.mcb-single-article-page .blog-newsletter-form .btn[data-mcl-submit][data-mcl-state="success"] {
  width: 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  cursor: default;
}
.mcb-single-article-page .blog-newsletter-form .btn .mcl-btn-label,
.mcb-single-article-page .blog-newsletter-form .btn .mcl-btn-check {
  transition: opacity .25s ease;
}
.mcb-single-article-page .blog-newsletter-form .btn .mcl-btn-check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.mcb-single-article-page .blog-newsletter-form .btn[data-mcl-state="success"] .mcl-btn-label { opacity: 0; }
.mcb-single-article-page .blog-newsletter-form .btn[data-mcl-state="success"] .mcl-btn-check { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mcb-single-article-page .blog-newsletter-form .btn[data-mcl-submit] { transition: background var(--mcb-t-med, .25s), color var(--mcb-t-med, .25s); }
  .mcb-single-article-page .blog-newsletter-form .btn .mcl-btn-label,
  .mcb-single-article-page .blog-newsletter-form .btn .mcl-btn-check { transition: none; }
}