/* =========================================================
   ONLINE SEO BLOGS — SINGLE POST MASTER STYLING
   Meta + Featured Image + Typography + Article Components
========================================================= */


/* =========================================================
   01. POST META
========================================================= */

.single-post .entry-header .entry-meta {
    display: inline-flex !important;
    align-items: center;
    flex-wrap: wrap;

    margin: 0 !important;

    color: #475569;

    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}


/* Last Updated + Reading Time */
.single-post .entry-header .osb-extra-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;

    color: #475569;

    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}


/* Separator */
.single-post .osb-meta-separator {
    display: inline-block;

    margin: 0 8px;

    color: #98A2B3;
}


/* Last Updated */
.single-post .osb-last-updated {
    color: #475569;
}


.single-post .osb-updated-label {
    color: #E5484D;
    font-weight: 600;
}


/* Reading time */
.single-post .osb-reading-time {
    color: #475569;

    white-space: nowrap;
}


/* Author/meta links */
.single-post .entry-meta a {
    color: #374151;

    text-decoration: none;

    transition: color .2s ease;
}


.single-post .entry-meta a:hover {
    color: #E5484D;
}



/* =========================================================
   02. FEATURED IMAGE
========================================================= */

.single-post .post-thumbnail,
.single-post .kadence-post-image {
    margin-top: 22px !important;
    margin-bottom: 28px !important;

    overflow: hidden;

    border-radius: 14px;
}


.single-post .post-thumbnail img,
.single-post .kadence-post-image img {
    display: block;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;

    border: 1px solid #EEF2F6;
    border-radius: 14px !important;

    object-fit: cover;

    box-shadow:
        0 10px 30px rgba(16, 24, 40, .07);
}



/* =========================================================
   03. ARTICLE BODY
========================================================= */

.single-post .entry-content {
    color: #374151;

    font-family: Inter, sans-serif;
    font-size: 17px;
    font-weight: 400;

    line-height: 1.75;
}


.single-post .entry-content p {
    margin: 0 0 22px;

    color: #374151;

    font-family: Inter, sans-serif;
    font-size: 17px;
    font-weight: 400;

    line-height: 1.75;
}



/* =========================================================
   04. H2
========================================================= */

.single-post .entry-content h2 {
    position: relative;

    margin: 42px 0 18px;

    padding-bottom: 11px;

    color: #111827;

    font-family: Manrope, sans-serif;
    font-size: 30px;
    font-weight: 700;

    line-height: 1.25;
    letter-spacing: -.55px;

    border-bottom: 1px solid #EEE7E7;
}


/* Brand accent */
.single-post .entry-content h2::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 46px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #E5484D,
            #F59E0B
        );
}



/* =========================================================
   05. H3
========================================================= */

.single-post .entry-content h3 {
    margin: 30px 0 13px;

    color: #111827;

    font-family: Manrope, sans-serif;
    font-size: 23px;
    font-weight: 700;

    line-height: 1.3;
    letter-spacing: -.35px;
}



/* =========================================================
   06. H4
========================================================= */

.single-post .entry-content h4 {
    margin: 24px 0 10px;

    color: #111827;

    font-family: Manrope, sans-serif;
    font-size: 19px;
    font-weight: 700;

    line-height: 1.35;
}



/* =========================================================
   07. ARTICLE LINKS — PORTABLE
========================================================= */

.single-post .entry-content a:not(.ez-toc-link):not(.wp-block-button__link):not(.osb-author-social) {
    color: #E5484D;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .2s ease;
}

.single-post .entry-content a:not(.ez-toc-link):not(.wp-block-button__link):not(.osb-author-social):hover {
    color: #C9363B;
}


/* =========================================================
   09. LISTS
========================================================= */

.single-post .entry-content ul,
.single-post .entry-content ol {
    margin: 0 0 24px;

    padding-left: 25px;
}


.single-post .entry-content li {
    margin-bottom: 8px;

    color: #374151;

    line-height: 1.7;
}


.single-post .entry-content
ul:not(.ez-toc-list):not(.osb-checklist) > li::marker,

.single-post .entry-content
ol:not(.ez-toc-list) > li::marker {

    color: #E5484D;

    font-weight: 700;
}



/* =========================================================
   10. ARTICLE IMAGES
========================================================= */

.single-post .entry-content img {
    max-width: 100%;
    height: auto;

    border-radius: 12px;
}


