/*
Theme Name: Big Dog Bins Blog
Theme URI: https://bigdogbins.ca/blog/
Author: Cowlick Studios
Author URI: https://www.cowlickstudios.com
Description: Custom lightweight blog theme for Big Dog Bins. Reuses the main static site's design system (Alfa Slab One + Fraunces, Big Dog Red) so /blog matches the homepage exactly.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bigdogbins-blog
*/

/* ==========================================================================
   Blog-specific styles — layered on top of the shared site.css design system.
   Reuses --red / --charcoal / --bg / fonts / .container / .btn / .section etc.
   ========================================================================== */

/* --- Page-title band (blog index, archives) --- */
.page-hero {
  background: var(--charcoal);
  color: #fff;
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}
.page-hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
}
.page-hero p { color: rgba(255,255,255,0.78); font-size: 1.15rem; max-width: 60ch; margin-inline: auto; }

/* --- Post grid (index / archive) --- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  padding: clamp(3rem, 7vw, 5rem) 0;
}
.post-card {
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  border-top: 5px solid var(--red);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.post-card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--kraft); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 1.6rem 1.6rem 1.9rem; display: flex; flex-direction: column; flex: 1; }
.post-card__meta { font-family: var(--font-ui); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--red); font-weight: 700; margin-bottom: 0.6rem; }
.post-card__title { font-family: var(--font-serif); font-weight: 700; font-size: 1.35rem; line-height: 1.2; margin: 0 0 0.6rem; }
.post-card__title a { color: var(--charcoal); }
.post-card__title a:hover { color: var(--red); text-decoration: none; }
.post-card__excerpt { color: var(--stone); margin-bottom: 1.2rem; }
.post-card__more { margin-top: auto; font-family: var(--font-ui); font-weight: 700; color: var(--red); }
.post-card__more:hover { text-decoration: none; }
.post-card__more::after { content: " →"; }

/* --- Single article --- */
.article { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(3rem, 7vw, 5rem); }
.article__head { max-width: 780px; margin: 0 auto clamp(1.5rem, 4vw, 2.5rem); text-align: center; }
.article__meta { font-family: var(--font-ui); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--red); font-weight: 700; margin-bottom: 0.8rem; }
.article__title { font-size: clamp(2rem, 5vw, 3.4rem); }
.article__featured { max-width: 960px; margin: 0 auto clamp(1.8rem, 4vw, 2.6rem); }
.article__featured img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }

/* Article body — readable measure, shared serif font */
.article__body { max-width: 720px; margin: 0 auto; font-size: 1.12rem; }
.article__body > * { margin-bottom: 1.3rem; }
.article__body h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-top: 2.4rem; }
.article__body h3 { font-size: 1.4rem; margin-top: 1.8rem; }
.article__body a { color: var(--red); text-decoration: underline; }
.article__body img { border-radius: var(--radius); height: auto; }
.article__body blockquote {
  border-left: 5px solid var(--red); margin: 1.6rem 0; padding: 0.6rem 0 0.6rem 1.4rem;
  font-size: 1.25rem; color: var(--charcoal); font-style: italic;
}
.article__body ul, .article__body ol { padding-left: 1.4rem; }
.article__body li { margin-bottom: 0.5rem; }
.article__body code { background: var(--kraft); padding: 0.15em 0.4em; border-radius: 5px; font-size: 0.95em; }
.article__footer { max-width: 720px; margin: 2.5rem auto 0; padding-top: 1.6rem; border-top: 1px solid rgba(26,26,26,0.12); }
.article__tags a { display: inline-block; font-family: var(--font-ui); font-size: 0.85rem; background: var(--kraft); color: var(--ink); padding: 0.3rem 0.8rem; border-radius: 50px; margin: 0 0.4rem 0.4rem 0; }
.article__tags a:hover { text-decoration: none; background: var(--red); color: #fff; }
.back-to-blog { display: inline-block; margin-bottom: 1.5rem; font-family: var(--font-ui); font-weight: 700; }
.back-to-blog::before { content: "← "; }

/* --- Pagination --- */
.pagination { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; padding-bottom: clamp(3rem, 7vw, 5rem); }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.8rem; height: 2.8rem; padding: 0 0.8rem; border-radius: 8px;
  font-family: var(--font-ui); font-weight: 700; color: var(--charcoal);
  background: #fff; box-shadow: var(--shadow); text-decoration: none;
}
.pagination .page-numbers.current { background: var(--red); color: #fff; }
.pagination .page-numbers:hover { background: var(--charcoal); color: #fff; }

/* --- Blog CTA band (bottom of single) reuses .success/.quote patterns --- */
.blog-cta { background: var(--red); color: #fff; text-align: center; padding: clamp(2.8rem, 6vw, 4.5rem) 0; }
.blog-cta h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.blog-cta p { color: rgba(255,255,255,0.9); max-width: 46ch; margin: 0 auto 1.6rem; }

/* --- Empty / 404 states --- */
.notice { text-align: center; padding: clamp(3rem, 8vw, 6rem) 0; max-width: 620px; margin-inline: auto; }
.notice h1 { font-size: clamp(2rem, 5vw, 3.2rem); }

@media (max-width: 900px) {
  .post-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .post-grid { grid-template-columns: 1fr; }
}