/* =========================================================
   PARTH EDVISORS
   SINGLE ARTICLE STYLES
   ========================================================= */

#single-article-page {
    background: var(--ivory, #F8F5EE);
    color: #071C3D;
}


/* =========================================================
   TOP SPACING
   Keeps content safely below fixed navbar
   ========================================================= */

#single-article-page .article-hero {
    padding-top: 118px;
    padding-bottom: 48px;
}

@media (min-width: 768px) {
    #single-article-page .article-hero {
        padding-top: 132px;
        padding-bottom: 56px;
    }
}


/* =========================================================
   HERO CONTAINER
   ========================================================= */

#single-article-page .article-hero-inner {
    width: min(1400px, calc(100% - 48px));
    margin: 0 auto;
}

@media (max-width: 767px) {
    #single-article-page .article-hero-inner {
        width: min(100% - 32px, 1400px);
    }
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

#single-article-page .article-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    margin-bottom: 18px;

    font-size: 14px;
    line-height: 1.5;
    color: #64748b;
}

#single-article-page .article-breadcrumb a {
    color: #071C3D;
    text-decoration: none;
    transition: color .25s ease;
}

#single-article-page .article-breadcrumb a:hover {
    color: #C9942F;
}


/* =========================================================
   CATEGORY
   ========================================================= */

#single-article-page .article-category {
    display: inline-flex;
    align-items: center;

    margin-bottom: 24px;

    padding: 9px 17px;

    border-radius: 999px;

    background: var(--gold, #D9A441);
    color: var(--navy, #071C3D);

    font-size: 12px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: .18em;
    text-transform: uppercase;

    text-decoration: none;
}


/* =========================================================
   MAIN ARTICLE TITLE
   ========================================================= */

#single-article-page .article-title {
    max-width: 1180px;

    margin: 0;

    color: #000 !important;

    font-size: clamp(42px, 5.4vw, 78px) !important;

    line-height: 1.02 !important;

    letter-spacing: -0.045em;

    font-weight: 800 !important;
}

@media (max-width: 767px) {
    #single-article-page .article-title {
        font-size: 42px !important;
        line-height: 1.08 !important;
    }
}


/* =========================================================
   EXCERPT
   ========================================================= */

#single-article-page .article-excerpt {
    max-width: 820px;

    margin-top: 26px;

    color: #475569;

    font-size: 19px;
    line-height: 1.8;
}


/* =========================================================
   META
   ========================================================= */

#single-article-page .article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 38px;

    margin-top: 38px;
    padding-top: 24px;

    border-top: 1px solid rgba(7, 28, 61, .12);
}

#single-article-page .article-meta-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

#single-article-page .article-meta-label {
    display: block;

    margin-bottom: 3px;

    color: #64748b;

    font-size: 11px;
    line-height: 1.4;

    letter-spacing: .16em;
    text-transform: uppercase;
}

#single-article-page .article-meta-value {
    color: #000;

    font-size: 16px;
    font-weight: 600;
}

#single-article-page .article-author-avatar img {
    width: 54px;
    height: 54px;

    border-radius: 50%;

    object-fit: cover;
}


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

#single-article-page .article-featured {
    width: min(1400px, calc(100% - 48px));

    margin: 10px auto 0;
}

#single-article-page .article-featured-image {
    display: block;

    width: 100%;
    height: auto;

    max-height: 720px;

    object-fit: cover;

    border-radius: 28px;

    box-shadow:
        0 30px 80px rgba(7, 28, 61, .12);
}

@media (max-width: 767px) {

    #single-article-page .article-featured {
        width: calc(100% - 32px);
    }

    #single-article-page .article-featured-image {
        border-radius: 18px;
    }
}


/* =========================================================
   ARTICLE BODY OUTER
   ========================================================= */

#single-article-page .article-body-section {
    padding-top: 72px;
    padding-bottom: 80px;
}

#single-article-page .article-body-layout {
    width: min(1400px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns: 120px minmax(0, 1fr);

    gap: 48px;

    align-items: start;
}

@media (max-width: 1023px) {

    #single-article-page .article-body-layout {
        display: block;
    }
}

@media (max-width: 767px) {

    #single-article-page .article-body-layout {
        width: calc(100% - 32px);
    }

    #single-article-page .article-body-section {
        padding-top: 48px;
    }
}


/* =========================================================
   SHARE SIDEBAR
   ========================================================= */

#single-article-page .article-share {
    position: sticky;
    top: 110px;
}

#single-article-page .article-share-label {
    margin-bottom: 16px;

    color: #64748b;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .25em;
    text-transform: uppercase;
}

#single-article-page .article-share-buttons {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

#single-article-page .article-share-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border: 1px solid #dbe2ea;
    border-radius: 50%;

    background: #fff;

    color: #071C3D;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        color .25s ease;
}

#single-article-page .article-share-button:hover {
    transform: translateY(-3px);

    border-color: var(--gold, #D9A441);

    background: var(--gold, #D9A441);

    color: #071C3D;
}


/* =========================================================
   ARTICLE CONTENT
   THIS IS THE IMPORTANT PART
   ========================================================= */

#single-article-page #article-content {

    width: 100%;
    max-width: 920px;

    margin: 0;

    color: #172033;

    font-size: 19px;

    line-height: 1.85;
}


/* Paragraphs */

#single-article-page #article-content p {
    margin: 0 0 28px;

    color: #253247;

    font-size: 19px;

    line-height: 1.85;
}


