/*
Theme Name: NewsPik
Theme URI: https://southpik.com
Author: Southpik
Description: Fast Malayalam news portal theme.
Version: 3.6
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: newspik
Tags: news, blog, custom-logo, custom-menu, featured-images, responsive-layout, translation-ready
*/

/* ── DESIGN TOKENS ──────────────────────────────── */
:root{
  --bg:#F3F4F6;--surface:#fff;--text:#111827;--muted:#5B626E;
  --accent:#111827;--border:#E5E7EB;--blue:#374151;--dark:#111827;
  --wa:#4B5563;--max:1100px;
  --font-ui:'Inter','Noto Sans Malayalam',system-ui,sans-serif;
  --font-body:'Merriweather','Noto Sans Malayalam',Georgia,serif;
  --font-ml:'Noto Sans Malayalam','Manjari',system-ui,sans-serif;
}

/* ── RESET ──────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── GLOBAL OVERFLOW FIX ────────────────────────── */
html{overflow-x:hidden;font-size:15px;-webkit-text-size-adjust:100%}
body{overflow-x:hidden;max-width:100vw;background:var(--bg);color:var(--text);font-family:var(--font-ui);line-height:1.6;-webkit-font-smoothing:antialiased}

/* ── MALAYALAM TYPOGRAPHY ───────────────────────── */
:lang(ml),.ml-content,.art-body,.art-title,.card-title,.slide-title,
.trending-title,.cat-big-title,.cat-small-title,.related-title,
.s-t-title,.showcase-card-name{
  font-family:var(--font-ml);
  line-height:1.9;
  word-break:break-word;
  overflow-wrap:break-word;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* Screen reader */
.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;position:absolute!important;word-wrap:normal!important}

/* ══════════════════════════════════════════════════
   HEADER — desktop
══════════════════════════════════════════════════ */
.site-header{background:var(--dark);padding:0 20px;position:sticky;top:0;z-index:500;width:100%;max-width:100vw}
.header-inner{max-width:var(--max);margin:0 auto;height:60px;display:flex;align-items:center;gap:12px}

