/*
Theme Name: Actions & Stuff Blog
Theme URI: https://actionsandstuff.org/
Author: actionsandstuff.org
Description: Blog theme that matches the Actions & Stuff main site (shared header, footer, colors and typography). Pulls the main site stylesheet so the blog looks identical.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: actionsandstuff-blog
*/

/* The heavy styling comes from the main site's stylesheet (loaded in
   functions.php). Only blog-specific tweaks live here. */

.blog-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: calc(var(--header-height) + 40px) 24px 80px;
}

.blog-wrap h1.blog-title {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin-bottom: 8px;
}
.blog-intro { color: var(--clr-muted); margin-bottom: 40px; }

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.post-card {
  background: var(--gradient-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  display: flex;
  flex-direction: column;
}
.post-card:hover {
  transform: translateY(-4px);
  border-color: rgba(108, 99, 255, 0.4);
  box-shadow: 0 16px 40px rgba(108, 99, 255, 0.12);
}
.post-card-thumb { width: 100%; height: 180px; object-fit: cover; display: block; }
.post-card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card-date { font-size: 0.78rem; color: var(--clr-primary); font-weight: 600; }
.post-card-body h2 { font-size: 1.1rem; line-height: 1.35; }
.post-card-body h2 a { color: var(--clr-text); }
.post-card-body h2 a:hover { color: var(--clr-primary); }
.post-card-excerpt { color: var(--clr-muted); font-size: 0.9rem; }
.post-card .learn-more { margin-top: auto; font-weight: 600; }

/* Single post */
.single-post { max-width: 800px; margin: 0 auto; }
.single-post .post-meta { color: var(--clr-muted); font-size: 0.85rem; margin-bottom: 20px; }
.single-post .post-hero {
  width: 100%; max-height: 420px; object-fit: cover;
  border-radius: var(--radius-card); margin-bottom: 28px;
}
.single-post .post-content { color: var(--clr-text); line-height: 1.8; }
.single-post .post-content p { margin-bottom: 18px; color: var(--clr-muted); }
.single-post .post-content h2,
.single-post .post-content h3 { margin: 28px 0 12px; }
.single-post .post-content img { border-radius: 12px; margin: 16px 0; }
.single-post .post-content a { color: var(--clr-primary); }

.blog-pagination { margin-top: 40px; display: flex; gap: 12px; justify-content: center; }
.blog-pagination a, .blog-pagination span {
  padding: 10px 16px; border: 1px solid var(--clr-border);
  border-radius: var(--radius-btn); color: var(--clr-text);
}
.blog-pagination .current { background: var(--clr-primary); border-color: var(--clr-primary); color: #fff; }

@media (max-width: 1024px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .post-grid { grid-template-columns: 1fr; } }