/* =========================================================================
   Newsletter popup modal (.dp-nl-modal)

   A small, brand-matched, theme-built dialog that WRAPS the newsletter Fluent
   Forms shortcode. Centered over a calm obsidian-tint backdrop; flat white
   surface, hairline border, 8px radius, restrained floating shadow. Fluent
   Forms owns the actual field markup, so the form rules below theme its stable
   public classes to the site's form controls (2px techblue focus ring, primary
   submit). Hidden by construction (fixed + visibility:hidden + pointer-events:
   none) so it can NEVER shift layout or block scroll until opened.

   Depends on tokens via main.css. JS (newsletter-modal.js) toggles .is-open on
   the root and html.dp-nl-open for the scroll lock.
   ========================================================================= */

.dp-nl-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  visibility: hidden;
  pointer-events: none;
}

.dp-nl-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* Backdrop — obsidian at 40% (the spec's rgba(28,28,40,.4)). */
.dp-nl-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(28, 28, 40, 0.4);
  opacity: 0;
}

.dp-nl-modal.is-open .dp-nl-modal__backdrop {
  opacity: 1;
}

/* Dialog — flat white card, hairline border, 8px radius, restrained shadow. */
.dp-nl-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - (2 * var(--space-3)));
  overflow-y: auto;
  padding: var(--space-5);
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(28, 28, 40, 0.14);
  opacity: 0;
  transform: scale(0.98);
}

.dp-nl-modal.is-open .dp-nl-modal__dialog {
  opacity: 1;
  transform: none;
}

/* Tighter padding on narrow phones so the form never feels cramped. */
@media (max-width: 479px) {
  .dp-nl-modal__dialog {
    padding: var(--space-4);
  }
}

/* Close — top-right, muted, hover/focus tints to ink; techblue focus ring. */
.dp-nl-modal__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--text-muted);
  background-color: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.dp-nl-modal__close:hover {
  color: var(--ink);
  background-color: var(--gray);
}

.dp-nl-modal__close:focus-visible {
  outline: 2px solid var(--techblue);
  outline-offset: 2px;
  color: var(--ink);
}

.dp-nl-modal__close svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* Eyebrow — mono, uppercased, techblue (4.54:1 on white — AA). */
.dp-nl-modal__eyebrow {
  margin: 0 0 var(--space-2);
  padding-right: var(--space-4); /* clear the close button */
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--techblue);
}

/* Headline — one line, indigo (10.4:1 on white). */
.dp-nl-modal__title {
  margin: 0 0 var(--space-2);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--indigo);
}

.dp-nl-modal__lead {
  margin: 0 0 var(--space-3);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* -------------------------------------------------------------------------
   Embedded Fluent Forms newsletter form — theme its stable public classes to
   the site's form controls. Best-effort overrides scoped to the modal; they
   degrade gracefully if FF's classes change.
   ------------------------------------------------------------------------- */
.dp-nl-modal__form .ff-el-group {
  margin-bottom: var(--space-2);
}

.dp-nl-modal__form .ff-el-input--label label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
}

.dp-nl-modal__form .ff-el-form-control {
  width: 100%;
  padding: 12px;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
}

.dp-nl-modal__form .ff-el-form-control:focus,
.dp-nl-modal__form .ff-el-form-control:focus-visible {
  outline: 2px solid var(--techblue);
  outline-offset: 1px;
  border-color: var(--techblue);
}

/* Opt-in consent checkbox row — 14 muted copy. */
.dp-nl-modal__form .ff-el-form-check-label,
.dp-nl-modal__form .ff-el-form-check label {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}

/* Submit — full-width primary; colours/hover come from the FF button base. */
.dp-nl-modal__form .ff-btn-submit {
  width: 100%;
  padding-block: var(--space-2);
}

/* Fluent Forms AJAX confirmation ("Thanks — you're on the list.") — readable
   inside the modal before it auto-closes. */
.dp-nl-modal__form .ff-message-success,
.dp-nl-modal__form .ff_message_success {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}

/* -------------------------------------------------------------------------
   Motion — backdrop fade + dialog fade/scale-in, ~200ms. The visibility
   transition is delayed on close so the fade-out is visible before the dialog
   is hidden. Everything here is gated to prefers-reduced-motion: no-preference,
   so reduced-motion users get an instant appear/disappear with no transform.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .dp-nl-modal {
    transition: visibility 0s linear 0.2s;
  }

  .dp-nl-modal.is-open {
    transition: visibility 0s linear 0s;
  }

  .dp-nl-modal__backdrop {
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .dp-nl-modal__dialog {
    transition:
      opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* Body scroll-lock while the modal is open. JS toggles .dp-nl-open on <html>;
   CSS owns the overflow rule (kept out of the reduced-motion block so the lock
   always applies). */
html.dp-nl-open,
html.dp-nl-open body {
  overflow: hidden;
}

/* Lighter legal line under the newsletter form — Privacy only, small so it
   never crowds the compact modal. Left-aligned to match the modal copy. */
.dp-nl-modal__legal {
  margin-top: var(--space-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.dp-nl-modal__legal-link {
  color: var(--techblue);
  font-weight: 500;
}

.dp-nl-modal__legal-link:hover,
.dp-nl-modal__legal-link:focus-visible {
  color: var(--techblue);
  text-decoration: underline;
  text-underline-offset: 3px;
}