/* Logo */
.site-logo-wrap{flex-shrink:0}
.site-logo-wrap a{font-weight:700;font-size:22px;color:#fff;text-decoration:none;letter-spacing:-.5px;display:flex;align-items:center}
.site-logo-wrap a span{color:var(--accent)}
.site-logo-wrap img{max-height:36px;width:auto}

/* Primary nav — desktop only */
.primary-nav{flex:1;overflow:hidden;min-width:0}
.primary-nav ul{display:flex;gap:2px;list-style:none;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;padding:0;margin:0}
.primary-nav ul::-webkit-scrollbar{display:none}
.primary-nav ul li a{white-space:nowrap;font-size:13px;font-weight:500;color:rgba(255,255,255,.7);text-decoration:none;padding:5px 11px;border-radius:5px;display:block}
.primary-nav ul li a:hover,
.primary-nav ul li.current-menu-item>a,
.primary-nav ul li.current-cat>a,
.primary-nav ul li.current-menu-ancestor>a{background:var(--accent);color:#fff}

/* Header right */
.header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}

/* Search toggle */
.search-toggle{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;border-radius:5px;width:36px;height:36px;-webkit-tap-highlight-color:transparent}
.search-toggle:hover{color:#fff}

/* Admin link */
.admin-header-link{font-size:12px;color:rgba(255,255,255,.5);text-decoration:none;padding:5px 10px;border:1px solid rgba(255,255,255,.2);border-radius:5px;white-space:nowrap}
.admin-header-link:hover{border-color:rgba(255,255,255,.5);color:#fff}

/* Hamburger */
.menu-toggle{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:6px;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:36px;height:36px;-webkit-tap-highlight-color:transparent}
.menu-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px}

/* Search dropdown */
.header-search{display:none;position:absolute;top:60px;left:0;right:0;background:var(--dark);border-top:1px solid rgba(255,255,255,.1);padding:12px 20px;z-index:499}
.header-search.open{display:block}
.header-search form{max-width:var(--max);margin:0 auto;display:flex;gap:8px}
.header-search input[type="search"]{flex:1;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;border-radius:6px;padding:8px 14px;font-size:14px;font-family:var(--font-ui);outline:none;min-width:0}
.header-search input[type="search"]::placeholder{color:rgba(255,255,255,.4)}
.header-search input[type="search"]:focus{border-color:var(--accent)}
.header-search button[type="submit"]{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0}

/* ── MOBILE NAV ─────────────────────────────────── */
.mobile-nav{display:none;position:fixed;inset:0;z-index:600}
.mobile-nav.open{display:block}
.mobile-nav-overlay{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.mobile-nav-panel{position:absolute;top:0;left:0;bottom:0;width:280px;background:var(--dark);overflow-y:auto;padding:20px 0}
.mobile-nav-close{display:block;text-align:right;padding:0 16px 16px;background:none;border:none;color:rgba(255,255,255,.6);font-size:24px;cursor:pointer;width:100%}
.mobile-nav ul{list-style:none;padding:0;margin:0}
.mobile-nav ul li a{display:block;padding:12px 20px;color:rgba(255,255,255,.8);font-size:15px;font-weight:500;border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-nav ul li a:hover,.mobile-nav ul li.current-menu-item>a{color:#fff;background:rgba(255,255,255,.1)}

/* ══════════════════════════════════════════════════
   BREAKING TICKER
══════════════════════════════════════════════════ */
.breaking-bar{background:var(--surface);border-bottom:2px solid var(--accent);overflow:hidden;height:36px;display:flex;align-items:center;max-width:100vw}
.breaking-label{background:var(--accent);color:#fff;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:0 12px;height:100%;display:flex;align-items:center;white-space:nowrap;flex-shrink:0}
.ticker-wrap{flex:1;overflow:hidden;min-width:0}
.ticker-track{display:flex;animation:np-ticker 45s linear infinite;width:max-content}
.ticker-track:hover{animation-play-state:paused}
.ticker-item{white-space:nowrap;font-size:13px;font-weight:500;color:var(--text);padding:0 28px;display:flex;align-items:center;gap:6px;font-family:var(--font-ml)}
.ticker-item a{color:var(--text);text-decoration:none}
.ticker-item a:hover{color:var(--accent)}
.ticker-dot{width:5px;height:5px;background:var(--accent);border-radius:50%;flex-shrink:0}
@keyframes np-ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ══════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════ */
.main-wrap{max-width:var(--max);margin:0 auto;padding:20px 16px;width:100%;overflow-x:hidden}

.section-label{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.section-label::before{content:'';width:4px;height:18px;background:var(--accent);border-radius:2px;flex-shrink:0}
.section-label h2{font-family:var(--font-ui);font-size:15px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.5px}
.section-label::after{content:'';flex:1;height:2px;background:var(--border)}

/* ══════════════════════════════════════════════════
   FEATURED SLIDER + TRENDING
══════════════════════════════════════════════════ */
.top-row{display:grid;grid-template-columns:68% 1fr;gap:24px;margin-bottom:28px;width:100%;overflow:hidden;align-items:start}

/* Slider — overflow-hidden fixes mobile bleed */
.featured-slider{position:relative;border-radius:10px;overflow:hidden;background:#000;aspect-ratio:16/6;width:100%;max-width:100%}
.np-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.np-slide.active{opacity:1}
.np-slide img{width:100%;height:100%;object-fit:cover;opacity:.75}
.slide-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 60%)}
.slide-body{position:absolute;bottom:0;left:0;right:0;padding:16px 16px 14px}
.slide-cat{display:inline-block;background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:3px;text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
.slide-title{font-family:var(--font-ml);font-size:clamp(14px,3.5vw,20px);font-weight:700;color:#fff;line-height:1.5;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.slide-title a{color:#fff;text-decoration:none}
.slide-title a:hover{text-decoration:underline}
.slide-date{font-size:11px;color:rgba(255,255,255,.6)}
.slide-dots{position:absolute;bottom:10px;right:12px;display:flex;gap:5px}
.slide-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;border:none;padding:0}
.slide-dot.active{background:#fff}
.slide-arrows{position:absolute;top:50%;transform:translateY(-50%);width:100%;display:flex;justify-content:space-between;padding:0 8px;pointer-events:none}
.slide-arrow{width:30px;height:30px;background:rgba(0,0,0,.5);color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;pointer-events:all}
.slide-arrow:hover{background:var(--accent)}
.featured-placeholder{width:100%;height:100%;background:linear-gradient(135deg,var(--blue),var(--accent));display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);font-size:14px}

/* Trending */
.trending-box{display:flex;flex-direction:column;gap:0}
.trending-item{display:flex;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);text-decoration:none;color:var(--text);align-items:flex-start;overflow:hidden}
.trending-item:last-child{border-bottom:none}
.trending-item:hover .trending-title{color:var(--accent)}
.trending-num{font-size:18px;font-weight:700;color:var(--wa);line-height:1;flex-shrink:0;width:24px;padding-top:2px}
.trending-thumb{width:60px;height:44px;border-radius:4px;overflow:hidden;flex-shrink:0;background:var(--border)}
.trending-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.trending-info{flex:1;overflow:hidden;min-width:0}
.trending-title{font-size:12.5px;font-weight:600;line-height:1.4;margin-bottom:2px;font-family:var(--font-ml);word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.trending-date{font-size:11px;color:var(--muted)}

/* ══════════════════════════════════════════════════
   CATEGORY BLOCKS
══════════════════════════════════════════════════ */
.cat-blocks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:28px}
.cat-big-card{text-decoration:none;color:var(--text);display:block;margin-bottom:10px}
.cat-big-thumb{aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--border);margin-bottom:8px;width:100%}
.cat-big-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cat-big-title{font-family:var(--font-ml);font-size:14px;font-weight:700;line-height:1.6;word-break:break-word;display:block;overflow:visible}
.cat-big-card:hover .cat-big-title{color:var(--accent)}
.cat-big-meta{font-size:11px;color:var(--muted);margin-top:3px}
.cat-small-item{display:flex;gap:8px;padding:7px 0;border-top:1px solid var(--border);text-decoration:none;color:var(--text);align-items:flex-start;overflow:hidden}
.cat-small-item:hover .cat-small-title{color:var(--accent)}
.cat-small-thumb{width:56px;height:42px;border-radius:4px;overflow:hidden;flex-shrink:0;background:var(--border)}
.cat-small-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cat-small-title{font-size:12px;font-weight:600;line-height:1.5;flex:1;font-family:var(--font-ml);word-break:break-word;min-width:0;display:block;overflow:visible}
.cat-more{display:inline-block;margin-top:10px;font-size:12px;font-weight:600;color:var(--accent);text-decoration:none}
.cat-more:hover{text-decoration:underline}

/* ══════════════════════════════════════════════════
   CATEGORY SHOWCASE — text-only dark cards
══════════════════════════════════════════════════ */
.showcase-section{margin-bottom:28px;overflow:hidden}

/* Desktop: 4–6 per row */
.showcase-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;
}

.showcase-card{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  background:#111827;
  color:#fff;
  border:1px solid #374151;
  border-radius:6px;
  padding:10px 12px;
  min-height:auto;
  font-family:var(--font-ml);
  font-size:13px;
  font-weight:700;
  line-height:1.4;
  word-break:break-word;
  text-transform:uppercase;
  transition:background-color .2s, color .2s, border-color .2s;
  cursor:pointer;
  height:100%;
}
.showcase-card:hover{
  background:#e5e7eb;
  color:#111827;
  border-color:#d1d5db;
}

/* ══════════════════════════════════════════════════
   ARTICLE CARDS (Latest News)
══════════════════════════════════════════════════ */
.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;width:100%;overflow:hidden}
.article-card{background:var(--surface);border-radius:10px;overflow:hidden;border:1px solid var(--border);text-decoration:none;color:var(--text);display:flex;flex-direction:column;transition:box-shadow .15s}
.article-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.card-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--border);width:100%}
.card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card-thumb-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#E5E7EB,#D1D5DB);display:flex;align-items:center;justify-content:center}
.card-body{padding:14px 16px;flex:1;display:flex;flex-direction:column}
.card-cat{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
.card-title{font-family:var(--font-ml);font-size:15px;font-weight:700;line-height:1.6;margin-bottom:8px;word-break:break-word;display:block;overflow:visible}
.card-excerpt{font-size:13px;color:var(--muted);line-height:1.6;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.card-meta-sep{width:3px;height:3px;background:var(--border);border-radius:50%}

/* ── NEW HOMEPAGE CONTENT SECTION ── */
.new-content-section{margin-bottom:28px;width:100%}
.new-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:28px;width:100%}

/* ══════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════ */
.np-pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:32px;flex-wrap:wrap}
.np-pagination a,.np-pagination span{padding:7px 12px;border-radius:7px;font-size:13px;font-weight:500;border:1px solid var(--border);color:var(--text);background:var(--surface);text-decoration:none;display:inline-block}
.np-pagination a:hover{border-color:var(--blue);color:var(--blue)}
.np-pagination .current{background:var(--blue);color:#fff;border-color:var(--blue)}
.np-pagination .dots{border:none;background:none;color:var(--muted)}

/* ══════════════════════════════════════════════════
   SINGLE ARTICLE — page wrap + overflow fix
══════════════════════════════════════════════════ */
.page-wrap{max-width:var(--max);margin:0 auto;padding:20px 16px;display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start;overflow-x:hidden;width:100%}
.art-col{min-width:0;overflow-x:hidden;width:100%}

/* Breadcrumb */
.breadcrumb{background:var(--surface);border-bottom:1px solid var(--border);padding:8px 20px;overflow:hidden}
.breadcrumb-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);flex-wrap:wrap;overflow:hidden}
.breadcrumb-inner a{color:var(--muted)}
.breadcrumb-inner a:hover{color:var(--accent)}
.breadcrumb-sep{color:var(--border);flex-shrink:0}
.breadcrumb-cur{color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%}

