/* Bengali font applied on top of Bootstrap. */
:root { --bn-font: 'Noto Serif Bengali', system-ui, serif; }

body,
.btn,
.form-control,
.form-select,
.navbar,
.nav-link { font-family: var(--bn-font); }

/* ---- Public site ---- */
/* Light background with high-contrast, vibrant text. */
.site-public {
    background-color: #f3f7f5;
    color: #16202e;
}
.site-public main { color: #16202e; }
.site-public h1,
.site-public h2,
.site-public .card-title {
    color: #064d39;          /* vibrant brand green for headings */
    font-weight: 700;
}
.site-public .lead { color: #1f2a37; }
/* Muted greys -> richer slate so secondary text stays readable. */
.site-public .text-secondary { color: #3b4757 !important; }
/* ...but keep it light on the dark footer, otherwise it's invisible. */
.site-public footer.bg-dark .text-secondary { color: #adb5bd !important; }
.site-public .card-footer .bi { color: #064d39; }
.site-public .badge.text-bg-light { color: #064d39 !important; }

/* Vibrant brand navbar (replaces the flat bg-dark). */
.site-navbar {
    background: linear-gradient(90deg, #006a4e 0%, #00a86b 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
.site-navbar .nav-link {
    color: rgba(255, 255, 255, .9);
    font-weight: 600;
    border-radius: 999px;
    padding-inline: .9rem;
    transition: background-color .15s ease, color .15s ease;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, .18);
}
.site-navbar .nav-link.active {
    color: #00543e;
    background-color: #ffd60a;   /* bright amber accent on green */
    font-weight: 700;
}
/* Mobile slide-out menu shares the brand gradient. Scope the panel background
   to below the expand breakpoint (lg): above it the offcanvas becomes a static
   inline part of the navbar, and a leaked background-image would paint a stray
   dark box on desktop (Bootstrap only resets the offcanvas background-color). */
@media (max-width: 991.98px) {
    .site-navbar-panel { background: linear-gradient(160deg, #006a4e, #00543e); color: #fff; }
}
.site-navbar-panel .offcanvas-title { color: #fff; }
.site-navbar-panel .nav-link { color: rgba(255, 255, 255, .92); }
.site-navbar-panel .nav-link:hover,
.site-navbar-panel .nav-link:focus { color: #fff; background-color: rgba(255, 255, 255, .15); }
.site-navbar-panel .nav-link.active { color: #00543e; background-color: #ffd60a; }

.card-thumb { height: 190px; object-fit: cover; }
/* Ad / monetization slots (content configured in the admin panel). */
.ad-slot { text-align: center; overflow: hidden; }
.ad-slot:empty { display: none; }
.story-body p,
.page-body p { margin-bottom: 1rem; line-height: 1.9; }
.footer-links a:hover { text-decoration: underline !important; }

/* Social share bar on the article page. */
.share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.share-bar .share-label { display: inline-flex; align-items: center; gap: .25rem; }
/* Colours go through Bootstrap's --bs-btn-* vars so the background survives
   :hover (a plain background-color is reset by Bootstrap's .btn:hover rule,
   which left white icons on a transparent button). */
.share-btn { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; border: 0; }
.share-wa     { --bs-btn-bg: #25d366; --bs-btn-hover-bg: #1fbb59; --bs-btn-active-bg: #1fbb59; }
.share-fb     { --bs-btn-bg: #1877f2; --bs-btn-hover-bg: #1467d4; --bs-btn-active-bg: #1467d4; }
.share-tw     { --bs-btn-bg: #000;    --bs-btn-hover-bg: #222;    --bs-btn-active-bg: #222; }
.share-tg     { --bs-btn-bg: #229ed9; --bs-btn-hover-bg: #1d8abd; --bs-btn-active-bg: #1d8abd; }
.share-native { --bs-btn-bg: #064d39; --bs-btn-hover-bg: #053f2f; --bs-btn-active-bg: #053f2f; }
.share-copy   { --bs-btn-bg: #6c757d; --bs-btn-hover-bg: #5c636a; --bs-btn-active-bg: #5c636a; }
.share-copy.copied { --bs-btn-bg: #198754; --bs-btn-hover-bg: #157347; }

/* ---- Admin shell ---- */
.admin-topbar { position: sticky; top: 0; z-index: 1020; }
.admin-sidebar .nav-link { color: #cbd5e1; border-radius: .5rem; }
.admin-sidebar .nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.admin-sidebar .nav-link.active { background: var(--bs-primary); color: #fff; }

/* Mobile / tablet: the sidebar is a Bootstrap offcanvas (slides in). */
.admin-sidebar { --bs-offcanvas-width: 250px; }

/* Desktop (lg+): pin the sidebar and offset the content. */
@media (min-width: 992px) {
    .admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 250px;
        height: 100vh;
        overflow-y: auto;
        z-index: 1030;
        display: flex;
        flex-direction: column;
    }
    /* Bootstrap forces offcanvas transparent above its breakpoint — keep it dark. */
    .admin-sidebar.offcanvas-lg { background-color: #212529 !important; }
    .admin-content { margin-left: 250px; }
}

/* Long regex / urls shouldn't blow out tables. */
code, .pattern { word-break: break-all; }

/* Per-column table filter row. */
.filter-row th { padding: .4rem .5rem; background: #f8f9fa; font-weight: 400; }