/* =========================================================================
   Blog Architecture — Module: Blog Governance
   Reusable post-template styling only. Colour tokens below are mapped to
   the locked design-lock.json brand palette (--bc-* in component-library.css)
   so the blog matches the rest of the site. Linked from the blog hub and
   all post pages.
   ========================================================================= */

.blog-skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:999;
}
.blog-skip-link:focus{
  left:1rem;
  top:1rem;
  background:#fff;
  color:#7A4626;
  padding:.5rem 1rem;
  border-radius:4px;
  box-shadow:0 0 0 2px #7A4626;
}

.blog-post{
  --color-primary:        #7A4626;
  --color-primary-dark:   #55301A;
  --color-accent:         #A85F1E;
  --color-accent-dark:    #8F4F17;
  --color-accent-soft:    #F1E7D4;
  --color-bg-alt:         #F1E7D4;
  --color-surface:        #FFFFFF;
  --color-line:           #E1D3B8;
  --color-line-strong:    #C9B58F;
  --color-text:           #2A2117;
  --color-text-soft:      #5B4E3F;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Breadcrumbs ---- */
.blog-breadcrumbs{
  font-size: 0.85rem;
  color: var(--color-text-soft);
  margin-bottom: 1rem;
}
.blog-breadcrumbs a{ color: var(--color-primary); text-decoration: none; }
.blog-breadcrumbs a:hover{ color: var(--color-accent); }
.blog-breadcrumbs .sep{ margin: 0 0.4em; color: var(--color-line-strong); }

/* ---- Category tag ---- */
.blog-category{
  display: inline-block;
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}

/* ---- Meta row: author + publish date ---- */
.blog-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  color: var(--color-text-soft);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}
.blog-meta__author{ font-weight: 700; color: var(--color-text); }
.blog-meta__sep{ color: var(--color-line-strong); }

/* ---- Hero image ---- */
.blog-hero-image{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 2rem;
}

/* ---- Table of Contents (mandatory on every post) ---- */
.blog-toc{
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0 2.5rem;
}
.blog-toc__title{
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin: 0 0 0.75rem;
}
.blog-toc ol{
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc-counter;
}
.blog-toc li{
  counter-increment: toc-counter;
  margin-bottom: 0.5rem;
}
.blog-toc li::before{
  content: counter(toc-counter) ".";
  color: var(--color-accent);
  font-weight: 700;
  margin-right: 0.5em;
}
.blog-toc a{
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}
.blog-toc a:hover{ color: var(--color-accent); text-decoration: underline; }

/* Anchor targets: every H2/H3 the TOC points to gets breathing room so the
   sitewide scroll-padding-top (hero.css) lands it cleanly below the header. */
.blog-post h2[id], .blog-post h3[id]{ scroll-margin-top: 20px; }

/* ---- Body typography ---- */
.blog-post-body h2{ font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); font-weight: 800; color: var(--color-text); margin: 2.5rem 0 1rem; }
.blog-post-body h3{ font-size: 1.2rem; font-weight: 700; color: var(--color-text); margin: 1.75rem 0 0.75rem; }
.blog-post-body p{ line-height: 1.7; color: var(--color-text); margin: 0 0 1.25rem; }
.blog-post-body a{ color: var(--color-primary); }
.blog-post-body a:hover{ color: var(--color-accent); }

/* ---- Inline internal-link callout (Blog -> Service/Location) ---- */
.blog-inline-link{
  display: block;
  background: var(--color-accent-soft);
  border-left: 4px solid var(--color-accent);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-weight: 600;
  color: var(--color-accent-dark);
  text-decoration: none;
}
.blog-inline-link:hover{ background: #FBDFCB; }

/* ---- FAQ (reuses the same accordion pattern as service pages) ---- */
.blog-faq{ margin: 2.5rem 0; }
.blog-faq details{
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}
.blog-faq summary{ cursor: pointer; font-weight: 700; color: var(--color-text); list-style: none; }
.blog-faq summary::-webkit-details-marker{ display: none; }
.blog-faq summary::after{ content: "+"; float: right; color: var(--color-accent); font-size: 1.2rem; }
.blog-faq details[open] summary::after{ content: "\2212"; }
.blog-faq p{ margin-top: 0.5rem; color: var(--color-text-soft); }

/* ---- Final CTA band ---- */
.blog-cta{
  background: var(--color-primary-dark);
  color: #F2F7F6;
  border-radius: 14px;
  padding: 2rem;
  text-align: center;
  margin: 3rem 0;
}
.blog-cta h3{ color: #FFFFFF; margin: 0 0 0.5rem; }
.blog-cta p{ color: #C7D9D7; margin: 0 0 1.25rem; }
.blog-cta a{
  display: inline-block;
  background: var(--color-accent);
  color: #FFFFFF;
  font-weight: 700;
  padding: 0.85em 1.7em;
  border-radius: 8px;
  text-decoration: none;
}
.blog-cta a:hover{ background: var(--color-accent-dark); }

/* ---- Related Articles ---- */
.blog-related{ margin: 3rem 0; }
.blog-related__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.blog-related__card{
  display: block;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  overflow: hidden;
}
.blog-related__card img{ width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.blog-related__card-body{ padding: 1rem; }
.blog-related__card-body h4{ font-size: 1rem; color: var(--color-text); margin: 0; }

@media (max-width: 760px){
  .blog-related__grid{ grid-template-columns: 1fr; }
}