.single-post .entry-content figure {
    margin-top: 28px;
    margin-bottom: 30px;
}


.single-post .entry-content figcaption {
    margin-top: 8px;

    color: #475569;

    font-family: Inter, sans-serif;
    font-size: 12px;

    line-height: 1.5;

    text-align: center;
}



/* =========================================================
   11. BLOCKQUOTE
========================================================= */

.single-post .entry-content blockquote {
    margin: 28px 0;

    padding: 20px 22px;

    border: 0;
    border-left: 4px solid #E5484D;

    border-radius: 0 12px 12px 0;

    color: #374151;

    background: #FFF9F5;

    font-size: 16px;
    line-height: 1.7;
}


.single-post .entry-content blockquote p:last-child {
    margin-bottom: 0;
}



/* =========================================================
   12. TABLES
========================================================= */

.single-post .entry-content table {
    width: 100%;

    margin: 26px 0;

    overflow: hidden;

    border: 1px solid #E4E7EC;
    border-radius: 10px;

    border-collapse: separate;
    border-spacing: 0;

    background: #FFFFFF;

    font-family: Inter, sans-serif;
    font-size: 14px;
}


.single-post .entry-content th {
    padding: 12px 14px;

    color: #111827;

    background: #F2F7FC;

    font-weight: 700;

    text-align: left;
}


.single-post .entry-content td {
    padding: 12px 14px;

    color: #374151;

    border-top: 1px solid #EEF2F6;
}


/* Responsive table wrapper */
.single-post .osb-table-scroll {
    width: 100%;

    overflow-x: auto;

    margin: 26px 0;

    -webkit-overflow-scrolling: touch;
}


.single-post .osb-table-scroll table {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}



/* =========================================================
   13. STRONG / BOLD
========================================================= */

.single-post .entry-content strong,
.single-post .entry-content b {
    color: #111827;

    font-weight: 700;
}



/* =========================================================
   14. HORIZONTAL RULE
========================================================= */

.single-post .entry-content hr {
    margin: 34px 0;

    border: 0;
    border-top: 1px solid #E4E7EC;
}



/* =========================================================
   15. ANSWER-FIRST BOX
   No visible "Direct Answer" or "Quick Answer" label
========================================================= */

.single-post .osb-answer-box {
    position: relative;

    margin: 26px 0 30px;

    padding: 21px 24px;

    overflow: hidden;

    border: 1px solid #FADADD;
    border-left: 4px solid #E5484D;
    border-radius: 13px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(22, 140, 255, .08),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #FFFBF8 0%,
            #F1F8FF 100%
        );

    box-shadow:
        0 8px 25px rgba(16, 24, 40, .04);
}


.single-post .entry-content
.osb-answer-box p {

    margin: 0 !important;

    color: #374151;

    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 400;

    line-height: 1.72;
}


.single-post .entry-content
.osb-answer-box strong {

    color: #111827;

    font-weight: 700;
}



/* =========================================================
   16. KEY TAKEAWAYS
========================================================= */

.single-post .osb-key-takeaways {
    margin: 36px 0;

    padding: 24px;

    border: 1px solid #F2D6D8;
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #FAFCFF 0%,
            #FFF9F5 100%
        );

    box-shadow:
        0 8px 26px rgba(16, 24, 40, .035);
}


/* Override normal article H2 */
.single-post .entry-content
.osb-key-takeaways h2 {

    margin: 0 0 19px !important;

    padding: 0 !important;

    border: 0 !important;

    color: #111827;

    font-family: Manrope, sans-serif;
    font-size: 23px;
    font-weight: 700;

    line-height: 1.25;
    letter-spacing: -.35px;
}


.single-post .entry-content
.osb-key-takeaways h2::after {

    display: none !important;
}


/* Grid */
.single-post .osb-key-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 11px;
}


