/*
=========================================
Progres Themes
Typography System
Part 1 - Base Typography
=========================================
*/

/*======================================
HEADINGS
======================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    margin:0 0 1rem;

    font-family:'Poppins',sans-serif;

    font-weight:700;

    line-height:1.25;

    color:var(--dark);

    text-wrap:balance;

}

h1{

    font-size:54px;

    letter-spacing:-1px;

}

h2{

    font-size:42px;

    letter-spacing:-.5px;

}

h3{

    font-size:32px;

}

h4{

    font-size:26px;

}

h5{

    font-size:22px;

}

h6{

    font-size:18px;

}


/*======================================
PARAGRAPH
======================================*/

p{

    margin:0 0 1.5rem;

    color:var(--text);

    line-height:1.9;

    font-size:18px;

}


/*======================================
LEAD PARAGRAPH
======================================*/

.lead{

    font-size:22px;

    line-height:1.8;

    color:var(--dark);

    font-weight:400;

}


/*======================================
LINKS
======================================*/

a{

    transition:color var(--transition);

}

a:hover{

    color:var(--primary);

}


/*======================================
STRONG
======================================*/

strong,
b{

    font-weight:700;

    color:var(--dark);

}


/*======================================
EMPHASIS
======================================*/

em,
i{

    font-style:italic;

}


/*======================================
SMALL
======================================*/

small{

    font-size:.875rem;

    color:var(--text);

}


/*======================================
MARK
======================================*/

mark{

    background:#FFF3BF;

    color:inherit;

    padding:.1em .3em;

    border-radius:4px;

}


/*======================================
HORIZONTAL RULE
======================================*/

hr{

    border:0;

    border-top:1px solid var(--border);

    margin:3rem 0;

}


/*======================================
LIST
======================================*/

ul,
ol{

    margin:0 0 1.5rem 1.5rem;

    padding:0;

}

ul{

    list-style:disc;

}

ol{

    list-style:decimal;

}

li{

    margin-bottom:.75rem;

    line-height:1.9;

    color:var(--text);

}


/*======================================
DESCRIPTION LIST
======================================*/

dl{

    margin-bottom:2rem;

}

dt{

    font-weight:700;

    color:var(--dark);

    margin-bottom:.5rem;

}

dd{

    margin:0 0 1rem 1.5rem;

    color:var(--text);

}


/*======================================
SELECTION
======================================*/

::selection{

    background:var(--primary);

    color:#fff;

}


/*======================================
FOCUS
======================================*/

:focus-visible{

    outline:2px solid var(--primary);

    outline-offset:3px;

}


/*======================================
RESPONSIVE
======================================*/

@media (max-width:991px){

    h1{

        font-size:44px;

    }

    h2{

        font-size:36px;

    }

    h3{

        font-size:28px;

    }

    p{

        font-size:17px;

    }

    .lead{

        font-size:20px;

    }

}

@media (max-width:768px){

    h1{

        font-size:36px;

    }

    h2{

        font-size:30px;

    }

    h3{

        font-size:24px;

    }

    h4{

        font-size:22px;

    }

    h5{

        font-size:20px;

    }

    p{

        font-size:16px;

        line-height:1.8;

    }

    li{

        line-height:1.8;

    }

    .lead{

        font-size:18px;

    }

}

/*======================================
CONTENT WRAPPER
======================================*/

.entry-content,
.page-body,
.comment-content,
.woocommerce-Tabs-panel{

    color:var(--text);

    font-size:18px;

    line-height:1.9;

}

/*======================================
VERTICAL RHYTHM
======================================*/

.entry-content > * + *,
.page-body > * + *,
.comment-content > * + *,
.woocommerce-Tabs-panel > * + *{

    margin-top:1.75rem;

}

/*======================================
FIRST & LAST CHILD
======================================*/

.entry-content > :first-child,
.page-body > :first-child,
.comment-content > :first-child,
.woocommerce-Tabs-panel > :first-child{

    margin-top:0;

}

.entry-content > :last-child,
.page-body > :last-child,
.comment-content > :last-child,
.woocommerce-Tabs-panel > :last-child{

    margin-bottom:0;

}

/*======================================
HEADINGS INSIDE CONTENT
======================================*/

.entry-content h2,
.page-body h2,
.comment-content h2,
.woocommerce-Tabs-panel h2{

    margin-top:3rem;

}

.entry-content h3,
.page-body h3,
.comment-content h3,
.woocommerce-Tabs-panel h3{

    margin-top:2.5rem;

}

.entry-content h4,
.page-body h4,
.comment-content h4,
.woocommerce-Tabs-panel h4{

    margin-top:2rem;

}

/*======================================
IMAGE
======================================*/

.entry-content img,
.page-body img,
.comment-content img{

    display:block;

    max-width:100%;

    height:auto;

    border-radius:16px;

}

