/*
 * PathSoft child theme: typography overrides
 * Fluid typography for PathSoft sections (.section) based on min/max sizes.
 *
 * How to edit:
 * - `--fs-max` = size on ~1920px and wider
 * - `--fs-min` = size on ~360px and narrower
 * - line-height = `--lh`
 */

:root {
	--fluid-min-vw: 360px;
	--fluid-max-vw: 1920px;
}

/* Shared fluid sizing engine for section typography */
.section :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .item-heading, .pitem-info, .iitem-heading, .iitem-desc) {
	/* Fallback if clamp/calc interpolation is not supported */
	font-size: var(--fs-max) !important;

	font-size: clamp(
		var(--fs-min),
		calc(
			var(--fs-min) + (var(--fs-max) - var(--fs-min)) *
			((100vw - var(--fluid-min-vw)) / (var(--fluid-max-vw) - var(--fluid-min-vw)))
		),
		var(--fs-max)
	) !important;

	line-height: var(--lh, 1.4) !important;
} 

/* Tag scales (semantic tags) */
.section h1 {
	--fs-min: 26px;
	--fs-max: 40px;
	--lh: 1.15;
}

.section h2 {
	--fs-min: 18px; 
	--fs-max: 24px;
	--lh: 1.2;
	/* color: lightgreen; */
}

.section h3 {
	--fs-min: 18px;
	--fs-max: 24px;
	--lh: 1.28;
}

.section h4 {
	--fs-min: 16px;
	--fs-max: 20px;
	--lh: 1.32;
}

.section h5 {
	--fs-min: 15px;
	--fs-max: 18px;
	--lh: 1.35;
}

.section h6 {
	--fs-min: 14px;
	--fs-max: 16px;
	--lh: 1.4;
}

/* PathSoft typographic utility classes (override tag scales).
 * Keep below tag rules so patterns like <h2 class="h1"> use .h1 values.
 */
.section .h1 {
	--fs-min: 28px;
	--fs-max: 32px;
	--lh: 1.15;
	/* color: blue; */
}

.section .h2 {
	--fs-min: 22px;
	--fs-max: 32px;
	--lh: 1.2;
}

.section .h3 {
	--fs-min: 18px;
	--fs-max: 24px;
	--lh: 1.28;
}

.section .h4 {
	--fs-min: 16px;
	--fs-max: 20px;
	--lh: 1.32;
}

.section .h5 {
	--fs-min: 15px;
	--fs-max: 18px;
	--lh: 1.35;
}

.section .h6 {
	--fs-min: 14px;
	--fs-max: 16px;
	--lh: 1.4;
}

/* Paragraphs */
.section p {
	--fs-min: 12px;
	--fs-max: 14px;
	--lh: 1.6;
	/* color: yellowgreen; */
}

/* Single blog posts */
body.single-post .news-post-article p {
	--fs-min: 14px;
	--fs-max: 16px;
	--lh: 1.6;
}

.section .item-heading {
	--fs-min: 16px;
	--fs-max: 22px;
	--lh: 1.1;
	/* color: fuchsia; */
}

.section .pitem-info p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	/* line-clamp: 3;
	-webkit-line-clamp: 3; */
	overflow: hidden;
}

.section .iitem-heading {
	--fs-min: 16px;
	--fs-max: 22px;
	--lh: 1.1;
	/* color: tomato; */
}

.section .iitem-desc {
	--fs-min: 10px;
	--fs-max: 14px;
	--lh: 1.5;
	/* color: teal; */
}

/* Optional PathSoft paragraph-like description blocks (uncomment if needed)
.section .section-desc,
.section .iitem-desc,
.section .item-desc,
.section .news-item-desc {
	--fs-min: 14px;
	--fs-max: 16px;
	--lh: 1.6;
	font-size: clamp(
		var(--fs-min),
		calc(
			var(--fs-min) + (var(--fs-max) - var(--fs-min)) *
			((100vw - var(--fluid-min-vw)) / (var(--fluid-max-vw) - var(--fluid-min-vw)))
		),
		var(--fs-max)
	) !important;
	line-height: var(--lh) !important;
}
*/

/* =========================
   Hero (PathSoft intro)
   PathSoft intro markup uses `.intro-item` and headings inside `.section-heading`
   (`intro.php`), and theme CSS targets `.intro-item h1, h2, h3`.
   ========================= */

.intro-item :where(h1, h2, h3) {
	font-size: var(--fs-max) !important;

	font-size: clamp(
		var(--fs-min),
		calc(
			var(--fs-min) + (var(--fs-max) - var(--fs-min)) *
			((100vw - var(--fluid-min-vw)) / (var(--fluid-max-vw) - var(--fluid-min-vw)))
		),
		var(--fs-max)
	) !important;

	line-height: var(--lh, 1.15) !important;
}

.intro-item :where(h1, h2, h3) {
	--fs-min: 26px;
	--fs-max: 32px;
	--lh: 1.15;
	/* color: red; */
}

/* Optional intro copy scaling (uncomment if needed)
.intro-item .section-subheading {
	font-size: clamp(14px, 1vw, 16px) !important;
	line-height: 1.3 !important;
}

.intro-item .section-desc {
	font-size: clamp(15px, 1.05vw, 18px) !important;
	line-height: 1.5 !important;
}
*/