/* Unified Typography - Matching Home Page Styles */

/* CSS Variables */
:root {
    --themeht-body-font-family: "Hanken Grotesk", sans-serif;
    --themeht-secondary-font-family: "Archivo", sans-serif;
    --themeht-body-color: #6C757D;
    --themeht-text-color: #363949;
    --themeht-primary-color: #0b50ac;
}

/* Base Body Typography */
body {
    font-family: var(--themeht-body-font-family);
    font-size: 17px;
    line-height: 30px;
    color: var(--themeht-body-color);
    font-weight: normal;
    font-style: normal;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--themeht-secondary-font-family);
    font-weight: normal;
    margin-top: 0px;
    margin-bottom: 20px;
    font-style: normal;
    color: var(--themeht-text-color);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
}

/* H1 Styles */
.h1, h1 {
    font-size: 54px;
    line-height: 70px;
    font-weight: 600;
}

/* H2 Styles */
.h2, h2 {
    font-size: 38px;
    line-height: 54px;
    font-weight: 600;
}

/* H3 Styles */
.h3, h3 {
    font-size: 36px;
    line-height: 44px;
    font-weight: 500;
}

/* H4 Styles */
.h4, h4 {
    font-size: 32px;
    line-height: 38px;
    font-weight: 500;
}

/* H5 Styles */
.h5, h5 {
    font-size: 28px;
    line-height: 32px;
    font-weight: 500;
}

/* H6 Styles */
.h6, h6 {
    font-size: 27px;
    line-height: 30px;
    font-weight: 500;
}

/* Lead Paragraph */
.lead {
    font-weight: normal;
    font-size: 22px;
    line-height: 30px;
}

/* Paragraph */
p {
    font-size: 17px;
    line-height: 30px;
    margin-bottom: 20px;
}

/* Theme Title Component */
.theme-title h6 {
    font-size: 27px;
    line-height: 30px;
    font-weight: 500;
    margin-bottom: 15px;
}

.theme-title h2 {
    font-size: 38px;
    line-height: 54px;
    font-weight: 600;
    margin-bottom: 20px;
}

.theme-title h4 {
    font-size: 32px;
    line-height: 38px;
    font-weight: 500;
    margin-bottom: 20px;
}

.theme-title p {
    font-size: 17px;
    line-height: 30px;
    color: var(--themeht-body-color);
}

/* Section Titles */
.section-title {
    font-size: 38px;
    line-height: 54px;
    font-weight: 600;
    font-family: var(--themeht-secondary-font-family);
    color: var(--themeht-text-color);
    margin-bottom: 20px;
}

.section-subtitle {
    font-size: 17px;
    line-height: 30px;
    color: var(--themeht-body-color);
    margin-bottom: 15px;
}

.section-description {
    font-size: 17px;
    line-height: 30px;
    color: var(--themeht-body-color);
}

/* Hero/Banner Typography */
.hero-title, .banner h1 {
    font-size: 54px;
    line-height: 70px;
    font-weight: 600;
    font-family: var(--themeht-secondary-font-family);
}

.hero-subtitle, .banner h6 {
    font-size: 27px;
    line-height: 30px;
    font-weight: 500;
}

.hero-description, .banner p {
    font-size: 17px;
    line-height: 30px;
}

/* Job Card Typography */
.job-title {
    font-size: 32px;
    line-height: 38px;
    font-weight: 600;
    font-family: var(--themeht-secondary-font-family);
    color: var(--themeht-text-color);
}

.job-description {
    font-size: 17px;
    line-height: 30px;
    color: var(--themeht-body-color);
}

.job-requirements h4 {
    font-size: 27px;
    line-height: 30px;
    font-weight: 500;
}

.job-requirements li {
    font-size: 17px;
    line-height: 30px;
    color: var(--themeht-body-color);
}

/* Benefit Card Typography */
.benefit-title {
    font-size: 28px;
    line-height: 32px;
    font-weight: 500;
    font-family: var(--themeht-secondary-font-family);
}

.benefit-description {
    font-size: 17px;
    line-height: 30px;
    color: var(--themeht-body-color);
}

/* Form Labels */
.form-label, label {
    font-size: 17px;
    line-height: 30px;
    font-weight: 600;
    color: var(--themeht-text-color);
    font-family: var(--themeht-body-font-family);
}

/* Form Inputs */
.form-control, .form-select, input, textarea, select {
    font-size: 17px;
    line-height: 30px;
    font-family: var(--themeht-body-font-family);
    color: var(--themeht-text-color);
}

.form-text, small {
    font-size: 15px;
    line-height: 24px;
    color: var(--themeht-body-color);
}

/* Button Typography */
.btn, button, .themeht-btn {
    font-size: 17px;
    line-height: 30px;
    font-weight: 600;
    font-family: var(--themeht-body-font-family);
}

/* Badge Typography */
.badge {
    font-size: 15px;
    line-height: 24px;
    font-weight: 600;
    font-family: var(--themeht-body-font-family);
}

/* List Typography */
ul li, ol li {
    font-size: 17px;
    line-height: 30px;
    color: var(--themeht-body-color);
}