/* Article header */
.art-header{padding:20px 0 0}
.art-cat-badge{display:inline-block;font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.art-cat-badge:hover{text-decoration:underline}

/* Article title — full, no limit, Malayalam-safe */
.art-title{font-family:var(--font-ml);font-size:clamp(20px,4vw,34px);font-weight:700;line-height:1.5;letter-spacing:-.3px;margin-bottom:14px;color:var(--text);word-break:break-word;overflow-wrap:break-word;width:100%}

/* Meta */
.art-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:0;min-width:0}
.art-meta-left{display:flex;align-items:center;gap:8px;flex:1;flex-wrap:wrap;min-width:0}
.author-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;background:var(--border);overflow:hidden}
.author-avatar img{width:100%;height:100%;object-fit:cover}
.meta-sep{color:var(--border)}

/* Inline share */
.meta-share{display:flex;align-items:center;gap:8px;flex-shrink:0}
.meta-share-label{font-size:12px;color:var(--muted);font-weight:500}

/* Featured image — responsive, no overflow */
.feat-img{margin:16px 0;border-radius:8px;overflow:hidden;background:var(--border);width:100%;max-width:100%;aspect-ratio:16/9}
.feat-img img{width:100%;height:100%;object-fit:cover;display:block;max-width:100%}

/* Article body — all elements constrained */
.art-body{font-family:var(--font-ml);font-size:17px;line-height:1.9;color:#2D2D2D;margin-top:20px;width:100%;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word}
.art-body *{max-width:100%}
.art-body p{margin-bottom:18px;word-break:break-word}
.art-body h2{font-size:clamp(17px,3vw,22px);font-weight:700;margin:32px 0 10px;color:var(--text);line-height:1.5;word-break:break-word}
.art-body h3{font-size:clamp(15px,2.5vw,19px);font-weight:700;margin:26px 0 8px;color:var(--text);word-break:break-word}
.art-body ul,.art-body ol{margin:0 0 18px 22px}
.art-body li{margin-bottom:7px;word-break:break-word}
.art-body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.art-body blockquote{border-left:3px solid var(--accent);margin:24px 0;padding:12px 18px;background:#F9FAFB;font-style:italic;color:#444;border-radius:0 6px 6px 0}
.art-body img{max-width:100%!important;width:100%!important;height:auto!important;border-radius:6px;margin:12px 0;display:block}
.art-body figure{margin:20px 0;max-width:100%;overflow:hidden}
.art-body figcaption{font-size:12px;color:var(--muted);margin-top:6px;text-align:center}
.art-body table{width:100%;border-collapse:collapse;overflow-x:auto;display:block;font-size:14px}
.art-body td,.art-body th{padding:8px;border:1px solid var(--border)}
.art-body iframe,.art-body embed,.art-body object{max-width:100%;width:100%}
.art-body pre{overflow-x:auto;white-space:pre-wrap;word-break:break-word;background:#F3F4F6;padding:16px;border-radius:6px;font-size:13px}

/* Tags */
.art-tags{margin:20px 0;display:flex;flex-wrap:wrap;gap:6px}
.art-tags a{font-size:12px;font-weight:600;padding:3px 10px;border:1px solid var(--border);border-radius:20px;color:var(--muted);text-decoration:none;background:var(--surface)}
.art-tags a:hover{border-color:var(--accent);color:var(--accent)}

/* ── Share buttons ──────────────────────────────── */
.share-icon-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:opacity .15s,transform .15s;flex-shrink:0}
.share-icon-btn:hover{opacity:.85;transform:scale(1.05)}
.share-icon-btn:active{opacity:.7;transform:scale(.97)}
.sib-copy{background:#F3F4F6;color:var(--text)}
.sib-fb{background:var(--blue)}
.sib-wa{background:var(--wa)}
.copy-wrap{position:relative;display:inline-flex}
.copy-tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#111;color:#fff;font-size:11px;padding:3px 8px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;font-family:var(--font-ui)}
.copy-wrap.show .copy-tip{opacity:1}

/* Bottom share bar */
.share-bar{margin:28px 0 8px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.share-bar-label{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-family:var(--font-ui)}
.share-btns{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.s-icon-btn{width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none;-webkit-tap-highlight-color:transparent;flex-shrink:0;transition:opacity .15s,transform .15s}
.s-icon-btn:hover{opacity:.85;transform:scale(1.05)}
.s-icon-btn:active{opacity:.7}
.s-copy{background:#F3F4F6;color:var(--text)}
.s-fb{background:var(--blue)}
.s-wa{background:var(--wa)}
.share-btn-label{font-size:12px;color:var(--muted);font-family:var(--font-ui)}

/* ── Related ────────────────────────────────────── */
.related-section{margin:28px 0 0;padding-top:24px;border-top:2px solid var(--border)}
.related-list{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.related-card{text-decoration:none;color:var(--text);background:var(--surface);border-radius:10px;overflow:hidden;border:1px solid var(--border);display:flex;min-height:88px}
.related-card:hover .related-title{color:var(--accent)}
.related-thumb{width:110px;flex-shrink:0;background:var(--border);overflow:hidden}
.related-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.related-body{flex:1;padding:10px 12px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;min-width:0}
.related-cat{font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px}
.related-title{font-family:var(--font-ml);font-size:13px;font-weight:700;line-height:1.5;word-break:break-word;display:block;overflow:visible}
.related-date{font-size:11px;color:var(--muted);margin-top:4px}

/* ── Sidebar ────────────────────────────────────── */
.sidebar{display:flex;flex-direction:column;gap:20px;min-width:0;overflow:hidden}
.sidebar-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.sidebar-hd{padding:12px 14px;border-bottom:2px solid var(--accent);display:flex;align-items:center;gap:8px}
.sidebar-hd::before{content:'';width:4px;height:16px;background:var(--accent);border-radius:2px;flex-shrink:0}
.sidebar-hd h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.side-trending-list{padding:8px 0}
.side-trending-item{display:flex;gap:8px;padding:8px 14px;text-decoration:none;color:var(--text);align-items:flex-start;border-bottom:1px solid var(--border);overflow:hidden}
.side-trending-item:last-child{border-bottom:none}
.side-trending-item:hover .s-t-title{color:var(--accent)}
.s-t-num{font-size:18px;font-weight:700;color:var(--wa);line-height:1;flex-shrink:0;width:24px;padding-top:2px}
.s-t-thumb{width:60px;height:46px;border-radius:4px;overflow:hidden;flex-shrink:0;background:var(--border)}
.s-t-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.s-t-info{flex:1;overflow:hidden;min-width:0}
.s-t-title{font-size:12px;font-weight:600;line-height:1.5;margin-bottom:2px;font-family:var(--font-ml);word-break:break-word;display:block;overflow:visible}
.s-t-date{font-size:11px;color:var(--muted)}
.social-list{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.social-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:7px;text-decoration:none;background:#1f2937;border:1px solid rgba(255,255,255,.05);transition:background .2s}
.social-row:hover{background:#374151}
.social-row-fb, .social-row-tw, .social-row-ig, .social-row-yt{background:#1f2937}
.social-name{font-size:13px;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px}
.social-action{font-size:12px;font-weight:600;color:rgba(255,255,255,.85)}

/* ══════════════════════════════════════════════════
   ARCHIVE / CATEGORY / SEARCH
══════════════════════════════════════════════════ */
.archive-wrap{max-width:var(--max);margin:0 auto;padding:20px 16px;overflow-x:hidden}
.archive-header{margin-bottom:20px;padding:16px 0;border-bottom:2px solid var(--border)}
.archive-header h1{font-size:clamp(20px,4vw,28px);font-weight:700;font-family:var(--font-ml);word-break:break-word}
.archive-header p{font-size:14px;color:var(--muted);margin-top:4px}
.archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;overflow:hidden}
.search-header{margin-bottom:20px}
.search-header h1{font-size:22px;font-weight:700;word-break:break-word}
.search-header p{font-size:14px;color:var(--muted);margin-top:4px}
.search-form-wrap{margin-bottom:24px}
.search-form-wrap form{display:flex;gap:8px;max-width:500px}
.search-form-wrap input[type="search"]{flex:1;border:1px solid var(--border);border-radius:7px;padding:10px 14px;font-size:14px;outline:none;background:var(--surface);min-width:0}
.search-form-wrap input[type="search"]:focus{border-color:var(--blue)}
.search-form-wrap button{background:var(--blue);color:#fff;border:none;border-radius:7px;padding:10px 18px;font-weight:600;font-size:14px;cursor:pointer;flex-shrink:0}
.no-results{text-align:center;padding:60px 20px;color:var(--muted)}
.no-results h2{font-size:20px;color:var(--text);margin-bottom:8px}

/* ══════════════════════════════════════════════════
   AD SLOTS
══════════════════════════════════════════════════ */
.np-ad-slot{background:#F3F4F6;border:1px dashed var(--border);border-radius:4px;text-align:center;overflow:hidden;contain:layout style;margin:20px 0;max-width:100%}
.np-ad-slot::before{content:'Advertisement';display:block;font-size:10px;font-weight:500;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;padding:4px 0 2px;font-family:var(--font-ui)}
.np-ad-slot ins.adsbygoogle{display:block}
.np-ad-top{min-height:280px}
.np-ad-mid{min-height:280px}

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
.site-footer{background:var(--dark);color:rgba(255,255,255,0.7);margin-top:40px;padding:32px 20px 20px;overflow:hidden}
.footer-inner{max-width:var(--max);margin:0 auto}
.footer-top-centered {
  text-align: center;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
}
.footer-about {
  max-width: 600px;
  margin: 0 auto 16px;
}
.footer-about .footer-heading {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 8px;
}
.footer-about .footer-desc {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}
.footer-social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}
.footer-social-icons a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
}
.footer-social-icons a:hover {
  color: #fff;
}
.footer-bottom-redesigned {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom-left {
  text-align: left;
}
.footer-copyright {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.75);
}
.footer-powered {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
}
.footer-powered a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.15s;
}
.footer-powered a:hover {
  color: #fff;
}
.footer-bottom-right {
  display: flex;
  align-items: center;
}
.footer-nav ul {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
.footer-nav a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
  padding: 6px 10px;
  display: inline-block;
  border-radius: 4px;
}
.footer-nav a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ══════════════════════════════════════════════════
   WP CORE
══════════════════════════════════════════════════ */
.alignleft{float:left;margin:0 20px 10px 0;max-width:50%}
.alignright{float:right;margin:0 0 10px 20px;max-width:50%}
.aligncenter{margin:0 auto 10px;display:block}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:12px;color:var(--muted);margin-top:4px;text-align:center}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
.gallery-item img{border-radius:4px;width:100%;height:auto}

/* ══════════════════════════════════════════════════
   GRAYSCALE IMAGE EFFECT — site-wide
   B&W by default, full colour on hover/focus
   Applied via containers so we never touch .art-body
   (article content stays full colour always)
══════════════════════════════════════════════════ */

/* Featured slider images */
.np-slide img{
  filter:grayscale(100%);
  transition:filter .35s ease;
}
.np-slide:hover img,
.np-slide.active:hover img{
  filter:grayscale(0%);
}

/* Trending thumbs — homepage */
.trending-thumb img,
.s-t-thumb img{
  filter:grayscale(100%);
  transition:filter .35s ease;
}
.trending-item:hover .trending-thumb img,
.side-trending-item:hover .s-t-thumb img{
  filter:grayscale(0%);
}

/* Category block images */
.cat-big-thumb img,
.cat-small-thumb img{
  filter:grayscale(100%);
  transition:filter .35s ease;
}
.cat-big-card:hover .cat-big-thumb img,
.cat-small-item:hover .cat-small-thumb img{
  filter:grayscale(0%);
}

/* Latest news cards */
.card-thumb img{
  filter:grayscale(100%);
  transition:filter .35s ease;
}
.article-card:hover .card-thumb img{
  filter:grayscale(0%);
}

/* Related posts */
.related-thumb img{
  filter:grayscale(100%);
  transition:filter .35s ease;
}
.related-card:hover .related-thumb img{
  filter:grayscale(0%);
}

/* Single article featured image */
.feat-img img{
  filter:grayscale(100%);
  transition:filter .4s ease;
}
.feat-img:hover img{
  filter:grayscale(0%);
}

/* Archive / category / search page cards
   (use .archive-grid .article-card — same card markup) */
.archive-grid .card-thumb img{
  filter:grayscale(100%);
  transition:filter .35s ease;
}
.archive-grid .article-card:hover .card-thumb img{
  filter:grayscale(0%);
}

/* Mobile — keep grayscale, no hover needed
   (touch devices don't have hover states anyway,
   images stay greyscale as per brief) */
@media(max-width:600px){
  .np-slide img,
  .trending-thumb img,
  .s-t-thumb img,
  .cat-big-thumb img,
  .cat-small-thumb img,
  .card-thumb img,
  .related-thumb img,
  .feat-img img{
    filter:grayscale(100%);
    /* No transition on mobile — saves paint cost */
    transition:none;
  }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════════════════ */
@media(max-width:1024px){
  .cat-blocks-grid{grid-template-columns:repeat(2,1fr)}
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — 900px (tablet)
══════════════════════════════════════════════════ */
@media(max-width:900px){
  .top-row{grid-template-columns:1fr}
  .trending-box{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  .page-wrap{grid-template-columns:1fr;padding:16px}
  .sidebar{display:none}
  .sidebar-mobile{display:flex!important;flex-direction:column;gap:20px}

  /* Showcase — 3 columns on tablet */
  .showcase-grid{grid-template-columns:repeat(3,1fr)}
  /* New Grid — 2 columns on tablet */
  .new-grid{grid-template-columns:repeat(2,1fr)}
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — 768px (mobile header trigger)
══════════════════════════════════════════════════ */
@media(max-width:768px){
  .primary-nav{display:none}
  .menu-toggle{display:flex}
  .footer-top{grid-template-columns:1fr;gap:20px}
  .admin-header-link{display:none}
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — 600px (mobile)
══════════════════════════════════════════════════ */
@media(max-width:600px){
  /* Header — exact layout: [Logo] [Search] [Menu] */
  .site-header{padding:0 12px}
  .header-inner{
    height:60px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .site-logo-wrap{
    display:flex;
    align-items:center;
    justify-content:flex-start;
  }
  .site-logo-wrap a{font-size:19px}
  .header-right{
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
  }
  .search-toggle{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .menu-toggle{
    width:40px;
    height:40px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }

  /* Article page */
  .page-wrap{padding:12px 12px}
  .art-title{font-size:20px}
  .art-meta{gap:6px;font-size:12px}
  .meta-share{display:none}
  .feat-img{margin:12px 0;border-radius:6px}

  /* Share bar on mobile */
  .share-btns{gap:8px}
  .s-icon-btn{width:40px;height:40px}
  .share-btn-label{font-size:11px}

  /* Related */
  .related-thumb{width:88px}
  .related-title{font-size:12px}

  /* Article grid */
  .articles-grid{grid-template-columns:1fr}
  .archive-grid{grid-template-columns:1fr}

  /* Category blocks */
  .cat-blocks-grid{grid-template-columns:1fr}

  /* Trending on mobile — single column */
  .trending-box{grid-template-columns:1fr}
  .trending-num{font-size:18px;width:24px}
  .trending-thumb{width:60px;height:46px}

  /* Showcase on mobile — horizontal scrollable cards */
  .showcase-grid{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:8px;
    padding:4px 0 12px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .showcase-grid::-webkit-scrollbar{
    display:none;
  }
  .showcase-card{
    flex:0 0 auto;
    min-height:auto;
    height:38px;
    padding:0 16px;
    font-size:12px;
    border-radius:4px;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  /* New Grid on mobile — 1 column */
  .new-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  /* Slider mobile fixes */
  .featured-slider{aspect-ratio:4/3;border-radius:8px}
  .slide-body{padding:12px 10px 10px}
  .slide-title{font-size:clamp(13px,4vw,17px)}
  .slide-arrows{padding:0 4px}
  .slide-arrow{width:26px;height:26px}

  /* Footer mobile */
  .footer-bottom-redesigned{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:16px;
  }
  .footer-bottom-left{
    text-align:center;
  }
  .footer-nav ul{
    justify-content:center;
    gap:4px 8px;
  }

  /* Breadcrumb */
  .breadcrumb{padding:6px 12px}
  .breadcrumb-inner{font-size:12px}
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — 360px (small phones)
══════════════════════════════════════════════════ */
@media(max-width:360px){
  .site-logo-wrap a{font-size:17px}
  .breaking-label{font-size:10px;padding:0 8px}
  .ticker-item{font-size:12px;padding:0 16px}
  .main-wrap{padding:12px 10px}
  .art-title{font-size:18px}
  .showcase-card{width:100px}
  .showcase-card-name{font-size:11px}
}

/* ══════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}



/* Comments section mobile fixes to prevent horizontal overflow */
#comments { max-width: 100%; overflow: hidden; margin-top: 28px; }
.comment-respond { max-width: 100%; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-top: 24px; box-sizing: border-box; }
.comment-form { display: flex; flex-direction: column; gap: 12px; max-width: 100%; box-sizing: border-box; }
.comment-form p { margin: 0; display: flex; flex-direction: column; gap: 4px; max-width: 100%; box-sizing: border-box; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-sizing: border-box;
  font-family: var(--font-ui);
}
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form .submit { align-self: flex-start; background: var(--accent); color: #fff; border: none; padding: 10px 20px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
.comment-form .submit:hover { background: #374151; }
.comment-list { list-style: none; padding: 0; margin: 0; max-width: 100%; overflow: hidden; }
.comment-list .children { list-style: none; padding-left: 16px; max-width: 100%; }
.comment-body { margin-bottom: 16px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word; }
.art-body * { box-sizing: border-box; }

/* You May Also Like section */
.you-may-like-section {
  margin-top: 40px;
  margin-bottom: 28px;
}
.you-may-like-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .you-may-like-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .you-may-like-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Homepage Advertisement Block */
.homepage-ad-wrap {
  margin: 10px auto 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
}
.ad-code-container {
  max-width: 100%;
  overflow: hidden;
  display: inline-block;
}
.ad-image-container {
  max-width: 100%;
}
.homepage-ad-banner {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* Ad Placements Styling */
.ad-slot-wrap {
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
}
.ad-banner {
  max-width: 100%;
}
.ad-banner img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.ad-mobile-only {
  display: none !important;
}
@media (max-width: 600px) {
  .ad-desktop-tablet {
    display: none !important;
  }
  .ad-mobile-only {
    display: block !important;
  }
}

/* Mobile Logo display logic */
.mobile-logo-img {
  display: none;
}
@media (max-width: 600px) {
  .site-logo-wrap a.has-mobile-logo .custom-logo {
    display: none !important;
  }
  .site-logo-wrap a.has-mobile-logo .mobile-logo-img {
    display: block !important;
    max-height: 40px;
    width: auto;
  }
}

/* Breadcrumbs nowrap scrollable and compact styling */
.breadcrumb {
  padding: 5px 16px !important;
  overflow: hidden;
}
.breadcrumb-inner {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none;
}
.breadcrumb-inner::-webkit-scrollbar {
  display: none;
}
.breadcrumb-cur {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sticky Sidebar on Desktop */
@media (min-width: 901px) {
  .sidebar {
    position: sticky;
    top: 20px;
    align-self: start;
  }
}

/* Breaking News Category Badge styling */
.art-cat-badge.is-breaking {
  background: var(--accent) !important;
  color: #fff !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
}

/* ── ACCESSIBILITY & FOCUS OUTLINES ──────────────── */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Specific white outlines for dark header/footer elements */
.site-header a:focus,
.site-header button:focus,
.site-footer a:focus,
.site-footer button:focus,
.mobile-nav a:focus,
.mobile-nav button:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Hide outline for mouse users, show only for keyboard focus */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}