/*
   Sufirain Reading Experience
*/

:root {
    --reading-bg: #fff;
    --reading-text: #242424;
    --reading-heading: #242424;
    --reading-meta: #757575;
    --reading-font: Georgia, "Source Serif 4", source-serif-pro, Cambria, "Times New Roman", Times, serif;
    --reading-ui-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ── Global Page Background ── */
.reading-page {
    background-color: var(--reading-bg) !important;
}

/* ── Layout Constraints ── */
.reading-page .posts-list {
    max-width: 680px !important;
    margin: 0 auto !important;
    float: none !important;
    padding: 48px 20px 80px 20px;
}

/* ── Title ── */
.reading-page .blog_details h2#blog-title,
.reading-page .blog_details h1,
.reading-page .po-content-full h1,
.reading-page .book-summary-body h1 {
    font-family: var(--reading-font);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    color: var(--reading-heading);
    line-height: 1.25;
    text-align: left;
    margin-bottom: 12px;
    letter-spacing: -0.011em;
}

/* ── Meta Info ── */
.reading-page .blog-info-link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    font-family: var(--reading-ui-font);
    font-size: 13px;
    color: var(--reading-meta);
    list-style: none;
    padding: 12px 0 0;
    margin: 0 auto 36px auto;
    border-top: 1px solid rgba(36, 36, 36, 0.1);
}

.reading-page .blog-info-link li,
.reading-page .blog-info-link li a {
    color: var(--reading-meta);
    font-weight: 400;
    line-height: 1;
}

.reading-page .blog-info-link li:first-child,
.reading-page .blog-info-link li:first-child a {
    font-weight: 500;
    color: var(--reading-text);
}

.reading-page .blog-info-link > li::after {
    display: none;
}

.reading-page .blog-info-link .single-author-row {
    display: flex;
    align-items: center;
    min-width: 0;
}

.reading-page .blog-info-link .single-engagement-row {
    display: block;
    width: 100%;
}

.reading-page .single-engagement-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.reading-page .single-engagement-list li:not(:last-child)::after {
    content: "·";
    margin-left: 10px;
    font-weight: 700;
    color: #b6ada3;
    vertical-align: middle;
}

.reading-page .blog-info-link .single-like-item,
.reading-page .blog-info-link .single-share-item {
    display: inline-flex;
    align-items: center;
}

.reading-page .blog-info-link .single-share-item {
    margin-left: auto;
}

.reading-page .blog-info-link .single-share-item::after {
    display: none;
}

.reading-page .blog-info-link .sf-post-metric {
    color: var(--reading-meta);
}

.reading-page .blog-info-link .sf-post-metric i {
    font-size: 15px;
}

.reading-page .blog-info-link .sf-post-metric span {
    font-size: 13px;
    font-weight: 500;
}

.reading-page .blog-info-link .sf-post-like:hover,
.reading-page .blog-info-link .sf-post-share:hover,
.reading-page .blog-info-link .sf-post-like.is-liked {
    color: #8b4a2b;
}

.reading-page .blog-info-link .single-author-meta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    color: var(--reading-text);
    text-decoration: none;
    transition: color 180ms ease, transform 180ms ease;
}

.reading-page .blog-info-link .single-author-meta:hover {
    color: #8b4a2b;
    transform: translateY(-1px);
}

.reading-page .blog-info-link .single-author-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 34px;
    background: #f4eee7;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(139, 74, 43, 0.16), 0 6px 18px rgba(36, 36, 36, 0.11);
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.reading-page .blog-info-link .single-author-meta:hover .single-author-avatar {
    transform: scale(1.03);
    box-shadow: 0 0 0 1px rgba(139, 74, 43, 0.28), 0 8px 22px rgba(36, 36, 36, 0.14);
}

@media (max-width: 575px) {
    .reading-page .blog-info-link {
        gap: 10px 8px;
        font-size: 12px;
    }

    .reading-page .single-engagement-list li:not(:last-child)::after {
        margin-left: 8px;
    }

    .reading-page .blog-info-link .single-author-meta {
        min-height: 32px;
        gap: 8px;
    }

    .reading-page .blog-info-link .single-author-avatar {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }
}

/* ── Content Body ── */
.reading-content,
.reading-page #blog-content-area,
.reading-page .blog_details_content,
.po-content-full.reading-content,
.book-summary-body.reading-content {
    font-family: var(--reading-font);
    font-size: 20px;
    line-height: 32px;
    color: var(--reading-text);
    letter-spacing: -0.06px;
    word-break: break-word;
    overflow-wrap: break-word;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    text-align: left;
}

/* ── Paragraphs ── */
.reading-content p,
.reading-page #blog-content-area p,
.reading-page .blog_details_content p {
    font-family: Georgia, "Source Serif 4", source-serif-pro, Cambria, "Times New Roman", Times, serif;
    font-size: 20px;
    color: #242424;
    line-height: 32px;
    letter-spacing: -0.06px;
    margin-top: 42.8px;
    margin-bottom: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
}

