/* =========================================================
   Global Font-Size Normalization
   Ensures consistent, readable typography across every page.
   Uses a fluid clamp() scale so nothing feels oversized on
   large screens or cramped on small ones.
   ========================================================= */

:root {
    --fs-base:  clamp(15px, 0.95vw + 12px, 17px);
    --fs-sm:    clamp(13px, 0.7vw + 11px, 14.5px);
    --fs-xs:    clamp(12px, 0.5vw + 10px, 13px);
    --fs-lg:    clamp(17px, 1.1vw + 13px, 19px);
    --fs-xl:    clamp(19px, 1.3vw + 14px, 22px);
    --fs-h1:    clamp(32px, 3.6vw + 12px, 56px);
    --fs-h2:    clamp(26px, 2.6vw + 12px, 44px);
    --fs-h3:    clamp(22px, 1.8vw + 12px, 32px);
    --fs-h4:    clamp(18px, 1.2vw + 12px, 24px);
    --fs-h5:    clamp(16px, 0.9vw + 12px, 20px);
    --fs-h6:    clamp(14px, 0.7vw + 11px, 17px);
    --lh-body:  1.65;
    --lh-heading: 1.2;
}

html { font-size: 16px; }

body,
p,
li,
label,
input,
select,
textarea,
button {
    font-size: var(--fs-base);
    line-height: var(--lh-body);
}

small, .text-sm { font-size: var(--fs-sm); }
.text-xs        { font-size: var(--fs-xs); }
.text-lg        { font-size: var(--fs-lg); }
.text-xl        { font-size: var(--fs-xl); }

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.3; }
h5, .h5 { font-size: var(--fs-h5); line-height: 1.35; }
h6, .h6 { font-size: var(--fs-h6); line-height: 1.4; }

/* Prevent overly long lines on wide screens */
p, li { max-width: 72ch; }
.container p, .container li { max-width: none; } /* grid parents keep their own width */

/* Buttons stay consistent */
.btn, button.btn, .btn-primary, .btn-secondary {
    font-size: var(--fs-base);
    line-height: 1.2;
}

/* Small utility: tighten hero paragraph on very small screens */
@media (max-width: 480px) {
    body { line-height: 1.6; }
}