/* ===================================== Local font size variables =================================== */
:where(html) {
    --font-size-h1: 75px;
    --font-size-h1-mobiles: 30px;
    --font-size-h2: 50px;
    --font-size-h2-mobiles: 28px;
    --font-size-h3: 30px;
    --font-size-h3-mobiles: 18px;

    --font-size-h4: 1.5rem;
    --font-size-h5: 1.25rem;
    --font-size-h6: 1rem;
    --font-size-body: 1rem;
    --font-size-p: 1rem;

    --headline-spacing: 1.375rem;
}

/* ===================================== BG GRADIENTS - LIPIDTECH Stylings =================================== */
.lipidtech {
    .--bg-gradient {
        background: var(--bg-gradient-yellow);
        a {
            color: var(--hf-white-100)!important;
        }
        h2 {
            strong {
                color: var(--hf-white-100);
            }
        }
    }

    .--hf-display-1 {
        color: var(--hf-dark-800);

        & strong {
            color: var(--hf-white-100);
        }
    }
}

/* ===================================== BG GRADIENTS - HF GROUP Stylings =================================== */
.hf_group {
    .--bg-gradient {
        background: var(--bg-gradient-blue);
        h2 {
            color: var(--hf-white-100);

            & strong {
                color: var(--hf-blue-400);
                font-weight: var(--headlines-weight);
            }
        }
        p {
            color: var(--hf-white-100)!important;
        }
        a {
            color: var(--hf-blue-400)!important;
        }
    }

    .--hf-display-1 {
        color: var(--white);

        & strong {
            color: var(--hf-blue-400);
        }
    }
}

/* ===================================== Overalls Stylings =================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--main-font);
    font-weight: var(--headlines-weight);
}

h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
}

.--hf-display-1 {
    font-size: 4em!important;

    @media (max-width: 992px) {
        font-size: var(--font-size-h1-mobiles)!important;
    }
}
.--hf-display-2 {
    font-size: 3.4em!important;

    @media (max-width: 992px) {
        font-size: var(--font-size-h2-mobiles)!important;
    }
}
.--hf-display-3 {
    font-size: 3.1em!important;

    @media (max-width: 992px) {
        font-size: var(--font-size-h2-mobiles)!important;
    }
}

/* ===================================== Apply font sizes using local variables =================================== */
h1 { font-size: var(--font-size-h1); margin-block-end: var(--headline-spacing); }
h2 { font-size: var(--font-size-h2); margin-block-end: var(--headline-spacing); }
h3 { font-size: var(--font-size-h3); margin-block-end: var(--headline-spacing); }
h4 { font-size: var(--font-size-h4); margin-block-end: var(--headline-spacing); }
h5 { font-size: var(--font-size-h5); margin-block-end: var(--headline-spacing); }
h6 { font-size: var(--font-size-h6); margin-block-end: var(--headline-spacing); }

strong {
    font-weight: 600;
}
p, body { font-size: var(--font-size-body); }

@media (max-width: 992px) {
    h1 { font-size: var(--font-size-h1-mobiles); }
    h2 { font-size: var(--font-size-h2-mobiles); }
    h3 { font-size: var(--font-size-h2-mobiles); }
}

.--hf-display-1 {
    p {
        font-size: var(--font-size-h1);
        @media (max-width: 768px) {
            font-size: var(--font-size-h2-mobiles);
        }
    }
}

/* ================================================= Body Typography =============================================== */
/* ===================================== Defaul Typography  ==>  HF GROUP Styling =================================== */
.hf_group {
    h1, h2, h3, h4, h5, h6 {
        color: var(--hf-blue-600);

        & strong {
            color: var(--hf-blue-400);
            font-weight: var(--headlines-weight);
        }

        a {
            color: var(--hf-blue-600);
            transition: var(--animation-300);
            &:hover {
                transition: var(--animation-300);
                color: var(--hf-blue-400);
            }
        }
    }

    a:not(.btn-primary) {
        color: var(--hf-blue-400);
        transition: var(--animation-300);

        &:hover {
            transition: var(--animation-300);
            color: var(--hf-blue-600);
        }
    }

    strong {
        color: var(--hf-blue-600);
    }
}

/* ===================================== Typography  ==>  LIPIDTECH Styling =================================== */
.lipidtech {

    h1, h2, h3, h4, h5, h6 {
        color: var(--hf-dark-800);

        & strong {
            color: var(--hf-yellow-400);
            font-weight: var(--headlines-weight);
        }

        a {
            color: var(--hf-dark-800);
            transition: var(--animation-300);
            &:hover {
                transition: var(--animation-300);
                color: var(--hf-yellow-400);
            }
        }

        p {
            color: var(--hf-dark-800);
        }
    }

    a:not(.btn-primary) {
        color: var(--hf-yellow-400);
        transition: var(--animation-300);
        &:hover {
            transition: var(--animation-300);
            color: var(--hf-blue-600);
        }
    }

    strong {
        color: var(--hf-dark-800);
    }
}


/* ===================================== FOOTER Typography =================================== */
/* ===================================== Defaul Typography  ==>  HF GROUP Styling =================================== */
.footer-primary {
    background: var(--bg-gradient-blue);

    .title {
        margin-bottom: 0px;
        font-size: var(--font-size-h5);
        color: #FFF;
        font-weight: 700;
        text-transform: capitalize;
        margin-bottom: 10px;
    }

    strong, p, td {
        color: var(--hf-white-100);
    }

    a {
        color: var(--hf-white-100)!important;
        font-weight: 300;
        & strong {
            color: var(--hf-blue-400)!important;
        }
    }

    ul {
        li {
            margin-bottom: 10px;

            &::before {
                background-image: none;
            }
        }
    }
}

