/* Newsletter signup modal — single posts only.
   This intentionally does NOT style anything inside the Flodesk embed.
   The container (inc/newsletter-signup.php) starts empty; Flodesk's
   script renders the form's current design from their dashboard into it
   at runtime — its own box (background, padding, sizing), typography,
   and all success/error/captcha state handling included. This file only
   positions that rendered box as a centered modal over the page.

   prefers-reduced-motion is already handled globally in main.css. */

.bd-newsletter-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 13, 0.75); /* var(--bd-black) at 75% */
  z-index: 200; /* above the sticky header (50) and flyout nav (99/100) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.bd-newsletter-modal-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.bd-newsletter-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 201;
  width: calc(100vw - 2rem); /* nearly full width on phones, small gutter */
  max-width: 800px; /* matches the form's own width setting in Flodesk */
  max-height: 90vh;
  overflow: auto;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.bd-newsletter-modal.is-visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.bd-newsletter-modal__dismiss {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  background: transparent;
  border: 0;
  color: #333333; /* matches Flodesk's own default text color, since this sits on their white box */
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}
.bd-newsletter-modal__dismiss:hover {
  opacity: 0.7;
}