@font-face {
    font-family: 'SolaimanLipi';
    src: url('../fonts/SolaimanLipi.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --brand-blue: #01626a;
    --brand-blue-dark: #0f6fa3;
    --brand-red: #d32f2f;
    --brand-green: #2e7d32;
    --band-dark: #131313;
    --text-dark: #222;
    --border-soft: #e3e3e3;
}

html {
    font-size: 17px;
}

body {
    font-family: 'SolaimanLipi', 'Hind Siliguri', 'Noto Sans Bengali', sans-serif;
    background: #ececec;
    color: var(--text-dark);
}

main {
    min-height: 60vh;
}

a { text-decoration: none; color: inherit; }
a:hover { color: var(--brand-blue); }

.container-news { max-width: 1320px; margin: 0 auto; padding: 0 12px; }

.badge:hover {
    color: #e7e7e7;
}

/* ============ Header ============ */
.top-header {
    background: #fff;
    padding: 12px 0 10px;
}

.top-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.site-logo-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-logo .logo-mark {
    width: 52px;
    height: 52px;
    background: var(--brand-blue);
    color: #fff;
    font-weight: 600;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}

.site-logo .logo-name {
    font-size: 1.9rem;
    font-weight: 600;
    color: #093a56;
    line-height: 1.1;
}

.site-logo .logo-domain {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: #888;
    text-transform: uppercase;
}

.date-strip {
    text-align: left;
    font-size: 0.85rem;
    color: #c62828;
    line-height: 1.5;
    font-weight: 500;
}

.date-strip .en-date { color: #444; }

/* Navbar promo slot -- centered in the header row, same position the Bangla
   date/clock strip held before it was removed. A compact horizontal banner,
   not the full-width leaderboard treatment ad_header/ad_footer get below the
   header -- constrained to the row's own ~72px height (logo height + padding). */
.navbar-promo-slot {
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-promo-slot img {
    max-height: 60px;
    width: auto;
    max-width: 100%;
}

/* ---- Advertisement sizing ----------------------------------------------
   Bootstrap's .img-fluid alone (max-width:100%; height:auto) caps an ad's
   *width* but never its height, so a portrait or otherwise wrongly-shaped
   upload scales to the full container width and gets proportionally huge --
   a 2657x3543 banner in a ~1200px-wide slot renders ~1600px tall, i.e. it
   eats the whole screen. These caps bound the other axis too. width/height
   stay auto so the browser still preserves the aspect ratio: it fits the
   image inside *both* limits rather than squashing it.
   Sizes follow the per-placement guidance in AdvertisementForm's image
   help_text (728x90 leaderboard, 300x250 rectangle) with headroom, so a
   correctly-sized ad is never scaled down -- only oversized ones are. */
.promo-banner,
.promo-sidebar {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%;
}

/* Header / Footer / Homepage top / Homepage bottom -- leaderboard slots. */
.promo-banner { max-height: 160px; }

/* Homepage sidebar -- medium-rectangle slot, narrower column so it can be taller. */
.promo-sidebar { max-height: 320px; }

.social-icons {
    display: flex;
    gap: 6px;
}

.social-icons a,
.social-icons button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
    transition: opacity 0.15s;
    border: none;
    padding: 0;
    cursor: pointer;
}

.social-icons a:hover,
.social-icons button:hover { opacity: 0.85; color: #fff; }

.si-facebook { background: #1877f2; }
.si-twitter { background: #1da1f2; }
.si-youtube { background: #ff0000; }
.si-instagram { background: #c13584; }
.si-telegram { background: #229ed9; }
.si-rss { background: #f26522; }
.si-search { background: var(--brand-blue); }

.bi-facebook {
    color: #1877F2;
    font-size: 1.5rem;
}

.bi-twitter-x {
    color: #000000;
    font-size: 1.5rem;
}

.bi-youtube {
    color: #FF0000;
    font-size: 1.7rem;
}

.bi-instagram {
    color: #c13584;
    font-size: 1.5rem;
}

.bi-telegram {
    color: #229ed9;
    font-size: 1.5rem;
}

.bi-rss {
    color: #f26522;
    font-size: 1.5rem;
}

/* Article detail "শেয়ার করুন" (share) button -- a self-contained class rather
   than reusing .social-icons/.si-facebook (a filled-circle style meant for
   white-on-brand-color icons) or letting the bare .bi-facebook rule above
   apply (it colors the glyph brand-blue at 1.5rem, which combined with a
   blue circle background is invisible blue-on-blue). The `i` descendant
   selector below (specificity 0,1,1) beats .bi-facebook's single-class
   selector (0,1,0) regardless of source order, so the glyph reliably renders
   white and correctly sized inside the circle. */
.article-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    transition: opacity 0.15s;
}
.article-share-btn:hover { opacity: 0.85; color: #fff; }
.article-share-btn i { color: #fff; font-size: 0.9rem; }
.article-share-btn-facebook { background: #1877f2; }

/* ============ Nav ============ */
.main-nav {
    background: var(--brand-blue);
    position: sticky;
    top: 0;
    z-index: 150;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.main-nav-inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.main-nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav ul a {
    display: block;
    color: #fff;
    padding: 10px 13px;
    font-weight: 500;
    font-size: 0.95rem;
}

.main-nav ul a:hover, .main-nav ul a.active {
    background: var(--brand-blue-dark);
    color: #fff;
}

/* Nav dropdown for subcategories */
.main-nav .nav-dropdown {
    position: relative;
    display: flex;
    align-items: stretch;
    /* Lets .nav-dropdown-menu (flex-basis: 100%, below) drop to its own full-width
       line when it's in normal flow -- mobile's position: static, see below --
       instead of sitting beside the link+toggle as a third item in the row.
       No effect on desktop, where the menu is position: absolute and out of
       flow entirely, so wrapping there is moot. */
    flex-wrap: wrap;
}

.main-nav .nav-dropdown > a { padding-right: 6px; }

/* Separate from the category link itself (see base.html) so tapping it toggles
   the submenu instead of navigating -- the chevron used to sit inline inside
   the link, which meant mobile's "always show the submenu" was the only option
   without an element of its own to hang open/closed state and a click handler
   off of. */
.nav-dropdown-toggle {
    background: none;
    border: none;
    color: #fff;
    padding: 0 13px 0 4px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible { background: var(--brand-blue-dark); }

.nav-dropdown-toggle i { transition: transform 0.2s ease; }

.nav-dropdown.open .nav-dropdown-toggle i { transform: rotate(180deg); }

.main-nav .nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: var(--brand-blue-dark);
    z-index: 50;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
    flex-direction: column;
    flex-basis: 100%;
}

.main-nav .nav-dropdown:hover .nav-dropdown-menu,
.main-nav .nav-dropdown:focus-within .nav-dropdown-menu,
.main-nav .nav-dropdown.open .nav-dropdown-menu {
    display: flex;
}

.main-nav .nav-dropdown-menu li { width: 100%; }

.main-nav .nav-dropdown-menu a {
    padding: 9px 14px;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.main-nav .nav-dropdown-menu li:last-child a { border-bottom: none; }

/* Slide arrows for the desktop category row (see the media query below) --
   hidden by default/on mobile; JS only adds .show once the row actually
   overflows its available width. */
.nav-scroll-btn { display: none; }

/* Desktop only: keep the category row on one line and let it scroll
   horizontally ("slide") once the categories exceed the available width,
   instead of wrapping onto a second line. Scoped to #mainNavList (not the
   broader ".main-nav ul" selector) so .nav-dropdown-menu -- also a <ul>
   nested inside it -- doesn't inherit the same overflow/nowrap treatment. */
@media (min-width: 769px) {
    .main-nav-inner { justify-content: flex-start; }

    #mainNavList {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        /* overflow-x: auto forces overflow-y to auto too (the CSS overflow
           spec doesn't allow scrolling one axis while the other stays
           "visible") -- explicit here since that's also what would otherwise
           clip .nav-dropdown-menu's position:absolute dropdown, which extends
           below this row. Fixed by having base.html reposition the dropdown
           to position:fixed (escapes this element's clipping entirely) right
           as it opens -- see the "Desktop dropdown" script in base.html. */
        overflow-y: hidden;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #mainNavList::-webkit-scrollbar { display: none; }
    #mainNavList > li { flex-shrink: 0; }
    #mainNavList > li > a { white-space: nowrap; }

    .nav-scroll-btn.show {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        flex-shrink: 0;
        border: none;
        background: var(--brand-blue-dark);
        color: #fff;
        cursor: pointer;
    }
    .nav-scroll-btn.show:hover { background: rgba(0, 0, 0, 0.2); }
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    padding: 10px 4px;
    cursor: pointer;
}

.home-icon {
    font-size: 1.5rem !important;
    padding: 4px 8px !important;
}

/* Mobile-only row of social/archive icons inside the collapsible nav menu (see
   templates/base.html and the .top-header .social-icons a { display: none; }
   mobile rule below) -- hidden by default since desktop keeps these icons in
   the header. */
.nav-social-row { display: none; }

/* ============ Search overlay (Apple-style: blurred backdrop + centered panel) ============ */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 0;
}

.search-overlay.open { display: flex; }

.search-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 20, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.search-overlay.open .search-overlay-backdrop { opacity: 1; }

.search-overlay-panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    padding: 6px;
    transform: translateY(-16px) scale(0.97);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.search-overlay.open .search-overlay-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.search-overlay-close {
    position: absolute;
    top: -46px;
    right: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.search-overlay-close:hover { background: rgba(255, 255, 255, 0.28); }

.search-overlay-form {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
}

.search-overlay-form i { font-size: 1.3rem; color: #999; }

.search-overlay-form input {
    flex-grow: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 1.35rem;
    color: var(--text-dark);
}

/* ============ Breaking ticker ============ */
.breaking-bar {
    background: #fff;
    color: #fff;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.breaking-bar .label {
    background: var(--brand-red);
    padding: 8px 18px;
    font-weight: 600;
    flex-shrink: 0;
    position: relative;
}

.breaking-bar .ticker-viewport {
    overflow: hidden;
    flex-grow: 1;
    white-space: nowrap;
}

.breaking-bar .ticker-track {
    display: inline-block;
    padding-left: 100%;
    animation: ticker-scroll 40s linear infinite;
}

.breaking-bar .ticker-track a {
    color: #000;
    margin-right: 48px;
    font-size: 0.93rem;
}

.breaking-bar .ticker-track a::before {
    content: '\25CF';
    color: var(--brand-red);
    margin-right: 8px;
    font-size: 0.6rem;
    vertical-align: 2px;
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* ============ Photo slider band ============ */
.slider-band {
    padding: 16px 0;
}

.slider-card {
    position: relative;
    display: block;
    overflow: hidden;
}

.slider-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.slider-card .caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.92));
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 26px 10px 8px;
    line-height: 1.35;
}

.slider-card:hover .caption { color: #ffd54f; }

.slider-band .carousel-control-prev,
.slider-band .carousel-control-next {
    width: 36px;
    background: rgba(0,0,0,0.55);
    opacity: 1;
}

/* ============ Section headers ============ */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.section-head .title {
    background: var(--brand-blue);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    line-height: normal;
    margin: 0;
    padding: 6px 16px 6px 12px;
    position: relative;
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

.section-head .title i { margin-right: 6px; }

.section-head .all-link {
    font-size: 0.82rem;
    color: #777;
    font-weight: 500;
}

.section-head .all-link:hover { color: var(--brand-blue); }

.section-head.on-dark .all-link { color: #bbb; }

/* ============ White band wrapper ============ */
.band { padding: 22px 0; }
.band-white { background: #fff; }
.band-gray { background: #ececec; }
.band-dark { background: var(--band-dark); color: #eee; }

/* ============ Top news grid ============ */
.top-grid-card {
    background: #fff;
    border: 1px solid var(--border-soft);
    height: 100%;
    display: block;
}

.top-grid-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.top-grid-card .body { padding: 10px 12px 12px; }

.top-grid-card .headline {
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--text-dark);
    line-height: 1.4;
    display: block;
}

.top-grid-card .headline:hover { color: var(--brand-blue); }

.top-grid-card .excerpt {
    font-size: 0.82rem;
    color: #666;
    margin: 6px 0 0;
    line-height: 1.5;
}

.top-grid-card .more {
    color: var(--brand-blue);
    font-size: 0.8rem;
    font-weight: 500;
}

/* ============ Sidebar ============ */
.sidebar-box {
    background: #fff;
    border: 1px solid var(--border-soft);
    margin-bottom: 18px;
}

.sidebar-tabs .nav-tabs { border-bottom: 2px solid var(--brand-blue); }

.sidebar-tabs .nav-link {
    border: none;
    border-radius: 0;
    color: #444;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 9px 18px;
}

.sidebar-tabs .nav-link.active {
    background: var(--brand-blue);
    color: #fff;
}

.sidebar-list { padding: 8px 12px; }

.sidebar-list .item {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f0;
}

.sidebar-list .item:last-child { border-bottom: none; }

.sidebar-list .item img {
    width: 74px;
    height: 54px;
    object-fit: cover;
    flex-shrink: 0;
}

.sidebar-list .item .t {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-dark);
}

.sidebar-list .item .t:hover { color: var(--brand-blue); }

.sidebar-list .item .d {
    font-size: 0.72rem;
    color: #999;
    margin-top: 3px;
}

.archive-box {
    background: var(--brand-blue);
    padding: 14px;
    color: #fff;
}

.archive-box .head { font-weight: 600; margin-bottom: 8px; font-size: 0.92rem; }

.archive-box form { display: flex; gap: 6px; }

.archive-box input[type="date"] {
    flex-grow: 1;
    border: none;
    padding: 6px 8px;
    font-size: 0.85rem;
}

.archive-box button {
    background: #093a56;
    color: #fff;
    border: none;
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: pointer;
}

/* ============ Side pair sections (জাতীয়/আন্তর্জাতিক) ============ */
.side-pair {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-top: 3px solid var(--brand-green);
    padding: 14px;
    height: 100%;
}

.side-pair.accent-blue { border-top-color: var(--brand-blue); }

.side-pair .lead-story img {
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.side-pair .lead-story .headline {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 8px;
    display: block;
    color: var(--text-dark);
    line-height: 1.4;
}

.side-pair .lead-story .headline:hover { color: var(--brand-blue); }

.side-pair .lead-story .excerpt {
    font-size: 0.82rem;
    color: #666;
    margin: 5px 0 0;
    line-height: 1.5;
}

.small-list { margin-top: 10px; }

.small-list .item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f1f1;
}

.small-list .item:last-child { border-bottom: none; }

.small-list .item img {
    width: 84px;
    height: 58px;
    object-fit: cover;
    flex-shrink: 0;
}

.small-list .item .t {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.4;
}

.small-list .item .t:hover { color: var(--brand-blue); }

/* Dark variants */
.on-dark .small-list .item,
.small-list.on-dark .item { border-bottom-color: #2c2c2c; }
.on-dark .small-list .item .t,
.small-list.on-dark .item .t { color: #e8e8e8; }
.on-dark .small-list .item .t:hover,
.small-list.on-dark .item .t:hover { color: #ffd54f; }

/* ============ Triple sections ============ */
.triple-block {
    background: #fff;
    border: 1px solid var(--border-soft);
    padding: 14px;
    height: 100%;
}

.triple-block .lead-story img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.triple-block .lead-story .headline {
    font-size: 0.98rem;
    font-weight: 600;
    margin-top: 8px;
    display: block;
    color: var(--text-dark);
    line-height: 1.4;
}

.triple-block .lead-story .headline:hover { color: var(--brand-blue); }

/* ============ Dark feature band (টেক) ============ */
.dark-feature .feature-lead img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.dark-feature .feature-lead .headline {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 600;
    display: block;
    margin-top: 10px;
    line-height: 1.4;
}

.dark-feature .feature-lead .headline:hover { color: #ffd54f; }

.dark-feature .feature-lead .excerpt {
    color: #aaa;
    font-size: 0.88rem;
    margin-top: 6px;
}

/* ============ সারাদেশ band ============ */
.division-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--brand-blue);
    padding: 6px;
}

.division-tabs a {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 5px 12px;
}

.division-tabs a:hover { background: var(--brand-blue-dark); color: #fff; }

.deshjure-card {
    background: #fff;
    border: 1px solid var(--border-soft);
    display: block;
    height: 100%;
}

.deshjure-card img { width: 100%; height: 110px; object-fit: cover; }

.deshjure-card .t {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dark);
    padding: 8px 10px 10px;
    display: block;
    line-height: 1.4;
}

.deshjure-card:hover .t { color: var(--brand-blue); }

.map-panel {
    background: #fff;
    border: 1px solid var(--border-soft);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.map-panel .head {
    background: var(--brand-blue);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 7px 12px;
}

.map-panel .map-wrap { padding: 12px; flex-grow: 1; display: flex; align-items: center; justify-content: center; }

.bd-map-svg { width: 100%; max-width: 300px; height: auto; }

.bd-map-svg .division-shape {
    fill: #1e9e4a;
    stroke: #fff;
    stroke-width: 2;
    transition: fill 0.15s;
    cursor: pointer;
}

.bd-map-svg a:hover .division-shape { fill: #ffb300; }

.bd-map-svg .division-label {
    fill: #fff;
    font-size: 13px;
    font-weight: 500;
    text-anchor: middle;
    pointer-events: none;
}

/* ============ Gallery dark block + columns ============ */
.gallery-dark {
    background: var(--band-dark);
    padding: 14px;
    height: 100%;
}

.gallery-dark .g-lead img { width: 100%; height: 210px; object-fit: cover; }

.gallery-dark .g-lead .t {
    color: #eee;
    font-weight: 600;
    display: block;
    margin-top: 8px;
    font-size: 1rem;
}

.gallery-dark .g-lead .t:hover { color: #ffd54f; }

.gallery-thumb { display: block; }
.gallery-thumb img { width: 100%; height: 74px; object-fit: cover; }

.column-block {
    background: #fff;
    border: 1px solid var(--border-soft);
    padding: 14px;
    height: 100%;
}

/* ============ Video band ============ */
.video-band iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
}

.video-band .v-title {
    color: #ddd;
    font-size: 0.88rem;
    font-weight: 500;
    margin-top: 8px;
    line-height: 1.4;
}

/* ============ Photo band ============ */
/* .photo-card is a <button> (opens the lightbox modal), not an <a> -- reset
   the default button chrome so it still lays out and looks identical. */
.photo-card {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
}
.photo-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.photo-card .p-title {
    color: #ddd;
    font-size: 0.82rem;
    font-weight: 500;
    margin-top: 8px;
    line-height: 1.4;
}

/* Video/photo band carousel controls sit on an already-dark background, unlike
   .slider-band's dark rgba(0,0,0,...) overlay (meant for light photo slides) --
   a light overlay instead so the arrows stay visible against .band-dark. */
.video-band .carousel-control-prev,
.video-band .carousel-control-next,
.photo-band .carousel-control-prev,
.photo-band .carousel-control-next {
    width: 32px;
    background: rgba(255, 255, 255, 0.12);
    opacity: 1;
}
.video-band .carousel-control-prev:hover,
.video-band .carousel-control-next:hover,
.photo-band .carousel-control-prev:hover,
.photo-band .carousel-control-next:hover {
    background: rgba(255, 255, 255, 0.24);
}

/* ============ Footer ============ */
.site-footer {
    background: #fff;
    color: #000;
    padding-top: 30px;
    margin-top: 26px;
}

.site-footer h6 {
    color: #000;
    font-weight: 600;
    margin-bottom: 14px;
    font-size: 0.95rem;
}

.site-footer ul { list-style: none; padding: 0; margin: 0; }

.site-footer ul li { padding: 4px 0; }

.site-footer ul a { color: #000; font-size: 0.88rem; }

.site-footer ul a:hover { color: var(--brand-blue); }

.site-footer .about-text { font-size: 0.85rem; line-height: 1.7; }

.site-footer .contact-line { font-size: 0.85rem; padding: 3px 0; }

.footer-bottom {
    border-top: 1px solid #2a2a2a;
    margin-top: 22px;
    padding: 12px 0;
    font-size: 0.8rem;
    text-align: center;
    color: #888;
}

.footer-bottom a {
    color: var(--brand-blue);
}

/* ============ Back to top ============ */
#backToTop {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--brand-blue);
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
    z-index: 200;
}
#backToTop:hover { background: var(--brand-blue-dark); }
#backToTop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ============ Error pages (404/500/403/400) ============ */
.error-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 16px;
}

.error-page-inner {
    max-width: 560px;
    width: 100%;
    text-align: center;
}

.error-icon {
    width: 92px;
    height: 92px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #eaf5fc;
    color: var(--brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
}

.error-code {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--brand-blue);
    letter-spacing: 0.02em;
}

.error-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 10px 0 12px;
}

.error-desc {
    font-size: 1rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 28px;
}

.error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.error-actions .btn-error-primary,
.error-actions .btn-error-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.error-actions .btn-error-primary {
    background: var(--brand-blue);
    color: #fff;
}

.error-actions .btn-error-primary:hover { background: var(--brand-blue-dark); color: #fff; }

.error-actions .btn-error-secondary {
    background: #fff;
    color: var(--text-dark);
    border: 1px solid var(--border-soft);
}

.error-actions .btn-error-secondary:hover { border-color: var(--brand-blue); color: var(--brand-blue); }

.error-search {
    max-width: 380px;
    margin: 0 auto 30px;
    display: flex;
}

.error-search input {
    flex-grow: 1;
    border: 1px solid var(--border-soft);
    border-right: none;
    padding: 10px 14px;
    font-size: 0.92rem;
    outline: none;
}

.error-search input:focus { border-color: var(--brand-blue); }

.error-search button {
    background: var(--brand-red);
    border: none;
    color: #fff;
    padding: 0 18px;
    cursor: pointer;
}

/* Standalone shell for 500.html, which Django renders without request
   context (no site_settings/nav_categories) -- can't extend base.html. */
.error-standalone-header {
    background: #fff;
    border-bottom: 1px solid var(--border-soft);
    padding: 14px 0;
}

.error-standalone-header .container-news {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 480px) {
    .error-code { font-size: 3.4rem; }
    .error-icon { width: 76px; height: 76px; font-size: 2.1rem; }
    .error-title { font-size: 1.2rem; }
}

/* ============ Inner pages ============ */
.page-panel {
    background: #fff;
    border: 1px solid var(--border-soft);
    padding: 18px;
}

.inner-card {
    background: #fff;
    border: 1px solid var(--border-soft);
    height: 100%;
    display: block;
}

.inner-card img { width: 100%; height: 150px; object-fit: cover; }

.inner-card .t {
    display: block;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-dark);
    line-height: 1.4;
}

.inner-card .d { padding: 0 12px 10px; font-size: 0.75rem; color: #999; }

.inner-card:hover .t { color: var(--brand-blue); }

.article-content { line-height: 1.9; font-size: 1.02rem; }
.article-content img { max-width: 100%; height: auto; }

/* CKEditor5 output has no built-in paragraph/heading margins, so it falls
   back to the browser default (~1em top+bottom on every <p>), which reads
   as huge gaps between lines. Tighten them here. */
.article-content p { margin: 0 0 0.9em; }
.article-content p:last-child { margin-bottom: 0; }
.article-content h1, .article-content h2, .article-content h3,
.article-content h4, .article-content h5, .article-content h6 {
    margin: 1.1em 0 0.5em;
    line-height: 1.4;
}
.article-content h1:first-child, .article-content h2:first-child, .article-content h3:first-child,
.article-content h4:first-child, .article-content h5:first-child, .article-content h6:first-child {
    margin-top: 0;
}
.article-content ul, .article-content ol { margin: 0 0 0.9em; padding-left: 1.4em; }
.article-content blockquote { margin: 0 0 0.9em; }

/* Pagination */
.pagination .page-link { color: var(--brand-blue); border-radius: 0; }
.pagination .page-item.disabled .page-link { color: #888; }

@media (max-width: 768px) {
    html { font-size: 15px; }

    /* Header: smaller logo mark, hide the date strip (a clock + Bangla calendar
       isn't worth the vertical space on a phone) and the navbar ad slot. Only
       the search icon stays beside the logo -- Facebook/Twitter/YouTube/
       Instagram/Archive move into the collapsible nav menu instead
       (.nav-social-row below), since cramming 6 tiny icon buttons beside the
       logo left too little room on narrow screens. */
    .date-strip, .navbar-promo-slot { display: none; }

    /* Ads: tighter height caps on a phone, where vertical space is scarcest --
       a banner that's fine at 160px on desktop otherwise pushes real content
       most of the way off a small screen. */
    .promo-banner { max-height: 90px; }
    .promo-sidebar { max-height: 220px; }
    /* Sticky so the logo/hamburger/search row stays reachable while scrolling.
       position:sticky goes on the <header> element itself, not .top-header --
       .top-header is exactly as tall as its own content, so as a sticky element's
       *containing block* it gives zero "runway" to actually stick against while
       scrolling (the whole <header> would just scroll away with it). <header> is
       a direct child of <body> (full page height), same as .main-nav below it,
       which is why that one already stuck correctly on its own.
       .main-nav (the category bar) is already sitewide position:sticky; top:0 --
       its mobile-only top offset below is set to this bar's own height so the
       two stack directly on top of each other instead of overlapping. */
    header {
        position: sticky;
        top: 0;
        z-index: 160;
    }
    .top-header { padding: 10px 0; }
    .main-nav { top: 72px; }
    .site-logo .logo-mark { width: 42px; height: 42px; font-size: 1.1rem; }
    .site-logo .logo-name { font-size: 1.3rem; }
    /* Scoped to the header specifically -- .social-icons is reused unscoped by the
       footer's own icon row too (base.html), and a bare ".social-icons a" here
       was unintentionally hiding those on mobile as well. */
    .top-header .social-icons a { display: none; }
    .top-header .social-icons .si-search { width: 30px; height: 30px; font-size: 0.85rem; }

    /* Three-column mobile header: hamburger (nav-toggle, moved here from the
       .main-nav bar below) on the left, logo centered, search on the right.
       .site-logo-block gets flex:1 so it centers within the space left over
       between the two fixed-size icon buttons, regardless of their exact
       widths -- align-items (not justify-content) since it's a column-direction
       flex container here, and .date-strip is hidden on mobile anyway. */
    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--brand-blue);
        color: #fff;
        font-size: 1rem;
        flex-shrink: 0;
        padding: 0;
    }
    .top-header-inner .site-logo-block { flex: 1; align-items: center; }

    /* Nav: collapse behind the hamburger toggle (now in the header, beside the
       logo -- see .nav-toggle above) instead of letting the category list wrap
       across many lines, which on a narrow, sticky nav would eat most of the
       viewport permanently while scrolling. */
    .main-nav-inner {
        flex-wrap: wrap;
        align-items: center;
        padding: 4px 0;
    }
    .main-nav ul {
        display: none;
        flex-basis: 100%;
        width: 100%;
    }
    /* #mainNavList specifically, not a generic "ul" -- .nav-dropdown-menu is
       also a <ul> nested inside it, and a generic descendant selector here
       would out-specificity .nav-dropdown-menu's own display:none (extra type
       selector = higher specificity than the 2-class rule that hides it),
       forcing every submenu open the instant the hamburger menu opens
       regardless of its own .open state. */
    .main-nav-inner.nav-open #mainNavList {
        display: flex;
    }
    #mainNavList {
        flex-direction: column;
        /* .main-nav ul's base rule sets flex-wrap: wrap for desktop's horizontal
           category row -- on a flex-direction:column container that's still in
           effect unless reset here, so once the column's content hit max-height
           it started a new column to the *right* instead of just overflowing
           vertically, tripling #mainNavList's scrollWidth and making the open
           mobile menu horizontally scrollable (the reported bug). nowrap forces
           a single column that overflow-y can scroll normally. */
        flex-wrap: nowrap;
        max-height: 70vh;
        overflow-y: auto;
        overflow-x: hidden;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
    .main-nav ul li { width: 100%; }
    .main-nav ul a { padding: 11px 6px; font-size: 0.95rem; }

    /* Social/archive icons row inside the open mobile menu -- higher specificity
       than ".main-nav ul a" above so these render as circular icon buttons
       instead of inheriting the plain list-link padding/font-size. Last item in
       #mainNavList (see base.html), below the category list -- border-top
       separates it from the list above it. */
    .nav-social-row {
        display: flex;
        justify-content: center;
        gap: 12px;
        padding: 14px 6px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
    .main-nav .nav-social-row a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        font-size: 0.95rem;
    }
    .main-nav .nav-social-row a:hover { background: rgba(255, 255, 255, 0.24); }

    /* Subcategory dropdowns: tapping .nav-dropdown-toggle adds/removes .open
       (see base.html) instead -- collapsed by default, same as every other
       item, rather than always rendering every division/subcategory list
       expanded inline. Desktop's :hover/:focus-within reveal is explicitly
       switched off at this breakpoint (not just "doesn't apply on touch" --
       a mouse-driven narrow viewport, a hybrid touch+pointer device, or a
       resized desktop browser window all still fire real :hover events), so
       .open via a tap is the only way to reveal it on mobile.
       :not(.open) matters here, not just style: the toggle button is a
       descendant of .nav-dropdown, so clicking it (mouse moves onto the
       button first) leaves .nav-dropdown:hover briefly true too -- without
       :not(.open) this rule and the base .open-reveal rule below have equal
       specificity, and this one (declared later) would win and defeat the
       very click it's supposed to yield to. Excluding .open from the
       selector means this rule simply doesn't match once .open is set, so
       there's nothing left to conflict with it. */
    .main-nav .nav-dropdown:hover:not(.open) .nav-dropdown-menu,
    .main-nav .nav-dropdown:focus-within:not(.open) .nav-dropdown-menu {
        display: none;
    }
    .main-nav .nav-dropdown-menu {
        position: static;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.12);
    }
    .main-nav .nav-dropdown-menu a { padding-left: 26px; font-size: 0.88rem; }
    /* Comfortably large tap target for the collapse/expand control. */
    .nav-dropdown-toggle { padding: 0 16px; min-width: 44px; justify-content: center; }

    /* Search overlay: shift the panel up a bit and shrink the input so the
       mobile keyboard doesn't push it off-screen. */
    .search-overlay { padding-top: 8vh; }
    .search-overlay-form input { font-size: 1.1rem; }

    /* Bands: shrink the tallest hero-style images so a phone isn't mostly
       photo before reaching any text. */
    .dark-feature .feature-lead img { height: 180px; }
    .dark-feature .feature-lead .headline { font-size: 1.1rem; }
    .side-pair .lead-story img { height: 160px; }
    .gallery-dark .g-lead img { height: 170px; }
    .slider-card img { height: 160px; }

    /* Footer columns already stack via Bootstrap's col-md-4; just tighten
       the top padding since the nav/header above are shorter now too, and
       leave room so the fixed back-to-top button doesn't sit on the text. */
    .site-footer { padding-top: 22px; }
    .footer-bottom { padding-bottom: 16px; }
}

@media (max-width: 480px) {
    .site-logo .logo-name { font-size: 1.1rem; }
    .top-grid-card img,
    .inner-card img { height: 120px; }
    .article-content { font-size: 0.96rem; }
}