/* NewsPro · Integration patches for backend CMS */

html, body { margin: 0; padding: 0; }
body { overflow-x: hidden; }

/* ===== Preloader: never push layout ===== */
.preloader { position: fixed; inset: 0; pointer-events: none; z-index: 999999; }

/* ===== Body overlay backdrop: dark scrim (override native red gradient) ===== */
.body-overlay {
    background: rgba(13, 17, 31, .72) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer !important;
}
.body-overlay.active { opacity: 1 !important; }

/* ===== Search Popup: flex-center, simple layout =====
   Override native's absolute centering with explicit flex container.
   ============================================== */
.search-popup {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    z-index: 999 !important;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s ease, visibility 0s linear .3s;
    padding: 20px;
    box-sizing: border-box;
}
.search-popup.active {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transition: opacity .3s ease;
}
/* Override native fixed-centered form — let it sit naturally inside flex parent */
.search-popup .search-form {
    position: relative !important;
    top: auto !important; left: auto !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 600px !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}
.search-popup .search-form .form-group {
    position: relative;
    margin: 0;
}
.search-popup .search-form .form-control {
    width: 100%;
    background: #fff;
    color: #1f2937;
    box-sizing: border-box;
}
.search-popup .search-form .form-control:focus {
    box-shadow: 0 0 0 3px rgba(225,33,39,.25);
}
.search-popup .search-form .submit-btn {
    position: absolute !important;
    right: 0 !important; top: 0 !important;
}

/* Hot-tag pills below the input, centered, max 600px wide */
.np-search-tags {
    margin-top: 24px;
    max-width: 600px;
    text-align: center;
    padding: 0 8px;
}
.np-search-tags a {
    display: inline-block;
    margin: 4px 6px;
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    transition: background .2s, border-color .2s;
}
.np-search-tags a:hover {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.7);
}

/* ===== Logo sizing ===== */
.main-logo img { max-width: 200px; max-height: 60px; object-fit: contain; }
.responsive-mobile-menu .main-logo img { max-width: 140px; max-height: 44px; }
.widget_about img { max-width: 160px; max-height: 50px; object-fit: contain; }

/* Inline logo inside navbar (replaces removed adbar-area) */
.navbar-area .nav-container { align-items: center; }
.np-nav-logo { display: inline-flex; align-items: center; flex-shrink: 0; margin-right: 24px; }
.np-nav-logo img { max-width: 160px; max-height: 48px; object-fit: contain; display: block; }
@media (max-width: 991px) {
    .np-nav-logo img { max-width: 130px; max-height: 40px; }
}