/* Individual card */
.single-post .osb-key-item {
    display: grid;

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

    gap: 10px;

    align-items: start;

    padding: 14px;

    border: 1px solid #F0E3E4;
    border-radius: 10px;

    background:
        rgba(255, 255, 255, .90);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.single-post .osb-key-item:hover {
    transform: translateY(-2px);

    border-color: #F6C9CC;

    box-shadow:
        0 7px 18px rgba(22, 140, 255, .06);
}


/* Check badge */
.single-post .osb-key-check {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    color: #E5484D;

    background:
        linear-gradient(
            135deg,
            #FFF4ED,
            #FFF8F3
        );

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 800;

    line-height: 1;

    box-shadow:
        inset 0 0 0 1px rgba(22, 140, 255, .10);
}


/* Text */
.single-post .entry-content
.osb-key-item p {

    margin: 2px 0 0 !important;

    color: #374151;

    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;

    line-height: 1.55;
}



/* =========================================================
   17. RECOVERY / ARTICLE CHECKLIST
========================================================= */

.single-post .entry-content
ul.osb-checklist {

    margin: 24px 0 30px;

    padding: 0;

    list-style: none;
}


.single-post .entry-content
ul.osb-checklist li {

    position: relative;

    margin: 0 0 9px;

    padding: 10px 13px 10px 39px;

    border: 1px solid #E8EEF4;
    border-radius: 8px;

    color: #374151;

    background: #FBFCFE;

    line-height: 1.55;
}


.single-post .entry-content
ul.osb-checklist li::before {

    content: "✓";

    position: absolute;

    left: 12px;
    top: 11px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 19px;
    height: 19px;

    border-radius: 50%;

    color: #E5484D;

    background: #E9F4FF;

    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 800;

    line-height: 1;
}



/* =========================================================
   18. FAQ WRAPPER
========================================================= */

.single-post .osb-faq {
    display: flex;

    flex-direction: column;

    gap: 9px;

    margin: 23px 0 34px;
}



/* =========================================================
   19. FAQ ITEM
========================================================= */

.single-post .osb-faq-item {
    overflow: hidden;

    margin: 0;

    border: 1px solid #E1EAF2;
    border-radius: 11px;

    background: #FFFFFF;

    box-shadow:
        0 4px 14px rgba(16, 24, 40, .025);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.single-post .osb-faq-item:hover {
    border-color: #FADADD;

    box-shadow:
        0 7px 20px rgba(22, 140, 255, .05);
}


.single-post .osb-faq-item[open] {
    border-color: #F5BEC2;

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FFFBF8 100%
        );

    box-shadow:
        0 8px 24px rgba(22, 140, 255, .065);
}



/* =========================================================
   20. FAQ QUESTION
========================================================= */

.single-post .osb-faq-item summary {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 55px;

    margin: 0;

    padding:
        15px 50px 15px 17px;

    color: #111827;

    font-family: Manrope, sans-serif;
    font-size: 15px;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing: -.15px;

    cursor: pointer;

    list-style: none;

    user-select: none;
}


.single-post .osb-faq-item summary::-webkit-details-marker {
    display: none;
}


.single-post .osb-faq-item summary::marker {
    content: "";
}


.single-post .osb-faq-item summary:hover {
    color: #E5484D;
}



/* =========================================================
   21. FAQ PLUS / MINUS
========================================================= */

.single-post .osb-faq-item summary::after {
    content: "+";

    position: absolute;

    top: 50%;
    right: 16px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    transform:
        translateY(-50%);

    border-radius: 7px;

    color: #E5484D;

    background: #ECF6FF;

    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 500;

    line-height: 1;

    transition:
        transform .2s ease,
        color .2s ease,
        background .2s ease;
}


.single-post .osb-faq-item[open]
summary::after {

    content: "−";

    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #E5484D,
            #F59E0B
        );

    transform:
        translateY(-50%)
        rotate(180deg);
}



/* =========================================================
   22. FAQ ANSWER
========================================================= */

.single-post .osb-faq-answer {
    padding:
        0 17px 17px;

    border-top:
        1px solid #EDF2F7;
}


.single-post .entry-content
.osb-faq-answer p {

    margin:
        14px 0 0 !important;

    color: #475569;

    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;

    line-height: 1.7;
}


.single-post .entry-content
.osb-faq-answer p:last-child {

    margin-bottom:
        0 !important;
}



/* =========================================================
   23. ACCESSIBILITY
========================================================= */

.single-post .osb-faq-item
summary:focus-visible {

    outline:
        2px solid #E5484D;

    outline-offset:
        -2px;

    border-radius:
        9px;
}



/* =========================================================
   24. MOBILE
========================================================= */

