/**
 * Blog article typography (public post body).
 * .post-text = current template; .blog-content = alternate wrapper; .ck-content = legacy WYSIWYG classnames.
 */

/* Blog article typography */
.post-text,
.blog-content {
  max-width: 760px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.75;
  font-weight: 400;
  color: #111827;
  letter-spacing: -0.003em;
}

/* Safety: prevent CMS inline styles from breaking typography on mobile.
   We only neutralize inline color + font-size so the editorial CSS keeps control. */
.post-text :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)[style*='font-size'],
.blog-content :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)[style*='font-size'],
.post-text :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)[style*='color'],
.blog-content :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)[style*='color'] {
  font-size: inherit !important;
  color: inherit !important;
  line-height: inherit;
}

/* Keep long words/URLs from causing horizontal overflow. */
.post-text,
.blog-content {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Contained media sizing even if CMS adds width/height inline. */
.post-text img[style*='width'],
.blog-content img[style*='width'],
.post-text figure[style*='width'],
.blog-content figure[style*='width'],
.post-text video[style*='width'],
.blog-content video[style*='width'] {
  max-width: 100% !important;
  height: auto !important;
}

/* Paragraphs */
.post-text p,
.blog-content p {
  margin: 0 0 1.35rem;
}

/* Headings */
.post-text h1,
.blog-content h1 {
  font-size: clamp(2.25rem, 5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  font-weight: 800;
  margin: 0 0 1.5rem;
  color: #0f172a;
}

.post-text h2,
.blog-content h2 {
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  line-height: 1.18;
  letter-spacing: -0.035em;
  font-weight: 750;
  margin: 2.6rem 0 1rem;
  color: #0f172a;
}

.post-text h3,
.blog-content h3 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 2rem 0 0.75rem;
  color: #111827;
}

/* Lists */
.ck-content ul,
.ck-content ol,
.post-text ul,
.post-text ol,
.blog-content ul,
.blog-content ol {
  margin: 0 0 1.4rem 1.4rem;
  padding-left: 1rem;
}

.post-text li,
.blog-content li,
.ck-content li {
  margin: 0.35rem 0;
  padding-left: 0.2rem;
}

/* Links */
.post-text a,
.blog-content a {
  color: #2563eb;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.post-text a:hover,
.blog-content a:hover {
  color: #1d4ed8;
}

/* Strong / emphasis */
.post-text strong,
.blog-content strong {
  font-weight: 700;
}

.post-text em,
.blog-content em {
  font-style: italic;
}

/* Quotes */
.post-text blockquote,
.blog-content blockquote {
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 4px solid #cbd5e1;
  color: #475569;
  font-size: 1.08em;
  line-height: 1.65;
  font-style: italic;
}

/* Inline code */
.post-text code,
.blog-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
  background: #f1f5f9;
  border-radius: 0.35rem;
  padding: 0.12rem 0.35rem;
}

/* Images */
.post-text figure,
.blog-content figure {
  margin: 2rem 0;
}

.post-text img,
.blog-content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

.post-text figcaption,
.blog-content figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #64748b;
  text-align: center;
}

/* Image sizes (class-based) */
.post-text .img-small,
.blog-content .img-small {
  width: 34%;
}

.post-text .img-medium,
.blog-content .img-medium {
  width: 58%;
}

.post-text .img-large,
.blog-content .img-large {
  width: 100%;
}

/* Image alignment + text wrap (class-based) */
.post-text .img-left,
.blog-content .img-left {
  float: left;
  margin: 0.35rem 1.5rem 1rem 0;
}

.post-text .img-right,
.blog-content .img-right {
  float: right;
  margin: 0.35rem 0 1rem 1.5rem;
}

