/* =========================================================================
   Outsell Blog Enhancer — single post reading view (v2.9.0)

   Byte-for-byte port of the Medium export's own <style> block onto the
   WordPress single-post template. Every file in posts/*.html ships the
   IDENTICAL block below (verified across the corpus) — it's Medium's fixed
   article template, not something written per-post:

     * { font-family: Georgia, Cambria, "Times New Roman", Times, serif; }
     h1 { font-size:50px; margin-bottom:17px; color:#333; }
     h2 { font-size:24px; line-height:1.6; margin:33px 0 18px; color:#333; }
     h3 { font-size:30px; margin:10px 0 20px; color:#333; }
     header, section { width:640px; margin:auto; }
     section p { margin-bottom:27px; font-size:20px; line-height:1.6; color:#333; }
     section img { max-width:640px; }

   The import script only carried over the <section data-field="body">
   markup, not this <style> block, so Medium's class names (.graf,
   .section--body, etc.) landed on WP with none of their original CSS —
   this file restores it, selector-for-selector, rebuilt against the WP
   template's own structure.

   One deliberate change: Medium's `width:640px` is a hard fixed width
   (that export was never meant to be responsive — it overflows on a
   phone-sized viewport). We use `max-width:640px` with fluid `width:100%`
   instead so the live site doesn't break on mobile; everything else below
   is a direct, unmodified port of the values above.

   Tags Medium's own template leaves unstyled (h4, blockquote, ul/ol/li, a)
   are reset to plain browser defaults here too, matching what Medium's
   raw HTML actually renders — not inventing styling it never had.

   Scoped to body.single-post — the single-post Elementor
   template's own stable id (confirmed identical across every published
   article: more-isnt-more, pace-precision, your-ai-why, humans-in-the-
   loop), so this never touches the site header/footer or other post
   types.
   ========================================================================= */

body.single-post,
body.single-post * {
  font-family: Georgia, Cambria, 'Times New Roman', Times, serif !important;
}

/* Reading column — Medium's `header, section { width:640px; margin:auto }` */
body.single-post div[data-elementor-type='single-post']
  .elementor-container {
  max-width: 1024px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* h1 — the post-title widget renders an actual <h1>, so Medium's h1 rule
   applies to it directly (it's the on-page equivalent of Medium's title). */
body.single-post h1.elementor-heading-title {
  font-size: 50px !important;
  font-weight: bold !important;
  line-height: normal !important;
  margin: 0 0 17px !important;
  color: #333 !important;
  letter-spacing: normal !important;
}

/* h2 / h3 — in-body headings inside the imported Medium content */
body.single-post .section--body h2 {
  font-size: 24px !important;
  line-height: 1.6 !important;
  margin: 33px 0 18px !important;
  color: #333 !important;
  font-weight: bold !important;
}
body.single-post .section--body h3 {
  font-size: 30px !important;
  line-height: normal !important;
  margin: 10px 0 20px !important;
  color: #333 !important;
  font-weight: bold !important;
}

/* p — Medium's `section p` rule */
body.single-post .section--body p {
  font-size: 20px !important;
  line-height: 1.6 !important;
  margin: 0 0 27px !important;
  color: #333 !important;
}

/* img — Medium's `section img { max-width:640px }`; the column above is
   already capped at 640px, so 100% here gives the same result and stays
   fluid below that. */
body.single-post .section--body img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin-inline: auto !important;
}
body.single-post .section--body figure {
  margin: 0 0 27px !important;
}
body.single-post .section--body figcaption {
  font-size: 14px !important;
  color: #333 !important;
  text-align: center !important;
}

/* ------------------------------------------------------------------ */
/* Everything below is left UNSTYLED by Medium's own template — reset  */
/* to plain browser defaults instead of inheriting the WP theme's.     */
/* ------------------------------------------------------------------ */
body.single-post .section--body h4 {
  font-size: 16px !important;
  font-weight: bold !important;
  margin: 21px 0 !important;
  color: #000 !important;
}
body.single-post .section--body blockquote {
  font-size: 16px !important;
  line-height: normal !important;
  margin: 16px 40px !important;
  color: #000 !important;
  font-weight: normal !important;
  font-style: normal !important;
}
body.single-post .section--body ul,
body.single-post .section--body ol {
  font-size: 16px !important;
  margin: 16px 0 !important;
  padding-left: 40px !important;
  color: #000 !important;
}
body.single-post .section--body li {
  margin: 0 !important;
}
body.single-post .section--body a {
  color: #0000ee !important;
  text-decoration: underline !important;
}
body.single-post .section--body strong {
  font-weight: bold !important;
}
body.single-post .section--body em {
  font-style: italic !important;
}