.footer-secondary {
    display: flex;
    padding-bottom: 15px;

    .container {
        &::before {
            content: '';
            display: block;
            border-top: 1px solid rgba(255, 255, 255, 0.30);
            margin: 20px 0px;
        }

        .hf_group &::before {
            border-bottom: 1px solid rgba(255, 255, 255, 0.30);
        }

        .lipidtech &::before {
            border-bottom: 1px solid rgba(0, 0, 0, 1.00);
        }
    }

    .meta-menu {
        float: right;
    }
}

/* ===================================== Typography  ==>  HF GROUP Styling =================================== */
.hf_group {
    .footer-primary {
        font-size: var(--font-size-h5);
        background: var(--bg-gradient-blue);

        .title {
            margin-bottom: 0px;
            font-size: var(--font-size-h5);
            color: var(--hf-white-100);
            font-weight: 700;
            text-transform: capitalize;
            margin-bottom: 10px;
        }

        strong, p, td {
            color: var(--hf-white-100);
        }

        a {
            color: var(--hf-white-100)!important;
            & strong {
                color: var(--hf-blue-400)!important;
            }
        }

        ul {
            li {
                margin-bottom: 10px;
                &::before {
                    background-image: none;
                }
            }
        }
    }
}


/* ===================================== Typography  ==>  LIPIDTECH Styling =================================== */
.lipidtech {
    .footer-primary {
        background: var(--bg-gradient-yellow);

        .title {
            margin-bottom: 0px;
            font-size: var(--font-size-h5);
            color: var(--hf-dark-800);
            font-weight: 700;
            text-transform: capitalize;
            margin-bottom: 10px;
        }

        strong, p, td {
            color: var(--hf-dark-800);
        }
        a {
            color: var(--hf-dark-800)!important;

            & strong {
                color: var(--hf-dark-800)!important;
            }
        }
        ul {
            li {
                margin-bottom: 10px;

                &::before {
                    background-image: none;
                }
            }
        }
    }
}

/* ===================================== Typography ==> Listing  ==>  LIPIDTECH Styling =================================== */
#page .content-primary {
    ul.ce-uploads {
    margin-bottom: 3rem;
        li {
            align-items: center;
            background-color: #fff;
            padding: 15px 30px;
            margin: 2px 0;
            &::before {
                background: none;
                content: none;
            }
            img {
                padding: 0;
            }
            a {
                display: block;
                max-width: 65px;
            }
            .ce-uploads-fileName a {
                max-width: max-content;
                color: var(--hf-blue-600);
            }
            .ce-uploads-fileextension {
                text-transform: uppercase;
            }
            .ce-uploads-filesize, .ce-uploads-fileextension {
                color: var(--hf-gray-400);
            }
            .ce-uploads-description {
                color: var(--hf-blue-400);
            }
        }
    }
}
.lipidtech {

    .--bg-gradient {
       li::marker {
           color: var(--hf-white-100)!important;
       }
    }

    .content-primary {
        ul {
            padding: 0px !important;
            display: flex;
            flex-direction: column;
            gap: 10px;

            li {
                font-weight: 400;
                font-size: 18px;
                line-height: 2rem;
                margin-left: 25px;
                padding-left: 10px;

                &::marker {
                    content: '– '; /* Display the current number followed by a dot */
                    display: block;
                    font-size: 2em;
                    line-height: 2rem;
                    color: var(--hf-yellow-400);
                    font-weight: 600;
                    padding-right: 20px;
                }

                p {
                    margin: 0px;
                }

            }
        }

        ol {
            padding: 0px !important;
            display: flex;
            flex-direction: column;
            gap: 10px;

            li {
                align-items: start;
                font-weight: 400;
                display: list-item;
                counter-increment: list-item; /* Increment the counter for each li */
                margin-left: 20px;
                padding-left: 15px;

                &::marker {
                    content: counter(list-item) ". "; /* Display the current number followed by a dot */
                    display: inline-block;
                    width: 1em;
                    color: var(--hf-yellow-400);
                    font-weight: 600;
                    margin-right: 10px;
                    padding-top: 5px;
                }
            }
        }
    }
}

/* ===================================== Typography ==> Listing  ==>  HF GROUP Styling =================================== */
.hf_group {
    .content-primary {
        ul {
            padding: 0px !important;
            display: flex;
            flex-direction: column;
            gap: 10px;

            li {
                font-weight: 400;
                font-size: 18px;
                line-height: 2rem;
                margin-left: 25px;
                padding-left: 10px;

                &::marker {
                    content: '– '; /* Display the current number followed by a dot */
                    display: block;
                    font-size: 2em;
                    line-height: 2rem;
                    color: var(--hf-blue-400);
                    font-weight: 600;
                    padding-right: 20px;
                }

                p {
                    margin: 0px;
                }

            }
        }

        ol {
            padding: 0px !important;
            display: flex;
            flex-direction: column;
            gap: 10px;

            li {
                align-items: start;
                font-weight: 400;
                display: list-item;
                counter-increment: list-item; /* Increment the counter for each li */
                margin-left: 20px;
                padding-left: 15px;

                &::marker {
                    content: counter(list-item) ". "; /* Display the current number followed by a dot */
                    display: inline-block;
                    width: 1em;
                    color: var(--hf-blue-400);
                    font-weight: 600;
                    margin-right: 10px;
                    padding-top: 5px;
                }
            }
        }
    }
}