/*==============Typography Schema ================*/
/* 
 * Global Typography Schema
 * This file defines consistent typography across all posts and pages
 */

/* Import Onest Font */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    --font-family-primary: 'Onest', sans-serif !important;
}

/* ========== Headings ========== */

/* Heading 1 */
h1,
.h1 {
    font-family: var(--font-family-primary) !important;
    font-size: 32px;
    line-height: 150%;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

/* Heading 2 */
h2,
.h2 {
    font-family: var(--font-family-primary) !important;
    font-size: 28px;
    line-height: 150%;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

/* Heading 3 */
h3,
.h3 {
    font-family: var(--font-family-primary) !important;
    font-size: 18px;
    line-height: 150%;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

/* Heading 4 */
h4,
.h4 {
    font-family: var(--font-family-primary) !important;
    font-size: 22px;
    line-height: 150%;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Heading 5 */
h5,
.h5 {
    font-family: var(--font-family-primary) !important;
    font-size: 18px;
    line-height: 150%;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Heading 6 */
h6,
.h6 {
    font-family: var(--font-family-primary) !important;
    font-size: 14px;
    line-height: 150%;
    font-weight: 600;
    margin-bottom: 0.875rem;
}

/* Remove strong/bold override in headings */
h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong,
.h1 strong,
.h2 strong,
.h3 strong,
.h4 strong,
.h5 strong,
.h6 strong {
    font-weight: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
}

strong,
b {
    font-weight: 500 !important;
}

/* ========== Paragraphs ========== */

/* Large Paragraph */
p.paragraph-large,
.paragraph-large {
    font-family: var(--font-family-primary) !important;
    font-size: 18px;
    line-height: 150%;
    font-weight: 400;
    margin-bottom: 1rem;
}

/* Default Paragraph */
p,
li,
strong,
b,
.paragraph {
    font-family: var(--font-family-primary) !important;
    font-size: 16px !important;
    line-height: 150%;
    font-weight: 400;
    margin-bottom: 1rem;
    color: #484a61 !important;
}

/* Blog Content Font Size Override - 14px except headings */
.blog_single_item,
.blog_single_item p,
.blog_single_item li,
.blog_single_item .paragraph,
.blog_single_item div:not(.related-articles-section):not(.cmgalaxy-engagement-block),
.blog_single_item span,
.page:not(.page-template-page-onepage) .page_wrapper p,
.page:not(.page-template-page-onepage) .page_wrapper li {
    font-size: 16px !important;
}



/* ========== Buttons ========== */

/* Large Button */
.btn-large,
button.btn-large {
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    padding: 12px 32px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Medium Button */
.btn-medium,
button.btn-medium {
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    padding: 10px 24px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* ========== Responsive Typography ========== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {

    h1,
    .h1 {
        font-size: 32px;
    }

    h2,
    .h2 {
        font-size: 20px;
    }

    h3,
    .h3 {
        font-size: 18px;
    }

    h4,
    .h4 {
        font-size: 20px;
    }

    h5,
    .h5 {
        font-size: 16px;
    }

    h6,
    .h6 {
        font-size: 14px;
    }

    p.paragraph-large,
    .paragraph-large {
        font-size: 14px;
    }

    p,
    .paragraph {
        font-size: 13px;
    }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {

    h1,
    .h1 {
        font-size: 32px;
    }

    h2,
    .h2 {
        font-size: 20px;
    }

    h3,
    .h3 {
        font-size: 18px;
    }

    h4,
    .h4 {
        font-size: 18px;
    }

    h5,
    .h5 {
        font-size: 14px;
    }

    h6,
    .h6 {
        font-size: 14px;
    }

    p.paragraph-large,
    .paragraph-large {
        font-size: 14px;
    }

    p,
    .paragraph {
        font-size: 13px;
    }

    .btn-large,
    button.btn-large {
        font-size: 15px;
        padding: 10px 24px;
    }

    .btn-medium,
    button.btn-medium {
        font-size: 13px;
        padding: 8px 20px;
    }
}

/* ========== Apply to Post Content ========== */

/* Apply typography to WordPress post content */
.blog_single_item,
.editor-content,
.post-content,
.entry-content,
article {

    h1,
    .h1 {
        font-family: var(--font-family-primary) !important;
        font-size: 32px !important;
        line-height: 150% !important;
        font-weight: 600 !important;
        margin-bottom: 1.5rem !important;
    }

    h2,
    .h2 {
        font-family: var(--font-family-primary) !important;
        font-size: 28px !important;
        line-height: 150% !important;
        font-weight: 600 !important;
        margin-bottom: 1.25rem !important;
    }

    h3,
    .h3 {
        font-family: var(--font-family-primary) !important;
        font-size: 18px !important;
        line-height: 150% !important;
        font-weight: 600 !important;
        margin-bottom: 1.25rem !important;
    }

    h4,
    .h4 {
        font-family: var(--font-family-primary) !important;
        font-size: 22px !important;
        line-height: 150% !important;
        font-weight: 600 !important;
        margin-bottom: 1rem !important;
    }

    h5,
    .h5 {
        font-family: var(--font-family-primary) !important;
        font-size: 18px !important;
        line-height: 150% !important;
        font-weight: 600 !important;
        margin-bottom: 1rem !important;
    }

    h6,
    .h6 {
        font-family: var(--font-family-primary) !important;
        font-size: 14px !important;
        line-height: 150% !important;
        font-weight: 600 !important;
        margin-bottom: 0.875rem !important;
    }

    p,
    li {
        font-family: var(--font-family-primary) !important;
        font-size: 16px !important;
        line-height: 150% !important;
        font-weight: 400 !important;
        margin-bottom: 1rem !important;
        color: #484a61 !important;
    }

    /* Responsive for post content */
    @media (max-width: 1024px) {

        h1,
        .h1 {
            font-size: 32px !important;
        }

        h2,
        .h2 {
            font-size: 20px !important;
        }

        h3,
        .h3 {
            font-size: 18px !important;
        }

        h4,
        .h4 {
            font-size: 20px !important;
        }

        h5,
        .h5 {
            font-size: 16px !important;
        }

        h6,
        .h6 {
            font-size: 14px !important;
        }

        p {
            font-size: 15px !important;
        }
    }

    @media (max-width: 767px) {

        h1,
        .h1 {
            font-size: 32px !important;
        }

        h2,
        .h2 {
            font-size: 20px !important;
        }

        h3,
        .h3 {
            font-size: 18px !important;
        }

        h4,
        .h4 {
            font-size: 18px !important;
        }

        h5,
        .h5 {
            font-size: 16px !important;
        }

        h6,
        .h6 {
            font-size: 14px !important;
        }

        p {
            font-size: 14px !important;
        }
    }
}


/* Table of Contents - Blue Line Only on Active Items */

/* Base styles for all TOC links */
#docy-toc .nav-link,
#docy-toc a,
.doc-nav .nav-link,
.doc-nav a,
.nav-sidebar.doc-nav .nav-link,
.nav-sidebar.doc-nav a,
.left_sidebarlist .nav-link,
.left_sidebarlist a {
    position: relative !important;
    transition: all 0.3s ease !important;
    padding-left: 15px !important;
    /* Consistent padding for all items */
    color: #484a61 !important;
    /* Default gray color for inactive items */
    background-color: transparent !important;
    /* No background */
}

/* Active Section - Blue color only, no background */
#docy-toc .nav-link.active,
#docy-toc li.active>a,
#docy-toc .active,
#docy-toc .is-active,
#docy-toc a.active,
.doc-nav .nav-link.active,
.doc-nav li.active>a,
.doc-nav .active,
.doc-nav .is-active,
.doc-nav a.active,
.nav-sidebar.doc-nav .nav-link.active,
.nav-sidebar.doc-nav li.active>a,
.nav-sidebar.doc-nav a.active,
.left_sidebarlist .nav-link.active,
.left_sidebarlist li.active>a,
.left_sidebarlist a.active {
    color: #000000 !important;
    text-decoration: none !important;
    font-weight: normal !important;
    background-color: transparent !important;
    /* No background on active */
}

/* Fixed gray vertical track line on the left side of TOC */
#docy-toc::before,
.doc-nav::before,
.nav-sidebar.doc-nav::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #e5e7eb;
    border-radius: 2px;
}

/* Moving indicator that slides along the fixed line */
#docy-toc .nav-link.active::before,
#docy-toc li.active>a::before,
#docy-toc a.active::before,
.doc-nav .nav-link.active::before,
.doc-nav li.active>a::before,
.doc-nav a.active::before,
.nav-sidebar.doc-nav .nav-link.active::before,
.nav-sidebar.doc-nav li.active>a::before,
.nav-sidebar.doc-nav a.active::before,
.left_sidebarlist .nav-link.active::before,
.left_sidebarlist li.active>a::before,
.left_sidebarlist a.active::before {
    display: block !important;
    content: '' !important;
    width: 2px !important;
    background: #3B82F6 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover state - blue color but no background */
#docy-toc a:hover,
.doc-nav a:hover,
.nav-sidebar.doc-nav a:hover,
.left_sidebarlist a:hover {
    text-decoration: none !important;
    font-weight: normal !important;
    color: #000000 !important;
    background-color: transparent !important;
}

/* NUCLEAR: Final override to ensure Onest is used everywhere */
h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 *,
p,
.paragraph,
.paragraph-large,
.f_p,
.breadcrumb_content h1,
.job_details_area h3,
.job_info .info_item h6 {
    font-family: var(--font-family-primary) !important;
}