@media (max-width: 767px) {

    /* Meta */
    .single-post .entry-header .entry-meta,
    .single-post .entry-header .osb-extra-meta {
        font-size: 12px;
    }


    .single-post .osb-meta-separator {
        margin: 0 6px;
    }


    /* Featured image */
    .single-post .post-thumbnail,
    .single-post .kadence-post-image {

        margin-top:
            18px !important;

        margin-bottom:
            22px !important;

        border-radius:
            11px;
    }


    .single-post .post-thumbnail img,
    .single-post .kadence-post-image img {

        border-radius:
            11px !important;
    }


    /* Body */
    .single-post .entry-content,
    .single-post .entry-content p {

        font-size:
            16px;

        line-height:
            1.7;
    }


    /* H2 */
    .single-post .entry-content h2 {

        margin-top:
            34px;

        margin-bottom:
            16px;

        font-size:
            25px;

        line-height:
            1.3;

        letter-spacing:
            -.35px;
    }


    .single-post .entry-content h2::after {
        width: 40px;
    }


    /* H3 */
    .single-post .entry-content h3 {

        margin-top:
            26px;

        font-size:
            21px;

        line-height:
            1.3;
    }


    /* H4 */
    .single-post .entry-content h4 {
        font-size: 18px;
    }


    /* Lists */
    .single-post .entry-content ul,
    .single-post .entry-content ol {

        padding-left:
            21px;
    }


    /* Blockquote */
    .single-post .entry-content blockquote {

        margin:
            24px 0;

        padding:
            17px 18px;

        font-size:
            15px;
    }


    /* Tables */
    .single-post .entry-content table {

        font-size:
            13px;
    }


    .single-post .entry-content th,
    .single-post .entry-content td {

        padding:
            10px 11px;
    }


    /* Answer box */
    .single-post .osb-answer-box {

        margin:
            22px 0 26px;

        padding:
            18px;

        border-radius:
            11px;
    }


    .single-post .entry-content
    .osb-answer-box p {

        font-size:
            14px;

        line-height:
            1.68;
    }


    /* Key Takeaways */
    .single-post .osb-key-takeaways {

        margin:
            30px 0;

        padding:
            19px;

        border-radius:
            12px;
    }


    .single-post .entry-content
    .osb-key-takeaways h2 {

        margin-bottom:
            16px !important;

        font-size:
            21px;
    }


    .single-post .osb-key-grid {

        grid-template-columns:
            1fr;
    }


    .single-post .osb-key-item {

        padding:
            13px;
    }


    /* Checklist */
    .single-post .entry-content
    ul.osb-checklist li {

        padding:
            9px 11px 9px 36px;

        font-size:
            14px;
    }


    .single-post .entry-content
    ul.osb-checklist li::before {

        left:
            10px;

        top:
            10px;
    }


    /* FAQ */
    .single-post .osb-faq {

        margin:
            20px 0 28px;
    }


    .single-post .osb-faq-item {

        border-radius:
            10px;
    }


    .single-post .osb-faq-item summary {

        min-height:
            52px;

        padding:
            14px 45px 14px 15px;

        font-size:
            14px;
    }


    .single-post .osb-faq-item
    summary::after {

        right:
            13px;

        width:
            25px;

        height:
            25px;

        font-size:
            17px;
    }


    .single-post .osb-faq-answer {

        padding:
            0 15px 15px;
    }


    .single-post .entry-content
    .osb-faq-answer p {

        font-size:
            13.5px;

        line-height:
            1.65;
    }

}



/* =========================================================
   25. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .single-post .osb-key-item,
    .single-post .osb-faq-item,
    .single-post .osb-faq-item summary::after {

        transition:
            none !important;
    }

}
/* =========================================================
   ONLINE SEO BLOGS — PREMIUM AUTHOR BOX
   Brand-aligned + Dynamic Social Icons
========================================================= */

.single-post .osb-author-box {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;

    margin: 42px 0 34px;
    padding: 22px 24px;

    border: 1px solid #FADADD;
    border-radius: 14px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(34, 184, 240, .10),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #FFFBF8 0%,
            #FFF7F2 100%
        );

    box-shadow:
        0 8px 28px rgba(16, 24, 40, .045);
}


/* =========================================================
   AVATAR
========================================================= */

.single-post .osb-author-avatar {
    width: 88px;
    height: 88px;

    overflow: hidden;

    border: 4px solid #FFFFFF;
    border-radius: 50%;

    box-shadow:
        0 0 0 1px #F5BEC2,
        0 7px 20px rgba(16, 24, 40, .10);
}

