/* ====================================================================
   NovaFolio — typography-fluid.css
   Fluid heading + body scales for harmonized responsive typography
   across ALL pages, blocks and patterns.

   STRATEGY
   --------
   Overrides the heading-size tokens (--nvf-h1-font-size etc.) at :root.
   Every theme & plugin rule that consumes these tokens
   (h1..h6 in main.css, .nvf-prose h*, .wp-block-heading, Nova blocks)
   automatically inherits the new fluid scale — no per-rule edit needed.

   SCALE  (mobile floor → tablet → desktop ceiling)
   ----------------------------------------------------
   h1:  1.875rem (30px)  →  2.5rem  (40px)  →  3.25rem (52px)
   h2:  1.625rem (26px)  →  2.125rem(34px)  →  2.75rem (44px)
   h3:  1.25rem  (20px)  →  1.5rem  (24px)  →  1.875rem(30px)
   h4:  1.125rem (18px)  →  1.25rem (20px)  →  1.5rem  (24px)
   h5:  1rem     (16px)  →  1.125rem(18px)  →  1.25rem (20px)
   h6:  0.9375rem(15px)  →  1rem    (16px)  →  1.0625rem(17px)

   Designed for:
   - Comfortable reading on phones (≥ 15px body, ≥ 18px h4)
   - Distinct visual hierarchy (h1 > h2 > h3 ratios preserved)
   - Smooth scaling (no abrupt jumps at breakpoints)
   ==================================================================== */

:root {
  /* ------- Headings ------- */
  --nvf-h1-font-size: clamp(1.875rem, 4.4vw + 0.5rem, 3.25rem);
  --nvf-h2-font-size: clamp(1.625rem, 3.6vw + 0.5rem, 2.75rem);
  --nvf-h3-font-size: clamp(1.25rem,  2.2vw + 0.5rem, 1.875rem);
  --nvf-h4-font-size: clamp(1.125rem, 1.4vw + 0.5rem, 1.5rem);
  --nvf-h5-font-size: clamp(1rem,     0.8vw + 0.5rem, 1.25rem);
  --nvf-h6-font-size: clamp(0.9375rem, 0.4vw + 0.5rem, 1.0625rem);

  /* Aliases (some Nova blocks use the shorter form) */
  --nvf-h1: var(--nvf-h1-font-size);
  --nvf-h2: var(--nvf-h2-font-size);
  --nvf-h3: var(--nvf-h3-font-size);
  --nvf-h4: var(--nvf-h4-font-size);
  --nvf-h5: var(--nvf-h5-font-size);
  --nvf-h6: var(--nvf-h6-font-size);

  /* Line-heights — tightened slightly for larger fluid sizes
     (prevents excessive vertical space on big headings) */
  --nvf-h1-line-height: 1.1;
  --nvf-h2-line-height: 1.15;
  --nvf-h3-line-height: 1.2;
  --nvf-h4-line-height: 1.3;

  /* ------- Body text ------- */
  /* Body stays anchored at 15-16px (readable on phones).
     Lead/intro paragraphs slightly larger via .is-style-nvf-lead. */
  --nvf-base-font-size: clamp(0.9375rem, 0.3vw + 0.875rem, 1rem);
  /* 15px on mobile → 16px on desktop */
}

/* Lead paragraphs (used in About — Bio and other patterns) */
.is-style-nvf-lead,
.wp-block-paragraph.is-style-nvf-lead {
  font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.25rem);
  line-height: 1.55;
}

/* Single post / portfolio detail title — keep prominent but fluid */
body.single-post,
body.single-portfolio {
  --nvf-single-title-size: clamp(1.75rem, 4vw + 0.5rem, 2.5rem);
}

/* CTA title — already had clamp in cta.css; harmonize the ceiling */
.nvf-cta__title {
  font-size: clamp(1.5rem, 3vw + 0.5rem, var(--nvf-h2-font-size, 2.75rem));
  line-height: var(--nvf-h2-line-height, 1.15);
}

/* WordPress preset font sizes — harmonized fluid scale.
   Editor users picking "Small/Medium/Large/X-Large" get fluid sizes too. */
:root {
  --wp--preset--font-size--small:   clamp(0.8125rem, 0.2vw + 0.78rem, 0.875rem);
  --wp--preset--font-size--medium:  var(--nvf-base-font-size);
  --wp--preset--font-size--large:   clamp(1.125rem, 0.7vw + 0.95rem, 1.375rem);
  --wp--preset--font-size--x-large: var(--nvf-h3-font-size);
  --wp--preset--font-size--4xl:     var(--nvf-h1-font-size);
}

/* ====================================================================
   Mobile fine-tuning (≤ 480 px)
   Slightly tighter h1/h2 for very small phones to avoid 2-line wraps
   on common copy lengths like "Linge Meng" or "About Me".
   ==================================================================== */
@media (max-width: 480px) {
  :root {
    --nvf-h1-font-size: clamp(1.75rem, 6vw + 0.5rem, 2.125rem);
    --nvf-h2-font-size: clamp(1.5rem,  5vw + 0.5rem, 1.875rem);
  }
}