/* Symplify Portal: shared TinyMCE HTML rendering standard.
   Scoped to dynamic rich fields. The whole portal must NOT inherit editor defaults.
   Inline formatting from TinyMCE wins over these base defaults. */

.symplify-rich-content {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  overflow-x: auto;
  font-family: Inter, Arial, sans-serif; /* matches TinyMCE content_style */
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  text-align: start;
  color: var(--default-color, #344054);
}

/* The BackOffice editor has normal text weight. Portal's .lead and card rules
   must not turn that weight into 300 or flatten authored emphasis. */
.info-spotlight-card .symplify-rich-content {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  margin-top: 1rem;
}

.symplify-rich-content strong,
.symplify-rich-content b { font-weight: 700; font-synthesis: weight; }
.symplify-rich-content em,
.symplify-rich-content i:not([class]) { font-style: italic; }
.symplify-rich-content u,
.symplify-rich-content ins { text-decoration-line: underline; }
.symplify-rich-content s,
.symplify-rich-content strike,
.symplify-rich-content del { text-decoration-line: line-through; }
.symplify-rich-content sub,
.symplify-rich-content sup { font-size: 75%; line-height: 0; }

/* Typography and spacing are scoped. Author-specified inline font, point size,
   line height, text alignment, letter spacing, colors and indentation survive. */
.symplify-rich-content p { margin: 0 0 1em; line-height: inherit; }
.symplify-rich-content > :last-child { margin-bottom: 0; }
.symplify-rich-content h1,
.symplify-rich-content h2,
.symplify-rich-content h3,
.symplify-rich-content h4,
.symplify-rich-content h5,
.symplify-rich-content h6 {
  margin: 0.9em 0 0.45em;
  line-height: 1.3;
  color: inherit;
  font-weight: 700;
}
.symplify-rich-content h1 { font-size: 2em; }
.symplify-rich-content h2 { font-size: 1.5em; }
.symplify-rich-content h3 { font-size: 1.25em; }
.symplify-rich-content h4 { font-size: 1.1em; }
.symplify-rich-content h5,
.symplify-rich-content h6 { font-size: 1em; }
.symplify-rich-content small { font-size: 0.8em; }
.symplify-rich-content hr {
  border: 0;
  border-top: 1px solid #cbd5e1;
  margin: 1.25em 0;
  opacity: 1;
}

/* Lists: Bootstrap's list resets must never hide TinyMCE's markers/indent.
   Authors can still change list-style-type inline (advanced list formats). */
.symplify-rich-content ul,
.symplify-rich-content ol {
  margin: 0 0 1em;
  padding-inline-start: 2em;
  list-style-position: outside;
}
.symplify-rich-content ul { list-style-type: disc; }
.symplify-rich-content ol { list-style-type: decimal; }
.symplify-rich-content ul ul { list-style-type: circle; }
.symplify-rich-content ul ul ul { list-style-type: square; }
.symplify-rich-content li { display: list-item; margin-bottom: 0.3em; }
.symplify-rich-content li > ul,
.symplify-rich-content li > ol { margin-top: 0.3em; margin-bottom: 0; }
.symplify-rich-content dl { margin: 0 0 1em; }
.symplify-rich-content dt { font-weight: 700; }
.symplify-rich-content dd { margin-inline-start: 1.5em; }

/* Text links use the author's foreground/background when they set one.
   Built-in CTA blocks use a distinct class below. */
.symplify-rich-content a:not(.symplify-cta) { text-decoration: underline; }
.symplify-rich-content a[href] { overflow-wrap: anywhere; }
.symplify-rich-content a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.symplify-rich-content blockquote {
  margin: 1em 0;
  padding: 0.5em 1em;
  border-inline-start: 4px solid var(--accent-color, #2563eb);
  background: #f5f8ff;
}
.symplify-rich-content blockquote > :last-child { margin-bottom: 0; }
.symplify-rich-content pre {
  display: block;
  max-width: 100%;
  padding: 0.85em 1em;
  margin: 0 0 1em;
  overflow-x: auto;
  white-space: pre;
  background: #f7f8fa;
  border-radius: 6px;
}
.symplify-rich-content code,
.symplify-rich-content pre,
.symplify-rich-content kbd,
.symplify-rich-content samp { font-family: Consolas, 'Courier New', monospace; }
.symplify-rich-content code:not(pre code) { overflow-wrap: anywhere; }

/* Table and cell geometry, borders, backgrounds, row/column spans and
   author-defined widths/colors stay intact. Oversized tables scroll locally. */
.symplify-rich-content table {
  border-collapse: collapse;
  border-spacing: 0;
  max-width: 100%;
  margin: 0 0 1em;
}
.symplify-rich-content caption {
  caption-side: top;
  color: inherit;
  padding: 0.5em;
  text-align: start;
}
.symplify-rich-content th,
.symplify-rich-content td {
  border: 1px solid #cbd5e1;
  padding: 0.5em 0.7em;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.symplify-rich-content th { font-weight: 700; background: #f1f5f9; }
.symplify-rich-content td > :last-child,
.symplify-rich-content th > :last-child { margin-bottom: 0; }

/* Media dimensions: preserve any width/height explicitly set through TinyMCE.
   The max inline size avoids overflowing the portal grid on mobile. */
.symplify-rich-content img,
.symplify-rich-content video,
.symplify-rich-content iframe,
.symplify-rich-content object,
.symplify-rich-content embed,
.symplify-rich-content svg {
  max-width: 100%;
}
.symplify-rich-content img:not([height]):not([style*="height"]) { height: auto; }
.symplify-rich-content iframe,
.symplify-rich-content video { max-height: 80vh; }
.symplify-rich-content figure { max-width: 100%; margin: 1em 0; }
.symplify-rich-content figure.image { display: table; }
.symplify-rich-content figure.image img { display: block; max-width: 100%; }
.symplify-rich-content figure figcaption {
  display: table-caption;
  caption-side: bottom;
  padding: 0.3em 0.5em;
  font-size: 0.85em;
  color: inherit;
  text-align: center;
}
.symplify-rich-content figure:not(.image) figcaption { display: block; }
.symplify-rich-content img[style*="float: left"],
.symplify-rich-content figure.image-style-align-left,
.symplify-rich-content figure.align-left { float: left; margin: 0 1em 1em 0; }
.symplify-rich-content img[style*="float: right"],
.symplify-rich-content figure.image-style-align-right,
.symplify-rich-content figure.align-right { float: right; margin: 0 0 1em 1em; }
.symplify-rich-content figure.image-style-align-center,
.symplify-rich-content figure.align-center { margin-inline: auto; }
.symplify-rich-content::after { content: ''; display: block; clear: both; }

/* Symplify congress-welcome ready blocks (CSS fallback for persisted HTML
   that has no inline styling). Explicit editor styles still win. */
.symplify-rich-content .symplify-ready-block { margin: 1em 0; }
.symplify-rich-content .symplify-callout {
  padding: 16px;
  background: #f3f7ff;
  border-inline-start: 4px solid #2563eb;
  border-radius: 0 6px 6px 0;
  color: #1e293b;
}
.symplify-rich-content .symplify-date-box {
  padding: 14px;
  background: #fff;
  border: 1px solid #dbe2ee;
  border-radius: 8px;
  color: #1e293b;
}
.symplify-rich-content a.symplify-cta {
  display: inline-block;
  max-width: 100%;
  padding: 10px 18px;
  background: #2563eb;
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
}
.symplify-rich-content a.symplify-cta:hover,
.symplify-rich-content a.symplify-cta:focus-visible { background: #1d4ed8; color: #fff; }
.symplify-rich-content .symplify-callout > :last-child,
.symplify-rich-content .symplify-date-box > :last-child { margin-bottom: 0; }

/* Accordion plugin stores native HTML details/summary; no TinyMCE needed
   to interact with it in the portal. */
.symplify-rich-content details {
  display: block;
  margin: 0 0 1em;
  padding: 0.7em 1em;
  border: 1px solid #dbe2ee;
  border-radius: 8px;
}
.symplify-rich-content summary { display: list-item; cursor: pointer; font-weight: 600; }
.symplify-rich-content details[open] summary { margin-bottom: 0.6em; }

@media (max-width: 767.98px) {
  /* Float blocks on narrow screens would make authored content unreadable. */
  .symplify-rich-content img[style*="float: left"],
  .symplify-rich-content img[style*="float: right"],
  .symplify-rich-content figure.image-style-align-left,
  .symplify-rich-content figure.image-style-align-right,
  .symplify-rich-content figure.align-left,
  .symplify-rich-content figure.align-right {
    float: none !important;
    margin: 1em auto;
  }
}