/* ============================================================
   TYPOGRAPHY — koji-academy-theme/css/typography.css
   All heading, body text, label and lead text styles
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-heading);
    margin-top: 0;
    margin-bottom: var(--space-sm);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

@media (min-width: 1024px) {
    h1 { font-size: var(--text-5xl); }
}

p {
    margin-top: 0;
    margin-bottom: var(--space-sm);
}

a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition);
}
a:hover {
    color: var(--color-primary-hover);
}

ul, ol {
    padding-left: 1.5rem;
    margin-bottom: var(--space-sm);
}
li {
    margin-bottom: var(--space-xs);
    line-height: 1.7;
}

strong {
    font-weight: 700;
}

/* Section heading block */
.section-heading {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: var(--space-lg);
}
.section-heading__label {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-xs);
}
.section-heading h2 {
    margin-bottom: var(--space-sm);
}
.section-heading p {
    font-size: var(--text-lg);
    color: var(--color-muted);
    max-width: 60ch;
    margin-inline: auto;
    margin-bottom: 0;
}

/* Lead paragraph */
.text-lead {
    font-size: var(--text-lg);
    color: var(--color-muted);
    line-height: 1.7;
}

/* Muted text */
.text-muted {
    color: var(--color-muted);
}

/* Left aligned label above a heading */
.section-label {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-xs);
}