/*
Theme Name: CityStream - WarriorPress Edition
Theme URI: https://citystream.local
Author: CityStream
Version: 1.0.0
Description: Replica of CityStream layout - Voices of the City, Latest Articles, Featured Local Videos, Trending Now, Top Contributors. No Firebase, No Login - Ready for WarriorPress plugins.
Text Domain: citystream
*/

:root{
  --navy:#0f172a;
  --blue:#2563eb;
  --light:#f8fafc;
  --border:#e2e8f0;
  --muted:#64748b;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f1f5f9;color:#0f172a;line-height:1.5}
a{color:inherit;text-decoration:none}
.container{max-width:1280px;margin:0 auto;padding:0 24px}
.site-header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:50}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px}
.logo i{width:22px;height:22px;border:1.5px solid #fff;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px}
.nav{display:flex;gap:20px;font-size:14px;color:#cbd5e1}
.nav a:hover,.nav a.active{color:#fff}
.btn-primary{background:var(--blue);color:#fff;padding:8px 14px;border-radius:6px;font-size:13px;font-weight:600;border:0;cursor:pointer}
.hero{background:#000;border-radius:12px;overflow:hidden;position:relative;min-height:320px;display:flex;align-items:flex-end}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.hero-content{position:relative;z-index:2;padding:28px;max-width:560px;color:#fff}
.hero h1{font-size:32px;line-height:1.1;margin:0 0 10px;font-weight:800}
.hero p{font-size:13px;color:#e2e8f0;margin:0 0 12px}
.main-grid{display:grid;grid-template-columns:1fr 300px;gap:20px;margin-top:20px}
.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.card-pad{padding:14px}
.section-title{font-size:14px;font-weight:700;margin:0 0 12px}
.article-list{display:flex;flex-direction:column;gap:12px}
.article-item{display:flex;gap:12px}
.article-item img{width:92px;height:64px;object-fit:cover;border-radius:8px;background:#ddd}
.article-item h4{font-size:13px;margin:0 0 4px;line-height:1.3}
.meta{font-size:11px;color:var(--muted)}
.video-card{position:relative}
.video-thumb{position:relative;border-radius:10px;overflow:hidden;background:#000;aspect-ratio:16/9}
.video-thumb img{width:100%;height:100%;object-fit:cover}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:36px;background:var(--blue);border-radius:50%;display:grid;place-items:center;color:#fff}
.duration{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.7);color:#fff;font-size:10px;padding:2px 6px;border-radius:4px}
.sidebar{display:flex;flex-direction:column;gap:20px}
.trending-item,.contrib-item{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #f1f5f9;font-size:13px}
.trending-item img,.contrib-item img{width:32px;height:32px;border-radius:50%;object-fit:cover;background:#ddd}
.trending-item:last-child,.contrib-item:last-child{border:0}
.small-time{margin-left:auto;font-size:11px;color:var(--muted)}
.view-more{font-size:12px;color:var(--blue);font-weight:600;display:block;text-align:center;padding:8px}
.single-grid{display:grid;grid-template-columns:1fr 320px;gap:24px;margin-top:24px}
@media(max-width:900px){.main-grid,.content-grid,.single-grid{grid-template-columns:1fr}.nav{display:none}}