/*
   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;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    font-family: var(--reading-ui-font);
    font-size: 13px;
    color: var(--reading-meta);
    list-style: none;
    padding: 0;
    margin: 0 auto 36px auto;
}

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

.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:not(:last-child)::after {
    content: "·";
    margin-left: 6px;
    font-weight: 700;
}

/* ── 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;
    }
}