/*
Theme Name: NewsPortal Live
Theme URI: https://example.com/newsportal-live
Author: Custom Build
Author URI: https://example.com
Description: A fast, mega-menu driven news portal theme built for regional/breaking-news publishers. Ticker, category rails, trending sidebar and a mobile-first responsive layout inspired by modern Malayalam/Gulf news portals.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: newsportal
Tags: news, blog, one-column, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, responsive-layout
*/

/* ==========================================================================
   0. TOKENS
   ========================================================================== */
:root{
  /* Brand */
  --np-red: #E11D2A;
  --np-red-dark: #B7141F;
  --np-red-tint: #FDEBEC;
  --np-ink: #15181C;
  --np-ink-soft: #43484F;
  --np-muted: #767C86;
  --np-line: #E6E8EC;
  --np-bg: #FFFFFF;
  --np-bg-soft: #F6F7F9;
  --np-gold: #C8932A;
  --np-cream: #FCF1DE;
  --np-cream-line: #F3E4C4;

  /* Type */
  --np-font-display: 'Poppins', 'Noto Sans Malayalam', 'Segoe UI', sans-serif;
  --np-font-body: 'Inter', 'Noto Sans Malayalam', 'Segoe UI', sans-serif;

  /* Layout */
  --np-max: 1280px;
  --np-radius: 4px;
  --np-gap: 24px;
}

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--np-font-body);
  color: var(--np-ink);
  background: var(--np-bg);
  font-size:15px;
  line-height:1.55;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ color: var(--np-red); }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5{ font-family: var(--np-font-display); margin:0 0 .5em; line-height:1.25; font-weight:600; }
button{ font-family:inherit; cursor:pointer; }
input, button{ font-size:15px; }
:focus-visible{ outline:2px solid var(--np-red); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.np-container{ max-width: var(--np-max); margin:0 auto; padding:0 20px; }
.np-visually-hidden{ position:absolute !important; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--np-red); color:#fff; padding:10px 16px; z-index:9999; }
.skip-link:focus{ left:0; }

/* eyebrow / section label */
.np-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--np-font-display);
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--np-red);
}
.np-eyebrow::before{ content:""; width:12px; height:2px; background:var(--np-red); display:inline-block; }

/* ==========================================================================
   2. TOP UTILITY BAR
   ========================================================================== */
.np-topbar{
  background: var(--np-ink);
  color:#cfd2d8;
  font-size:12px;
}
.np-topbar .np-container{
  display:flex; align-items:center; justify-content:space-between;
  height:34px;
}
.np-topbar-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; margin-right:4px; color:#cfd2d8; opacity:.85;
}
.np-topbar-social a:hover{ color:#fff; opacity:1; }
.np-topbar-social svg{ width:14px; height:14px; fill:currentColor; }
.np-topbar-apps{ display:flex; align-items:center; gap:10px; }
.np-topbar-apps span{ color:#8b909a; }
.np-topbar-apps a{ opacity:.9; font-weight:500; }
.np-topbar-date{ color:#8b909a; }

/* ==========================================================================
   3. MASTHEAD
   ========================================================================== */
.np-masthead{
  padding:18px 0;
  border-bottom:1px solid var(--np-line);
}
.np-masthead .np-container{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.np-logo{ font-family:var(--np-font-display); font-weight:800; font-size:28px; letter-spacing:-.02em; }
.np-logo img{ max-height:52px; width:auto; }
.np-logo a{ display:flex; align-items:center; gap:2px; }
.np-logo .np-logo-accent{ color:var(--np-red); }

.np-masthead-actions{ display:flex; align-items:center; gap:14px; }
.np-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--np-line);
  background:transparent; color:var(--np-ink);
}
.np-icon-btn:hover{ border-color:var(--np-red); color:var(--np-red); }
.np-icon-btn svg{ width:17px; height:17px; }

.np-livetv-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--np-red); color:#fff; font-weight:700; font-size:13px;
  padding:9px 16px; border-radius:999px; letter-spacing:.02em;
}
.np-livetv-btn:hover{ background:var(--np-red-dark); color:#fff; }
.np-live-dot{
  width:8px; height:8px; border-radius:50%; background:#fff;
  animation: np-pulse 1.4s infinite;
}
@keyframes np-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.7); }
  70%{ box-shadow:0 0 0 6px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}

