/* ---------------------------------------------------------------------------
   Fluid heading type scale — Phase 1: blog single posts
   Added 2026-09-02.

   Ratio 1.2 on desktop, compressing to ~1.14 on mobile.
   Fluid between a 375px and a 1440px viewport.

   Every clamp() uses rem for its min, max AND intercept, with vw only as the
   growth term. A pure-vw middle term would break browser / OS text resizing
   (WCAG 1.4.4). Do not "simplify" these to vw-only.

   Scope is deliberately narrow: body.single-post only. The sitewide rollout is
   a later phase — see claude/blog-single-type-scale-plan.md §7.

                 375px    768px    1024px   1440px+
        h1        32       37.9     41.8     48
        h2        28       32.4     35.3     40
        h3        24       27.3     29.5     33
        h4        21       23.6     25.3     28
        h5        19       20.5     21.4     23
        h6        17       17.7     18.2     19
        body      16       16       16       16
--------------------------------------------------------------------------- */

:root {
    --type-h1: clamp(2rem,      1.6479rem + 1.5023vw, 3rem);      /* 32 -> 48 */
    --type-h2: clamp(1.75rem,   1.4859rem + 1.1268vw, 2.5rem);    /* 28 -> 40 */
    --type-h3: clamp(1.5rem,    1.3019rem + 0.8451vw, 2.0625rem); /* 24 -> 33 */
    --type-h4: clamp(1.3125rem, 1.1585rem + 0.6573vw, 1.75rem);   /* 21 -> 28 */
    --type-h5: clamp(1.1875rem, 1.0995rem + 0.3756vw, 1.4375rem); /* 19 -> 23 */
    --type-h6: clamp(1.0625rem, 1.0185rem + 0.1878vw, 1.1875rem); /* 17 -> 19 */

    --lh-h1: 1.15;
    --lh-h2: 1.2;
    --lh-h3: 1.25;
    --lh-h4: 1.3;
    --lh-h5: 1.35;
    --lh-h6: 1.4;

    /* Replaces the fixed -0.5px at style.css:425, which was -1.0% at 48px but
       an over-tight -3.1% at 16px. -0.01em == -0.5px at 48px. */
    --ls-heading: -0.01em;
}

/* ---------------------------------------------------------------------------
   Blog single posts.

   Two regions, because the page title is rendered in parts/header-post.php
   inside .banner .titlewrap — outside the <article>.

   body.single-post excludes single-resource, single-events,
   single-testimonials, pages and archives. .post-single (added to the
   <article> in single.php) excludes the related-content row below the post.
--------------------------------------------------------------------------- */

body.single-post .banner .titlewrap h1,
body.single-post .post-single h1 {
    font-size: var(--type-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-heading);
}

body.single-post .banner .titlewrap h2,
body.single-post .post-single h2 {
    font-size: var(--type-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-heading);
}

body.single-post .post-single h3 {
    font-size: var(--type-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-heading);
}

body.single-post .post-single h4 {
    font-size: var(--type-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-heading);
}

body.single-post .post-single h5 {
    font-size: var(--type-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-heading);
}

/* h6 also gets a real face. Until now it was Facundo-Regular (a 400 weight)
   rendered with font-weight:bold inherited from style.css:187 — i.e. a
   browser-synthesised fake bold. */
body.single-post .post-single h6 {
    font-size: var(--type-h6);
    line-height: var(--lh-h6);
    letter-spacing: var(--ls-heading);
    font-family: "Facundo-SemiBold", 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
}

/* Vertical rhythm: more space above a heading than below it, so each one binds
   to the text it introduces. The theme default is a flat 8px / 16px at every
   level, which reads as evenly-spaced blocks rather than a hierarchy. */
body.single-post .post-single h2,
body.single-post .post-single h3,
body.single-post .post-single h4,
body.single-post .post-single h5,
body.single-post .post-single h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

body.single-post .post-single > h2:first-child,
body.single-post .post-single > h3:first-child,
body.single-post .post-single > h4:first-child,
body.single-post .post-single > h5:first-child,
body.single-post .post-single > h6:first-child {
    margin-top: 0;
}