/* Markets News Today — Professional News Site CSS */
:root {
  --bg: #ffffff;
  --bg2: #f7f8fa;
  --border: #e8eaed;
  --text: #1a1a2e;
  --text2: #5f6368;
  --accent: #d32f2f;
  --accent2: #b71c1c;
  --accent-light: #fff5f5;
  --cat-bg: #fff3e0;
  --cat-text: #e65100;
  --radius: 8px;
  --shadow: 0 2px 12px rgba(0,0,0,.08);
  --font: 'Georgia', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max: 1200px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.6}
img{max-width:100%;height:auto;display:block;object-fit:cover}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent2)}

/* ── Container ── */
.container{width:94%;max-width:var(--max);margin:0 auto}

/* ── Header ── */
.site-header{
  background:#1a1a2e;
  padding:0;
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 12px rgba(0,0,0,.2);
}
.header-inner{
  display:flex;align-items:center;
  justify-content:space-between;
  padding:14px 0;gap:20px;
}
.logo{
  display:flex;align-items:center;gap:8px;
  color:#fff;font-weight:800;font-size:1.3rem;
  white-space:nowrap;
}
.logo:hover{color:#ffcdd2;text-decoration:none}
.logo-icon{font-size:1.5rem}
.logo-text{letter-spacing:-.5px}
.main-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.main-nav a{
  color:#cfd8dc;font-size:.85rem;font-weight:500;
  padding:6px 12px;border-radius:4px;
  transition:background .2s,color .2s;
}
.main-nav a:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}

/* ── Category Badge ── */
.category{
  background:var(--accent);color:#fff;
  font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.8px;padding:3px 10px;border-radius:20px;
  display:inline-block;
}
.category:hover{background:var(--accent2);text-decoration:none}

/* ── Hero Post ── */
.hero-post{background:var(--bg2);padding:32px 0;margin-bottom:40px;border-bottom:1px solid var(--border)}
.hero-link{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.hero-link:hover{text-decoration:none}
.hero-img-wrap{border-radius:12px;overflow:hidden;aspect-ratio:16/9}
.hero-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.hero-link:hover .hero-img-wrap img{transform:scale(1.03)}
.hero-content{display:flex;flex-direction:column;gap:14px}
.hero-content h1{font-family:var(--font);font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.2;color:var(--text)}
.hero-link:hover .hero-content h1{color:var(--accent)}
.hero-content p{font-size:1rem;color:var(--text2);line-height:1.7}
.hero-meta{font-size:.82rem;color:var(--text2)}

/* ── Section Header ── */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.section-header h2{font-size:1.3rem;font-weight:700;color:var(--text)}
.cat-filter{display:flex;flex-wrap:wrap;gap:8px}
.cat-btn{
  padding:5px 14px;border:1.5px solid var(--border);
  border-radius:20px;font-size:.8rem;font-weight:600;color:var(--text2);
  transition:all .2s;
}
.cat-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);text-decoration:none}

/* ── Post Grid ── */
.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px;padding-bottom:48px;
}
.post-card{
  background:var(--bg);border:1px solid var(--border);
  border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .2s,box-shadow .2s;
  display:flex;flex-direction:column;
}
.post-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.card-img-link{display:block;aspect-ratio:16/9;overflow:hidden}
.card-img-link img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.post-card:hover .card-img-link img{transform:scale(1.05)}
.card-body{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
time{font-size:.78rem;color:var(--text2)}
.card-body h3{font-size:1rem;font-family:var(--font);line-height:1.4;flex:1}
.card-body h3 a{color:var(--text)}
.card-body h3 a:hover{color:var(--accent)}
.card-body p{font-size:.86rem;color:var(--text2)}
.read-more{font-size:.82rem;font-weight:700;color:var(--accent);margin-top:auto}
.read-more:hover{color:var(--accent2);text-decoration:none}
.dot{color:var(--text2);font-size:.8rem}

/* ── Category Page ── */
.cat-page-header{padding:32px 0 24px;border-bottom:1px solid var(--border);margin-bottom:32px}
.cat-page-header h1{font-size:2rem;font-weight:800;color:var(--text);margin-bottom:6px}
.cat-page-header p{color:var(--text2)}

/* ── Post Page ── */
.post-page{padding:40px 0 60px;max-width:820px;margin:0 auto}
.post-header{margin-bottom:28px}
.post-header-meta{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.post-header h1{
  font-family:var(--font);
  font-size:clamp(1.8rem,4vw,2.6rem);
  line-height:1.2;color:var(--text);margin-bottom:14px;
}
.post-excerpt{font-size:1.1rem;color:var(--text2);line-height:1.7}
.read-time{font-size:.78rem;color:var(--text2)}
.post-featured-img{
  border-radius:12px;overflow:hidden;
  margin-bottom:36px;aspect-ratio:16/9;
}
.post-featured-img img{width:100%;height:100%;object-fit:cover}

/* ── Article Body ── */
.post-content{font-size:1.05rem;line-height:1.85;color:#2c2c3a}
.post-content h2{
  font-family:var(--font);font-size:1.55rem;
  margin:2.2rem 0 .8rem;color:var(--text);
  border-left:4px solid var(--accent);padding-left:14px;
}
.post-content h3{font-size:1.2rem;margin:1.8rem 0 .6rem;color:var(--text);font-weight:700}
.post-content p{margin-bottom:1.2rem}
.post-content ul,.post-content ol{padding-left:1.6rem;margin-bottom:1.2rem}
.post-content li{margin-bottom:.5rem}
.post-content strong{color:var(--text);font-weight:700}
.post-content a{color:var(--accent);font-weight:500}
.post-footer{margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}
.post-tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{
  background:var(--accent-light);color:var(--accent);
  font-size:.78rem;font-weight:600;padding:4px 12px;
  border-radius:20px;
}
.tag:hover{background:var(--accent);color:#fff;text-decoration:none}

/* ── Footer ── */
.site-footer{
  background:#1a1a2e;color:#90a4ae;
  padding:40px 0 24px;margin-top:60px;
}
.footer-inner{
  display:grid;grid-template-columns:2fr 1fr;
  gap:32px;align-items:start;margin-bottom:24px;
}
.footer-brand .logo-text{color:#fff;font-size:1.1rem;font-weight:800}
.footer-brand p{font-size:.85rem;margin-top:8px;color:#78909c}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{color:#90a4ae;font-size:.88rem}
.footer-links a:hover{color:#fff;text-decoration:none}
.footer-copy{
  text-align:center;font-size:.8rem;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.08);
  color:#546e7a;
}

/* ── Responsive ── */
@media(max-width:768px){
  .hero-link{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .main-nav{display:none}
  .post-grid{grid-template-columns:1fr;gap:16px}
}
@media(max-width:480px){
  .hero-post{padding:20px 0}
  .hero-content h1{font-size:1.5rem}
  .post-page{padding:24px 0 40px}
}