/* Link Typography */
a {
    font-size: 17px;
    line-height: 30px;
    font-family: var(--themeht-body-font-family);
}

/* Table Typography */
table {
    font-size: 17px;
    line-height: 30px;
    font-family: var(--themeht-body-font-family);
}

table thead th {
    font-size: 17px;
    line-height: 30px;
    font-weight: 600;
    font-family: var(--themeht-secondary-font-family);
}

table tbody td {
    font-size: 17px;
    line-height: 30px;
    color: var(--themeht-body-color);
}

/* Modal Typography */
.modal-content h2 {
    font-size: 32px;
    line-height: 38px;
    font-weight: 600;
    font-family: var(--themeht-secondary-font-family);
}

.modal-body {
    font-size: 17px;
    line-height: 30px;
}

/* Alert Typography */
.alert, .alert-success, .alert-error {
    font-size: 17px;
    line-height: 30px;
}

/* Stats/Counter Typography */
.counter h5, .stat-card h2 {
    font-family: var(--themeht-secondary-font-family);
}

.counter .count-number {
    font-size: 54px;
    line-height: 70px;
    font-weight: 600;
}

.counter h5 {
    font-size: 27px;
    line-height: 30px;
    font-weight: 500;
}

/* Service Card Typography */
.service-title h4 {
    font-size: 28px;
    line-height: 32px;
    font-weight: 500;
    font-family: var(--themeht-secondary-font-family);
}

.service-desc p {
    font-size: 17px;
    line-height: 30px;
    color: var(--themeht-body-color);
}

/* Step Process Typography */
.step-item h4 {
    font-size: 28px;
    line-height: 32px;
    font-weight: 500;
    font-family: var(--themeht-secondary-font-family);
}

.step-item p {
    font-size: 17px;
    line-height: 30px;
}

/* Team Member Typography */
.team-desc h4 {
    font-size: 28px;
    line-height: 32px;
    font-weight: 500;
    font-family: var(--themeht-secondary-font-family);
}

.team-desc span {
    font-size: 17px;
    line-height: 30px;
}

/* Portfolio Typography */
.portfolio-title h6 {
    font-size: 27px;
    line-height: 30px;
    font-weight: 500;
    font-family: var(--themeht-secondary-font-family);
}

.portfolio-title span {
    font-size: 17px;
    line-height: 30px;
}

/* Responsive Typography */
@media (max-width: 1199px) {
    h1, .h1 {
        font-size: 48px;
        line-height: 62px;
    }
    
    h2, .h2 {
        font-size: 34px;
        line-height: 48px;
    }
    
    h3, .h3 {
        font-size: 32px;
        line-height: 40px;
    }
    
    h4, .h4 {
        font-size: 28px;
        line-height: 34px;
    }
    
    h5, .h5 {
        font-size: 24px;
        line-height: 30px;
    }
    
    h6, .h6 {
        font-size: 22px;
        line-height: 28px;
    }
    
    .lead {
        font-size: 20px;
        line-height: 28px;
    }
}

@media (max-width: 991px) {
    h1, .h1 {
        font-size: 42px;
        line-height: 56px;
    }
    
    h2, .h2 {
        font-size: 30px;
        line-height: 42px;
    }
    
    h3, .h3 {
        font-size: 28px;
        line-height: 36px;
    }
    
    h4, .h4 {
        font-size: 24px;
        line-height: 32px;
    }
    
    h5, .h5 {
        font-size: 22px;
        line-height: 28px;
    }
    
    h6, .h6 {
        font-size: 20px;
        line-height: 26px;
    }
    
    .lead {
        font-size: 18px;
        line-height: 26px;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 16px;
        line-height: 28px;
    }
    
    h1, .h1 {
        font-size: 36px;
        line-height: 48px;
    }
    
    h2, .h2 {
        font-size: 28px;
        line-height: 38px;
    }
    
    h3, .h3 {
        font-size: 24px;
        line-height: 32px;
    }
    
    h4, .h4 {
        font-size: 22px;
        line-height: 30px;
    }
    
    h5, .h5 {
        font-size: 20px;
        line-height: 26px;
    }
    
    h6, .h6 {
        font-size: 18px;
        line-height: 24px;
    }
    
    .lead {
        font-size: 17px;
        line-height: 26px;
    }
    
    p, .form-control, .form-select, input, textarea, select, 
    ul li, ol li, a, table {
        font-size: 16px;
        line-height: 28px;
    }
}

@media (max-width: 575px) {
    h1, .h1 {
        font-size: 32px;
        line-height: 42px;
    }
    
    h2, .h2 {
        font-size: 26px;
        line-height: 34px;
    }
    
    h3, .h3 {
        font-size: 22px;
        line-height: 30px;
    }
    
    h4, .h4 {
        font-size: 20px;
        line-height: 28px;
    }
    
    h5, .h5 {
        font-size: 18px;
        line-height: 24px;
    }
    
    h6, .h6 {
        font-size: 17px;
        line-height: 22px;
    }
}