/*
Theme Name: Driving Theory Test Guide Blog
Theme URI: https://drivingtheorytestguide.co.uk/blog
Author: Driving Theory Test Guide
Author URI: https://drivingtheorytestguide.co.uk
Description: Custom blog theme that matches the drivingtheorytestguide.co.uk static site (shared header, footer, colours and typography). Built to run WordPress at /blog alongside the hand-built static pages.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dttg
*/

/* ============================================================
   Blog-specific styles. The site's shared design system
   (colours, fonts, header, footer, .wrap, .article, .page-head)
   is loaded separately from the live site stylesheet, so the
   CSS variables below (--blue, --card, --line, etc.) are already
   available here.
   ============================================================ */

/* Post listing grid */
.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px;
  margin:24px 0 40px;
}
.post-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  transition:transform .15s ease, box-shadow .2s ease;
}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.post-card .pc-thumb{display:block;aspect-ratio:16/9;background:var(--bg);overflow:hidden}
.post-card .pc-thumb img{width:100%;height:100%;object-fit:cover}
.post-card .pc-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card .pc-meta{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--blue)}
.post-card h2{font-size:1.2rem;line-height:1.2}
.post-card h2 a:hover{color:var(--blue)}
.post-card .pc-ex{font-size:.95rem;color:var(--muted);flex:1}
.pc-more{font-weight:700;color:var(--blue)}
.pc-more:hover{color:var(--blue-dark)}

/* Single post hero image */
.post-hero{margin:0 0 24px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.post-hero img{width:100%;height:auto}
.article img{border-radius:12px;margin:18px 0}
.article figcaption{font-size:.85rem;color:var(--muted);text-align:center;margin-top:-8px}

/* Pagination */
.blog-pagination{max-width:760px;margin:0 auto 60px;display:flex;justify-content:center}
.blog-pagination .nav-links{display:flex;gap:.5rem;position:static;flex-direction:row;transform:none;background:none;border:0;box-shadow:none;padding:0}
.blog-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 14px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  font-weight:700;color:var(--ink);transition:all .15s ease;
}
.blog-pagination .page-numbers:hover{border-color:var(--blue);color:var(--blue)}
.blog-pagination .page-numbers.current{background:var(--blue);color:#fff;border-color:var(--blue)}

/* 404 / empty states */
.blog-empty{max-width:760px;margin:0 auto;padding:48px 0 80px;text-align:center;color:var(--muted)}
.blog-empty h1{margin-bottom:12px}