/* VivlyLife Rebuild — newscrunch-inspired blue theme */
:root { --blue: #1E3A8A; --blue-dark: #0F2557; --white: #fff; --bg: #f5f7fa; --text: #333; --gray: #777; --border: #e0e0e0; --shadow: 0 2px 12px rgba(0,0,0,.08); --radius: 8px; }
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color:var(--text); background:var(--bg); line-height:1.6; }
a { color:var(--blue); text-decoration:none; }
a:hover { color:var(--blue-dark); }
img { max-width:100%; height:auto; display:block; border-radius:var(--radius); }

/* Header */
.site-header { background:var(--blue-dark); color:var(--white); position:sticky; top:0; z-index:100; box-shadow:var(--shadow); }
.header-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; padding:8px 16px; gap:16px; flex-wrap:wrap; }
.logo img { height:40px; }
.main-nav { flex:1; }
.mainmenu { list-style:none; display:flex; gap:20px; flex-wrap:wrap; }
.mainmenu a { color:var(--white); font-size:14px; font-weight:500; padding:6px 0; }
.mainmenu a:hover, .mainmenu .active a { color:#90b4f0; }
.mainmenu .active a { border-bottom:2px solid #90b4f0; }
.header-ads { display:flex; gap:8px; }
.header-ads img { height:32px; border-radius:4px; }
.nav-toggle { display:none; background:none; border:none; color:var(--white); font-size:24px; cursor:pointer; }

/* Hero slider */
.hero { max-width:1200px; margin:20px auto; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.hero-slider { position:relative; }
.slide { display:none; }
.slide.active { display:block; }
.slide img { width:100%; max-height:500px; object-fit:cover; border-radius:0; }
.slide-caption { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent, rgba(0,0,0,.7)); padding:40px 20px 20px; }
.slide-caption h2 { margin:0; font-size:22px; line-height:1.3; }
.slide-caption a { color:var(--white); }

/* Sections */
.section-title { font-size:22px; font-weight:800; margin:30px 0 16px; color:var(--blue-dark); }
.main-layout { max-width:1200px; margin:0 auto; padding:20px 16px; display:grid; grid-template-columns:1fr 300px; gap:28px; }
.content-area { min-width:0; }

/* Categories */
.cat-grid { display:flex; flex-wrap:wrap; gap:10px; }
.cat-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); }
.cat-card a { display:block; padding:10px 18px; font-weight:600; font-size:14px; color:var(--blue); }
.cat-card:hover { border-color:var(--blue); background:#eef3ff; }

/* Post cards */
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.post-card { background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .2s; }
.post-card:hover { transform:translateY(-3px); }
.card-img img { width:100%; height:180px; object-fit:cover; border-radius:0; }
.card-body { padding:14px; }
.card-title { font-size:15px; font-weight:600; line-height:1.4; margin-bottom:6px; }
.card-meta { font-size:12px; color:var(--gray); }

/* Post list (category page) */
.post-list { display:flex; flex-direction:column; gap:14px; }
.post-card-row { display:flex; flex-direction:row; }
.post-card-row .card-img { flex-shrink:0; width:200px; }
.post-card-row .card-img img { height:130px; }
.post-card-row .card-body { flex:1; }

/* Sidebar */
.sidebar { display:flex; flex-direction:column; gap:16px; }
.widget { background:var(--white); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.widget-title { font-size:16px; font-weight:700; margin-bottom:10px; color:var(--blue-dark); border-bottom:2px solid var(--blue); padding-bottom:6px; }
.widget-ad img { width:100%; border-radius:4px; }
.recent-list { list-style:none; }
.recent-item { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.recent-item img { width:50px; height:40px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.recent-item span { font-size:13px; line-height:1.3; }
.widget-cats ul { list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.widget-cats li a { display:block; padding:4px 10px; background:#eef3ff; border-radius:4px; font-size:13px; }

/* Article */
.single-article { padding-bottom:40px; }
.article-title { font-size:30px; font-weight:800; line-height:1.3; margin-bottom:8px; color:var(--blue-dark); }
.article-meta { font-size:13px; color:var(--gray); margin-bottom:20px; }
.hero-img { margin-bottom:24px; }
.hero-img img { width:100%; max-height:420px; object-fit:cover; }
.ai-body-img { margin-bottom:24px; }
.ai-body-img img { width:100%; max-height:360px; object-fit:cover; border-radius:var(--radius); }
.article-body { font-size:17px; line-height:1.9; }
.article-body p { margin-bottom:18px; }
.article-body h2 { font-size:22px; font-weight:800; margin:32px 0 12px; color:var(--blue-dark); }
.article-body h3 { font-size:19px; font-weight:700; margin:26px 0 10px; }
.article-body figure { margin:22px 0; }
.article-body figure img { width:100%; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin:30px 0; }
.tag { background:#eef3ff; color:var(--blue); padding:4px 10px; border-radius:4px; font-size:12px; }

/* Info page */
.page-title { font-size:28px; font-weight:800; margin-bottom:16px; color:var(--blue-dark); }
.info-content p { margin-bottom:14px; font-size:16px; line-height:1.8; }

/* Footer */
.site-footer { background:var(--blue-dark); color:#ccc; margin-top:40px; }
.footer-inner { max-width:1200px; margin:0 auto; padding:24px 16px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-links { display:flex; gap:16px; flex-wrap:wrap; }
.footer-links a { color:#bbb; font-size:13px; }
.footer-links a:hover { color:var(--white); }
.site-footer p { font-size:12px; color:#888; }

/* Responsive */
@media(max-width:768px) {
  .main-layout { grid-template-columns:1fr; }
  .post-grid { grid-template-columns:repeat(2,1fr); }
  .header-ads { display:none; }
  .mainmenu { display:none; }
  .nav-toggle { display:block; }
  .slide-caption h2 { font-size:16px; }
  .article-title { font-size:22px; }
}
@media(max-width:480px) {
  .post-grid { grid-template-columns:1fr; }
  .post-card-row { flex-direction:column; }
  .post-card-row .card-img { width:100%; }
}