@charset "utf-8";
/* ============================================================
   NPL World News — Shared Widget Styling
   Covers: tabnews.php (nav-tabs + tab-news.php items),
   tab-news-content.php, topnews.php — all used inside
   rightsidebar.php, which appears on the homepage, category
   listing, and article pages.
   Reuses --npl-navy / --npl-orange / --npl-line / --npl-bg-soft /
   --npl-ink / --npl-grey from header-redesign.css — fallback hex
   values included so this also works standalone.
   Load this SITE-WIDE via AppAsset (same as header-redesign.css),
   not per-view — see setup notes at the bottom.
   ============================================================ */

/* ---------- Shared "cat-box" section heading (used by several widgets) ---------- */
.cat-box{
    margin-bottom: 14px;
}
.cat-box .cat-name{
    display: inline-block;
    font: 700 16px 'Mukta', sans-serif;
    color: var(--npl-ink, #242424);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--npl-orange, #eb8d02);
}

/* ---------- Sidebar tabs (tabnews.php) ---------- */
.tab .nav-tabs{
    display: flex;
    border-bottom: 1px solid var(--npl-line, #e6e6e6);
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.tab .nav-tabs > li{
    margin-bottom: -1px;
}
.tab .nav-tabs > li > a{
    display: block;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: var(--npl-grey, #5f5f5f);
    font: 700 14px 'Mukta', sans-serif;
    padding: 10px 18px;
    text-decoration: none;
}
.tab .nav-tabs > li > a:hover,
.tab .nav-tabs > li > a:focus{
    background: transparent;
    border-color: transparent;
    color: var(--npl-navy, #1c1677);
}
.tab .nav-tabs > li.active > a,
.tab .nav-tabs > li.active > a:hover,
.tab .nav-tabs > li.active > a:focus{
    background: transparent;
    border: 0;
    border-bottom: 3px solid var(--npl-orange, #eb8d02);
    color: var(--npl-navy, #1c1677);
}

/* ---------- Tab news items (tab-news.php, rendered inside the tabs) ---------- */
.tab-news-content{
    padding: 10px 0;
    border-bottom: 1px solid var(--npl-line, #e6e6e6);
}
.tab-news-content:last-child{
    border-bottom: 0;
}
.tab-news-content .img-zoom-effect{
    display: flex;
    align-items: center;
    gap: 12px;
}
.tab-new-img{
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    transition: transform .25s ease;
}
.tab-news-content:hover .tab-new-img{
    transform: scale(1.05);
}
.tab-news-title{
    font: 600 13.5px/1.45 'Mukta', sans-serif;
    color: var(--npl-ink, #242424);
    text-decoration: none;
}
.tab-news-title:hover{
    color: var(--npl-navy, #1c1677);
}

/* ---------- Trending list (tab-news-content.php) ---------- */
.newsContainerThree{
    margin-top: 2px;
}
.trendingNewsSection{
    padding: 10px 0;
    border-bottom: 1px solid var(--npl-line, #e6e6e6);
}
.trendingNewsSection:last-child{
    border-bottom: 0;
}
.trendingNewsHeading{
    font: 600 13.5px/1.55 'Mukta', sans-serif;
    color: var(--npl-ink, #242424);
    text-decoration: none;
}
.trendingNewsHeading:hover{
    color: var(--npl-navy, #1c1677);
}

/* ---------- Top news grid (topnews.php) ---------- */
.newsContainerOne.topNews{
    margin-top: 2px;
}
.topNewsSection{
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--npl-line, #e6e6e6);
}
.topNewsSection:last-child{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.topNewsImg{
    width: 100%;
    border-radius: 8px;
    display: block;
    margin-bottom: 10px;
}
.topNewsHeading{
    font: 600 14px/1.45 'Mukta', sans-serif;
    color: var(--npl-ink, #242424);
    text-decoration: none;
}
.topNewsHeading:hover{
    color: var(--npl-navy, #1c1677);
}

/* ============================================================
   SETUP NOTES (delete once applied)
   ------------------------------------------------------------
   1. Save at web/css/widgets-redesign.css and add it to
      AppAsset.php's css array (site-wide, same as
      header-redesign.css / footer-redesign.css) — these widgets
      render inside rightsidebar.php, which is used on the
      homepage, category listing, and article pages, not just one
      view.
   ============================================================ */