:root{
  --theme-color: #2b5fd9;
  --text-dark: #1c2333;
  --text-muted: #6b7280;
  --border-color: #edf0f5;
  --bg-soft: #f7f8fb;
}

body{
  font-family: 'Segoe UI', Roboto, -apple-system, sans-serif;
  color: var(--text-dark);
  background: #fff;
}
a{ text-decoration:none; color: inherit; }
a:hover{ color: var(--theme-color); }

/* ---------------- Header ---------------- */
.topbar{ background: var(--text-dark); color:#fff; font-size:.8rem; }
.topbar a{ color:#fff; margin-left:10px; opacity:.8; }
.topbar a:hover{ opacity:1; }

.main-nav{ background:#fff; border-bottom:1px solid var(--border-color); padding:.6rem 0; }
.brand-icon{ color: var(--theme-color); }
.navbar-brand{ font-size:1.3rem; color: var(--text-dark); }
.nav-link{ font-weight:500; color: var(--text-dark) !important; padding:.5rem .9rem !important; }
.nav-link:hover{ color: var(--theme-color) !important; }
.search-form{ gap:0; }
.search-form input{ border-radius: 20px 0 0 20px; }
.search-form button{ border-radius:0 20px 20px 0; background: var(--theme-color); color:#fff; border:1px solid var(--theme-color); }
.site-header.sticky-top{ top:0; z-index: 1030; }

/* ---------------- Weather Hero (replaces image hero) ---------------- */
.weather-hero{
  background: linear-gradient(135deg, #16255c 0%, #23408f 55%, #2b5fd9 100%);
  color:#fff;
  border-radius: 18px;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.weather-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 85% 15%, rgba(255,255,255,.08), transparent 40%);
}
.weather-hero .wh-temp{ font-size: 4.2rem; font-weight:700; line-height:1; }
.weather-hero .wh-condition{ font-size:1.1rem; font-weight:500; }
.weather-hero .wh-location{ font-weight:600; font-size:1.05rem; }
.weather-hero .wh-meta{ font-size:.85rem; color: rgba(255,255,255,.7); }
.wh-metric-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; }
.wh-metric{
  background: rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px 6px;
  text-align:center;
}
.wh-metric i{ opacity:.85; margin-bottom:4px; display:block; }
.wh-metric .val{ font-weight:700; font-size:1.05rem; }
.wh-metric .lbl{ font-size:.65rem; text-transform:uppercase; letter-spacing:.03em; color: rgba(255,255,255,.65); }
@media (max-width: 576px){
  .weather-hero .wh-temp{ font-size:3.2rem; }
  .wh-metric-grid{ grid-template-columns: repeat(4, 1fr); gap:6px;}
}

/* ---------------- News Feed ---------------- */
.section-title{ font-weight:700; margin-bottom: 1.2rem; padding-bottom:.5rem; border-bottom:2px solid var(--border-color); }
.news-item{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--border-color); }
.news-item:last-child{ border-bottom:none; }
.news-item .thumb{ flex:0 0 96px; width:96px; height:96px; border-radius:10px; overflow:hidden; background:var(--bg-soft); }
.news-item .thumb img{ width:100%; height:100%; object-fit:cover; }
.news-item .cat-tag{ font-size:.7rem; font-weight:700; text-transform:uppercase; color: var(--theme-color); letter-spacing:.03em; }
.news-item h3{ font-size:1rem; font-weight:700; margin:.2rem 0; line-height:1.35; }
.news-item .meta{ font-size:.78rem; color: var(--text-muted); }
.news-item .meta i{ margin-right:3px; }

/* ---------------- Sidebar (CSS-only sticky, no JS) ---------------- */
.sidebar{
  position: sticky;
  top: 90px; /* clears sticky header */
  align-self: flex-start;
}
.widget{ background:#fff; border:1px solid var(--border-color); border-radius:14px; padding:16px; margin-bottom:18px; }
.widget-title{ font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--text-muted); display:block; margin-bottom:8px; }
.widget-weather-mini{ background: linear-gradient(135deg, #16255c, #2b5fd9); color:#fff; border:none; }
.widget-weather-mini .widget-title{ color: rgba(255,255,255,.7); }
.stat-list li{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--border-color); }
.stat-list li:last-child{ border-bottom:none; }
.stat-list li span{ font-weight:600; }
.forecast-list li{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--border-color); }
.forecast-list li:last-child{ border-bottom:none; }
.forecast-list .day{ width:38px; font-weight:600; }
.job-cat-list li{ padding:5px 0; border-bottom:1px dashed var(--border-color); }
.job-cat-list li:last-child{ border-bottom:none; }
.job-cat-list a{ color: var(--text-dark); }
.job-cat-list a:hover{ color: var(--theme-color); }
.ad-placeholder{ background: var(--bg-soft); border:1px dashed #cfd6e4; border-radius:10px; padding:40px 0; color:#9aa3b5; font-size:.8rem; }

/* ---------------- Footer ---------------- */
.site-footer{ background: var(--text-dark); color: #fff; }
.site-footer a{ color: rgba(255,255,255,.75); }
.site-footer a:hover{ color:#fff; }

/* ---------------- Article / Page Content ---------------- */
.post-content{ font-size:1.05rem; line-height:1.8; color:#2a2f3d; }
.post-content h2{ font-weight:700; margin-top:1.8rem; }
.post-content h3{ font-weight:700; margin-top:1.4rem; }
.post-content p{ margin-bottom:1.1rem; }
.post-content img{ max-width:100%; height:auto; border-radius:10px; margin:1rem 0; }
.post-content blockquote{ border-left:4px solid var(--theme-color); padding:.4rem 1rem; color:#555; background:var(--bg-soft); border-radius:0 8px 8px 0; }
.post-content ul, .post-content ol{ padding-left:1.4rem; margin-bottom:1.1rem; }
.post-content a{ color: var(--theme-color); text-decoration: underline; }

.ad-slot{ margin: 16px 0; text-align:center; overflow:hidden; }

/* ---------------- Weather Page ---------------- */
.hourly-strip{ display:flex; overflow-x:auto; gap:12px; padding-bottom:8px; }
.hourly-strip .hr-item{ flex:0 0 70px; text-align:center; background:var(--bg-soft); border-radius:10px; padding:10px 6px; }
.daily-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border-color); }
.uv-badge{ display:inline-block; padding:2px 10px; border-radius:20px; font-size:.75rem; font-weight:700; color:#fff; }