/* ============================================================
   Footer spacing — Oct 2026, Tyler's review round 3:
   "footer margins are quite low and make it feel very cramped".
   Overrides the footer rules in style.css. Enqueued late from
   footer.php so it loads on every template. Also carries the
   site-wide go-live additions (form status line, blog layout).
   ============================================================ */
.site-footer { font-size: 14px; line-height: 1.8; }

/* More air around and between the columns */
.site-footer .footer-main {
  padding: 80px 20px 64px;
  grid-template-columns: 1.35fr 1.1fr 1fr 0.9fr 1fr;
  column-gap: 48px;
  row-gap: 44px;
}
.site-footer h3 { margin-bottom: 20px; font-size: 16px; }
.site-footer ul li { margin-bottom: 12px; line-height: 1.5; }
.site-footer ul li a { display: inline-block; }
.site-footer address, .site-footer .foot-hours { line-height: 1.85; }
.site-footer .foot-hours.mt-2 { margin-top: 20px; }
.site-footer .footer-brand .footer-logo { margin-bottom: 20px; }
.site-footer .footer-tagline { max-width: 260px; margin-bottom: 22px; line-height: 1.7; }

/* Payment logos get their own band with a rule above */
.site-footer .footer-pay {
  padding: 26px 20px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer .footer-pay img { margin: 0 6px; }

/* Legal bar */
.site-footer .footer-black { padding: 22px 0 30px; }
.site-footer .footer-black-row { gap: 14px 24px; }

/* Responsive: step down to 3, 2 and 1 columns rather than squashing 5 */
@media (max-width: 1100px) {
  .site-footer .footer-main { grid-template-columns: repeat(3, 1fr); padding: 64px 20px 52px; }
  .site-footer .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .site-footer .footer-main { grid-template-columns: repeat(2, 1fr); column-gap: 32px; row-gap: 36px; padding: 56px 20px 44px; }
}
@media (max-width: 520px) {
  .site-footer .footer-main { grid-template-columns: 1fr; padding: 48px 20px 36px; }
}

/* ---------- Enquiry form status line ---------- */
.quote-form .f-status { font-size: 14px; margin: 0 0 10px; min-height: 0; }
.quote-form .f-status:empty { display: none; }
.quote-form .f-status.ok { color: #157347; font-weight: 500; }
.quote-form .f-status.err { color: #b42318; font-weight: 500; }
.quote-band .quote-form .f-status.ok, .quote-band .quote-form .f-status.err { color: #fff; }
.quote-form button[disabled] { opacity: 0.7; cursor: wait; }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.blog-card .blog-img { display: block; aspect-ratio: 16/10; background: var(--band-alt); }
.blog-card .blog-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card .blog-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.blog-card .blog-date { font-size: 12px; color: var(--muted-text); margin-bottom: 6px; }
.blog-card h2 { font-size: 17px; line-height: 1.35; margin-bottom: 8px; }
.blog-card h2 a { color: var(--heading); }
.blog-card h2 a:hover { color: var(--blue); }
.blog-card p { font-size: 14px; color: var(--text); flex: 1; margin-bottom: 14px; }
.blog-card .card-link { font-size: 14px; font-weight: 500; }
.post-hero { padding: 36px 0 8px; }
.post-hero .post-meta { font-size: 13px; color: var(--muted-text); margin-top: 8px; }
.post-figure { margin: 22px 0 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.post-figure img { width: 100%; max-height: 520px; object-fit: cover; }
.post-body { max-width: 860px; }
.post-body img { height: auto; border-radius: 6px; margin: 18px 0; }
.post-body h2 { margin: 28px 0 10px; font-size: 24px; }
.post-body h3 { margin: 22px 0 8px; font-size: 19px; }
.post-body p, .post-body li { font-size: 15.5px; margin-bottom: 14px; line-height: 1.8; }
.post-body ul, .post-body ol { margin: 4px 0 16px 22px; }
.post-body table { border-collapse: collapse; width: 100%; margin: 12px 0 22px; font-size: 14px; }
.post-body table th, .post-body table td { border: 1px solid var(--line-light); padding: 9px 12px; text-align: left; }
.post-body blockquote { border-left: 4px solid var(--blue); padding: 6px 18px; margin: 18px 0; color: var(--text); background: #f6fafd; }
.post-nav { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line-light); font-size: 14px; }
.post-nav a { font-weight: 500; }
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.pagination .page-numbers { display: inline-block; padding: 7px 14px; border: 1px solid var(--line); border-radius: 3px; font-size: 14px; color: var(--text); }
.pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--blue); border-color: var(--blue); color: #fff; }