/* =========================================================
   Wots Her Name Again? — Single Post Editorial Styling
   (Hello Elementor Single Post template + Gutenberg content)
   ========================================================= */

/* -------------------------
   1) SAFETY RESET (fixes weird wrapping/columns/vertical text)
   ------------------------- */

/* Make sure the post content area can’t go into “side-by-side” column layouts */
body.single-post .entry-content,
body.single-post .elementor-widget-theme-post-content,
body.single-post .elementor-widget-theme-post-content .elementor-widget-container {
  width: 100%;
  max-width: 100%;
}

/* Force everything back to normal horizontal text flow */
body.single-post .entry-content *,
body.single-post .elementor-widget-theme-post-content * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  transform: none;
}

/* Stop floats/clears that can cause captions to sit beside images */
body.single-post .entry-content figure,
body.single-post .entry-content .wp-block-image,
body.single-post .entry-content img,
body.single-post .elementor-widget-theme-post-content figure,
body.single-post .elementor-widget-theme-post-content .wp-block-image,
body.single-post .elementor-widget-theme-post-content img {
  float: none !important;
  clear: both;
}

/* -------------------------
   2) RANK MATH TABLE OF CONTENTS
   ------------------------- */

#rank-math-toc,
.rank-math-toc {
  font-family: "Playfair Display", serif;
  font-size: 16px;
  line-height: 1.6;
  max-width: 680px;
  margin: 28px auto 36px;
}

.rank-math-toc-title {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: capitalize;
  font-weight: 500;
}

.rank-math-toc a {
  color: #000;
  text-decoration: none;
}

.rank-math-toc a:hover {
  color: #E91E63;
}

.rank-math-toc ul ul {
  margin-left: 14px;
  font-size: 14px;
}

/* -------------------------
   3) EDITORIAL BODY TEXT (readability)
   ------------------------- */

body.single-post .entry-content p,
body.single-post .entry-content ul,
body.single-post .entry-content ol,
body.single-post .elementor-widget-theme-post-content p,
body.single-post .elementor-widget-theme-post-content ul,
body.single-post .elementor-widget-theme-post-content ol {
  max-width: 640px;
  margin: 0 auto 26px;
  font-size: 18px;
  line-height: 1.8;
  color: #222;
}

body.single-post .entry-content p:first-of-type,
body.single-post .elementor-widget-theme-post-content p:first-of-type {
  font-size: 19px;
  line-height: 1.85;
  margin-bottom: 40px;
}

/* Lists look nicer with a little breathing space */
body.single-post .entry-content ul,
body.single-post .entry-content ol,
body.single-post .elementor-widget-theme-post-content ul,
body.single-post .elementor-widget-theme-post-content ol {
  padding-left: 1.2em;
}

/* -------------------------
   4) HEADINGS (THIS IS THE H2 FIX)
   Gutenberg heading blocks often render as: h2.wp-block-heading
   ------------------------- */

/* H2 */
body.single-post .entry-content h2,
body.single-post .entry-content h2.wp-block-heading,
body.single-post .elementor-widget-theme-post-content h2,
body.single-post .elementor-widget-theme-post-content h2.wp-block-heading {
  max-width: 680px;
  margin: 72px auto 22px;
  font-size: 30px;
  line-height: 1.25;

  /* The “spaced out letters” look is usually letter-spacing + transform.
     This normalises it so your Elementor Site Settings can shine. */
  letter-spacing: 0.02em !important;
  text-transform: none !important;

  color: #111;
}

/* H3 */
body.single-post .entry-content h3,
body.single-post .entry-content h3.wp-block-heading,
body.single-post .elementor-widget-theme-post-content h3,
body.single-post .elementor-widget-theme-post-content h3.wp-block-heading {
  max-width: 680px;
  margin: 44px auto 16px;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: #111;
}

/* -------------------------
   5) IMAGES + CAPTIONS (fixes the “caption goes weird / narrow” problem)
   ------------------------- */

/* Keep images centered and never wider than their container */
body.single-post .entry-content img,
body.single-post .elementor-widget-theme-post-content img {
  display: block;
  max-width: 100% !important;
  height: auto;
  margin: 34px auto;
}

/* Figures should stack: image on top, caption underneath */
body.single-post .entry-content figure,
body.single-post .entry-content .wp-block-image,
body.single-post .elementor-widget-theme-post-content figure,
body.single-post .elementor-widget-theme-post-content .wp-block-image {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: 100%;
  max-width: 100% !important;
  margin: 42px auto !important;

  /* prevents odd “columns” */
  column-count: 1 !important;
}

/* Captions: centered, normal width, no weird wrapping */
body.single-post .entry-content figcaption,
body.single-post .entry-content .wp-element-caption,
body.single-post .elementor-widget-theme-post-content figcaption,
body.single-post .elementor-widget-theme-post-content .wp-element-caption {
  display: block !important;
  width: 100% !important;
  max-width: 640px !important;

  margin: 10px auto 0 !important;
  padding: 0 16px;

  font-size: 14px;
  line-height: 1.6;
  color: #555;

  text-align: center !important;

  /* kills the “vertical/stacked letters” look */
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* Gutenberg alignment helpers (Wide / Full) — stop layout breaking */
body.single-post .entry-content .alignwide,
body.single-post .entry-content .alignfull,
body.single-post .elementor-widget-theme-post-content .alignwide,
body.single-post .elementor-widget-theme-post-content .alignfull {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
}

/* -------------------------
   6) MOBILE TUNING
   ------------------------- */

@media (max-width: 767px) {
  body.single-post .entry-content p,
  body.single-post .entry-content ul,
  body.single-post .entry-content ol,
  body.single-post .entry-content h2,
  body.single-post .entry-content h3,
  body.single-post .entry-content figcaption,
  body.single-post .entry-content .wp-element-caption,
  body.single-post .elementor-widget-theme-post-content p,
  body.single-post .elementor-widget-theme-post-content ul,
  body.single-post .elementor-widget-theme-post-content ol,
  body.single-post .elementor-widget-theme-post-content h2,
  body.single-post .elementor-widget-theme-post-content h3,
  body.single-post .elementor-widget-theme-post-content figcaption,
  body.single-post .elementor-widget-theme-post-content .wp-element-caption {
    max-width: 100% !important;
    padding-left: 16px;
    padding-right: 16px;
  }

  body.single-post .entry-content p,
  body.single-post .elementor-widget-theme-post-content p {
    font-size: 16.5px;
    line-height: 1.7;
  }

  body.single-post .entry-content h2,
  body.single-post .elementor-widget-theme-post-content h2 {
    font-size: 24px;
    margin-top: 54px;
  }

  body.single-post .entry-content img,
  body.single-post .elementor-widget-theme-post-content img {
    margin: 26px auto;
  }
}