/*
 * Type presets (gl-type-*) — shared by Advanced Heading, Info Box, Count Up and any
 * block that offers the design's type styles. Always enqueued (glacial-blocks.php),
 * so a block using a preset never depends on another block being on the page.
 *
 * Style presets reproduce the design's own type rules from css/webflow.css
 * (h2, h3, h4, h5, .eyebrow, .p-lg, .hero-lg-line, body), so any tag can wear
 * any look. Each preset sets EVERY typographic property, because it has to
 * override the element styles of whatever tag it lands on. Single-class
 * (0,1,0): kit option utilities (0,2,0) — size, colour, margins — win.
 *
 * Preset colours read --gl-text-color first: a row/column with a text colour
 * passes it down (see the colour section of assets/kit.css).
 */
.gl-type-hero,
.gl-type-h2,
.gl-type-eyebrow {
    font-family: aviano-serif, sans-serif;
    font-style: normal;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.gl-type-hero {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--gl-text-color, var(--color-3));
    font-size: 2.2em;
    line-height: 1.4em;
}

.gl-type-h2 {
    margin-top: 0;
    margin-bottom: 30px;
    color: var(--gl-text-color, var(--color-3));
    font-size: 2em;
    line-height: 1.2em;
}

.gl-type-eyebrow {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--gl-text-color, var(--color-6));
    font-size: .8em;
    line-height: 1.2em;
}

.gl-type-h3,
.gl-type-h4,
.gl-type-h5,
.gl-type-lead,
.gl-type-body,
.gl-type-small {
    font-family: Lato, sans-serif;
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
    margin-top: 0;
}

.gl-type-h3 {
    margin-bottom: 20px;
    color: var(--gl-text-color, var(--color-4));
    font-size: 1.5em;
    font-weight: 400;
    line-height: 1.2em;
}

.gl-type-h4 {
    margin-bottom: 20px;
    color: var(--gl-text-color, var(--color-5));
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.2em;
}

.gl-type-h5 {
    margin-bottom: 15px;
    color: inherit;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.gl-type-lead {
    margin-bottom: 25px;
    color: inherit;
    font-size: 1.4em;
    font-style: italic;
    font-weight: 400;
    line-height: 1.75em;
}

.gl-type-body {
    margin-bottom: 25px;
    color: inherit;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.75em;
}

.gl-type-small {
    margin-bottom: 15px;
    color: inherit;
    font-size: .8em;
    font-weight: 400;
    line-height: 1.4em;
}

@media (max-width: 991px) {
    .gl-type-hero { font-size: 2em; }
}

@media (max-width: 767px) {
    .gl-type-hero { font-size: 1.5em; }
    .gl-type-h2 { font-size: 1.8em; }
}

@media (max-width: 479px) {
    .gl-type-hero { font-size: 1.2em; letter-spacing: 0; }
    .gl-type-h2 { font-size: 1.3em; }
    .gl-type-lead { font-size: 1.2em; line-height: 1.3em; }
}