/* MyCabin Leads integration seam for the Blog OVERVIEW/LISTING page's own
   newsletter form (root-cause fix round) — a second, separate form from
   the per-article one blog-newsletter.css already serves, living in the
   Blog archive Page Pack's own markup (pp-blog root class) rather than
   in a MyCabin Blog plugin template. The archive Page Pack still owns
   this form's base visual design (pill shape, colors, spacing) in its
   own frontend.css; this file adds only the same invisible/functional
   pieces the per-article seam adds — a hidden honeypot, a status-message
   region, and the submit button's own success animation — mirrored here
   so they are live even before the Page Pack's own physical asset is
   next republished. Selectors intentionally match
   incoming-page-packs/_build/blog-v2/frontend.css's own rules for this
   form; keep the two in sync by hand if either changes. */
.pp-blog .mcl-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pp-blog .blog-newsletter-form .mcl-form-message {
  flex-basis: 100%;
  margin-top: 6px;
  font: 400 12.5px "Poppins", sans-serif;
}
.pp-blog .blog-newsletter-form .mcl-form-message[data-mcl-state="error"] { color: #b3261e; }
.pp-blog .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: row switched from flex back to CSS Grid (matching
   the canonical Page Pack source's own 0.2.6 change — see
   incoming-page-packs/_build/blog-v2/frontend.css for the full
   investigation history). Grid with two EXPLICIT columns is immune to
   an unexpected third child (e.g. a password-manager browser extension
   injecting its own element into the form on focus, the live-confirmed
   root cause of the identical bug on MyCabin Blog's own per-article
   newsletter form) — an extra child auto-flows into a new implicit row
   instead of stealing width from the input/button columns. `!important`
   is needed on `display` to beat the live, stale physical Page Pack
   asset's own `display:flex` (that asset is a static file copied at
   import time — see the class-level docblock at the top of this file). */
.pp-blog .blog-newsletter-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
}
@media (max-width: 480px) {
  .pp-blog .blog-newsletter-form { grid-template-columns: 1fr; }
}
.pp-blog .blog-newsletter-form input {
  min-width: 0;
  width: auto !important;
}
.pp-blog .blog-newsletter-form .btn[data-mcl-submit] {
  position: relative;
  transition: background .25s, color .25s, width .35s ease, border-radius .35s ease, padding .35s ease;
}
.pp-blog .blog-newsletter-form .btn[data-mcl-submit][data-mcl-state="success"] {
  width: 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  cursor: default;
}
.pp-blog .blog-newsletter-form .btn .mcl-btn-label,
.pp-blog .blog-newsletter-form .btn .mcl-btn-check {
  transition: opacity .25s ease;
}
.pp-blog .blog-newsletter-form .btn .mcl-btn-check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.pp-blog .blog-newsletter-form .btn[data-mcl-state="success"] .mcl-btn-label { opacity: 0; }
.pp-blog .blog-newsletter-form .btn[data-mcl-state="success"] .mcl-btn-check { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pp-blog .blog-newsletter-form .btn[data-mcl-submit] { transition: background .25s, color .25s; }
  .pp-blog .blog-newsletter-form .btn .mcl-btn-label,
  .pp-blog .blog-newsletter-form .btn .mcl-btn-check { transition: none; }
}