/* ============================================================
   THEME 2 — "Magazine"
   A distinct second look for the public site, selected from
   Admin ▸ থিম সেটিংস. Scoped entirely under body.theme-2 so it
   never affects Theme 1. Loaded after the page's inline styles,
   so it overrides them (with !important where inline specificity
   or inline style="" attributes require it).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Tiro+Bangla:ital@0;1&family=Baloo+Da+2:wght@500;600;700;800&display=swap');

:root {
    --t2-bg:      #f7f2e7;   /* warm cream newsprint */
    --t2-surface: #fffdf8;
    --t2-ink:     #201a14;
    --t2-muted:   #6a5f50;
    --t2-brand:   #b8432e;   /* magazine red */
    --t2-brand-d: #8f2f1e;
    --t2-accent:  #1f6f5c;   /* deep green accent */
    --t2-line:    #e2d8c4;
}

/* ---- Base ---- */
body.theme-2 {
    background: var(--t2-bg) !important;
    color: var(--t2-ink);
    font-family: 'Tiro Bangla', 'SolaimanLipi', 'Noto Serif Bengali', serif !important;
    font-size: 18px;
    line-height: 1.75;
}
body.theme-2 h1, body.theme-2 h2, body.theme-2 h3, body.theme-2 h4,
body.theme-2 .cat-title, body.theme-2 .section-title,
body.theme-2 .nav-link-element {
    font-family: 'Baloo Da 2', 'SolaimanLipi', sans-serif !important;
    letter-spacing: .2px;
}

/* Larger, punchier headlines everywhere */
body.theme-2 h1 { font-size: 2.1rem !important; line-height: 1.3 !important; }
body.theme-2 h2 { font-size: 1.55rem !important; }
body.theme-2 h3 { font-size: 1.2rem !important; }
body.theme-2 .latest-news-headline,
body.theme-2 .grid-card h3,
body.theme-2 .news-item h3,
body.theme-2 .center-news-card h3 { font-size: 1.15rem !important; line-height: 1.45 !important; }

/* Links pick up the brand red on hover */
body.theme-2 a:hover { color: var(--t2-brand); }

/* ---- Top navigation ---- */
body.theme-2 .main-navigation-section,
body.theme-2 .nav-content-container {
    background: var(--t2-brand) !important;
    border: none !important;
}
body.theme-2 .primary-nav-menu .nav-link-element,
body.theme-2 .nav-link-element {
    color: #fff5ee !important;
    font-weight: 600;
    font-size: 1rem !important;
}
body.theme-2 .nav-link-element:hover { color: #ffd9a0 !important; }
body.theme-2 .nav-menu-item { border: none !important; }

/* ---- HERO: move the slider (center column) to the LEFT ---- */
body.theme-2 .hero-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 22px !important;
    align-items: flex-start;
}
body.theme-2 .hero-center { order: 1; flex: 1 1 58%; min-width: 0; }
body.theme-2 .hero-left   { order: 2; flex: 1 1 18%; min-width: 0; }
body.theme-2 .hero-right  { order: 3; flex: 1 1 20%; min-width: 0; }

/* Slider gets a bold framed magazine look */
body.theme-2 .hero-slider,
body.theme-2 .hero-center {
    border-radius: 10px;
    overflow: hidden;
}
body.theme-2 .hero-slider { border: 3px solid var(--t2-brand); box-shadow: 0 10px 30px rgba(0,0,0,.15); }

/* ---- Cards / surfaces ---- */
body.theme-2 .breaking-news-box,
body.theme-2 .right-news-list,
body.theme-2 .grid-card,
body.theme-2 .center-news-card,
body.theme-2 .news-item,
body.theme-2 .latest-news-card,
body.theme-2 .cat-section {
    background: var(--t2-surface);
    border: 1px solid var(--t2-line) !important;
    border-radius: 10px;
}

/* ---- Section titles: magazine underline ---- */
body.theme-2 .cat-title,
body.theme-2 .section-title,
body.theme-2 .right-section-title,
body.theme-2 .latest-news-header h2 {
    color: var(--t2-brand) !important;
    border-bottom: 3px solid var(--t2-brand) !important;
    display: inline-block;
    padding-bottom: 4px;
    font-size: 1.4rem !important;
}

/* ============================================================
   THREE NEWS PER ROW — the defining Theme 2 grid.
   Applies to the home category sections and the article page's
   "latest news" grid.
   ============================================================ */
body.theme-2 .center-news-grid,
body.theme-2 .latest-news-grid,
body.theme-2 .cat-layout-1,
body.theme-2 .cat-layout-2,
body.theme-2 .cat-layout-3,
body.theme-2 .cat-layout-4,
body.theme-2 .cat-layout-5,
body.theme-2 .cat-layout-6 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

body.theme-2 .latest-news-card { overflow: hidden; }
body.theme-2 .latest-news-card img,
body.theme-2 .grid-card img,
body.theme-2 .center-news-card img {
    border-radius: 8px 8px 0 0;
}

/* ---- Category page hero -> magazine grid ---- */
body.theme-2 .hero-section .hero-grid { display: flex !important; }

/* ---- Footer ---- */
body.theme-2 .footer-wrapper {
    background: #211a12 !important;
    color: #e9dcc6;
}
body.theme-2 .editorial-board-footer h4 { color: #ffd9a0; }

/* ---- Ads keep their neutral frame ---- */
body.theme-2 .site-ad-slot { background: var(--t2-surface); border: 1px dashed var(--t2-line); padding: 8px; }

/* ---- Division filter chips adopt the warm palette ---- */
body.theme-2 .division-chip.active { background: var(--t2-brand); border-color: var(--t2-brand); }
body.theme-2 .division-filter-label { color: var(--t2-brand); }

/* ---- Show-more button ---- */
body.theme-2 .load-more-latest-btn { background: var(--t2-brand) !important; }

/* ---- Responsive: collapse the 3-col grid + stacked hero ---- */
@media (max-width: 992px) {
    body.theme-2 .center-news-grid,
    body.theme-2 .latest-news-grid,
    body.theme-2 .cat-layout-1,
    body.theme-2 .cat-layout-2,
    body.theme-2 .cat-layout-3,
    body.theme-2 .cat-layout-4,
    body.theme-2 .cat-layout-5,
    body.theme-2 .cat-layout-6 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    body.theme-2 .hero-center { flex-basis: 100%; }
    body.theme-2 .hero-left, body.theme-2 .hero-right { flex-basis: 48%; }
}
@media (max-width: 600px) {
    body.theme-2 { font-size: 17px; }
    body.theme-2 .center-news-grid,
    body.theme-2 .latest-news-grid,
    body.theme-2 .cat-layout-1,
    body.theme-2 .cat-layout-2,
    body.theme-2 .cat-layout-3,
    body.theme-2 .cat-layout-4,
    body.theme-2 .cat-layout-5,
    body.theme-2 .cat-layout-6 { grid-template-columns: 1fr !important; }
    body.theme-2 .hero-left, body.theme-2 .hero-right { flex-basis: 100%; }
}