/* ============================================================
   Wiser Magazine — single-post article styling
   ------------------------------------------------------------
   Scoped to the single-post content module, which carries BOTH
   .tdb_single_content and .td-post-content on the same element.
   Two classes give a 2-class specificity that beats the theme's
   own .tdi_64 rules (1 class) — needed because tagDiv prints its
   heading styles inline LATER in the page. Enqueued only on
   is_single(), after the theme CSS. Additive; delete to revert.

   !important appears only where tagDiv emits its own !important
   (headings, blockquote font, and the mobile image reset).
   ============================================================ */

/* --- Section headings: Playfair serif, cream, sentence case --- */
.tdb_single_content.td-post-content h2,
.tdb_single_content.td-post-content h3,
.tdb_single_content.td-post-content h4 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  color: #F4F1E9 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.tdb_single_content.td-post-content h2 {
  font-size: 31px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  margin: 46px 0 16px !important;
  clear: both;
}
.tdb_single_content.td-post-content h3 {
  font-size: 24px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  margin: 38px 0 14px !important;
}
.tdb_single_content.td-post-content h4 {
  font-size: 20px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  margin: 30px 0 12px !important;
}

/* --- Body paragraphs: justified (Myllena's preference) + hyphenation --- */
.tdb_single_content.td-post-content p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* --- Images: honor the NATIVE Gutenberg controls.
   The theme strips the .wp-block-image wrapper class, which kills the
   core float — re-adding it is the ONLY thing CSS does here. We do NOT
   set a width, so the size from the editor's resize handle controls the
   rendered size: the front end matches the editor exactly (WYSIWYG). --- */
.tdb_single_content.td-post-content figure.alignright {
  float: right;
  margin: 8px 0 22px 32px;
}
.tdb_single_content.td-post-content figure.alignleft {
  float: left;
  margin: 8px 32px 22px 0;
}

/* --- Pull-quotes: larger, gold, editorial. Kept centered (text-align
   here beats the body justify rule above on specificity). --- */
.tdb_single_content.td-post-content .wp-block-pullquote {
  border: 0;
  border-top: 1px solid #C9A961;
  border-bottom: 1px solid #C9A961;
  padding: 26px 10px;
  margin: 42px auto;
  max-width: 600px;
  text-align: center;
}
.tdb_single_content.td-post-content .wp-block-pullquote blockquote,
.tdb_single_content.td-post-content .wp-block-pullquote p {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic;
  font-size: 24px;
  line-height: 1.45;
  color: #C9A961;
  margin: 0;
  text-align: center;
}

/* --- Captions: small, muted, legible on the dark body --- */
.tdb_single_content.td-post-content figure figcaption,
.tdb_single_content.td-post-content .wp-caption-text {
  font-size: 13px;
  font-style: italic;
  color: #ABB6BD;
  line-height: 1.5;
  margin-top: 8px;
  text-align: left;
}

/* --- Mobile: aligned images stack full-width --- */
@media (max-width: 767px) {
  .tdb_single_content.td-post-content figure.alignright,
  .tdb_single_content.td-post-content figure.alignleft {
    float: none;
    margin: 14px 0 22px;
  }
  .tdb_single_content.td-post-content figure.alignright img,
  .tdb_single_content.td-post-content figure.alignleft img {
    width: 100% !important;
    height: auto;
  }
  .tdb_single_content.td-post-content h2 { font-size: 26px !important; }
  .tdb_single_content.td-post-content .wp-block-pullquote blockquote,
  .tdb_single_content.td-post-content .wp-block-pullquote p { font-size: 21px; }
}