.post-text .img-center,
.blog-content .img-center {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

/* Legacy editor data-align + figure classes */
.post-text img[data-align='left'],
.blog-content img[data-align='left'],
.post-text img.image-style-align-block-left,
.blog-content img.image-style-align-block-left {
  float: left;
  margin: 0.35rem 1.5rem 1rem 0;
}

.post-text img[data-align='right'],
.blog-content img[data-align='right'],
.post-text img.image-style-align-block-right,
.blog-content img.image-style-align-block-right {
  float: right;
  margin: 0.35rem 0 1rem 1.5rem;
}

.post-text img[data-align='center'],
.blog-content img[data-align='center'],
.post-text img.image-style-align-center,
.blog-content img.image-style-align-center {
  display: block;
  float: none;
  margin-left: auto;
  margin-right: auto;
}

.post-text figure.image-style-align-left,
.blog-content figure.image-style-align-left,
.post-text figure.image-style-align-block-left,
.blog-content figure.image-style-align-block-left {
  float: left;
  margin: 0.35rem 1.5rem 1rem 0;
}

.post-text figure.image-style-align-right,
.blog-content figure.image-style-align-right,
.post-text figure.image-style-align-block-right,
.blog-content figure.image-style-align-block-right {
  float: right;
  margin: 0.35rem 0 1rem 1.5rem;
}

.post-text figure.image-style-align-center,
.blog-content figure.image-style-align-center {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

.post-text figure.image-style-align-left img,
.post-text figure.image-style-align-right img,
.post-text figure.image-style-align-center img,
.blog-content figure.image-style-align-left img,
.blog-content figure.image-style-align-right img,
.blog-content figure.image-style-align-center img {
  display: block;
  margin: 0;
}

.post-text img.image_resized,
.post-text img.image-resized,
.blog-content img.image_resized,
.blog-content img.image-resized {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Clear floats after article */
.post-text::after,
.blog-content::after {
  content: '';
  display: block;
  clear: both;
}

/* Tables, if later needed */
.post-text table,
.blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.95em;
}

.post-text th,
.post-text td,
.blog-content th,
.blog-content td {
  border: 1px solid #e5e7eb;
  padding: 0.75rem;
}

.post-text th,
.blog-content th {
  background: #f8fafc;
  font-weight: 700;
}

/* Mobile */
@media (max-width: 768px) {
  .post-text,
  .blog-content {
    max-width: 100%;
    font-size: 17px;
    line-height: 1.7;
    padding: 0 1rem;
  }

  /* Mobile: ensure inline media never exceeds viewport width. */
  .post-text img,
  .blog-content img,
  .post-text iframe,
  .blog-content iframe {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Mobile: sanitize any accidental inline block widths. */
  .post-text [style*='width'],
  .blog-content [style*='width'] {
    max-width: 100% !important;
    height: auto !important;
  }

  .post-text h1,
  .blog-content h1 {
    font-size: 2.25rem;
    line-height: 1.12;
  }

  .post-text h2,
  .blog-content h2 {
    font-size: 1.65rem;
  }

  .post-text .img-small,
  .post-text .img-medium,
  .post-text .img-large,
  .blog-content .img-small,
  .blog-content .img-medium,
  .blog-content .img-large {
    width: 100%;
  }

  .post-text .img-left,
  .post-text .img-right,
  .blog-content .img-left,
  .blog-content .img-right {
    float: none;
    margin: 1.5rem 0;
  }

  .post-text img[data-align='left'],
  .post-text img[data-align='right'],
  .blog-content img[data-align='left'],
  .blog-content img[data-align='right'],
  .post-text img.image-style-align-block-left,
  .post-text img.image-style-align-block-right,
  .blog-content img.image-style-align-block-left,
  .blog-content img.image-style-align-block-right {
    float: none;
    margin: 1.5rem 0;
  }

  .post-text figure.image-style-align-left,
  .post-text figure.image-style-align-right,
  .blog-content figure.image-style-align-left,
  .blog-content figure.image-style-align-right,
  .post-text figure.image-style-align-block-left,
  .post-text figure.image-style-align-block-right,
  .blog-content figure.image-style-align-block-left,
  .blog-content figure.image-style-align-block-right {
    float: none;
    margin: 1.5rem 0;
  }

  .post-text img,
  .blog-content img {
    border-radius: 12px;
  }
}

/* --- Inline text colors + highlight (controlled by blog editor v1) --- */
.post-text .text-red,
.blog-content .text-red {
  color: #dc2626;
}

.post-text .text-green,
.blog-content .text-green {
  color: #16a34a;
}

.post-text .text-orange,
.blog-content .text-orange {
  color: #f97316;
}

.post-text mark.highlight-yellow,
.blog-content mark.highlight-yellow {
  background: #facc15;
  color: inherit;
  padding: 0 0.15em;
  border-radius: 0.2rem;
}

/* --- Inline blog images (controlled lightweight editor) --- */
.blog-content img.blog-image,
.post-text img.blog-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1rem 0;
}

.blog-content img.blog-image.image-small,
.post-text img.blog-image.image-small {
  width: 40%;
}

.blog-content img.blog-image.image-medium,
.post-text img.blog-image.image-medium {
  width: 70%;
}

.blog-content img.blog-image.image-large,
.post-text img.blog-image.image-large {
  width: 100%;
}

.blog-content img.blog-image.align-left,
.post-text img.blog-image.align-left {
  float: left;
  margin-right: 1rem;
}

.blog-content img.blog-image.align-center,
.post-text img.blog-image.align-center {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

.blog-content img.blog-image.align-right,
.post-text img.blog-image.align-right {
  float: right;
  margin-left: 1rem;
}