/* ===== LAYOUT FIX - Match Original Site ===== */

/* 1. Color: change blue primary to dark gray matching original */
:root {
  --primary: #333d47 !important;
  --primary-dark: #2a3440 !important;
  --primary-darker: #1e2730 !important;
  --primary-light: #f5f5f5 !important;
  --header-bg: #333d47 !important;
  --bg-body: #f0f0f0 !important;
}

/* 2. Header: hide hamburger on desktop, fix search */
.mobile-menu-toggle,
.hamburger-menu {
  display: none !important;
}
@media (max-width: 768px) {
  .mobile-menu-toggle,
  .hamburger-menu {
    display: flex !important;
  }
}

.site-header {
  background: #333d47 !important;
}

.search-form {
  display: flex !important;
  align-items: center !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  border: none !important;
}
.search-form input {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  padding: 6px 14px !important;
  font-size: 14px !important;
  width: 160px !important;
  outline: none !important;
}
.search-form input::placeholder { color: rgba(255,255,255,0.6) !important; }
.search-form button {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.8) !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
}

/* Login button: outlined style like original */
.btn-login, .header-right .btn, a.btn-login {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  border-radius: 4px !important;
  padding: 5px 16px !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}
.btn-login:hover, .header-right .btn:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: #fff !important;
}

/* 3. Section headings: centered gray, no left border, matching original */
.section-heading, .section-title {
  text-align: center !important;
  color: #333 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  border-left: none !important;
  padding-left: 0 !important;
  margin-bottom: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.section-heading::before, .section-title::before {
  display: none !important;
}
.section-heading svg, .section-title svg {
  width: 20px !important;
  height: 20px !important;
  color: #666 !important;
}

/* 4. Sidebar: fix numbered list - items on ONE line */
.sidebar-card {
  background: #fff !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
.sidebar-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #eee !important;
}

.sidebar-list-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #f5f5f5 !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}
.sidebar-list-item:last-child { border-bottom: none !important; }

.sidebar-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #fff !important;
  flex-shrink: 0 !important;
  background-color: #ccc !important;
}
.sidebar-badge.badge-blue, .sidebar-list-item:nth-child(1) .sidebar-badge { background-color: #ff6b6b !important; }
.sidebar-list-item:nth-child(2) .sidebar-badge { background-color: #ff8c42 !important; }
.sidebar-list-item:nth-child(3) .sidebar-badge { background-color: #ffc107 !important; }

.sidebar-list-link {
  flex: 1 !important;
  font-size: 14px !important;
  color: #333 !important;
  text-decoration: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
  line-height: 1.4 !important;
}
.sidebar-list-link:hover { color: #333d47 !important; }

.sidebar-count {
  font-size: 12px !important;
  color: #999 !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Sidebar tags */
.sidebar-tag {
  display: inline-block !important;
  padding: 4px 12px !important;
  background-color: #f0f0f0 !important;
  color: #555 !important;
  font-size: 13px !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  margin: 0 !important;
}
.sidebar-tag:hover {
  background-color: #333d47 !important;
  color: #fff !important;
}

/* 5. Card category badges */
.card .category-badge,
.card-badge {
  display: inline-block !important;
  background: rgba(0,0,0,0.65) !important;
  color: #fff !important;
  font-size: 12px !important;
  padding: 2px 10px !important;
  border-radius: 3px !important;
}

/* 6. Featured grid images fix */
.featured-grid .card-image img,
.card-image img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
  background: #e0e0e0 !important;
}

/* 7. Article grid: 2-column in main area */
.article-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
}

/* 8. Content layout: main + sidebar side by side */
.content-layout {
  display: flex !important;
  gap: 30px !important;
  align-items: flex-start !important;
}
.content-main {
  flex: 1 !important;
  min-width: 0 !important;
}
.content-sidebar {
  width: 300px !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 80px !important;
}

/* 9. Cards: white bg, rounded, shadow */
.card {
  background: #fff !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}

/* 10. Tag pills in cards */
.card-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 8px !important;
}
.card-tags .tag, .card-tags a {
  display: inline-block !important;
  padding: 2px 8px !important;
  background: #f0f0f0 !important;
  color: #666 !important;
  font-size: 12px !important;
  border-radius: 3px !important;
  text-decoration: none !important;
}

/* 11. Card meta bar */
.card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 13px !important;
  color: #999 !important;
  margin-top: 10px !important;
}
.card-meta svg { width: 14px; height: 14px; }

/* 12. Footer match */
.site-footer {
  background: #333d47 !important;
  color: rgba(255,255,255,0.8) !important;
}
.site-footer a { color: rgba(255,255,255,0.8) !important; }
.site-footer a:hover { color: #fff !important; }

/* 13. Pagination styling */
.pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 30px 0 !important;
}
.pagination a, .pagination span {
  padding: 6px 12px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  text-decoration: none !important;
}
.pagination .active {
  background: #333d47 !important;
  color: #fff !important;
}

/* 14. Hero section */
.hero-section {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 20px !important;
  margin-bottom: 40px !important;
}

/* 15. Editor picks card */
.editor-picks {
  background: #fff !important;
  border-radius: 8px !important;
  padding: 20px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* 16. Link colors: use dark instead of blue */
a { color: #333 !important; }
a:hover { color: #555 !important; }
.sidebar-list-link:hover { color: #000 !important; }

/* Keep header links white */
.site-header a, .site-header .main-nav a { color: #fff !important; }
.site-header .main-nav a.active { border-bottom: 2px solid #fff !important; }

/* Keep footer links */
.site-footer a { color: rgba(255,255,255,0.7) !important; }

/* Card title links */
.card-title a, .card h3 a { color: #1a1a1a !important; }
.card-title a:hover, .card h3 a:hover { color: #333d47 !important; }

/* 17. Breadcrumb links */
.breadcrumbs a { color: #666 !important; }
.breadcrumbs a:hover { color: #333 !important; }

/* 18. Responsive */
@media (max-width: 1024px) {
  .hero-section { grid-template-columns: 1fr !important; }
  .content-layout { flex-direction: column !important; }
  .content-sidebar { width: 100% !important; position: static !important; }
  .article-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .article-grid { grid-template-columns: 1fr !important; }
  .featured-grid { grid-template-columns: 1fr !important; }
  .main-nav { display: none !important; }
}