/* ===== Article detail meta row: icon-only, flex wrap, mobile-friendly ===== */
.blog-details-wrap .np-meta-row {
    display: flex; flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin: 18px 0 24px;
    color: #6b7280;
    font-size: 14px;
}
.blog-details-wrap .np-meta-row > span { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.blog-details-wrap .np-meta-row i { color: var(--secondary-color, #E12127); font-size: 15px; }
.blog-details-wrap .np-meta-row .author i { font-size: 18px; }
@media (max-width: 575px) {
    .blog-details-wrap .np-meta-row { gap: 6px 12px; font-size: 13px; }
}
.dark-page .blog-details-wrap .np-meta-row { color: #9aa5b4; }
.dark-page .blog-details-wrap .np-meta-row i { color: #ff6b75; }

/* ===== Article detail h1 title: SEO-friendly tag, smaller visual size ===== */
.blog-details-wrap .np-article-title,
h1.np-article-title {
    font-size: 30px;
    line-height: 1.34;
    font-weight: 700;
    color: var(--heading-color, #000D39);
    margin: 0 0 14px;
    font-family: 'Nunito', sans-serif;
}
@media (max-width: 767px) {
    .blog-details-wrap .np-article-title,
    h1.np-article-title { font-size: 24px; line-height: 1.35; }
}
.dark-page .blog-details-wrap .np-article-title,
.dark-page h1.np-article-title { color: #fff; }

/* ===== Rich text content: comprehensive formatting ===== */
.entry-content,
.article-content,
.rich-text {
    color: #2d3748;
    font-size: 16px;
    line-height: 1.8;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
/* Headings */
.entry-content h1, .article-content h1, .rich-text h1 { font-size: 32px; line-height: 1.3; margin: 32px 0 16px; font-weight: 700; color: var(--heading-color, #000D39); }
.entry-content h2, .article-content h2, .rich-text h2 { font-size: 28px; line-height: 1.3; margin: 28px 0 14px; font-weight: 700; color: var(--heading-color, #000D39); }
.entry-content h3, .article-content h3, .rich-text h3 { font-size: 24px; line-height: 1.35; margin: 24px 0 12px; font-weight: 600; color: var(--heading-color, #000D39); }
.entry-content h4, .article-content h4, .rich-text h4 { font-size: 20px; line-height: 1.4; margin: 20px 0 10px; font-weight: 600; color: var(--heading-color, #000D39); }
.entry-content h5, .article-content h5, .rich-text h5 { font-size: 18px; line-height: 1.4; margin: 18px 0 10px; font-weight: 600; color: var(--heading-color, #000D39); }
.entry-content h6, .article-content h6, .rich-text h6 { font-size: 16px; line-height: 1.4; margin: 16px 0 8px; font-weight: 600; color: var(--heading-color, #000D39); }
/* Paragraphs */
.entry-content p, .article-content p, .rich-text p { margin: 0 0 16px; color: #2d3748; }
/* Links */
.entry-content a, .article-content a, .rich-text a {
    color: var(--secondary-color, #E12127);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.entry-content a:hover, .article-content a:hover, .rich-text a:hover { color: #c41820; }
/* Lists */
.entry-content ul, .entry-content ol,
.article-content ul, .article-content ol,
.rich-text ul, .rich-text ol {
    margin: 0 0 16px; padding-left: 28px;
}
.entry-content ul li, .article-content ul li, .rich-text ul li { list-style: disc; margin-bottom: 8px; }
.entry-content ol li, .article-content ol li, .rich-text ol li { list-style: decimal; margin-bottom: 8px; }
.entry-content ul ul, .entry-content ol ol,
.article-content ul ul, .article-content ol ol,
.rich-text ul ul, .rich-text ol ol { margin: 8px 0; }
.entry-content ul li::marker,
.article-content ul li::marker,
.rich-text ul li::marker { color: var(--secondary-color, #E12127); }
/* Blockquote */
.entry-content blockquote, .article-content blockquote, .rich-text blockquote {
    margin: 24px 0;
    padding: 20px 24px;
    background: #f8f9fc;
    border-left: 4px solid var(--secondary-color, #E12127);
    border-radius: 6px;
    color: #4a5568;
    font-style: italic;
}
.entry-content blockquote p, .article-content blockquote p, .rich-text blockquote p { margin-bottom: 0; color: #4a5568; }
/* Tables: keep native table layout, wrap with .np-table-wrap (auto-injected) for scroll */
.np-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin: 20px 0;
    border-radius: 6px;
}
.entry-content table, .article-content table, .rich-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.entry-content > table, .article-content > table, .rich-text > table { margin: 20px 0; }
.entry-content table thead, .article-content table thead, .rich-text table thead { background: #f1f4ff; }
.entry-content table th, .entry-content table td,
.article-content table th, .article-content table td,
.rich-text table th, .rich-text table td {
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}
.entry-content table th, .article-content table th, .rich-text table th {
    font-weight: 600;
    color: var(--heading-color, #000D39);
    background: #f1f4ff;
    white-space: nowrap;
}
.entry-content table tr:nth-child(even) td,
.article-content table tr:nth-child(even) td,
.rich-text table tr:nth-child(even) td { background: #fafbfd; }
/* Inline code */
.entry-content code, .article-content code, .rich-text code {
    background: #f1f4ff;
    color: #c41820;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: .9em;
}
/* Code block */
.entry-content pre, .article-content pre, .rich-text pre {
    background: #1a2952;
    color: #e5e9f7;
    padding: 16px 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 20px 0;
    font-size: 13.5px;
    line-height: 1.6;
    -webkit-overflow-scrolling: touch;
}
.entry-content pre code, .article-content pre code, .rich-text pre code {
    background: transparent; color: inherit; padding: 0; border-radius: 0;
}
/* Horizontal rule */
.entry-content hr, .article-content hr, .rich-text hr {
    border: 0; height: 1px;
    background: #e5e7eb;
    margin: 32px 0;
}
/* Image responsive + center */
.entry-content img, .article-content img, .rich-text img {
    max-width: 100%; height: auto;
    border-radius: 6px;
    margin: 16px 0;
    display: block;
}
/* Strong/em */
.entry-content strong, .article-content strong, .rich-text strong { font-weight: 700; color: var(--heading-color, #000D39); }
.entry-content em, .article-content em, .rich-text em { font-style: italic; }

/* ===== Rich text dark mode ===== */
.dark-page .entry-content,
.dark-page .article-content,
.dark-page .rich-text { color: #d1d5db; }
.dark-page .entry-content h1, .dark-page .article-content h1, .dark-page .rich-text h1,
.dark-page .entry-content h2, .dark-page .article-content h2, .dark-page .rich-text h2,
.dark-page .entry-content h3, .dark-page .article-content h3, .dark-page .rich-text h3,
.dark-page .entry-content h4, .dark-page .article-content h4, .dark-page .rich-text h4,
.dark-page .entry-content h5, .dark-page .article-content h5, .dark-page .rich-text h5,
.dark-page .entry-content h6, .dark-page .article-content h6, .dark-page .rich-text h6 { color: #fff !important; }
.dark-page .entry-content p, .dark-page .article-content p, .dark-page .rich-text p { color: #d1d5db; }
.dark-page .entry-content a, .dark-page .article-content a, .dark-page .rich-text a { color: #ff6b75; }
.dark-page .entry-content a:hover, .dark-page .article-content a:hover, .dark-page .rich-text a:hover { color: #ff9aa2; }
.dark-page .entry-content blockquote,
.dark-page .article-content blockquote,
.dark-page .rich-text blockquote {
    background: #1a2952; color: #d1d5db;
    border-left-color: var(--secondary-color, #E12127);
}
.dark-page .entry-content blockquote p,
.dark-page .article-content blockquote p,
.dark-page .rich-text blockquote p { color: #d1d5db; }
.dark-page .entry-content table th,
.dark-page .article-content table th,
.dark-page .rich-text table th { background: #1a2952; color: #fff; }
.dark-page .entry-content table thead,
.dark-page .article-content table thead,
.dark-page .rich-text table thead { background: #1a2952; }
.dark-page .entry-content table th,
.dark-page .entry-content table td,
.dark-page .article-content table th,
.dark-page .article-content table td,
.dark-page .rich-text table th,
.dark-page .rich-text table td { border-color: rgba(255,255,255,.08); color: #d1d5db; }
.dark-page .entry-content table tr:nth-child(even) td,
.dark-page .article-content table tr:nth-child(even) td,
.dark-page .rich-text table tr:nth-child(even) td { background: rgba(255,255,255,.02); }
.dark-page .entry-content code, .dark-page .article-content code, .dark-page .rich-text code {
    background: #1a2952; color: #ffb3b9;
}
.dark-page .entry-content pre, .dark-page .article-content pre, .dark-page .rich-text pre {
    background: #0a0f1f; color: #e5e9f7;
}
.dark-page .entry-content hr, .dark-page .article-content hr, .dark-page .rich-text hr { background: rgba(255,255,255,.1); }
.dark-page .entry-content strong, .dark-page .article-content strong, .dark-page .rich-text strong { color: #fff; }
.dark-page .entry-content ul li::marker,
.dark-page .article-content ul li::marker,
.dark-page .rich-text ul li::marker { color: var(--secondary-color, #E12127); }

/* ===== Title clamp ===== */
.text-truncate-1 { display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; }
.text-truncate-2 { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.text-truncate-3 { display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }

/* ===== Topbar marquee ===== */
.np-marquee-wrap {
    display: flex; align-items: center; gap: 14px;
    color: #fff; font-size: 14px; overflow: hidden;
}
.np-marquee-label {
    flex: 0 0 auto;
    background: var(--secondary-color, #E12127); color: #fff;
    padding: 4px 14px; border-radius: 4px;
    font-weight: 600; font-size: 13px;
    white-space: nowrap; line-height: 1.6;
}
.np-marquee { flex: 1; overflow: hidden; position: relative; min-width: 0; }
.np-marquee-track {
    display: inline-flex; gap: 40px; white-space: nowrap;
    animation: npMarquee 40s linear infinite;
    will-change: transform;
}
.np-marquee:hover .np-marquee-track { animation-play-state: paused; }
.np-marquee-item { color: #fff; text-decoration: none; font-size: 14px; }
.np-marquee-item:hover { color: #ffd54a; }
@keyframes npMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ===== top-post-wrap: enforce uniform aspect ratio + ensure overlay covers ===== */
.top-post-wrap { height: auto; }
.top-post-wrap .thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden; border-radius: 5px;
}
.top-post-wrap .thumb img {
    width: 100% !important; height: 100% !important;
    object-fit: cover; display: block;
}
.top-post-wrap-4 .thumb { aspect-ratio: 16 / 11; }
/* Overlay full height so title always sits on dark area */
.top-post-wrap .thumb .overlay {
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,0) 100%) !important;
    height: 100% !important;
}
.top-post-wrap .top-post-details {
    right: 20px;
    z-index: 2;
}
.top-post-wrap .top-post-details h4,
.top-post-wrap .top-post-details h5,
.top-post-wrap .top-post-details h6 {
    color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.top-post-wrap .top-post-details h4 a,
.top-post-wrap .top-post-details h5 a,
.top-post-wrap .top-post-details h6 a { color: #fff; }
.top-post-wrap .top-post-details .meta { color: rgba(255,255,255,.9); font-size: 13px; }
.top-post-wrap .top-post-details .meta .date { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }
.top-post-wrap .top-post-details .meta .date i { color: #fff; }

/* Equal height across a row of top-post-wrap */
.row.np-equal > [class*="col-"] { display: flex; }
.row.np-equal > [class*="col-"] > .top-post-wrap,
.row.np-equal > [class*="col-"] > .single-post-wrap { flex: 1; }

/* ===== Hero CSS Grid: flat layout, every cell pixel-perfect ===== */
.np-hero-frame {
    display: grid;
    gap: 24px;
    margin-bottom: 30px;
}
.np-hero-cell { display: block; min-width: 0; min-height: 0; }
.np-hero-cell > .np-fill {
    height: 100%; margin-bottom: 0;
    display: flex; flex-direction: column;
}
.np-hero-cell > .np-fill > .thumb {
    flex: 1; min-height: 0;
    aspect-ratio: unset !important;
    overflow: hidden; position: relative;
    border-radius: 5px;
}
.np-hero-cell > .np-fill > .thumb > a:first-child { display: block; height: 100%; }
.np-hero-cell > .np-fill > .thumb img {
    width: 100% !important; height: 100% !important;
    object-fit: cover; display: block;
}

/* Desktop lg+: 4-col 2-row grid; left big spans 2x2, right top has 2 small, right bottom is wide */
@media (min-width: 992px) {
    .np-hero-frame {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        height: 560px;
    }
    .np-hero-left { grid-column: 1 / 3; grid-row: 1 / 3; }
    .np-hero-tr1  { grid-column: 3;     grid-row: 1; }
    .np-hero-tr2  { grid-column: 4;     grid-row: 1; }
    .np-hero-br   { grid-column: 3 / 5; grid-row: 2; }
    /* If TopArea[3] missing, br absent — small cards still on row 1, no row 2 */
    .np-hero-frame:not(:has(.np-hero-br)) {
        grid-template-rows: 1fr;
        height: 400px;
    }
    .np-hero-frame:not(:has(.np-hero-br)) .np-hero-left { grid-row: 1; }
}

/* Tablet md: 2-col grid */
@media (min-width: 768px) and (max-width: 991px) {
    .np-hero-frame {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 240px;
    }
    .np-hero-left { grid-column: 1 / 3; }
    .np-hero-tr1  { grid-column: 1; }
    .np-hero-tr2  { grid-column: 2; }
    .np-hero-br   { grid-column: 1 / 3; }
}

/* Mobile: single column stack */
@media (max-width: 767px) {
    .np-hero-frame { grid-template-columns: 1fr; grid-auto-rows: 220px; }
    .np-hero-cell { grid-column: 1; }
}

/* ===== single-post-wrap: text BELOW image (used for All Posts / hot lists) ===== */
.single-post-wrap {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(7,0,53,.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s, transform .25s;
}
/* Only stretch to parent height when explicitly inside an equal-height row */
.row.np-equal > [class*="col-"] > .single-post-wrap,
[class*="col-"].d-flex > .single-post-wrap { height: 100%; }
.single-post-wrap:hover { box-shadow: 0 12px 30px rgba(7,0,53,.12); transform: translateY(-3px); }
.single-post-wrap .thumb {
    position: relative; aspect-ratio: 16 / 10; overflow: hidden;
}
.single-post-wrap .thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.single-post-wrap .thumb .tag {
    position: absolute; top: 16px; left: 16px;
    background: var(--secondary-color, #E12127); color: #fff;
    padding: 4px 12px; border-radius: 3px;
    font-size: 12px; font-weight: 500;
    height: auto; line-height: 1.6;
}
.single-post-wrap .post-details {
    padding: 18px 20px;
    flex: 1; display: flex; flex-direction: column;
    background: #fff;
}
.single-post-wrap .post-details .meta {
    font-size: 12px; color: #888; margin-bottom: 8px;
    display: flex; flex-wrap: wrap; gap: 12px;
}
.single-post-wrap .post-details .meta .date i,
.single-post-wrap .post-details .meta .author i { color: var(--main-color, #000D39); margin-right: 4px; }
.single-post-wrap .post-details h4,
.single-post-wrap .post-details h5,
.single-post-wrap .post-details h6 {
    margin: 0 0 8px 0; color: var(--heading-color, #000D39);
    line-height: 1.4;
}
.single-post-wrap .post-details h6 { font-size: 16px; }
.single-post-wrap .post-details h5 { font-size: 18px; }
.single-post-wrap .post-details h4 { font-size: 20px; }
.single-post-wrap .post-details p {
    color: #6b7280; font-size: 13px; margin: 0;
}
.single-post-wrap .post-details a { color: inherit; }

/* ===== media-post-wrap horizontal sidebar style ===== */
.np-media {
    display: flex; gap: 14px; padding: 14px 0;
    border-bottom: 1px solid #f0f0f0; align-items: flex-start;
}
.np-media:last-child { border-bottom: 0; }
.np-media .thumb {
    flex: 0 0 100px; width: 100px; height: 80px;
    overflow: hidden; border-radius: 6px;
}
.np-media .thumb img { width: 100%; height: 100%; object-fit: cover; }
.np-media .media-body { flex: 1; min-width: 0; }
.np-media .meta { font-size: 12px; color: #888; margin-bottom: 6px; }
.np-media h6 { margin: 0; font-size: 15px; line-height: 1.4; }
.np-media h6 a { color: var(--heading-color, #000D39); }

/* ===== Section title: flex layout (title · line · optional button) ===== */
.section-title {
    position: relative;
    padding-bottom: 0;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.section-title .title {
    margin: 0;
    padding: 0;
    background: transparent !important;
    display: inline-block;
    font-weight: 700;
    flex-shrink: 0;
}
/* The native span.line — repurpose as flex-grow divider */
.section-title .line {
    flex: 1;
    height: 1px;
    background: #CFD4E4;
    position: static !important;
    width: auto !important;
    display: block;
    margin: 0;
    z-index: auto;
    min-width: 40px;
}
.section-title .btn-newspro { flex-shrink: 0; }

/* When the original markup nests title/line in row > col-sm-8 + col-sm-4 button:
   the row is the flex parent. Override row so it behaves the same. */
.section-title > .row { width: 100%; align-items: center; flex-wrap: wrap; }
.section-title > .row .title { display: inline-block; }
/* In row layout we add the line back via :after on col-sm-8 so it fills space */
.section-title > .row > [class*="col"] { display: flex; align-items: center; gap: 16px; }
.section-title > .row > [class*="col"] .line { flex: 1; }
.section-title.np-on-white, .section-title.np-on-gray { /* compatibility no-op */ }

/* ===== Tag pill ===== */
.np-tag-pill {
    display: inline-block; padding: 6px 14px;
    margin: 4px 6px 4px 0; border-radius: 999px;
    background: #f1f4ff; color: var(--main-color, #000D39);
    font-size: 13px; text-decoration: none;
    transition: all .2s;
}
.np-tag-pill:hover { background: var(--main-color, #000D39); color: #fff; }

/* ===== Pagination ===== */
.np-pagination { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 60px; }
/* Ensure list-page main column has enough bottom breathing room before footer */
main > .container.pb-70 { padding-bottom: 80px !important; }
.np-pagination a, .np-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid #e5e7eb; text-decoration: none;
    color: #1f2937; font-weight: 600; font-size: 14px;
    transition: all .2s;
}
.np-pagination a:hover, .np-pagination a.current {
    background: var(--main-color, #000D39); color: #fff;
    border-color: var(--main-color, #000D39);
}
.np-pagination .disabled { opacity: .4; cursor: not-allowed; }

/* ===== Sidebar ===== */
.np-sidebar-block { margin-bottom: 36px; }
.np-sidebar-block .np-block-title {
    font-size: 18px; font-weight: 700; margin: 0 0 16px;
    padding-bottom: 12px; color: var(--heading-color, #000D39);
    display: block;
    position: relative;
}
.np-sidebar-block .np-block-title::after {
    content: ""; position: absolute;
    left: 0; bottom: 0;
    width: 42px; height: 2px;
    background: var(--secondary-color, #E12127);
}
.np-sidebar-block .category-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid #f0f0f0;
    color: #1f2937; text-decoration: none; font-size: 14px;
}
.np-sidebar-block .category-item:hover { color: var(--main-color, #000D39); }
.np-sidebar-block .category-item .number {
    background: #f1f4ff; color: var(--main-color, #000D39);
    padding: 2px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
}

/* ===== Comment ===== */
.np-comment-item { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid #eee; }
.np-comment-avatar { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }
.np-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.np-comment-body { flex: 1; min-width: 0; }
.np-comment-reply-link {
    display: inline-block; padding: 4px 14px; background: #f1f4ff;
    color: var(--main-color, #000D39); border-radius: 999px;
    font-size: 12px; text-decoration: none; margin-top: 8px;
}
.np-comment-reply-link:hover { background: var(--main-color, #000D39); color: #fff; }

/* ===== Forms & buttons ===== */
.form-comment .form-control {
    border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 12px 16px; font-size: 14px;
}
.form-comment .form-control:focus {
    border-color: var(--main-color, #000D39);
    box-shadow: 0 0 0 3px rgba(0,13,57,.1); outline: none;
}
.btn-newspro {
    background: var(--main-color, #000D39); color: #fff !important;
    padding: 12px 28px; border-radius: 8px;
    border: none; font-weight: 600; transition: all .2s;
    display: inline-block; text-decoration: none;
}
.btn-newspro:hover { background: #0e1a3a; color: #fff !important; }

/* ===== Breadcrumb ===== */
.np-breadcrumb { background: #f8f9fc; padding: 20px 0; margin-bottom: 40px; }
.np-breadcrumb ul {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin: 0; padding: 0; list-style: none;
}
.np-breadcrumb a { color: #6b7280; text-decoration: none; font-size: 14px; }
.np-breadcrumb a:hover { color: var(--main-color, #000D39); }
.np-breadcrumb .sep { color: #9ca3af; }
.np-breadcrumb .active { color: var(--main-color, #000D39); font-weight: 600; font-size: 14px; }

/* ===== Detail page hero ===== */
.np-detail-hero img { max-height: 480px; width: 100%; object-fit: cover; border-radius: 12px; }

/* ===== Empty state ===== */
.np-empty { text-align: center; padding: 60px 20px; color: #9ca3af; }

/* ===== Author header ===== */
.np-author-header {
    background: linear-gradient(135deg, var(--main-color, #000D39) 0%, #4a5fb8 100%);
    color: #fff; padding: 60px 0; margin-bottom: 40px;
}
.np-author-header .avatar {
    width: 100px; height: 100px; border-radius: 50%;
    border: 4px solid rgba(255,255,255,.3); object-fit: cover;
}
.np-author-header h2 { color: #fff; margin: 0; }

/* ===== Footer area minor ===== */
.footer-area a { transition: color .2s; }
.footer-area a:hover { color: #fff; }

/* Footer "More Links" subhead (friend links section) */
.footer-area .np-footer-subhead {
    list-style: none;
    color: #fff; font-weight: 600;
    margin-top: 18px; margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    font-size: 15px;
}
/* Friend links: compact horizontal pills, wrap as needed */
.footer-area .np-friend-links {
    list-style: none; padding: 0; margin: 4px 0 0 0;
    display: flex; flex-wrap: wrap;
    gap: 6px 8px;
}
.footer-area .np-friend-links li { margin: 0; padding: 0; line-height: 1; }
.footer-area .np-friend-links li::after {
    content: "·";
    color: rgba(255,255,255,.25);
    margin-left: 8px;
    font-size: 12px;
}
.footer-area .np-friend-links li:last-child::after { content: ""; margin-left: 0; }
.footer-area .np-friend-links a {
    color: #9aa5b4; font-size: 13px;
    line-height: 1.6;
    white-space: nowrap;
    display: inline-block;
}
.footer-area .np-friend-links a:hover { color: #fff; }

/* FOUC: pre-paint dark bg before main CSS arrives */
html.np-pre-dark, html.np-pre-dark body { background: #0d1a3a !important; }

/* Patch dark-page text-color leaks where native CSS didn't cover */
.dark-page .single-post-wrap { background: #1a2952; }
.dark-page .single-post-wrap .post-details { background: #1a2952; }
.dark-page .single-post-wrap .post-details h4,
.dark-page .single-post-wrap .post-details h5,
.dark-page .single-post-wrap .post-details h6,
.dark-page .single-post-wrap .post-details a { color: #fff; }
.dark-page .single-post-wrap .post-details p,
.dark-page .single-post-wrap .post-details .meta { color: #9aa5b4; }
.dark-page .np-tag-pill { background: #1a2952; color: #fff; }
.dark-page .np-tag-pill:hover { background: var(--secondary-color, #E12127); }
.dark-page .np-breadcrumb { background: #0d1a3a; }
.dark-page .np-breadcrumb a, .dark-page .np-breadcrumb .active { color: #d1d5db; }
.dark-page .np-sidebar-block .np-block-title { color: #fff; border-bottom-color: var(--secondary-color, #E12127); }
.dark-page .np-sidebar-block .category-item { color: #d1d5db; border-bottom-color: rgba(255,255,255,.08); }
.dark-page .np-sidebar-block .category-item .number { background: #1a2952; color: #fff; }
.dark-page .np-media h6 a { color: #fff; }
.dark-page .section-title .line { background: rgba(255,255,255,.15); }
.dark-page .section-title .title { color: #fff; }

/* Force-flip dark inline colors so any leftover style="color:#1a2952" reads on dark bg */
.dark-page [style*="color:#1a2952"],
.dark-page [style*="color: #1a2952"] { color: #fff !important; }
.dark-page [style*="border-bottom:2px solid #1a2952"],
.dark-page [style*="border-bottom: 2px solid #1a2952"] { border-bottom-color: var(--secondary-color, #E12127) !important; }
/* Inline gray meta text on dark cards */
.dark-page [style*="color:#888"],
.dark-page [style*="color: #888"] { color: #9aa5b4 !important; }
/* text-muted on dark */
.dark-page .text-muted { color: #9aa5b4 !important; }
/* Sidebar block bg + borders */
.dark-page .np-sidebar-block { color: #d1d5db; }
.dark-page .np-sidebar-block [style*="border-bottom:1px solid #f0f0f0"],
.dark-page .np-sidebar-block [style*="border-bottom: 1px solid #f0f0f0"] {
    border-bottom-color: rgba(255,255,255,.08) !important;
}
.dark-page .np-sidebar-block a { color: #d1d5db; }
.dark-page .np-sidebar-block a:hover { color: #fff; }
/* Page heading H2 on dark pages */
.dark-page main h2 { color: #fff !important; }
/* Empty state + breadcrumb active */
.dark-page .np-empty { color: #6b7280; }
.dark-page .np-empty i { color: rgba(255,255,255,.2); }
/* Tag pills on dark pages */
.dark-page .np-tag-pill { background: rgba(255,255,255,.08); color: #d1d5db; }
.dark-page .np-tag-pill:hover { background: var(--secondary-color, #E12127); color: #fff; }
.dark-page .np-tag-pill small.text-muted { color: #9aa5b4 !important; }
/* Single-post-wrap meta on dark */
.dark-page .single-post-wrap .post-details .meta { color: #9aa5b4; }
.dark-page .single-post-wrap .post-details .meta .date i,
.dark-page .single-post-wrap .post-details .meta .author i { color: #d1d5db; }
/* Pagination on dark */
.dark-page .np-pagination a,
.dark-page .np-pagination span { background: transparent; color: #d1d5db; border-color: rgba(255,255,255,.15); }
.dark-page .np-pagination a:hover,
.dark-page .np-pagination a.current { background: var(--secondary-color, #E12127); border-color: var(--secondary-color, #E12127); color: #fff; }

/* Flip inline light backgrounds used as section/sidebar wash on home + lists */
.dark-page [style*="background:#f8f9fc"],
.dark-page [style*="background: #f8f9fc"],
.dark-page [style*="background:#F1F4FF"],
.dark-page [style*="background: #F1F4FF"],
.dark-page [style*="background:#f1f4ff"],
.dark-page [style*="background: #f1f4ff"] {
    background: transparent !important;
}
.dark-page [style*="background:#fff"],
.dark-page [style*="background: #fff"],
.dark-page .bg-white { background: #1a2952 !important; }

/* Adbar (header secondary band) is light blue in light mode — flip on dark */
.dark-page .adbar-area { background: #0a1130 !important; }
.dark-page .adbar-area h5 { color: #fff !important; }
.dark-page .adbar-area p { color: #9aa5b4 !important; }

/* Section title + h4 .title white text inside on dark */
.dark-page .section-title .title,
.dark-page .section-title h1,
.dark-page .section-title h2,
.dark-page .section-title h3,
.dark-page .section-title h4,
.dark-page .section-title h5 { color: #fff !important; }

/* Buttons on dark: btn-newspro is navy by default → flip to brand red on dark bg */
.dark-page .btn-newspro {
    background: var(--secondary-color, #E12127) !important;
    color: #fff !important;
}
.dark-page .btn-newspro:hover {
    background: #c41820 !important;
    color: #fff !important;
}
.dark-page .form-comment .form-control {
    background: #1a2952; color: #fff;
    border-color: rgba(255,255,255,.12);
}
.dark-page .form-comment .form-control::placeholder { color: #6b7280; }
.dark-page .form-comment .form-control:focus {
    border-color: var(--secondary-color, #E12127);
    box-shadow: 0 0 0 3px rgba(225,33,39,.18);
    background: #1a2952; color: #fff;
}

/* Footer separation in dark mode: deeper black + top divider */
.dark-page .footer-area {
    background: #000 !important;
    border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 -1px 0 rgba(255,255,255,.04);
}
.dark-page .footer-area .np-footer-subhead { color: #fff; border-bottom-color: rgba(255,255,255,.18); }
.dark-page .footer-bottom-area { border-top: 1px solid rgba(255,255,255,.06); padding-top: 18px; }

/* Tag position only — DO NOT override native tag color classes (.tag-red/blue/sky/purple/pink) */
.tag.top-right { right: 20px !important; left: auto !important; top: 20px !important; }

/* Constrain comment avatars (native .thumb has no img size cap) */
.blog-details-wrap .comment-area .media .thumb {
    flex: 0 0 70px; width: 70px; height: 70px;
    border-radius: 50%; overflow: hidden;
}
.blog-details-wrap .comment-area .media .thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.blog-details-wrap .comment-area .media.nesting .thumb {
    flex: 0 0 56px; width: 56px; height: 56px;
}
/* Reply button anchor float-sm-end isn't enough — keep it tight */
.blog-details-wrap .comment-area .media .media-body { flex: 1; min-width: 0; }