/* Fluid Typography System for WYSIWYG Content */

/* 
 * This creates fluid font sizes that scale smoothly from 1020px down to 320px
 * Only applies to text sizes above 20px
 */

/* Specific size conversions using clamp() */
/* Formula: clamp(min, viewport-based-calc, max) */

/* 100px - scales from 100px (1020px) to 50px (320px) */
[style*="font-size: 100px"],
[style*="font-size:100px"] {
    font-size: clamp(50px, 7.14vw + 22.14px, 100px) !important;
}

/* 96px */
[style*="font-size: 96px"],
[style*="font-size:96px"] {
    font-size: clamp(48px, 6.86vw + 21.26px, 96px) !important;
}

/* 90px */
[style*="font-size: 90px"],
[style*="font-size:90px"] {
    font-size: clamp(45px, 6.43vw + 19.71px, 90px) !important;
}

/* 80px */
[style*="font-size: 80px"],
[style*="font-size:80px"] {
    font-size: clamp(40px, 5.71vw + 17.86px, 80px) !important;
}

/* 72px */
[style*="font-size: 72px"],
[style*="font-size:72px"] {
    font-size: clamp(36px, 5.14vw + 16.14px, 72px) !important;
}

/* 64px */
[style*="font-size: 64px"],
[style*="font-size:64px"] {
    font-size: clamp(32px, 4.57vw + 14.43px, 64px) !important;
}

/* 56px */
[style*="font-size: 56px"],
[style*="font-size:56px"] {
    font-size: clamp(28px, 4vw + 12.71px, 56px) !important;
}

/* 48px */
[style*="font-size: 48px"],
[style*="font-size:48px"] {
    font-size: clamp(24px, 3.43vw + 11px, 48px) !important;
}

/* 40px */
[style*="font-size: 40px"],
[style*="font-size:40px"] {
    font-size: clamp(24px, 2.29vw + 16.71px, 40px) !important;
}

/* 36px */
[style*="font-size: 36px"],
[style*="font-size:36px"] {
    font-size: clamp(22px, 2vw + 15.43px, 36px) !important;
}

/* 32px */
[style*="font-size: 32px"],
[style*="font-size:32px"] {
    font-size: clamp(20px, 1.71vw + 13.57px, 32px) !important;
}

/* 28px */
[style*="font-size: 28px"],
[style*="font-size:28px"] {
    font-size: clamp(18px, 1.43vw + 11.86px, 28px) !important;
}

/* 24px */
[style*="font-size: 24px"],
[style*="font-size:24px"] {
    font-size: clamp(16px, 1.14vw + 10.14px, 24px) !important;
}

/* 22px */
[style*="font-size: 22px"],
[style*="font-size:22px"] {
    font-size: clamp(16px, 0.86vw + 9.43px, 22px) !important;
}

/* 21px */
[style*="font-size: 21px"],
[style*="font-size:21px"] {
    font-size: clamp(16px, 0.71vw + 9.14px, 21px) !important;
}

/* Tailwind class-based fluid typography */
/* For components using Tailwind classes */

@media (max-width: 1020px) {
    /* Text 7xl and above - scale proportionally */
    .text-9xl { font-size: clamp(4rem, 7.84vw + 0.69rem, 8rem) !important; }
    .text-8xl { font-size: clamp(3.75rem, 7.35vw + 0.94rem, 6rem) !important; }
    .text-7xl { font-size: clamp(3rem, 5.88vw + 1.31rem, 4.5rem) !important; }
    .text-6xl { font-size: clamp(2.25rem, 4.41vw + 1.19rem, 3.75rem) !important; }
    .text-5xl { font-size: clamp(1.875rem, 3.43vw + 1.22rem, 3rem) !important; }
    .text-4xl { font-size: clamp(1.5rem, 2.45vw + 1.14rem, 2.25rem) !important; }
    .text-3xl { font-size: clamp(1.25rem, 1.96vw + 0.94rem, 1.875rem) !important; }
    .text-2xl { font-size: clamp(1.125rem, 1.47vw + 0.88rem, 1.5rem) !important; }
    .text-xl { font-size: clamp(1rem, 0.98vw + 0.81rem, 1.25rem) !important; }
}

/* Smooth scaling for custom font sizes in components */
@media (max-width: 1020px) {
    /* Common heading sizes used in components */
    
    /* 112px headings */
    [class*="text-[112px]"] {
        font-size: clamp(56px, 8vw + 24.57px, 112px) !important;
    }
    
    /* 96px headings */
    [class*="text-[96px]"] {
        font-size: clamp(48px, 6.86vw + 21.26px, 96px) !important;
    }
    
    /* 80px headings */
    [class*="text-[80px]"] {
        font-size: clamp(40px, 5.71vw + 17.86px, 80px) !important;
    }
    
    /* 74px headings */
    [class*="text-[74px]"],
    [class*="leading-[74px]"] {
        font-size: clamp(37px, 5.29vw + 16.57px, 74px) !important;
    }
    
    /* 56px headings */
    [class*="text-[56px]"],
    [class*="leading-[56px]"] {
        font-size: clamp(28px, 4vw + 12.71px, 56px) !important;
    }
    
    /* 48px headings */
    [class*="text-[48px]"],
    [class*="leading-[48px]"] {
        font-size: clamp(24px, 3.43vw + 11px, 48px) !important;
    }
}