/* ═══════════════════════════════════════════
   GlobalBridge — Global Custom Styles
   ═══════════════════════════════════════════ */

/* ── Article content — responsive typography ── */
.article-content {
  word-break: break-word;
  overflow-wrap: break-word;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4 {
  word-break: break-word;
  overflow-wrap: break-word;
}

.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.article-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.article-content iframe,
.article-content video {
  max-width: 100%;
}

.article-content pre,
.article-content code {
  overflow-x: auto;
  max-width: 100%;
  word-break: break-all;
}

/* Inline styled divs from AI generator — force wrap */
.article-content div {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ── Mobile-specific article adjustments ── */
@media (max-width: 640px) {
  .article-content {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  .article-content h1 { font-size: 1.5rem !important; }
  .article-content h2 { font-size: 1.3rem !important; }
  .article-content h3 { font-size: 1.15rem !important; }

  .article-content blockquote {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 12px !important;
  }

  /* Force inline-style elements to fit mobile */
  .article-content [style*="padding"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .article-content [style*="margin: 24px"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .article-content [style*="display: flex"] {
    flex-wrap: wrap;
  }

  .article-content [style*="display: grid"] {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ── Smooth scroll behavior (no jarring jumps) ── */
html {
  scroll-behavior: smooth;
}

/* ── Fix overflow on mobile ── */
body {
  overflow-x: hidden;
}

/* CRM Emailing: keep external HTML emails readable inside the app shell. */
.email-html-shell,
.rich-email-body {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.email-html-shell {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  background: #ffffff;
  color: #334155;
}

.email-html-body {
  width: 100%;
  max-width: 100%;
  font-size: 14px;
  line-height: 1.65;
}

.email-html-body *,
.rich-email-body * {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.email-html-body a,
.rich-email-body a {
  color: #1A3E62;
  text-decoration: underline;
  word-break: break-all !important;
}

.email-html-body img,
.rich-email-body img {
  max-width: 100% !important;
  height: auto !important;
}

.email-html-body table,
.rich-email-body table {
  width: auto !important;
  max-width: 100% !important;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}

.email-html-body td,
.email-html-body th,
.rich-email-body td,
.rich-email-body th {
  max-width: min(680px, 100vw - 64px) !important;
  white-space: normal !important;
}

.email-html-body pre,
.email-html-body code,
.rich-email-body pre,
.rich-email-body code {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 1024px) {
  .email-html-body {
    font-size: 15px;
    line-height: 1.75;
  }

  .email-html-body [style*="padding"] {
    padding-left: min(14px, 4vw) !important;
    padding-right: min(14px, 4vw) !important;
  }

  .email-html-body [style*="width"] {
    width: auto !important;
    max-width: 100% !important;
  }
}