.np-menu-toggle{
  display:none; background:none; border:none; padding:6px; color:var(--np-ink);
}
.np-menu-toggle svg{ width:26px; height:26px; }

/* ==========================================================================
   4. MEGA MENU NAVIGATION
   ========================================================================== */
.np-nav-wrap{
  background: var(--np-red);
  position:relative;
  z-index:60;
}
.np-nav{
  display:flex; align-items:stretch;
}
.np-nav > li{ position:relative; }
.np-nav > li > a{
  display:flex; align-items:center; height:46px; padding:0 16px;
  color:#fff; font-family:var(--np-font-display); font-weight:600;
  font-size:13.5px; letter-spacing:.03em; text-transform:uppercase;
  white-space:nowrap;
}
.np-nav > li > a:hover,
.np-nav > li.current-menu-item > a{ background: var(--np-red-dark); color:#fff; }
.np-nav > li.menu-item-has-children > a::after{
  content:""; width:6px; height:6px; margin-left:6px;
  border-right:1.5px solid rgba(255,255,255,.85); border-bottom:1.5px solid rgba(255,255,255,.85);
  transform:rotate(45deg); display:inline-block; margin-top:-3px;
}
.np-nav .sub-menu{
  position:absolute; top:100%; left:0; min-width:220px;
  background:#fff; box-shadow:0 14px 28px rgba(20,20,25,.14);
  border-top:2px solid var(--np-red);
  padding:8px 0; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.np-nav li.menu-item-has-children:hover > .sub-menu,
.np-nav li.menu-item-has-children:focus-within > .sub-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.np-nav .sub-menu a{
  display:block; padding:9px 18px; color:var(--np-ink-soft);
  font-size:13.5px; font-weight:500;
}
.np-nav .sub-menu a:hover{ background:var(--np-red-tint); color:var(--np-red); }

.np-nav-more-wrap{ margin-left:auto; position:relative; }
.np-nav-more-wrap > a{ gap:4px; }

/* Mobile off-canvas */
.np-mobile-nav{ display:none; }

/* ==========================================================================
   5. BREAKING TICKER
   ========================================================================== */
.np-ticker{
  border-bottom:1px solid var(--np-line);
  background: var(--np-bg-soft);
}
.np-ticker .np-container{ display:flex; align-items:center; height:42px; gap:14px; }
.np-ticker-label{
  flex:0 0 auto; display:flex; align-items:center; gap:6px;
  background:var(--np-red); color:#fff; font-size:11.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:2px;
}
.np-ticker-label .np-live-dot{ background:#fff; }
.np-ticker-viewport{ flex:1; overflow:hidden; position:relative; height:20px; }
.np-ticker-track{
  position:absolute; white-space:nowrap; will-change:transform;
  animation: np-scroll linear infinite;
  font-size:13.5px; font-weight:500; color:var(--np-ink-soft);
}
.np-ticker-track a{ margin-right:56px; }
.np-ticker-track a:hover{ color:var(--np-red); }
@keyframes np-scroll{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

/* ==========================================================================
   6. HERO / LEAD GRID
   ========================================================================== */
.np-hero{ padding:28px 0 8px; }

.np-ad-banner{ text-align:center; margin:6px 0 30px; }
.np-ad-banner-label{
  display:block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--np-muted); margin-bottom:8px;
}
.np-ad-banner img{ max-width:100%; height:auto; margin:0 auto; border-radius:var(--np-radius); }

.np-popup-overlay{
  position:fixed; inset:0; z-index:300;
  background:rgba(15,16,19,.78);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.np-popup-box{
  position:relative; max-width:440px; width:100%;
  background:#fff; border-radius:var(--np-radius); overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.np-popup-box img{ width:100%; height:auto; display:block; }
.np-popup-close{
  position:absolute; top:10px; right:10px; z-index:2;
  width:34px; height:34px; border-radius:50%; border:none;
  background:rgba(0,0,0,.55); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.np-popup-close:hover{ background:var(--np-red); }
.np-popup-close svg{ width:16px; height:16px; }
@media (max-width:520px){
  .np-popup-box{ max-width:320px; }
}
.np-hero-grid{
  display:grid; grid-template-columns:1.6fr 1fr; gap:var(--np-gap);
}
.np-lead{ position:relative; border-radius:var(--np-radius); overflow:hidden; background:var(--np-ink); }
.np-lead-media{ display:block; position:relative; width:100%; aspect-ratio:16/9.3; overflow:hidden; }
.np-lead-media img{ width:100%; height:100%; object-fit:cover; }
.np-lead-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.86) 100%);
}
.np-lead-body{ position:absolute; left:0; right:0; bottom:0; padding:22px 24px; }
.np-lead-cat{
  display:inline-block; background:var(--np-red); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:2px; margin-bottom:10px;
}
.np-lead-title{ color:#fff; font-size:26px; margin:0 0 6px; }
.np-lead-title a{ color:#fff; }
.np-lead-meta{ color:#d9dadd; font-size:12.5px; }

.np-hero-side{ display:flex; flex-direction:column; gap:18px; }
.np-side-card{ display:flex; gap:12px; }

.np-hero-ad{
  flex:1; min-height:90px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; background:var(--np-bg-soft); border-radius:var(--np-radius);
  padding:14px; text-align:center; overflow:hidden;
}
.np-hero-ad img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--np-radius); }
.np-side-card-media{ display:block; flex:0 0 108px; aspect-ratio:4/3; border-radius:var(--np-radius); overflow:hidden; background:var(--np-bg-soft); }
.np-side-card-media img{ width:100%; height:100%; object-fit:cover; }
.np-side-card-body{ flex:1; min-width:0; }
.np-cat-tag{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--np-red);
}
.np-side-card-title{ font-size:15px; margin:5px 0 4px; }
.np-side-card-title a{ color:var(--np-ink); }
.np-card-meta{ font-size:12px; color:var(--np-muted); }
.np-byline{ display:inline-flex; align-items:center; gap:6px; }
.np-single-meta a.np-byline:hover .np-author{ color:var(--np-red); text-decoration:underline; }
.np-avatar{ border-radius:50%; object-fit:cover; flex-shrink:0; display:inline-block; }
.np-avatar-lg{ width:28px !important; height:28px !important; }

/* ==========================================================================
   7. MAIN LAYOUT (rails + sidebar)
   ========================================================================== */
.np-main-layout{
  display:grid; grid-template-columns: 1fr 320px; gap:36px;
  padding:8px 0 40px;
  align-items:start;
}
.np-rail{ margin-bottom:38px; }
.np-rail-head{
  display:flex; align-items:baseline; justify-content:space-between;
  border-bottom:2px solid var(--np-ink); padding-bottom:10px; margin-bottom:18px;
}
.np-rail-head h2{ font-size:19px; text-transform:uppercase; letter-spacing:.02em; margin:0; }
.np-rail-more{ font-size:12.5px; font-weight:700; color:var(--np-red); text-transform:uppercase; letter-spacing:.04em; }
.np-rail-more:hover{ color:var(--np-red-dark); }

.np-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.np-grid.np-grid-3{ grid-template-columns:repeat(3,1fr); }
.np-card{ display:flex; flex-direction:column; }
.np-card-media{ display:block; width:100%; aspect-ratio:16/10; border-radius:var(--np-radius); overflow:hidden; background:var(--np-bg-soft); margin-bottom:10px; }
.np-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.np-card:hover .np-card-media img{ transform:scale(1.05); }
.np-card-title{ font-size:14.5px; line-height:1.4; margin:0 0 6px; }
.np-card-title a{ color:var(--np-ink); }

.np-list{ display:flex; flex-direction:column; }
.np-list-item{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--np-line); }
.np-list-item:first-child{ padding-top:0; }
.np-list-item-media{ display:block; flex:0 0 88px; aspect-ratio:1/1; border-radius:var(--np-radius); overflow:hidden; background:var(--np-bg-soft); }
.np-list-item-media img{ width:100%; height:100%; object-fit:cover; }
.np-list-item-body{ flex:1; min-width:0; }
.np-list-item-title{ font-size:14px; margin:4px 0; }
.np-list-item-title a{ color:var(--np-ink); }
.np-list-num{
  flex:0 0 28px; font-family:var(--np-font-display); font-weight:800; font-size:20px;
  color:var(--np-line); -webkit-text-stroke:1px var(--np-muted);
}

/* Featured Section widget */
.np-feature-widget{ position:relative; padding:28px 0; margin-bottom:38px; }
.np-feature-widget::before,
.np-feature-widget::after{
  content:""; position:absolute; left:0; right:0; height:2px;
  background-image: radial-gradient(circle, #d7dade 1.4px, transparent 1.5px);
  background-size: 9px 2px; background-repeat: repeat-x;
}
.np-feature-widget::before{ top:0; }
.np-feature-widget::after{ bottom:0; }
.np-feature-header{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.np-feature-header-title{ font-size:18px; text-transform:uppercase; letter-spacing:.02em; margin:0; }
.np-feature-viewmore{
  margin-left:auto; flex-shrink:0;
  display:inline-flex; align-items:center; gap:2px;
  background:var(--np-red-tint); color:var(--np-red); font-weight:700; font-size:12.5px;
  padding:8px 16px; border-radius:999px;
}
.np-feature-viewmore:hover{ background:var(--np-red); color:#fff; }

.np-feature-body{ display:grid; grid-template-columns:1.6fr 1fr; gap:34px; align-items:start; }

.np-feature-main{ display:flex; gap:20px; margin-bottom:22px; }
.np-feature-main-media{ display:block; flex:0 0 42%; aspect-ratio:4/3; border-radius:var(--np-radius); overflow:hidden; background:var(--np-bg-soft); }
.np-feature-main-media img{ width:100%; height:100%; object-fit:cover; }
.np-feature-main-body{ flex:1; min-width:0; }
.np-feature-main-title{ font-size:19px; line-height:1.35; margin:8px 0 8px; }
.np-feature-main-title a{ color:var(--np-ink); }
.np-feature-main-excerpt{ font-size:13.5px; color:var(--np-ink-soft); line-height:1.6; margin:0 0 12px; }
.np-feature-main-meta{ font-size:12px; color:var(--np-muted); }

.np-feature-mini-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.np-feature-mini-media{ display:block; width:100%; aspect-ratio:16/10; border-radius:var(--np-radius); overflow:hidden; background:var(--np-bg-soft); margin-bottom:8px; }
.np-feature-mini-media img{ width:100%; height:100%; object-fit:cover; }
.np-feature-mini-title{ font-size:14px; line-height:1.4; margin:4px 0 0; }
.np-feature-mini-title a{ color:var(--np-ink); }

.np-feature-list-item{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--np-line); }
.np-feature-list-item:first-child{ padding-top:0; }
.np-feature-list-item:last-child{ border-bottom:none; }
.np-feature-list-media{ display:block; flex:0 0 68px; aspect-ratio:1/1; border-radius:var(--np-radius); overflow:hidden; background:var(--np-bg-soft); }
.np-feature-list-media img{ width:100%; height:100%; object-fit:cover; }
.np-feature-list-body{ flex:1; min-width:0; }
.np-feature-list-title{ font-size:13.5px; line-height:1.4; margin:4px 0 0; }
.np-feature-list-title a{ color:var(--np-ink); }

@media (max-width:880px){
  .np-feature-body{ grid-template-columns:1fr; }
  .np-feature-main{ flex-direction:column; }
  .np-feature-main-media{ flex-basis:auto; aspect-ratio:16/10; }
}
@media (max-width:520px){
  .np-feature-mini-grid{ grid-template-columns:1fr; }
}

/* Spotlight Duo widget */
.np-duo-widget{ display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:38px; align-items:start; }
.np-duo-panel-a .np-feature-header{ margin-bottom:18px; }

/* Panel A: slider + list */
.np-duo-a-body{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.np-duo-slider{ position:relative; }
.np-duo-slide{ display:none; }
.np-duo-slide.is-active{ display:block; }
.np-duo-slide-media{ display:block; position:relative; aspect-ratio:4/3; border-radius:var(--np-radius); overflow:hidden; background:var(--np-bg-soft); }
.np-duo-slide-media img{ width:100%; height:100%; object-fit:cover; }
.np-duo-slide-tag{
  position:absolute; left:0; bottom:0; background:var(--np-red); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:5px 12px;
}
.np-duo-slide-title{ font-size:15px; line-height:1.4; margin:12px 0 6px; }
.np-duo-slide-title a{ color:var(--np-ink); }
.np-duo-author{ font-size:12px; color:var(--np-muted); }
.np-duo-dots{ display:flex; gap:6px; margin-top:12px; }
.np-duo-dots button{ width:8px; height:8px; border-radius:50%; border:none; background:var(--np-line); padding:0; }
.np-duo-dots button.is-active{ background:var(--np-red); }

.np-duo-list{ display:flex; flex-direction:column; }
.np-duo-list-item{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--np-line); }
.np-duo-list-item:first-child{ padding-top:0; }
.np-duo-list-item:last-child{ border-bottom:none; }
.np-duo-list-media{ display:block; flex:0 0 68px; aspect-ratio:1/1; border-radius:var(--np-radius); overflow:hidden; background:var(--np-bg-soft); }
.np-duo-list-media img{ width:100%; height:100%; object-fit:cover; }
.np-duo-list-body{ flex:1; min-width:0; }
.np-duo-list-title{ font-size:13.5px; line-height:1.4; margin:4px 0 6px; }
.np-duo-list-title a{ color:var(--np-ink); }

/* Panel B: tinted featured + stack */
.np-duo-panel-b{ background:var(--np-red-tint); border-radius:8px; padding:26px; }
.np-duo-header-b{ display:flex; align-items:center; gap:9px; margin-bottom:20px; }
.np-duo-header-b-icon{ width:11px; height:11px; background:var(--np-red); transform:rotate(45deg); flex-shrink:0; }
.np-duo-header-b-title{ font-size:18px; text-transform:uppercase; letter-spacing:.02em; margin:0; }

.np-duo-b-body{ display:grid; grid-template-columns:1.3fr 1fr; gap:22px; }
.np-duo-main-media{ display:block; width:100%; aspect-ratio:3/4; border-radius:var(--np-radius); overflow:hidden; background:var(--np-bg-soft); margin-bottom:12px; }
.np-duo-main-media img{ width:100%; height:100%; object-fit:cover; }
.np-duo-main-title{ font-size:17px; line-height:1.4; margin:8px 0 6px; }
.np-duo-main-title a{ color:var(--np-ink); }

.np-duo-stack{ display:flex; flex-direction:column; gap:20px; }
.np-duo-stack-media{ display:block; width:100%; aspect-ratio:16/10; border-radius:var(--np-radius); overflow:hidden; background:var(--np-bg-soft); margin-bottom:8px; }
.np-duo-stack-media img{ width:100%; height:100%; object-fit:cover; }
.np-duo-stack-title{ font-size:14px; line-height:1.4; margin:6px 0 6px; }
.np-duo-stack-title a{ color:var(--np-ink); }

@media (max-width:880px){
  .np-duo-widget{ grid-template-columns:1fr; }
  .np-duo-a-body{ grid-template-columns:1fr; }
  .np-duo-b-body{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .np-duo-panel-b{ padding:18px; }
}

/* 4 Box widget */
.np-fourbox-widget{ position:relative; padding-bottom:28px; margin-bottom:38px; }
.np-fourbox-widget::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background-image: radial-gradient(circle, #d7dade 1.4px, transparent 1.5px);
  background-size: 9px 2px; background-repeat: repeat-x;
}
.np-fourbox-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.np-fourbox-item{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--np-cream); border:1px solid var(--np-cream-line);
  border-radius:10px; padding:14px;
}
.np-fourbox-media{ display:block; flex:0 0 96px; aspect-ratio:1/1; border-radius:8px; overflow:hidden; background:var(--np-bg-soft); }
.np-fourbox-media img{ width:100%; height:100%; object-fit:cover; }
.np-fourbox-body{ flex:1; min-width:0; padding-top:2px; }
.np-fourbox-title{ font-size:14px; line-height:1.4; margin:5px 0 0; }
.np-fourbox-title a{ color:var(--np-ink); }
@media (max-width:640px){
  .np-fourbox-grid{ grid-template-columns:1fr; }
}

/* Sidebar */
.np-sidebar{ display:flex; flex-direction:column; gap:30px; position:sticky; top:16px; }
.np-widget{ background:var(--np-bg-soft); border-radius:var(--np-radius); padding:20px; }
.np-widget-title{
  font-size:14px; text-transform:uppercase; letter-spacing:.06em; font-weight:800;
  margin:0 0 16px; padding-bottom:10px; border-bottom:2px solid var(--np-ink);
}
.np-app-widget{ text-align:center; background:var(--np-ink); color:#fff; padding:26px 20px; border-radius:var(--np-radius); }
.np-app-widget h3{ color:#fff; font-size:16px; margin-bottom:14px; }
.np-app-badges{ display:flex; gap:10px; justify-content:center; margin-top:14px; }
.np-app-badges img{ height:38px; width:auto; }
.np-ad-slot{
  border:1px dashed var(--np-line); border-radius:var(--np-radius);
  min-height:250px; display:flex; align-items:center; justify-content:center;
  color:var(--np-muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em;
}

/* ==========================================================================
   8. SINGLE POST
   ========================================================================== */
.np-single-header{ max-width:820px; margin:0 auto 24px; padding:28px 20px 0; }
.np-single-cat{ display:inline-block; background:var(--np-red); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:5px 12px; border-radius:2px; margin-bottom:14px; }
.np-single-title{ font-size:32px; line-height:1.3; margin-bottom:14px; }
.np-single-meta{ display:flex; align-items:center; gap:14px; color:var(--np-muted); font-size:13px; padding-bottom:18px; border-bottom:1px solid var(--np-line); flex-wrap:wrap; }
.np-single-meta .np-author{ color:var(--np-ink); font-weight:600; }
.np-single-media{ max-width:960px; margin:0 auto 28px; padding:0 20px; border-radius:var(--np-radius); overflow:hidden; }
.np-single-media img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-radius:var(--np-radius); }
.np-single-body{ max-width:820px; margin:0 auto; padding:0 20px; font-size:17px; line-height:1.8; color:var(--np-ink-soft); }
.np-single-body p{ margin:0 0 22px; }
.np-single-body h2,.np-single-body h3{ color:var(--np-ink); margin-top:34px; }
.np-single-body img{ border-radius:var(--np-radius); margin:24px 0; }
.np-single-body blockquote{
  border-left:3px solid var(--np-red); margin:26px 0; padding:4px 0 4px 20px;
  font-style:italic; color:var(--np-ink);
}
.np-tags{ max-width:820px; margin:30px auto 0; padding:0 20px; display:flex; flex-wrap:wrap; gap:8px; }
.np-tags a{ font-size:12.5px; background:var(--np-bg-soft); padding:6px 12px; border-radius:999px; color:var(--np-ink-soft); }
.np-tags a:hover{ background:var(--np-red-tint); color:var(--np-red); }
.np-share{ max-width:820px; margin:24px auto; padding:0 20px; display:flex; gap:10px; align-items:center; }

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.np-footer{ background:var(--np-ink); color:#c6c9cf; margin-top:20px; }
.np-footer-brands{ border-bottom:1px solid rgba(255,255,255,.08); padding:26px 0; }
.np-footer-brands .np-container{ display:flex; flex-wrap:wrap; gap:28px; justify-content:center; }
.np-footer-brand{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#9599a1; }
.np-footer-cols{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:30px; padding:44px 0; }
.np-footer-col h4{ color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; }
.np-footer-col ul li{ margin-bottom:9px; }
.np-footer-col a{ color:#a8abb2; font-size:13.5px; }
.np-footer-col a:hover{ color:#fff; }
.np-footer-logo{ font-family:var(--np-font-display); font-weight:800; font-size:22px; color:#fff; margin-bottom:12px; }
.np-footer-social{ display:flex; gap:10px; margin-top:16px; }
.np-footer-social a{
  width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
}
.np-footer-social svg{ width:14px; height:14px; fill:#c6c9cf; }
.np-footer-social a:hover{ background:var(--np-red); border-color:var(--np-red); }
.np-footer-bottom{
  border-top:1px solid rgba(255,255,255,.08); padding:18px 0; font-size:12.5px; color:#8b8f97;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* ==========================================================================
   10. SEARCH OVERLAY
   ========================================================================== */
.np-search-overlay{
  position:fixed; inset:0; background:rgba(15,16,19,.92); z-index:200;
  display:flex; align-items:flex-start; justify-content:center; padding-top:12vh;
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s;
}
.np-search-overlay.is-open{ opacity:1; visibility:visible; }
.np-search-overlay form{ width:min(640px,90vw); display:flex; align-items:center; border-bottom:2px solid #fff; }
.np-search-overlay input[type="search"]{
  flex:1; background:transparent; border:none; color:#fff; font-size:26px; padding:12px 0;
}
.np-search-overlay input::placeholder{ color:#8b8f97; }
.np-search-overlay button{ background:none; border:none; color:#fff; }
.np-search-close{ position:absolute; top:26px; right:30px; background:none; border:none; color:#fff; }
.np-search-close svg{ width:26px; height:26px; }

/* ==========================================================================
   11. MISC / PAGINATION / 404
   ========================================================================== */
.np-pagination{ display:flex; justify-content:center; gap:8px; margin:36px 0; }
.np-pagination a, .np-pagination span{
  min-width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--np-line); border-radius:var(--np-radius); font-size:13.5px; font-weight:600;
}
.np-pagination .current{ background:var(--np-red); color:#fff; border-color:var(--np-red); }
.np-pagination a:hover{ border-color:var(--np-red); color:var(--np-red); }

.np-404{ text-align:center; padding:100px 20px; }
.np-404 h1{ font-size:96px; color:var(--np-red); margin-bottom:0; }

.np-archive-header{ padding:30px 0 6px; border-bottom:2px solid var(--np-ink); margin-bottom:10px; }
.np-archive-header h1{ font-size:24px; text-transform:uppercase; }

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .np-main-layout{ grid-template-columns:1fr; }
  .np-sidebar{ position:static; flex-direction:row; flex-wrap:wrap; }
  .np-sidebar > div{ flex:1 1 280px; }
  .np-hero-grid{ grid-template-columns:1fr; }
  .np-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:880px){
  .np-topbar-apps{ display:none; }
  .np-footer-cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .np-nav-wrap{ display:none; }
  .np-menu-toggle{ display:inline-flex; align-items:center; }
  .np-livetv-btn span{ display:none; }
  .np-livetv-btn{ padding:9px; }
  .np-grid{ grid-template-columns:repeat(2,1fr); }
  .np-grid.np-grid-3{ grid-template-columns:repeat(2,1fr); }
  .np-footer-cols{ grid-template-columns:1fr; }
  .np-single-title{ font-size:24px; }
  .np-lead-title{ font-size:20px; }

  .np-mobile-nav{
    display:block; position:fixed; top:0; right:0; height:100%; width:min(320px,84vw);
    background:#fff; z-index:210; transform:translateX(100%); transition:transform .25s ease;
    box-shadow:-10px 0 30px rgba(0,0,0,.15); overflow-y:auto;
  }
  .np-mobile-nav.is-open{ transform:translateX(0); }
  .np-mobile-nav-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--np-line); }
  .np-mobile-nav ul li a{ display:block; padding:13px 20px; border-bottom:1px solid var(--np-line); font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.02em; }
  .np-mobile-nav ul ul a{ padding-left:34px; font-weight:500; text-transform:none; color:var(--np-muted); }
  .np-nav-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:205; opacity:0; visibility:hidden; transition:opacity .2s; }
  .np-nav-backdrop.is-open{ opacity:1; visibility:visible; }
}
@media (max-width:520px){
  .np-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .np-side-card-media{ flex-basis:96px; }
}