/* ------------------------------------------------
  PHARAON-POST-TYPOGRAPHY-01
  Editorial heading hierarchy for single blog posts.

  Renvo's global heading scale (h2 60/70, h3 34/44, h4 28/38) is built for
  full-bleed marketing sections. A single post renders its article inside
  col-lg-8, so a 60px H2 in that column reads as a banner rather than as a
  section head and breaks the reading rhythm of a 2,000-5,000 word guide.

  This file re-scales H2/H3/H4 for long-form reading and nothing else. It is
  scoped to `.single-post .post-single-page .entry-content`, which is the
  article body only - the sidebar (.themeht-sidebar), post navigation,
  comments, header, footer and every Elementor template sit outside it and
  are untouched. Global h1-h6 are never redeclared here.

  Loaded by pharaon_post_typography_assets() in functions.php, on
  is_singular('post') only. CSS only - no JS, no library, no new font.

  Rollback: remove this file and its enqueue block in functions.php.
------------------------------------------------ */


/* ------------------------
    Accent

    Both heading markers read from one variable, so the accent is a single
    line to change.

    #E3AD0B is the Pharaon gold that theme-style.css declares on :root as
    --themeht-primary-color. It is set literally here because the Renvo
    options panel prints a later :root block on every page that overrides
    that token with #273791 (blue) - reading the token would paint the
    markers blue and lose the gold accent the article design calls for.

    To make the markers follow the site accent instead, swap the value for
    var(--themeht-primary-color).
------------------------*/
.single-post .post-single-page .entry-content {
    --pharaon-post-accent: #E3AD0B;
}


/* ------------------------
    H2 - major article section

    36px desktop, fluid down to 30px on mobile. The clamp reaches its 36px
    ceiling at a 1280px viewport, so 1280 / 1440 / 1920 all render 36px and
    the interpolation only does work on tablet and phone widths.
------------------------*/
.single-post .post-single-page .entry-content h2 {
    --pharaon-h2-marker: clamp(28px, 0.94em, 34px);
    position: relative;
    margin-top: 52px;
    margin-bottom: 20px;
    padding-left: 22px;
    font-size: clamp(1.875rem, 1.65rem + 0.75vw, 2.25rem);
    line-height: 1.22;
    font-weight: 560;
    letter-spacing: -0.025em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

/* Short vertical accent marker, centred on the first line box - an editorial
   tick, deliberately not a full-height border. 1.22em mirrors line-height
   above, so the marker stays optically aligned as the heading resizes. */
.single-post .post-single-page .entry-content h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc((1.22em - var(--pharaon-h2-marker)) / 2);
    width: 3px;
    height: var(--pharaon-h2-marker);
    background: var(--pharaon-post-accent);
    border-radius: 1px;
}


/* ------------------------
    H3 - subsection

    28px desktop / 24px mobile. Held well below H2 so the two never read as
    the same level.

    The space above an H3 is margin-top plus padding-top: the padding holds
    the accent rule, the margin holds the gap to the previous block. 26 + 14
    lands the heading 40px below the paragraph above it - clearly less
    separation than the 52px an H2 gets.
------------------------*/
.single-post .post-single-page .entry-content h3 {
    position: relative;
    margin-top: 26px;
    margin-bottom: 16px;
    padding-top: 14px;
    font-size: clamp(1.5rem, 1.3rem + 0.625vw, 1.75rem);
    line-height: 1.28;
    font-weight: 560;
    letter-spacing: -0.02em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

/* Short horizontal rule above the heading - the quieter sibling of the H2
   marker, so repeated H3s in an FAQ never turn into visual noise. */
.single-post .post-single-page .entry-content h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 2px;
    background: var(--pharaon-post-accent);
    border-radius: 1px;
}


/* ------------------------
    H4 - detail heading

    22px desktop / 20px mobile. No decoration at all: at this size the extra
    weight and the space above it carry the hierarchy on their own.
------------------------*/
.single-post .post-single-page .entry-content h4 {
    margin-top: 30px;
    margin-bottom: 12px;
    font-size: clamp(1.25rem, 1.175rem + 0.25vw, 1.375rem);
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-wrap: balance;
    overflow-wrap: break-word;
}


/* ------------------------
    Rhythm corrections
------------------------*/

/* A heading opening the article should not push the content down. */
.single-post .post-single-page .entry-content > h2:first-child,
.single-post .post-single-page .entry-content > h3:first-child,
.single-post .post-single-page .entry-content > h4:first-child {
    margin-top: 0;
}

/* Stacked headings with no prose between them: the section break has
   already been made, so the second heading only needs a small step. */
.single-post .post-single-page .entry-content h2 + h3,
.single-post .post-single-page .entry-content h2 + h4 {
    margin-top: 20px;
}

.single-post .post-single-page .entry-content h3 + h4 {
    margin-top: 18px;
}


/* ------------------------
    Mobile

    Sizes are already handled by the clamps. Only the decoration needs
    tightening so the markers keep their proportion against a 30px H2 and
    the indent does not eat the narrow column.
------------------------*/
@media (max-width: 767px) {

    .single-post .post-single-page .entry-content h2 {
        margin-top: 44px;
        padding-left: 18px;
    }

    .single-post .post-single-page .entry-content h3 {
        margin-top: 22px;
        padding-top: 12px;
    }

    .single-post .post-single-page .entry-content h3::before {
        width: 26px;
    }

    .single-post .post-single-page .entry-content h4 {
        margin-top: 26px;
    }

}