/*
Theme Name: OmoBetter
Theme URI: https://www.seek.ng
Author: Your Name
Description: Fast, mobile-first grid theme with AMP compatibility.
Version: 1.0
Text Domain: omobetter
*/

/* Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  background: #f6f8fb;
  color: #1f2937;
  line-height: 1.6;
}

/* Header */
.site-header {
  background: #0b3c84;
  color: #fff;
  padding: 18px 14px;
}
.site-header a { color: #fff; text-decoration: none; }
.site-title { font-size: 22px; margin: 0; }
.site-tagline { margin: 4px 0 0; font-size: 14px; opacity: .9; }

/* Layout */
.container { width: 95%; max-width: 1200px; margin: 18px auto; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.post-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(3, 27, 78, 0.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(3, 27, 78, 0.1);
}
.post-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #e5e7eb;
}
.post-body { padding: 14px; }
.post-title { margin: 0 0 6px; font-size: 18px; line-height: 1.35; }
.post-title a { color: #0b3c84; text-decoration: none; }
.post-title a:hover { text-decoration: underline; }
.post-meta {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 10px;
}
.post-excerpt { margin: 0 0 10px; color: #374151; }
.read-more {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 10px;
  background: #0b3c84;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

/* Separator line between posts (visible within card bottom) */
.post-sep {
  height: 2px;
  background: linear-gradient(90deg, #e5e7eb, #c7d2fe, #e5e7eb);
  margin-top: 12px;
}

/* Single */
.single-wrap {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(3, 27, 78, 0.06);
  overflow: hidden;
}
.single-header { padding: 16px 16px 0; }
.single-title { margin: 0 0 6px; font-size: 26px; line-height: 1.25; color: #0b3c84; }
.single-meta { color: #6b7280; font-size: 13px; margin-bottom: 12px; padding: 0 16px; }
.single-content { padding: 0 16px 16px; }
.single-content img { max-width: 100%; height: auto; }

/* Share buttons */
.share {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid #e5e7eb;
}
.share a {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}
.share .facebook { background: #1877f2; }
.share .twitter { background: #1da1f2; }
.share .quora { background: #b92b27; }
.share .reddit { background: #ff4500; }
.share .linkedin { background: #0a66c2; }
.share .whatsapp { background: #25d366; }
.share .telegram { background: #0088cc; }

/* Footer */
.site-footer {
  text-align: center;
  padding: 20px 10px;
  color: #6b7280;
}

/* Utilities */
.hidden { display: none !important; }

/* Mobile-first: already optimized. Minor larger-screen tweaks */
@media (min-width: 1280px) {
  .post-title { font-size: 20px; }
  .single-title { font-size: 30px; }
}