/* ── Contact dialog ───────────────────────────────────────────────────
   Shared by every page that has a `mailto:` on it: the landing page,
   the Doggo route, and the three frozen snapshot case studies.

   Why it exists: a bare `mailto:` dead-ends silently on a machine with
   no mail handler (macOS opens Mail.app's setup wizard, Windows and
   Linux do nothing), and the address appeared nowhere as text. The
   dialog leads with the ADDRESS because that is the path that always
   works; the mail app is second as a convenience, LinkedIn third
   because it cannot fail this way.

   One file, five surfaces. The snapshot pages are frozen legacy and
   can only take link-level additions, so the markup is injected by
   contact-modal.js rather than pasted into each page.

   Fonts resolve through the Doggo route's scoped variables when the
   dialog is mounted inside `.dgo-page`, and fall back to the names the
   Webflow pages load globally. */

.sd-modal[hidden] {
  display: none;
}

.sd-modal {
  position: fixed;
  inset: 0;
  /* Over .site-nav (999) and the mobile back-to-top pill (1000). */
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.sd-modal_backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sd-modal_panel {
  position: relative;
  width: 100%;
  max-width: 27rem;
  background: #fafaf8;
  border-radius: 10px;
  padding: 2rem 2rem 1.75rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(8px) scale(0.99);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.sd-modal.is-open .sd-modal_backdrop {
  opacity: 1;
}

.sd-modal.is-open .sd-modal_panel {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .sd-modal_backdrop,
  .sd-modal_panel {
    transition: none;
  }
}

.sd-modal_title {
  font-family: var(--dgo-font-heading, Exo), sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.15;
  color: #111111;
  margin: 0 0 0.5rem;
}

.sd-modal_text {
  font-family: var(--dgo-font-body, Quicksand), sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #55555f;
  margin: 0 0 1.25rem;
}

/* The address is the hero of the dialog: full size, selectable, and it
   wraps rather than overflowing on a narrow phone. */
.sd-modal_address {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 0.875rem;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 6px;
  background: rgba(17, 17, 17, 0.03);
}

.sd-modal_address-value {
  font-family: var(--dgo-font-body, Quicksand), sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #111111;
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}

.sd-modal_copy {
  flex: 0 0 auto;
  font-family: var(--dgo-font-body, Quicksand), sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #111111;
  background: transparent;
  border: 1px solid rgba(17, 17, 17, 0.22);
  border-radius: 4px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sd-modal_copy:hover {
  background: rgba(17, 17, 17, 0.06);
  border-color: rgba(17, 17, 17, 0.4);
}

/* Announced as well as shown. Height is reserved so the panel does not
   jump when the message appears. */
.sd-modal_status {
  display: block;
  min-height: 1.25rem;
  margin-top: 0.5rem;
  font-family: var(--dgo-font-body, Quicksand), sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #55555f;
}

.sd-modal_actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Every state sets colour explicitly: the Webflow base sheet carries a
   site-wide `a:hover { color: var(--primitive--primary-main) }`, which
   would otherwise repaint these stock blue on hover. */
.sd-modal_action,
.sd-modal_action:link,
.sd-modal_action:visited {
  display: block;
  text-align: center;
  font-family: var(--dgo-font-body, Quicksand), sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  background: #111111;
  color: #ffffff;
  border: 1px solid #111111;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sd-modal_action:hover,
.sd-modal_action:focus {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}

.sd-modal_action--ghost,
.sd-modal_action--ghost:link,
.sd-modal_action--ghost:visited {
  background: transparent;
  color: #111111;
  border-color: rgba(17, 17, 17, 0.22);
}

.sd-modal_action--ghost:hover,
.sd-modal_action--ghost:focus {
  background: rgba(17, 17, 17, 0.05);
  color: #111111;
  border-color: rgba(17, 17, 17, 0.4);
}

.sd-modal_close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  line-height: 1;
  font-size: 1.25rem;
  color: #55555f;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.sd-modal_close:hover {
  color: #111111;
  background: rgba(17, 17, 17, 0.06);
}

.sd-modal_panel :focus-visible {
  outline: 2px solid #111111;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .sd-modal {
    padding: 1rem;
    align-items: flex-end;
  }

  .sd-modal_panel {
    max-width: none;
    padding: 1.5rem 1.25rem 1.25rem;
    border-radius: 12px;
  }
}