/* ===== NaogaonBulletin — Dhaka Post Inspired Design ===== */

/* ===== Fonts ===== */
/* Noto Serif Bengali via Google Fonts (layout) — fallback stack only here */

/* ===== Color Variables (Dhaka Post inspired palette) ===== */
:root {
    --dp-primary: #006873;
    --dp-primary-light: #00838f;
    --dp-primary-dark: #004d56;
    --dp-title: #234e67;
    --dp-title-border: #234e67;
    --dp-left-border: #124b65;
    --dp-lead-border: #124b65;
    --dp-link-subhead: #00209d;
    --dp-link-intro: #525252;
    --dp-hover: #3b82f6;
    --dp-divider: #d5d4d4;
    --dp-bg: #eff3f6;
    --dp-footer-bg: #eff5f4;
    --dp-link-live: #dc2626;
    --dp-red: #dc2626;
}

.dark {
    --dp-bg: #0f172a;
    --dp-footer-bg: #0f172a;
    --dp-divider: #334155;
    --dp-link-intro: #94a3b8;
}

/* ===== Base Styles ===== */
body {
    font-size: 1.063rem; /* 17px — between typical 16px and Dhaka Post's ~18px */
    line-height: 1.7;
}

/* Section header with left border (Dhaka Post signature style) */
.section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}
.section-header::before {
    content: '';
    display: block;
    width: 4px;
    height: 1.4em;
    background-color: var(--dp-left-border);
    border-radius: 2px;
    flex-shrink: 0;
}
.section-header h2,
.section-header h3 {
    margin: 0;
    color: var(--dp-title);
    font-weight: 700;
}
.dark .section-header h2,
.dark .section-header h3 {
    color: #93c5fd;
}
.dark .section-header::before {
    background-color: #60a5fa;
}

/* Lead article left border accent (featured/highlighted articles) */
.lead-accent {
    border-left: 4px solid var(--dp-lead-border);
    padding-left: 1rem;
}
.dark .lead-accent {
    border-left-color: #60a5fa;
}

/* ===== Flat Card Style (minimal shadows, clean) ===== */
.flat-card {
    background-color: #fff;
    border: 1px solid var(--dp-divider);
}
.dark .flat-card {
    background-color: #1e293b;
    border-color: #334155;
}

/* ===== Sidebar Widget ===== */
.sidebar-widget {
    background-color: #fff;
    border: 1px solid var(--dp-divider);
}
.dark .sidebar-widget {
    background-color: #1e293b;
    border-color: #334155;
}

/* ===== Advertisement Flat ===== */
.ad-flat {
    background-color: transparent;
}
.dark .ad-flat {
    background-color: transparent;
}
.ad-flat.bordered-ad {
    background-color: #fff;
    border: 1px solid var(--dp-divider);
}
.dark .ad-flat.bordered-ad {
    background-color: #1e293b;
    border-color: #334155;
}

/* Why 18px root on mobile? Dhaka Post uses slightly larger text for Bangla readability */
@media (max-width: 1023px) {
    html {
        font-size: 106.25%; /* 17px base */
    }
}

@media (min-width: 1024px) {
    body {
        font-size: 1.063rem;
    }
    .prose p {
        font-size: 1.15rem;
        line-height: 1.9;
    }
    .prose h2 {
        font-size: 1.65rem;
    }
    .prose img {
        margin: 2rem auto;
    }
}

/* x-cloak */
[x-cloak] { display: none !important; }

/* Breaking News Ticker */
.breaking-ticker {
    animation: ticker-scroll 20s linear infinite;
}
@keyframes ticker-scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* White body — cards get hairline border for separation (jago pattern) */
main .bg-white {
    border: 1px solid #edf0f3;
}
.dark main .bg-white {
    border-color: transparent;
}

