/* ═══════════════════════════════════════════════════════════════════
   GProTip — WYSIWYG Content Rendering Fix  (append to site.css)
   Fixes: tables, iframes, figures, code blocks, alignment classes,
          inline styles from editor not rendering correctly on frontend
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tables ──────────────────────────────────────────────────────── */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: .93rem;
  overflow-x: auto;
  display: block;
}
.article-body table th,
.article-body table td {
  border: 1px solid var(--border);
  padding: .55rem .85rem;
  text-align: left;
  vertical-align: top;
}
.article-body table th {
  background: var(--bg-alt);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.article-body table tr:nth-child(even) td {
  background: var(--surface-2);
}
.article-body table tr:hover td {
  background: var(--bg-alt);
}

/* ── Figures & captions ──────────────────────────────────────────── */
.article-body figure {
  margin: 1.75rem 0;
}
.article-body figure img {
  margin: 0;
}
.article-body figcaption {
  font-size: .82rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: .5rem;
  font-style: italic;
}

/* ── iframes / embeds (YouTube, Google Maps, etc.) ───────────────── */
.article-body iframe {
  max-width: 100%;
  border: none;
  border-radius: var(--radius);
  margin: 1.5rem 0;
  display: block;
}
/* Responsive video wrapper — editor wraps iframes in .video-wrap */
.article-body .video-wrap,
.article-body .embed-wrap {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  margin: 1.5rem 0;
}
.article-body .video-wrap iframe,
.article-body .embed-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  margin: 0;
}

/* ── Text alignment (editor inserts style or text-align classes) ─── */
.article-body .text-left,
.article-body [style*="text-align: left"],
.article-body [style*="text-align:left"]   { text-align: left; }
.article-body .text-center,
.article-body [style*="text-align: center"],
.article-body [style*="text-align:center"] { text-align: center; }
.article-body .text-right,
.article-body [style*="text-align: right"],
.article-body [style*="text-align:right"]  { text-align: right; }
.article-body .text-justify,
.article-body [style*="text-align: justify"],
.article-body [style*="text-align:justify"]{ text-align: justify; }

/* ── Code inline ─────────────────────────────────────────────────── */
.article-body code {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .1em .35em;
  font-size: .87em;
  font-family: 'Fira Code', 'Courier New', monospace;
  color: var(--primary);
}
.article-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* ── HR / divider ────────────────────────────────────────────────── */
.article-body hr {
  border: none;
  border-top: 2px solid var(--border);
  margin: 2rem 0;
}

/* ── H4 / H5 / H6 (editor may produce these) ───────────────────── */
.article-body h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.5rem 0 .5rem;
}
.article-body h5 {
  font-size: 1rem;
  font-weight: 700;
  margin: 1.25rem 0 .4rem;
}
.article-body h6 {
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin: 1.25rem 0 .4rem;
}

/* ── Images: editor may add float/align classes ──────────────────── */
.article-body img.alignleft,
.article-body img[style*="float: left"],
.article-body img[style*="float:left"] {
  float: left;
  margin: .25rem 1.5rem 1rem 0;
  max-width: 45%;
}
.article-body img.alignright,
.article-body img[style*="float: right"],
.article-body img[style*="float:right"] {
  float: right;
  margin: .25rem 0 1rem 1.5rem;
  max-width: 45%;
}
.article-body img.aligncenter,
.article-body img[style*="margin: auto"],
.article-body img[style*="margin:auto"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Clear floats after content */
.article-body::after {
  content: '';
  display: table;
  clear: both;
}

/* ── Responsive: undo floats on small screens ────────────────────── */
@media (max-width: 600px) {
  .article-body img.alignleft,
  .article-body img.alignright,
  .article-body img[style*="float"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
  .article-body table {
    font-size: .8rem;
  }
}