/* ── Blockquotes ── */
.reading-content blockquote,
.reading-page #blog-content-area blockquote,
.reading-page .blog_details_content blockquote {
    font-family: var(--reading-font);
    font-style: italic;
    font-size: 22px;
    color: var(--reading-heading);
    margin: 40px 0;
    padding: 0 0 0 24px;
    border-left: 3px solid var(--reading-text);
    background: transparent;
    text-align: left;
}

.reading-content blockquote::before,
.reading-page #blog-content-area blockquote::before,
.reading-page .blog_details_content blockquote::before,
.reading-content blockquote::after,
.reading-page #blog-content-area blockquote::after,
.reading-page .blog_details_content blockquote::after {
    content: none;
}

.reading-content blockquote p,
.reading-page #blog-content-area blockquote p,
.reading-page .blog_details_content blockquote p {
    font-size: 22px;
    margin: 0;
    line-height: 1.6;
}

/* ── Images ── */
.reading-page #blog-featured-image img,
.reading-page .single-post > .blog_details .feat-img img,
.reading-content img,
.reading-page #blog-content-area img,
.reading-page .blog_details_content img {
    float: none !important;
    clear: both !important;
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block !important;
    margin: 40px auto;
    border-radius: 2px;
    box-shadow: none;
}

.reading-content figure,
.reading-page .blog_details_content figure {
    float: none !important;
    clear: both;
    margin: 40px auto;
    max-width: 100%;
    text-align: center;
}

.reading-content figure figcaption,
.reading-page .blog_details_content figure figcaption {
    font-family: var(--reading-ui-font);
    font-size: 14px;
    color: var(--reading-meta);
    text-align: center;
    margin-top: 10px;
}

.reading-content figure img,
.reading-page .blog_details_content figure img {
    margin-top: 0;
    margin-bottom: 0;
}

/* ── Headings inside Content ── */
.reading-content h1,
.reading-content h2,
.reading-content h3,
.reading-content h4,
.reading-content h5,
.reading-content h6,
.reading-page #blog-content-area h1,
.reading-page #blog-content-area h2,
.reading-page #blog-content-area h3,
.reading-page #blog-content-area h4,
.reading-page .blog_details_content h1,
.reading-page .blog_details_content h2,
.reading-page .blog_details_content h3,
.reading-page .blog_details_content h4 {
    font-family: Georgia, "Source Serif 4", source-serif-pro, Cambria, "Times New Roman", Times, serif;
    font-weight: 700;
    color: #242424;
    margin-top: 56px;
    margin-bottom: 16px;
    line-height: 1.3;
    letter-spacing: -0.011em;
    text-align: left;
}

.reading-content h1,
.reading-page #blog-content-area h1,
.reading-page .blog_details_content h1 { font-size: 36px; }

.reading-content h2,
.reading-page #blog-content-area h2,
.reading-page .blog_details_content h2 { font-size: 30px; }

.reading-content h3,
.reading-page #blog-content-area h3,
.reading-page .blog_details_content h3 { font-size: 24px; }

.reading-content h4,
.reading-page #blog-content-area h4,
.reading-page .blog_details_content h4 { font-size: 20px; }

/* ── Lists ── */
.reading-content ul,
.reading-content ol,
.reading-page #blog-content-area ul,
.reading-page #blog-content-area ol,
.reading-page .blog_details_content ul,
.reading-page .blog_details_content ol {
    font-family: Georgia, "Source Serif 4", source-serif-pro, Cambria, "Times New Roman", Times, serif;
    font-size: 20px;
    color: #242424;
    line-height: 32px;
    margin-top: 42.8px;
    margin-bottom: 0;
    padding-left: 28px;
}

.reading-content li,
.reading-page #blog-content-area li,
.reading-page .blog_details_content li {
    margin-bottom: 8px;
}

/* ── Links inside content ── */
.reading-content a,
.reading-page #blog-content-area a,
.reading-page .blog_details_content a {
    color: var(--reading-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Strong / Em ── */
.reading-content strong,
.reading-page #blog-content-area strong,
.reading-page .blog_details_content strong {
    color: #242424;
    font-weight: 700;
}

.reading-content em,
.reading-page #blog-content-area em,
.reading-page .blog_details_content em {
    font-style: italic;
}

/* ── Reading Progress Bar ── */
#reading-progress-bar,
.reading-page #reading-progress-fixed {
    position: fixed !important;
    top: 0; left: 0;
    height: 3px !important;
    background: #1a8917 !important;
    z-index: 99999 !important;
    transition: width 0.1s linear !important;
    pointer-events: none !important;
}

/* ── Navbar on Reading Page ── */
.reading-page .header-area {
    background: var(--reading-bg) !important;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.reading-page .header-mid.header-sticky.sticky-bar {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(8px);
}

/* Clean up Skeleton artifacts */
.reading-page .skeleton {
    background-color: transparent !important;
    animation: none !important;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .reading-content,
    .reading-page #blog-content-area,
    .reading-page .blog_details_content,
    .reading-content p,
    .reading-page #blog-content-area p,
    .reading-page .blog_details_content p {
        font-size: 18px;
        line-height: 30px;
    }

    .reading-content ul,
    .reading-content ol,
    .reading-page #blog-content-area ul,
    .reading-page #blog-content-area ol {
        font-size: 18px;
        line-height: 30px;
    }

    .reading-content blockquote {
        font-size: 19px;
    }
}