/* =========================================================
   H2 FROM WORDPRESS EDITOR
   ========================================================= */

#single-article-page #article-content h2 {

    display: block;

    margin-top: 72px;
    margin-bottom: 24px;

    color: #071C3D !important;

    font-size: 40px !important;

    line-height: 1.15 !important;

    font-weight: 800 !important;

    letter-spacing: -0.025em;

    scroll-margin-top: 120px;
}

#single-article-page #article-content h2:first-child {
    margin-top: 0;
}

@media (min-width: 1024px) {

    #single-article-page #article-content h2 {
        font-size: 44px !important;
    }
}

@media (max-width: 767px) {

    #single-article-page #article-content h2 {
        margin-top: 52px;

        font-size: 32px !important;

        line-height: 1.2 !important;
    }
}


/* =========================================================
   H3
   ========================================================= */

#single-article-page #article-content h3 {

    margin-top: 48px;
    margin-bottom: 18px;

    color: #071C3D !important;

    font-size: 29px !important;

    line-height: 1.25 !important;

    font-weight: 750 !important;
}

@media (max-width: 767px) {

    #single-article-page #article-content h3 {
        font-size: 25px !important;
    }
}


/* =========================================================
   H4
   ========================================================= */

#single-article-page #article-content h4 {

    margin-top: 36px;
    margin-bottom: 15px;

    color: #071C3D !important;

    font-size: 23px !important;

    font-weight: 700 !important;
}


/* =========================================================
   LINKS
   THIS FIXES YOUR INTERNAL LINKS
   ========================================================= */

#single-article-page #article-content a {

    color: #1264D8 !important;

    text-decoration-line: underline !important;

    text-decoration-thickness: 1.5px;

    text-underline-offset: 3px;

    font-weight: 600;

    transition:
        color .2s ease,
        text-decoration-color .2s ease;
}

#single-article-page #article-content a:hover {

    color: #084B9C !important;

    text-decoration-thickness: 2px;
}


/* Don't make images into blue links */

#single-article-page #article-content a img {

    text-decoration: none !important;
}


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

#single-article-page #article-content ul,
#single-article-page #article-content ol {

    margin-top: 24px;
    margin-bottom: 30px;

    padding-left: 28px;
}

#single-article-page #article-content li {

    margin-bottom: 10px;

    color: #253247;

    line-height: 1.75;
}


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

#single-article-page #article-content strong,
#single-article-page #article-content b {

    color: #071C3D;

    font-weight: 750;
}


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

#single-article-page #article-content blockquote {

    margin: 42px 0;

    padding: 24px 30px;

    border-left: 4px solid var(--gold, #D9A441);

    background: rgba(217, 164, 65, .08);

    color: #071C3D;

    font-size: 22px;

    line-height: 1.65;
}


/* =========================================================
   ARTICLE IMAGES
   ========================================================= */

#single-article-page #article-content img {

    display: block;

    width: 100%;
    height: auto;

    margin: 48px 0;

    border-radius: 24px;

    box-shadow:
        0 20px 60px rgba(7, 28, 61, .10);
}


/* =========================================================
   WORDPRESS ALIGNMENTS
   ========================================================= */

#single-article-page #article-content .alignwide {

    width: 100%;
    max-width: 1100px;

    margin-left: auto;
    margin-right: auto;
}

#single-article-page #article-content .alignfull {

    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;
}


/* =========================================================
   TABLES
   ========================================================= */

#single-article-page #article-content table {

    width: 100%;

    margin: 40px 0;

    border-collapse: collapse;

    font-size: 16px;
}

#single-article-page #article-content th,
#single-article-page #article-content td {

    padding: 14px 16px;

    border: 1px solid #dbe2ea;

    text-align: left;
}

#single-article-page #article-content th {

    background: #f1eee6;

    color: #071C3D;

    font-weight: 700;
}


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

@media (max-width: 1023px) {

    #single-article-page .article-share {
        position: static;

        display: flex;
        align-items: center;
        justify-content: space-between;

        margin-bottom: 42px;

        padding-bottom: 24px;

        border-bottom: 1px solid rgba(7, 28, 61, .10);
    }

    #single-article-page .article-share-buttons {
        flex-direction: row;
    }
}


/* =========================================================
   AUTHOR
   ========================================================= */

#single-article-page .article-author-box {

    width: min(1100px, calc(100% - 48px));

    margin: 0 auto 80px;

    padding: 42px;

    border: 1px solid #e2e6eb;

    border-radius: 30px;

    background: #fff;

    box-shadow:
        0 20px 60px rgba(7, 28, 61, .06);
}

@media (max-width: 767px) {

    #single-article-page .article-author-box {

        width: calc(100% - 32px);

        padding: 28px;
    }
}


/* =========================================================
   FAQ H2/H3 FIX
   ========================================================= */

#single-article-page .wp-block-heading {

    color: #071C3D !important;
}


/* =========================================================
   WORDPRESS BLOCK EDITOR LINKS
   ========================================================= */

#single-article-page .wp-block-post-content a,
#single-article-page .entry-content a {

    color: #1264D8 !important;

    text-decoration: underline !important;
}


/* =========================================================
   REMOVE UNNECESSARY DEFAULT MARGINS
   ========================================================= */

#single-article-page #article-content > *:first-child {

    margin-top: 0 !important;
}

#single-article-page #article-content > *:last-child {

    margin-bottom: 0;
}