/* =========================================
   WuThreat English Typography System
   Version: 1.0
   Last Updated: 2025-12-07

   This stylesheet defines the complete typography
   system for the English version of the website.
   It ensures consistent, readable, and professional
   text across all pages.
   ========================================= */

/* =========================================
   1. HEADINGS
   ========================================= */

/* H1 - Main Page Titles */
h1,
.h1,
.hs-title-12a,
.main-title {
    font-size: 48px !important;
    line-height: 1.2 !important;
    font-weight: 100 !important;
    letter-spacing: -0.02em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* H2 - Section Titles */
h2,
.h2,
.section-title,
.hs-title-9 {
    font-size: 36px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

/* H3 - Subsection Titles */
h3,
.h3,
.details-title,
.hs-title-7 {
    font-size: 28px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
}

/* H4 - Card Titles / Component Titles */
h4,
.h4,
.itdr-card-title,
.card-title,
.cta-card-title {
    font-size: 20px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}

/* H5 - Small Titles */
h5,
.h5,
.column-title,
.solution-title {
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}

/* H6 - Tiny Titles */
h6,
.h6,
.insight-card-title,
.alt-features-title {
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}

/* =========================================
   2. BODY TEXT
   ========================================= */

/* Body Large - Emphasis Text */
.text-large,
.gartner-text,
.itdr-card-quote p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* Body Regular - Standard Content */
body,
p,
.text-regular,
.success-content p,
.card-description,
.solution-brief p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* Body Small - Secondary Content */
.text-small,
.authority-desc,
.alt-features-descr,
.itdr-card-subtitle,
.solution-subtitle,
.challenges-list li,
.solutions-list li,
.itdr-card-features li {
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* Body Tiny - Tertiary Content */
.text-tiny,
.hs-status-a,
.insight-card-summary {
    font-size: 12px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

/* =========================================
   3. LABELS & BADGES
   ========================================= */

/* Labels - Category/Tag Labels */
.label,
.tab-label,
.solution-label,
.success-label,
.service-name,
.stat-label {
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
}

/* Badges - Small Indicators */
.badge,
.insight-category,
.card-keyword,
.service-label {
    font-size: 11px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

/* =========================================
   4. BUTTONS & LINKS
   ========================================= */

/* Button Text */
.btn,
button,
.button-text {
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
}

/* Link Text */
a,
.link {
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* =========================================
   5. SPECIAL ELEMENTS
   ========================================= */

/* Hero Vision Text */
.hs-vision-text {
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
}

/* Marquee Text */
.marquee-style-2 > div > div {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

/* Quote Text */
blockquote,
.quote-text {
    font-size: 18px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    font-style: italic !important;
}

/* Form Labels */
.form-label,
label {
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
}

/* Form Inputs */
input,
textarea,
select {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

/* Form Placeholders */
::placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* Navigation Menu */
.main-nav a,
.menu-item {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
}

/* Footer Text */
.footer-text,
.copyright-text {
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* =========================================
   6. RESPONSIVE ADJUSTMENTS
   ========================================= */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    /* Headings */
    h1, .h1, .hs-title-12a, .main-title {
        font-size: 40px !important;
    }

    h2, .h2, .section-title, .hs-title-9 {
        font-size: 32px !important;
    }

    h3, .h3, .details-title, .hs-title-7 {
        font-size: 24px !important;
    }

    h4, .h4, .itdr-card-title, .card-title, .cta-card-title {
        font-size: 18px !important;
    }

    /* Body Text */
    .text-large, .gartner-text, .itdr-card-quote p {
        font-size: 15px !important;
    }

    body, p, .text-regular {
        font-size: 15px !important;
    }

    /* Vision Text */
    .hs-vision-text {
        font-size: 14px !important;
    }

    /* Quote */
    blockquote, .quote-text {
        font-size: 16px !important;
    }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
    /* Headings */
    h1, .h1, .hs-title-12a, .main-title {
        font-size: 32px !important;
    }

    h2, .h2, .section-title, .hs-title-9 {
        font-size: 28px !important;
    }

    h3, .h3, .details-title, .hs-title-7 {
        font-size: 22px !important;
    }

    h4, .h4, .itdr-card-title, .card-title, .cta-card-title {
        font-size: 17px !important;
    }

    h5, .h5, .column-title, .solution-title {
        font-size: 15px !important;
    }

    /* Body Text */
    .text-large, .gartner-text, .itdr-card-quote p {
        font-size: 14px !important;
    }

    body, p, .text-regular {
        font-size: 14px !important;
    }

    /* Vision Text */
    .hs-vision-text {
        font-size: 13px !important;
    }

    /* Marquee */
    .marquee-style-2 > div > div {
        font-size: 13px !important;
    }

    /* Quote */
    blockquote, .quote-text {
        font-size: 15px !important;
    }

    /* Navigation */
    .main-nav a, .menu-item {
        font-size: 15px !important;
    }
}

/* Small Mobile (max-width: 575px) */
@media (max-width: 575px) {
    /* Headings */
    h1, .h1, .hs-title-12a, .main-title {
        font-size: 28px !important;
    }

    h2, .h2, .section-title, .hs-title-9 {
        font-size: 24px !important;
    }

    h3, .h3, .details-title, .hs-title-7 {
        font-size: 20px !important;
    }
}

/* =========================================
   7. UTILITY CLASSES
   ========================================= */

/* Font Weights */
.font-light { font-weight: 300 !important; }
.font-regular { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }

/* Text Transforms */
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-normal { text-transform: none !important; }

/* Letter Spacing */
.letter-spacing-tight { letter-spacing: -0.02em !important; }
.letter-spacing-normal { letter-spacing: normal !important; }
.letter-spacing-wide { letter-spacing: 0.05em !important; }

/* Line Heights */
.line-height-tight { line-height: 1.2 !important; }
.line-height-normal { line-height: 1.5 !important; }
.line-height-relaxed { line-height: 1.8 !important; }