/* ============================================================
   MAILPOET NEWSLETTER FORM – align to .footer-newsletter style
   ============================================================
   MailPoet ships its own per-form inline <style> block and inline
   style="" attributes on the input/button (set via the Form Editor's
   Styles panel). Both sit later in the cascade / at higher
   specificity than a normal stylesheet rule, so the overrides below
   use !important where needed to win against them. Selectors use
   MailPoet's stable data-automation-id attributes (used by MailPoet's
   own tests) instead of the base64-encoded field name attributes,
   so they keep working across form edits.
   ============================================================ */

/* Remove the default MailPoet "card" look (thick grey border, radius,
   white background) and give it the same thin border as the original
   .newsletter-form box instead. Layout itself (side-by-side email +
   button) is left to MailPoet's own column block — do NOT impose an
   extra display:flex here, the form already uses MailPoet's native
   .mailpoet_form_columns flex layout internally, and overriding the
   outer <form> to flex as well squeezes the columns, the disclaimer
   paragraph and the message box into one row and breaks the layout. */
.footer-newsletter .mailpoet_form {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  text-align: left !important;
}

.footer-newsletter .mailpoet_form form.mailpoet_form {
  padding: 0 !important;
}

/* Hide the default template's icon/heading blocks and spacers.
   Safety net: remove these blocks in the MailPoet Form Editor too —
   that also drops them from the markup (better for accessibility/
   load time) instead of just visually hiding them. */
.footer-newsletter .mailpoet_form_image,
.footer-newsletter .mailpoet-heading,
.footer-newsletter .mailpoet_spacer {
  display: none;
}

/* Hide the Name field entirely (row + input) if it hasn't been
   removed in the Form Editor yet — the original design only ever
   asked for an email address. */
.footer-newsletter .mailpoet_paragraph:has([data-automation-id="form_first_name"]) {
  display: none;
}

/* The form uses MailPoet's column-layout block, which by default
   ships two empty 10%-wide "spacer" columns on either side of the
   real email/button columns, a 20px gap between every column, and
   20px margin-bottom under every field. None of that carries
   !important on MailPoet's side, so it can be overridden here to
   make the email field and button share the row edge-to-edge like
   the original .newsletter-form. */
.footer-newsletter .mailpoet_form_column:empty {
  display: none;
}

.footer-newsletter .mailpoet_form_column:not(:first-child) {
  margin-left: 0 !important;
}

.footer-newsletter .mailpoet_paragraph {
  margin-bottom: 0 !important;
}

/* Deliberately NOT overriding each column's flex-grow/shrink/basis:
   MailPoet's own inline flex-basis (currently 40%/40%, no !important)
   already fits two columns side by side with room to spare — since
   the basis total is under 100%, flex-shrink never engages and the
   columns render at a stable, predictable width. Reassigning flex
   here (e.g. flex: 0 0 auto on the button's column) fought MailPoet's
   own sizing and collapsed the button column to near zero width
   instead — leave column-width tuning to the Form Editor's own
   column-width drag handles if the 40/40 split needs adjusting. */

.footer-newsletter [data-automation-id="form_email"] {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 1rem !important;
  margin: 0 !important;
  font-family: var(--font-sans) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem !important;
  color: var(--black) !important;
}

.footer-newsletter [data-automation-id="form_email"]::placeholder {
  color: var(--grey);
}

.footer-newsletter [data-automation-id="subscribe-submit-button"] {
  width: 100% !important;
  background: var(--black) !important;
  color: var(--white) !important;
  padding: 1rem 2rem !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem !important;
  font-family: var(--font-sans) !important;
  text-align: center;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  white-space: nowrap !important;
  transition: background 150ms;
}

.footer-newsletter [data-automation-id="subscribe-submit-button"]:hover {
  background: var(--accent) !important;
  color: var(--cream) !important;
}

/* Privacy disclaimer paragraph below the row */
.footer-newsletter .mailpoet_form_paragraph.last {
  margin-top: 0.75rem;
  color: var(--grey) !important;
  font-size: 0.75rem !important;
  text-align: left !important;
}

.footer-newsletter .mailpoet_message {
  margin-top: 0.5rem;
}