/*
Theme Name: NewsPortal Clone
Theme URI: https://example.com/newsportal-clone
Author: ChatGPT
Author URI: https://example.com
Description: A clean, lightweight news/magazine theme inspired by popular news demos. Built from scratch to mimic layout/UX without copying proprietary code. Includes breaking news ticker, hero grid, and sidebars.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: newsportal-clone
Tags: news, magazine, blog, two-columns, right-sidebar, custom-colors, custom-logo, custom-menu
*/

/* Basic reset */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;background:#f7f7f8;color:#1f2937;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{width:100%;max-width:1140px;margin:0 auto;padding:0 16px}

/* Top bar */
.topbar{background:#111827;color:#e5e7eb;font-size:12px}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.social a{margin-left:10px;opacity:.9}
.badge-live{display:inline-block;background:#e53935;color:#fff;font-weight:600;font-size:11px;padding:2px 8px;border-radius:999px}

/* Header */
.site-header{background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:30}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.site-title{font-weight:800;font-size:28px;letter-spacing:.2px}
.nav{display:flex;gap:18px;font-weight:600}
.nav a{padding:10px 6px;border-radius:6px}
.nav a:hover{background:#f3f4f6}

/* Breaking ticker */
.ticker{background:#0f172a;color:#fff}
.ticker-inner{display:flex;gap:16px;align-items:center;padding:8px 0;overflow:hidden}
.ticker-title{background:#e53935;padding:4px 10px;border-radius:4px;font-weight:700}
.ticker-list{display:flex;gap:32px;white-space:nowrap;animation:ticker 30s linear infinite}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Layout */
.layout{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:16px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card .p{padding:12px}
.card h3{margin:10px 0 6px;font-size:18px;line-height:1.3}
.meta{font-size:12px;color:#6b7280}

/* Hero grid */
.hero{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin:16px 0}
.hero .big img{height:340px;object-fit:cover}
.hero .mini{display:grid;grid-template-columns:1fr;gap:12px}
.hero .mini img{height:100px;object-fit:cover}

/* Sidebar */
.widget{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;margin-bottom:16px}
.widget-title{font-weight:700;border-bottom:1px solid #e5e7eb;padding-bottom:6px;margin-bottom:10px}

/* Buttons/labels */
.label{display:inline-block;background:#eef2ff;color:#3730a3;padding:2px 8px;border-radius:999px;font-size:12px}

/* Footer */
.site-footer{margin-top:24px;background:#111827;color:#9ca3af}
.site-footer .inner{padding:24px 0}
.footer-bottom{border-top:1px solid #374151;padding:12px 0;font-size:13px;text-align:center}

@media (max-width:960px){
  .layout{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr}
  .nav{display:none}
  .mobile-nav{display:block;padding:10px 0}
}