/**
 * Typography Styles with Montserrat font examples
 */

/* Hero Headers */
.hero-title {
    font-family: var(--font-secondary);
    font-weight: 800;
    font-size: 3rem;
    letter-spacing: -1px;
    margin-bottom: 1rem;
}

.section-heading {
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: 2.25rem;
    position: relative;
    margin-bottom: 2rem;
}

.section-heading::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 4px;
    background-color: var(--color-primary);
}

/* Article Titles */
.article-title {
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.3;
}

/* Call to action buttons */
.btn-primary {
    font-family: var(--font-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Category Labels */
.category-label {
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Subheadings */
.subheading {
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--color-text-light);
}

/* Montserrat specific elements */
.montserrat-thin {
    font-family: var(--font-secondary);
    font-weight: 300;
}

.montserrat-normal {
    font-family: var(--font-secondary);
    font-weight: 400;
}

.montserrat-medium {
    font-family: var(--font-secondary);
    font-weight: 500;
}

.montserrat-semibold {
    font-family: var(--font-secondary);
    font-weight: 600;
}

.montserrat-bold {
    font-family: var(--font-secondary);
    font-weight: 700;
}

.montserrat-extrabold {
    font-family: var(--font-secondary);
    font-weight: 800;
}