/* ==========================================
   CHANG TONG CORE
   TYPOGRAPHY
   Version 1.0
========================================== */


/* ==========================================
   BODY
========================================== */

body,
button,
input,
select,
textarea {

    font-family: var(--ct-font-body);
    font-size: var(--ct-fs-base);
    font-weight: var(--ct-fw-regular);
    line-height: var(--ct-lh-normal);
    color: var(--ct-color-text);

}


/* ==========================================
   WORDPRESS CONTENT
========================================== */

.entry-content,
.entry-content p,
.entry-content li,
.entry-content td {

    font-size: var(--ct-fs-base);
    line-height: var(--ct-lh-normal);
    color: var(--ct-color-text);

}


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

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

    font-family: var(--ct-font-heading);
    font-weight: var(--ct-fw-bold);
    line-height: var(--ct-lh-tight);
    letter-spacing: var(--ct-letter-tight);
    color: var(--ct-color-black);
    margin: 0 0 1rem;

}

h1 { font-size: var(--ct-fs-5xl); }

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

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

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

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

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


/* ==========================================
   PARAGRAPHS
========================================== */

p {

    margin: 0 0 1.5rem;

}


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

a {

    color: var(--ct-color-primary);
    text-decoration: none;
    transition: color var(--ct-transition-fast);

}

a:hover {

    color: var(--ct-color-secondary);

}

a:focus-visible {

    outline: 2px solid var(--ct-color-primary);
    outline-offset: 3px;

}


/* ==========================================
   LISTS
========================================== */

ul,
ol {

    margin: 0 0 1.5rem 1.5rem;

}

li {

    margin-bottom: .5rem;

}


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

strong,
b {

    font-weight: var(--ct-fw-bold);

}

em,
i {

    font-style: italic;

}


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

small {

    font-size: var(--ct-fs-sm);
    color: var(--ct-color-text-light);

}


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

blockquote {

    margin: 2rem 0;
    padding-left: 1.5rem;
    border-left: 4px solid var(--ct-color-primary);
    color: var(--ct-color-text-light);
    font-style: italic;

}


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

code,
pre {

    font-family: monospace;
    background: #f5f5f5;
    border-radius: var(--ct-radius-sm);

}

code {

    padding: .2rem .4rem;

}

pre {

    padding: 1rem;
    overflow: auto;

}


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

::selection {

    background: var(--ct-color-primary);
    color: var(--ct-color-white);

}


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

@media (max-width:768px) {

    h1 {

        font-size: var(--ct-fs-4xl);

    }

    h2 {

        font-size: var(--ct-fs-3xl);

    }

}