/* =========================================================
   A. MUKASA & COMPANY ADVOCATES
   BLOG POST TYPOGRAPHY & CTA
   ========================================================= */


/* ---------- COLOURS ---------- */

:root {
    --amc-blog-blue: #083d77;
    --amc-blog-text: #202633;
    --amc-blog-accent: #1EC997;
    --amc-blog-accent-hover: #19AD82;
}


/* =========================================================
   ARTICLE HEADLINE
   Editable heading inside the Zoho post template
   Custom class: amc-blog-heading
   ========================================================= */

.amc-blog-heading {
    color: var(--amc-blog-blue) !important;

    font-size: 32px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;

    text-align: center !important;

    margin-top: 20px !important;
    margin-bottom: 18px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* =========================================================
   ARTICLE BODY
   Custom class: amc-blog-body
   ========================================================= */

.amc-blog-body {
    color: var(--amc-blog-text) !important;

    font-size: 17px !important;
    line-height: 1.65 !important;

    margin-top: 0 !important;
    padding-top: 0 !important;

    word-spacing: normal !important;
    letter-spacing: normal !important;
}


/* Paragraphs */

.amc-blog-body p {
    font-size: inherit !important;
    line-height: inherit !important;

    text-align: left !important;

    word-spacing: normal !important;
    letter-spacing: normal !important;

    margin-top: 0 !important;
    margin-bottom: 0.8em !important;
}


/* Bold text */

.amc-blog-body strong,
.amc-blog-body b {
    font-weight: 700 !important;
}


/* Italics / disclaimer text */

.amc-blog-body em,
.amc-blog-body i {
    line-height: 1.65 !important;
}


/* Headings occurring within the body */

.amc-blog-body h2 {
    color: var(--amc-blog-blue) !important;

    font-size: 27px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;

    margin-top: 1.25em !important;
    margin-bottom: 0.45em !important;
}


.amc-blog-body h3 {
    color: var(--amc-blog-text) !important;

    font-size: 21px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;

    margin-top: 1.1em !important;
    margin-bottom: 0.4em !important;
}


/* Lists */

.amc-blog-body ul,
.amc-blog-body ol {
    margin-top: 0.4em !important;
    margin-bottom: 0.9em !important;

    padding-left: 1.5em !important;
}


.amc-blog-body li {
    font-size: inherit !important;
    line-height: 1.6 !important;

    text-align: left !important;

    word-spacing: normal !important;
    letter-spacing: normal !important;

    margin-bottom: 0.35em !important;
}


/* Links */

.amc-blog-body a {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}


/* Images */

.amc-blog-body img {
    max-width: 100% !important;
    height: auto !important;
}


/* =========================================================
   BOOK A CONSULTATION BUTTON
   Custom class: amc-blog-cta
   ========================================================= */

/* Centre the Zoho button container */

.amc-blog-cta .zpbutton-container {
    text-align: center !important;

    margin-top: 24px !important;
    margin-bottom: 30px !important;
}


/* Actual Zoho button */

.amc-blog-cta .zpbutton-wrapper,
.amc-blog-cta a.zpbutton {

    background-color: var(--amc-blog-accent) !important;

    color: #ffffff !important;

    border: none !important;
    border-radius: 4px !important;

    padding: 13px 28px !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease !important;
}


/* Button text */

.amc-blog-cta .zpbutton-content {
    color: #ffffff !important;
}


/* Hover */

.amc-blog-cta .zpbutton-wrapper:hover,
.amc-blog-cta a.zpbutton:hover {

    background-color: var(--amc-blog-accent-hover) !important;

    transform: translateY(-1px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media only screen and (max-width: 767px) {


    /* -------- Article headline -------- */

    .amc-blog-heading {

        font-size: 24px !important;
        line-height: 1.3 !important;

        margin-top: 14px !important;
        margin-bottom: 12px !important;
    }


    /* -------- Body -------- */

    .amc-blog-body {

        font-size: 16px !important;
        line-height: 1.6 !important;

        margin-top: 0 !important;
        padding-top: 0 !important;
    }


    .amc-blog-body p {

        font-size: 16px !important;
        line-height: 1.6 !important;

        text-align: left !important;

        word-spacing: normal !important;
        letter-spacing: normal !important;

        margin-top: 0 !important;
        margin-bottom: 0.65em !important;
    }


    /* -------- Internal headings -------- */

    .amc-blog-body h2 {

        font-size: 24px !important;
        line-height: 1.25 !important;

        margin-top: 1.1em !important;
        margin-bottom: 0.4em !important;
    }


    .amc-blog-body h3 {

        font-size: 19px !important;
        line-height: 1.3 !important;

        margin-top: 1em !important;
        margin-bottom: 0.35em !important;
    }


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

    .amc-blog-body ul,
    .amc-blog-body ol {

        padding-left: 1.25em !important;

        margin-top: 0.3em !important;
        margin-bottom: 0.8em !important;
    }


    .amc-blog-body li {

        font-size: 16px !important;
        line-height: 1.55 !important;

        margin-bottom: 0.35em !important;
    }


    /* -------- Consultation CTA -------- */

    .amc-blog-cta .zpbutton-container {

        margin-top: 20px !important;
        margin-bottom: 28px !important;
    }


    .amc-blog-cta .zpbutton-wrapper,
    .amc-blog-cta a.zpbutton {

        display: inline-block !important;

        width: calc(100% - 36px) !important;
        max-width: 360px !important;

        box-sizing: border-box !important;

        padding: 14px 20px !important;

        font-size: 16px !important;

        text-align: center !important;
    }
}