.single-post .osb-author-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    object-fit: cover;
}


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

.single-post .osb-author-content {
    min-width: 0;
}

.single-post .osb-author-label {
    display: block;

    margin-bottom: 4px;

    color: #E5484D;

    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 1.3px;
}

.single-post .osb-author-name {
    margin: 0 0 7px !important;

    color: #111827;

    font-family: Manrope, sans-serif;
    font-size: 20px;
    font-weight: 700;

    line-height: 1.25;
    letter-spacing: -.3px;
}

.single-post .osb-author-bio {
    max-width: 760px;

    margin: 0 !important;

    color: #475569 !important;

    font-family: Inter, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;

    line-height: 1.6 !important;
}


/* =========================================================
   SOCIAL ICON AREA
========================================================= */

.single-post .osb-author-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 8px;

    padding-left: 20px;

    border-left: 1px solid #FBE4E6;
}

.single-post .osb-author-social {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    padding: 0 !important;

    border: 1px solid #FBE4E6;
    border-radius: 9px;

    color: #E5484D !important;
    background: #FFFFFF !important;

    text-decoration: none !important;
    background-image: none !important;

    box-shadow:
        0 4px 12px rgba(16, 24, 40, .05);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.single-post .osb-author-social svg {
    display: block;

    width: 18px;
    height: 18px;
}

.single-post .osb-author-social:hover {
    transform: translateY(-2px);

    border-color: #E5484D;

    box-shadow:
        0 7px 17px rgba(22, 140, 255, .12);
}


/* =========================================================
   SOCIAL BRAND COLORS
========================================================= */

.single-post .osb-social-linkedin {
    color: #FFFFFF !important;
    background: #0A66C2 !important;
    border-color: #0A66C2 !important;
}

.single-post .osb-social-facebook {
    color: #FFFFFF !important;
    background: #1877F2 !important;
    border-color: #1877F2 !important;
}

.single-post .osb-social-instagram {
    color: #FFFFFF !important;
    border: 0 !important;

    background:
        linear-gradient(
            135deg,
            #833AB4,
            #FD1D1D,
            #FCAF45
        ) !important;
}

.single-post .osb-social-twitter {
    color: #FFFFFF !important;
    background: #111827 !important;
    border-color: #111827 !important;
}

.single-post .osb-social-youtube {
    color: #FFFFFF !important;
    background: #FF0000 !important;
    border-color: #FF0000 !important;
}

.single-post .osb-social-tiktok {
    color: #FFFFFF !important;
    background: #111111 !important;
    border-color: #111111 !important;
}


/* Website / Portfolio Globe */
.single-post .osb-social-website {
    color: #E5484D !important;
    background: #FFF7F2 !important;
    border-color: #F5BEC2 !important;
}

.single-post .osb-social-website:hover {
    color: #FFFFFF !important;

    background:
        linear-gradient(
            135deg,
            #E5484D,
            #F59E0B
        ) !important;

    border-color: #E5484D !important;
}


/* Prevent article link underline styles inside author box */
.single-post .osb-author-box a {
    text-decoration: none !important;
    background-image: none !important;
}


/* =========================================================
   AUTHOR BOX MOBILE
========================================================= */

@media (max-width: 767px) {

    .single-post .osb-author-box {
        grid-template-columns: 68px minmax(0, 1fr);

        gap: 14px;

        margin: 34px 0 28px;
        padding: 18px;

        border-radius: 12px;
    }

    .single-post .osb-author-avatar {
        width: 68px;
        height: 68px;
    }

    .single-post .osb-author-name {
        font-size: 18px;
    }

    .single-post .osb-author-bio {
        font-size: 12.5px !important;
    }

    .single-post .osb-author-links {
        grid-column: 1 / -1;

        justify-content: flex-start;

        padding: 13px 0 0;

        border-left: 0;
        border-top: 1px solid #FBE4E6;
    }

    .single-post .osb-author-social {
        width: 36px;
        height: 36px;
    }

    .single-post .osb-author-social svg {
        width: 17px;
        height: 17px;
    }
}

/* OSB plugin owns author + related sections. Hide Kadence duplicates if enabled. */
.single-post .entry-related,
.single-post .entry-author-profile,
.single-post .author-profile-wrap {
    display: none !important;
}