/* blog-pages.css — accessibility / motion / print gap-filler for the SmartMowBot
 * blog family (blog.html · category/*.html · author/*.html · tag/*.html).
 *
 * ⭐ What this file deliberately does NOT do: it does not restate layout or colour
 * rules that the blog family pages already set in their own in-page <style> blocks.
 * Those blocks come after this external stylesheet in the cascade, so anything
 * duplicated here would load and then lose. Every rule below covers something that
 * is currently defined nowhere else on the site:
 *   · :focus-visible      — keyboard users otherwise get no visible focus ring
 *   · prefers-reduced-motion — blog-card.css animates transform on hover
 *   · @media print        — B2B readers print articles for meetings
 *   · .empty-state__hint  — secondary line for "no articles yet" states
 *
 * Palette is the site's existing tokens only:
 *   #16A34A turf · #15803D deep green · #1F2937 ink · #E2E5DE line
 *   #F5F7F4 wash · #6B7280 muted
 */

/* ── 1. Keyboard reachability: visible focus ring ─────────────────────────
 * Never outline:none — that deletes an affordance instead of designing one.
 * :focus-visible only, so mouse clicks don't draw a ring. */
.blog-card a:focus-visible,
.blog-card-tag:focus-visible,
.blog-card-read-more:focus-visible,
.pg-btn:focus-visible,
.cat-card a:focus-visible,
.au-pcard a:focus-visible,
.blog-sidebar a:focus-visible,
.article-sidebar a:focus-visible{
  outline:3px solid #16A34A;outline-offset:2px;border-radius:4px
}
/* On the dark hero band the green ring is too low-contrast — switch to white. */
.blog-hero a:focus-visible,
.post-hero a:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* Skip link (screen reader / keyboard users), hidden until focused */
.skip-link,
.skip-to-content{position:absolute;left:-9999px;top:0}
.skip-link:focus,
.skip-to-content:focus{left:8px;top:8px;z-index:9999;background:#16A34A;color:#fff;
  padding:10px 16px;border-radius:6px;text-decoration:none}

/* ── 2. prefers-reduced-motion ────────────────────────────────────────────
 * blog-card.css uses transition:transform + :hover{translateY(-4px)}. Vestibular-
 * sensitive users should not get the displacement — but don't delete the hover
 * feedback entirely; swap the motion for a border colour change so no information
 * is lost. */
@media(prefers-reduced-motion:reduce){
  .blog-card,.blog-card:hover,
  .cat-card,.cat-card:hover,
  .au-pcard,.au-pcard:hover,
  .related-posts-card,.related-posts-card:hover{transition:none;transform:none}
  .blog-card:hover{box-shadow:0 10px 30px rgba(31,41,55,.07);border-color:#16A34A}
  .related-posts-card:hover>img{transform:none}
  .blog-card-read-more:hover{gap:.4rem}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important}
}

/* ── 3. Print ─────────────────────────────────────────────────────────────
 * Drop nav / footer / sidebar / conversion widgets, expand link targets. */
@media print{
  .dm-menu,.dm-nav,#dynamic-menu-container,
  #topbar-container,.topbar,
  footer,#footer-container,
  .whatsapp-widget,#whatsapp-widget-container,
  .blog-sidebar,.article-sidebar,
  #rightbar-contactform-container,#rightbar-popularposts-container,
  .post-cta,.cta-banner,.sidebar-cta,.pg-btn{display:none !important}
  body{background:#fff !important;color:#1F2937 !important}
  .article-content,.post-content{max-width:none !important;width:100% !important}
  .article-content a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#6B7280}
  .article-content img{max-width:100% !important;page-break-inside:avoid}
  h1,h2,h3{page-break-after:avoid}
  blockquote,table,figure{page-break-inside:avoid}
}