/* ==============================================
   MINDFUL HEALTH — mobile footer safe-area fix
   Append to styles.css (after styles-additions.css
   and header-refined.css)
   ============================================== */

/* Extra breathing room at the bottom on mobile so the footer
   never sits flush against the browser's UI chrome (Safari's
   bottom toolbar, Android nav bar, etc.) */
@media (max-width: 640px) {
  footer {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ==============================================
   MINDFUL HEALTH — mobile footer safe-area fix
   Append to styles.css (after styles-additions.css
   and header-refined.css)
   ============================================== */

/* ── Mobile: keep newsletter text & form away from screen edges ── */
@media (max-width: 640px) {
  .newsletter {
    padding: 0 1.25rem;
  }

  .newsletter h2,
  .newsletter p {
    padding: 0 0.25rem;
  }

  .brevo-form {
    padding: 0 0.25rem;
    flex-direction: column;
  }

  .brevo-form input[type="email"] {
    min-width: 0;
    width: 100%;
  }

  .brevo-form button {
    width: 100%;
  }

  footer {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }
}