/* সর্বশেষ marquee ticker (seamless loop, pause on hover) */
.dp-ticker-track {
    animation: dp-ticker-move 40s linear infinite;
}
.dp-ticker-track:hover {
    animation-play-state: paused;
}
@keyframes dp-ticker-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ===== Article Body Prose (serif for newspaper feel) ===== */
.prose img {
    border-radius: 0.5rem;
    margin: 1.5rem auto;
}
.prose p {
    margin-bottom: 1.25rem;
    line-height: 1.85;
    font-family: 'Noto Serif Bengali', Georgia, serif;
}
.prose h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--dp-title);
}
.dark .prose h2 {
    color: #93c5fd;
}
.prose blockquote {
    border-right: 4px solid var(--dp-primary);
    background: #f8fafc;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0.5rem;
    font-style: italic;
}
.dark .prose blockquote {
    background: #1e293b;
    border-right-color: #60a5fa;
}
.prose a {
    color: var(--dp-link-subhead);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.dark .prose a {
    color: #93c5fd;
}
.prose a:hover {
    color: var(--dp-hover);
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
.dark ::-webkit-scrollbar-track { background: #334155; }
::-webkit-scrollbar-thumb {
    background: var(--dp-primary);
    border-radius: 4px;
}

/* ===== Pagination ===== */
.pagination {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    background: #f3f4f6;
    color: #374151;
}
.dark .pagination a,
.dark .pagination span {
    background: #374151;
    color: #d1d5db;
}
.pagination a:hover {
    background: var(--dp-primary);
    color: white;
}
.pagination .active span {
    background: var(--dp-primary);
    color: white;
}

/* ===== Nav Bar ===== */
.dp-nav {
    background: var(--dp-primary);
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 50;
}
.dp-nav a {
    color: rgba(255,255,255,0.9);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.625rem 1rem;
    transition: background 0.2s, color 0.2s;
}
.dp-nav a:hover,
.dp-nav a.active {
    background: rgba(0,0,0,0.15);
    color: #fff;
}

/* ===== Top Bar ===== */
.dp-topbar {
    background: var(--dp-primary-dark);
    color: rgba(255,255,255,0.85);
    font-size: 0.85rem;
}

/* ===== Header / Logo ===== */
.dp-header {
    background: #fff;
    border-bottom: 2px solid var(--dp-divider);
}
.dark .dp-header {
    background: #0f172a;
    border-bottom-color: #334155;
}

/* ===== Footer ===== */
.dp-footer {
    background: var(--dp-footer-bg);
    color: #475569;
    border-top: 2px solid var(--dp-divider);
}
.dark .dp-footer {
    background: #0f172a;
    color: #94a3b8;
    border-top-color: #334155;
}

/* ===== Meta link colors ===== */
.meta-link {
    color: var(--dp-link-subhead);
    transition: color 0.2s;
}
.meta-link:hover {
    color: var(--dp-hover);
}
.dark .meta-link {
    color: #93c5fd;
}
.dark .meta-link:hover {
    color: #60a5fa;
}

/* ===== Subheading link — black default, blue on hover ===== */
.subhead-link {
    color: #1a1a1a;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}
.subhead-link:hover {
    color: var(--dp-link-subhead);
}
.dark .subhead-link {
    color: #e2e8f0;
}
.dark .subhead-link:hover {
    color: #93c5fd;
}

/* ===== Numbered list (sidebar) ===== */
.sidebar-number {
    color: #cbd5e1;
    font-weight: 700;
    font-feature-settings: "tnum";
}
.dark .sidebar-number {
    color: #475569;
}

/* ===== In-body আরও পড়ুন card (own design) ===== */
.inread { display: flex; gap: 16px; align-items: stretch; margin: 24px 0; background: #fff; border: 1px solid #e5e7eb !important; border-bottom: 1px solid #e5e7eb !important; border-radius: 12px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.inread:hover { border-color: var(--dp-primary) !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.10); }
.inread:hover .inread-title { color: var(--dp-primary); }
.inread:hover img.inread-thumb { transform: scale(1.04); }
.inread img.inread-thumb { transition: transform .25s ease; }
.inread .inread-bar { width: 6px; flex-shrink: 0; background: var(--dp-primary); }
.inread img.inread-thumb { width: 110px; height: 86px; margin: 12px 0 12px 4px; object-fit: cover; border-radius: 8px; flex-shrink: 0; align-self: center; }
.inread .inread-text { min-width: 0; padding: 12px 16px 12px 0; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.inread .inread-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #dc2626; margin: 0 0 6px 0; }
.inread .inread-label::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: #dc2626; }
a.inread, a.inread:hover, a.inread *, .prose a.inread, .prose a.inread * { text-decoration: none !important; border-bottom: none !important; }
.inread .inread-title { font-size: 18px; font-weight: 700; line-height: 1.7; color: #1a3a6b; margin: 0; }
.dark .inread { background: #1e293b; border-color: #334155; }
.dark .inread .inread-title { color: #bae6fd; }

/* ===== Category badge ===== */
.cat-badge {
    background: var(--dp-primary);
    color: #fff;
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    border-radius: 2px;
    font-weight: 500;
}

/* ===== Live/breaking badge ===== */
.live-badge {
    background: var(--dp-link-live);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 2px;
    text-transform: uppercase;
}

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

/* ===== Dhaka Post style article title ===== */
.dp-article-title {
    color: var(--dp-title);
    line-height: 1.6;
}
.dark .dp-article-title {
    color: #e2e8f0;
}

/* ===== Image card overlay ===== */
.dp-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
}

/* ===== List style for article lists ===== */
.dp-list-item {
    border-bottom: 1px solid var(--dp-divider);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.dp-list-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.dark .dp-list-item {
    border-bottom-color: #334155;
}

/* ===== Article Body Rhythm ===== */
.article-body p {
    margin-bottom: 1.25rem;
}
.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1.5rem auto;
    display: block;
}
.article-body h2, .article-body h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

/* ===== Article Drop Cap (first body paragraph only) ===== */
.article-body > p:first-of-type::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 0.85;
    font-weight: 700;
    margin-right: 0.45rem;
    margin-top: 0.15rem;
    margin-bottom: 0;
    color: var(--dp-primary);
    font-family: 'Noto Serif Bengali', Georgia, serif;
}
.dark .article-body > p:first-of-type::first-letter {
    color: #60a5fa;
}

/* ===== Author Card ===== */
.author-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #f8fafc;
    border-radius: 0.75rem;
    border: 1px solid var(--dp-divider);
}
.dark .author-card {
    background: #1e293b;
    border-color: #334155;
}
.author-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--dp-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.author-info {
    flex: 1;
    min-width: 0;
}
.author-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--dp-title);
}
.dark .author-name {
    color: #e2e8f0;
}
.author-meta {
    font-size: 0.85rem;
    color: #64748b;
}
.dark .author-meta {
    color: #94a3b8;
}

/* ===== Share Buttons Enhanced ===== */
.share-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none !important;
    cursor: pointer;
    border: none;
}
.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.share-btn-fb {
    background: #1877F2;
    color: #fff;
}
.share-btn-tw {
    background: #000;
    color: #fff;
}
.share-btn-wa {
    background: #25D366;
    color: #fff;
}
.share-btn-copy {
    background: #e2e8f0;
    color: #475569;
}
.dark .share-btn-copy {
    background: #334155;
    color: #cbd5e1;
}
.share-btn-copy:hover {
    background: var(--dp-primary);
    color: #fff;
}

/* ===== Related Articles Card ===== */
.related-card {
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--dp-divider);
    transition: all 0.2s ease;
    background: #fff;
}
.dark .related-card {
    background: #1e293b;
    border-color: #334155;
}
.related-card:hover {
    border-color: var(--dp-primary);
}
.dark .related-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.related-card img {
    border-radius: 0.5rem;
    object-fit: cover;
}

/* ===== Reading Progress Bar ===== */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--dp-primary), var(--dp-hover));
    z-index: 9999;
    width: 0%;
    transition: width 0.1s linear;
}

/* ===== Article Featured Image ===== */
.article-featured-img {
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.dark .article-featured-img {
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

/* ===== Tag Pill ===== */
.tag-pill {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    background: #f1f5f9;
    color: #475569;
    border-radius: 9999px;
    transition: all 0.2s;
    text-decoration: none;
    font-family: 'Noto Sans Bengali', 'Noto Serif Bengali', sans-serif;
}
.tag-pill:hover {
    background: var(--dp-primary);
    color: #fff;
}
.dark .tag-pill {
    background: #334155;
    color: #cbd5e1;
}
.dark .tag-pill:hover {
    background: var(--dp-primary);
    color: #fff;
}