/*======================================
FIGURE
======================================*/

figure{

    margin:2rem 0;

}

figure img{

    width:100%;

}

figcaption{

    margin-top:1rem;

    text-align:center;

    color:var(--text);

    font-size:.95rem;

}

/*======================================
BLOCKQUOTE
======================================*/

blockquote{

    margin:2.5rem 0;

    padding:1.75rem 2rem;

    border-left:5px solid var(--primary);

    background:#F8FAFC;

    border-radius:12px;

}

blockquote p{

    margin:0;

    font-size:20px;

    font-style:italic;

    color:var(--dark);

}

blockquote cite{

    display:block;

    margin-top:1rem;

    font-size:15px;

    color:var(--text);

}

/*======================================
CODE
======================================*/

code{

    padding:.2rem .45rem;

    border-radius:6px;

    background:#EEF2F7;

    font-family:Consolas, Monaco, monospace;

    font-size:.92em;

}

/*======================================
PRE
======================================*/

pre{

    overflow:auto;

    padding:1.5rem;

    margin:2rem 0;

    border-radius:14px;

    background:#0A2540;

    color:#fff;

}

pre code{

    padding:0;

    background:none;

    color:inherit;

}

/*======================================
TABLE
======================================*/

table{

    width:100%;

    border-collapse:collapse;

    margin:2rem 0;

}

th,
td{

    padding:14px 18px;

    border:1px solid var(--border);

    text-align:left;

}

th{

    background:#F8FAFC;

    color:var(--dark);

    font-weight:600;

}

tbody tr:nth-child(even){

    background:#FCFCFD;

}

/*======================================
WORDPRESS ALIGNMENT
======================================*/

.alignleft{

    float:left;

    margin:0 2rem 1rem 0;

}

.alignright{

    float:right;

    margin:0 0 1rem 2rem;

}

.aligncenter{

    display:block;

    margin:2rem auto;

}

/*======================================
WORDPRESS GALLERY
======================================*/

.gallery{

    display:grid;

    gap:20px;

}

.gallery img{

    width:100%;

    border-radius:14px;

}

/*======================================
EMBED
======================================*/

iframe{

    max-width:100%;

    border:0;

    border-radius:14px;

}

/*======================================
RESPONSIVE
======================================*/

@media(max-width:768px){

    blockquote{

        padding:1.25rem 1.5rem;

    }

    blockquote p{

        font-size:18px;

    }

    th,
    td{

        padding:12px;

    }

}

/*======================================
ABBREVIATION
======================================*/

abbr,
acronym{

    border-bottom:1px dotted currentColor;

    cursor:help;

    text-decoration:none;

}

/*======================================
ADDRESS
======================================*/

address{

    margin:0 0 1.5rem;

    font-style:italic;

    color:var(--text);

}

/*======================================
KEYBOARD
======================================*/

kbd{

    display:inline-block;

    padding:.2rem .5rem;

    border:1px solid var(--border);

    border-radius:6px;

    background:#F8FAFC;

    font-family:Consolas, Monaco, monospace;

    font-size:.9em;

}

/*======================================
SUP & SUB
======================================*/

sup,
sub{

    font-size:75%;

    line-height:0;

    position:relative;

    vertical-align:baseline;

}

sup{

    top:-.5em;

}

sub{

    bottom:-.25em;

}

/*======================================
WORDPRESS CAPTION
======================================*/

.wp-caption{

    max-width:100%;

    margin:2rem auto;

}

.wp-caption img{

    width:100%;

    border-radius:14px;

}

.wp-caption-text{

    margin-top:.75rem;

    text-align:center;

    font-size:.95rem;

    color:var(--text);

}

/*======================================
SCREEN READER
======================================*/

.screen-reader-text{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}

.screen-reader-text:focus{

    clip:auto;

    width:auto;

    height:auto;

    margin:0;

    padding:1rem;

    background:#fff;

    color:var(--dark);

    z-index:99999;

}

/*======================================
WORDPRESS SMILEY
======================================*/

img.wp-smiley{

    display:inline;

    border:none;

    box-shadow:none;

    margin:0;

}

/*======================================
TEXT UTILITIES
======================================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

/*======================================
READABILITY
======================================*/

.entry-content,
.page-body{

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

/*======================================
LONG WORDS
======================================*/

.entry-content,
.page-body,
.comment-content{

    overflow-wrap:break-word;

    word-wrap:break-word;

}

/*======================================
RESPONSIVE TABLE
======================================*/

@media (max-width:768px){

    table{

        display:block;

        overflow-x:auto;

        white-space:nowrap;

    }

}

/*======================================
PRINT
======================================*/

@media print{

    body{

        background:#fff;

        color:#000;

    }

    a{

        color:#000;

        text-decoration:underline;

    }

    pre{

        background:#fff;

        color:#000;

        border:1px solid #ddd;

    }

}