/* ==========================================================
   FIGORA ONE v2.0
   Typography System
   ========================================================== */

/* ----------------------------------------------------------
   Headings
---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6{
    font-family:var(--font-heading);
    font-weight:var(--fw-bold);
    color:var(--color-heading);
    line-height:var(--lh-heading);
    margin:0 0 1rem;
}

h1{
    font-size:var(--fs-h1);
    font-weight:var(--fw-extrabold);
}

h2{
    font-size:var(--fs-h2);
}

h3{
    font-size:var(--fs-h3);
}

h4{
    font-size:var(--fs-h4);
}

h5{
    font-size:var(--fs-h5);
}

h6{
    font-size:var(--fs-h6);
}

/* ----------------------------------------------------------
   Paragraphs
---------------------------------------------------------- */

p{
    margin:0 0 1.5rem;
    font-size:var(--fs-md);
    line-height:var(--lh-body);
    color:var(--color-text);
}

/* ----------------------------------------------------------
   Small Text
---------------------------------------------------------- */

small{
    font-size:var(--fs-sm);
    color:var(--color-text-light);
}

/* ----------------------------------------------------------
   Strong
---------------------------------------------------------- */

strong,
b{
    font-weight:var(--fw-bold);
}

/* ----------------------------------------------------------
   Emphasis
---------------------------------------------------------- */

em,
i{
    font-style:italic;
}

/* ----------------------------------------------------------
   Lists
---------------------------------------------------------- */

.content-area ul,
.content-area ol,
.entry-content ul,
.entry-content ol{
    margin:0 0 1.5rem 1.5rem;
}

.content-area li,
.entry-content li{
    margin-bottom:.6rem;
}

/* ----------------------------------------------------------
   Blockquotes
---------------------------------------------------------- */

blockquote{
    margin:2rem 0;
    padding:1.5rem 2rem;
    border-left:5px solid var(--color-secondary);
    background:var(--color-surface-alt);
    border-radius:var(--radius-md);
    font-style:italic;
}

blockquote p:last-child{
    margin-bottom:0;
}

/* ----------------------------------------------------------
   Links inside content
---------------------------------------------------------- */

.entry-content a,
.content-area a{
    color:var(--color-secondary);
    text-decoration:underline;
    text-underline-offset:3px;
}

.entry-content a:hover,
.content-area a:hover{
    color:var(--color-secondary-dark);
}

/* ----------------------------------------------------------
   Horizontal Rule
---------------------------------------------------------- */

hr{
    border:none;
    border-top:1px solid var(--color-border);
    margin:3rem 0;
}

/* ----------------------------------------------------------
   Responsive Typography
---------------------------------------------------------- */

@media (max-width:991px){

    h1{
        font-size:46px;
    }

    h2{
        font-size:38px;
    }

    h3{
        font-size:30px;
    }

}

@media (max-width:767px){

    h1{
        font-size:38px;
    }

    h2{
        font-size:32px;
    }

    h3{
        font-size:26px;
    }

    h4{
        font-size:22px;
    }

    p{
        font-size:17px;
    }

}